surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- caaloghi, categorie

Browse Source
This commit is contained in:
Surya Paolo
2024-05-08 16:07:42 +02:00
parent 84e7f6e9f4
commit 58f53f8c52
20 changed files with 704 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/CCatalogoCard/CCatalogoCard.scss
View File

@@ -10,35 +10,6 @@
place-content: center;
}
.prod_price {
font-size: 1.1rem;
font-style: bold;
@media (max-width: 718px) {
font-size: 1rem;
}
}
.prod_sale_price {
font-size: 1.10rem;
font-style: bold;
@media (max-width: 718px) {
font-size: 1.05rem;
}
}
.prod_off_price {
font-size: 1rem;
@media (max-width: 718px) {
font-size: 0.85rem;
}
color: gray;
text-decoration: line-through;
padding-left: 5px;
}
.prod_disp {
font-size: 1.2rem;
@@ -136,18 +107,6 @@
height: 70px;
}
.image-container {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
@media (max-width: 718px) {
width: 200px;
height: 200px;
}
}
.book-image-fixed{
max-width: 300px;
max-height: 600px;
@@ -168,12 +127,6 @@
}
.book-card {
width: 300px;
background-color: #f8f8f8;
}
.book-card {
width: 300px;
background-color: #f8f8f8;
}
@@ -198,19 +151,32 @@
padding: 20px;
}
.book-title {
margin: 8px;
font-family: 'Poppins,sans-serif';
font-size: 1.15rem;
line-height: 20px;
font-weight: bold;
color: #333;
display: block;
text-align: center;
text-shadow: 1px 1px 1px #555;
}
.book-title[data-col=c1] {
font-size: 1.15rem;
line-height: 20px;
}
.book-title[data-col=c2] {
font-size: 1rem;
line-height: 19px;
}
.book-author {
font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
color: grey; /* Colore scuro per garantire una buona leggibilità */
}
.author{
color: darkblue; /* Colore scuro per garantire una buona leggibilità */
text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
@@ -219,6 +185,30 @@
font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
}
.author[data-col=c1]{
font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
}
.author[data-col=c2]{
font-size: 1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
}
.book-category {
font-size: 1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
color: grey; /* Colore scuro per garantire una buona leggibilità */
}
.category{
font-size: 1.0em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
color: green; /* Colore scuro per garantire una buona leggibilità */
text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
border-radius: 2px; /* Bordi arrotondati per un aspetto più soft-edged */
display: inline-block; /* Tratta il blocco come elementi inline-block per adattarlo al contenuto */
font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
box-shadow: 0 0 5px gray;
}
.book-description {
font-size: 0.85rem;
color: #777;
@@ -226,12 +216,23 @@
.block-variazione {
border: 1px solid gray;
margin: auto;
// effetto 3d
box-shadow: 0 0 5px gray;
border-radius: 5px;
padding: 2px;
margin: 2px;
padding: 4px;
cursor: pointer;
.q-badge {
font-size: 1rem;
padding: 4px 6px;
}
}
.colfix_prodotti_1 {
width: 350px;
}
.colfix_prodotti_2 {
width: 175px;
}
.block-variazione-selected {
@@ -279,4 +280,23 @@
@media (max-width: 718px) {
margin-left: 5px;
}
}
}
.book-3d:hover img {
transform: translateZ(50px) rotateY(-20deg); /* Applica la trasformazione 3D quando si passa con il mouse sopra */
}
// Contenitore del libro, con effetto 3d, ed animazione 3D
.book-3d {
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
transform-origin: center center;
img {
transform-origin: center center;
transition: transform 0.5s ease-in-out;
}
}

114
src/components/CCatalogoCard/CCatalogoCard.ts
View File

@@ -8,6 +8,7 @@ import { CTitleBanner } from '../CTitleBanner'
import { CCardState } from '../CCardState'
import { CCopyBtn } from '../CCopyBtn'
import { CMyValueDb } from '../CMyValueDb'
import { CPrice } from '../CPrice'
import { func_tools, toolsext } from '@store/Modules/toolsext'
@@ -48,8 +49,13 @@ export default defineComponent({
required: false,
default: false,
},
options: {
type: Object,
required: false,
default: () => { }
}
},
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp },
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
@@ -91,7 +97,7 @@ export default defineComponent({
const openlistorders = ref(false)
const endload = ref(false)
const myproduct = ref(<IProduct>{})
const myproduct = ref(<IProduct | null>{})
const isFullScreen = ref(false)
const imageSrc = ref('URL_DEL_TUO_FILE_IMMAGINE')
@@ -129,10 +135,12 @@ export default defineComponent({
return false
}
const ris = await products.addtoCartBase({ $q, t, id: myproduct.value._id, order: myorder, addqty: add })
updateproduct()
if (ris && ris.myord) {
if (myproduct.value) {
const ris = await products.addtoCartBase({ $q, t, id: myproduct.value._id, order: myorder, addqty: add })
updateproduct()
if (ris && ris.myord) {
}
}
}
@@ -148,6 +156,9 @@ export default defineComponent({
function getSingleStorehouse() {
try {
if (!myproduct.value)
return ''
const mystore = myproduct.value.storehouses[0]
if (mystore)
return mystore.name + ' (' + mystore.city + ')'
@@ -183,28 +194,30 @@ export default defineComponent({
}
function updateproduct() {
async function updateproduct() {
myproduct.value = products.getProductById(props.id)
myproduct.value = null;
myproduct.value = await products.getProductById(props.id)
// products.updateQuantityAvailable(myproduct.value._id)
}
async function ricarica() {
endload.value = false
const prod = await products.loadProductById(myproduct.value._id)
if (prod) {
myproduct.value = prod
if (myproduct.value) {
const prod = await products.loadProductById(myproduct.value._id)
if (prod) {
myproduct.value = prod
}
}
load()
endload.value = true
await load()
}
function updateproductmodif() {
async function updateproductmodif() {
try {
myproduct.value = products.getProductById(props.id)
myproduct.value = await products.getProductById(props.id)
updateLabel()
} catch (e) {
@@ -256,9 +269,9 @@ export default defineComponent({
return ''
}
watch(() => props.id, (newval, oldval) => {
watch(() => props.id, async (newval, oldval) => {
// console.log('change code')
load()
await load()
})
watch(() => storeSelected.value, (newval, oldval) => {
@@ -289,12 +302,8 @@ export default defineComponent({
updateTimerLabel()
}
function mounted() {
load()
if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
indvariazSel.value = 0
}
async function mounted() {
await load()
// Start the timer when the component is mounted
startTimer();
@@ -306,15 +315,18 @@ export default defineComponent({
}
function updateTimerLabel() {
if (myproduct.value && myproduct.value.gasordine && myproduct.value.gasordine._id && myproduct.value.gasordine.dataora_chiusura_ordini)
if (myproduct.value && (myproduct.value.gasordine && myproduct.value.gasordine._id && myproduct.value.gasordine.dataora_chiusura_ordini))
timerLabelScadenza.value = tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini)
else
timerLabelScadenza.value = ''
}
function isOrdineChiuso() {
return myproduct.value.gasordine && myproduct.value.gasordine.dataora_chiusura_ordini &&
tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini) === ''
if (myproduct.value) {
return myproduct.value.gasordine && myproduct.value.gasordine.dataora_chiusura_ordini &&
tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini) === ''
} else
return false
}
function startTimer() {
@@ -322,17 +334,18 @@ export default defineComponent({
timerInterval.value = setInterval(() => updateTimerLabel(), 60000);
}
function load() {
async function load() {
indvariazSel.value = -1
initproduct()
updateproduct()
await updateproduct()
labelDataArrivoMerce.value = ''
labelDataRitiro.value = ''
// console.log('Load', myproduct.value.name)
arrordersCart.value = products.getOrdersCartInAttesaByIdProduct(myproduct.value._id)
if (!!myproduct.value) {
arrordersCart.value = products.getOrdersCartInAttesaByIdProduct(myproduct.value._id)
if (myproduct.value.storehouses && myproduct.value.storehouses.length === 1) {
// Se solo 1 presente, metto fisso l'unico negozio !
myorder.idStorehouse = myproduct.value.storehouses[0]._id
@@ -356,6 +369,13 @@ export default defineComponent({
updateLabel()
// console.log('myproduct', myproduct.value, 'arrvariaz', myproduct.value.arrvariazioni, 'compl', props.complete)
if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
// console.log('ENTRATO')
indvariazSel.value = 0
}
// console.log('°°° ENDLOAD °°°')
endload.value = true
}
@@ -366,25 +386,35 @@ export default defineComponent({
function visuListDisponibili() {
openlistorders.value = true
sumval.value = products.getSumQtyOrderProductInOrdersCart(myproduct.value._id)
if (myproduct.value) {
openlistorders.value = true
sumval.value = products.getSumQtyOrderProductInOrdersCart(myproduct.value._id)
listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
return accumulator + item.order.quantity
}, 0))
listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
return accumulator + item.order.quantity
}, 0))
} else
return false
}
function visuListBookable() {
openlistorders.value = true
sumval.value = products.getSumQtyPreOrderInOrdersCart(myproduct.value._id)
if (myproduct.value) {
openlistorders.value = true
sumval.value = products.getSumQtyPreOrderInOrdersCart(myproduct.value._id)
listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
return accumulator + item.order.quantitypreordered
}, 0))
listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
return accumulator + item.order.quantitypreordered
}, 0))
} else {
return ''
}
}
function isOrdGas(): boolean {
return (myproduct.value && !!myproduct.value.idGasordine && myproduct.value.gasordine! && myproduct.value.gasordine.active)
if (myproduct.value)
return (myproduct.value && !!myproduct.value.idGasordine && myproduct.value.gasordine! && myproduct.value.gasordine.active)
else
return false
}
function getpercqtaraggiunta(): number {
@@ -436,8 +466,10 @@ export default defineComponent({
function setvariazioneSelected(indvariaz: number) {
if (indvariazSel.value === indvariaz)
indvariazSel.value = -1
else
else {
indvariazSel.value = -1
indvariazSel.value = indvariaz
}
}
onMounted(mounted)

473
src/components/CCatalogoCard/CCatalogoCard.vue
View File

@@ -1,11 +1,17 @@
<template>
<div class="row items-start q-gutter-sm">
<div
:class="{
'row items-start q-gutter-sm': true,
}"
>
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
<div
v-if="!!myproduct && !!myproduct.productInfo"
:class="{
'my-card-big': complete,
'book-card book-details': !complete,
'my-card-big book-details': complete,
'book-card': !complete,
colfix_prodotti_1: options.quante_col == 'c1',
colfix_prodotti_2: options.quante_col == 'c2',
}"
>
<q-toggle
@@ -18,7 +24,10 @@
>
</q-toggle>
<q-card-section>
<div class="flex" style="place-content: center">
<div
:class="{ 'flex q-pa-sm': true, 'shadow-2': options.in_3d }"
style="place-content: center"
>
<q-img
:src="
myproduct.productInfo.img
@@ -29,6 +38,7 @@
:class="{
'book-image-fixed': complete,
'cursor-pointer': !complete,
'shadow-4': true,
}"
@click="
complete
@@ -36,48 +46,82 @@
: naviga(`/catalogo/` + myproduct._id + '/' + cosa)
"
>
<div
class="absolute transparent"
style="left: 90%; top: 0; transform: translateX(-50%)"
>
<q-btn
color="blue"
class="semi-transparent"
round
icon="search"
@click="toggleFullScreen"
size="md"
/>
</div>
</q-img>
<q-btn
color="blue"
round
icon="search"
class="absolute semi-transparent ingrandisci"
size="md"
@click="toggleFullScreen"
style="left: 55%; top: 5px; transform: translateX(-50%)"
/>
<div class="scheda-book">
<q-card-title class="book-title"
>{{ myproduct.productInfo.name }}
<q-card-title>
<span class="book-title" :data-col="options.quante_col">{{
myproduct.productInfo.name
}}</span>
</q-card-title>
<q-card-subtitle
v-if="myproduct.productInfo.authors"
class="book-author"
:data-col="options.quante_col"
>
di
<span
v-for="author in myproduct.productInfo.authors"
v-for="(author, index) in myproduct.productInfo.authors"
:key="author._id"
>
{{ author.name }} {{ author.surname }}
<span class="author"
>{{ author.name }} {{ author.surname }}</span
>
<span v-if="index > 0">, </span>
</span>
</q-card-subtitle>
<q-card-subtitle
v-if="myproduct.productInfo.catprods && options.show_cat"
class="book-category"
>
<div
v-for="catprod in myproduct.productInfo.catprods"
:key="catprod._id"
>
<q-chip
dense
color="primary"
text-color="white"
icon="category"
>
{{ catprod.name }}
</q-chip>
</div>
</q-card-subtitle>
<q-card-main
v-if="myproduct.productInfo.short_descr"
v-if="
options.show_short_descr && myproduct.productInfo.short_descr
"
class="book-short-descr"
>{{
tools.firstchars(myproduct.productInfo.short_descr, 200, true)
}}</q-card-main
>
<div v-if="myproduct.isbn" class="book-isbn">
ISBN: {{ myproduct.isbn }}
</div>
<div v-if="myproduct.productInfo.numpages" class="book-pages">
<div
v-if="myproduct.productInfo.numpages && complete"
class="book-pages"
>
Pagine: {{ myproduct.productInfo.numpages }}
</div>
<div v-if="myproduct.productInfo.publisher" class="book-pages">
Casa Editrice: {{ myproduct.productInfo.publisher }}
</div>
<div
v-if="myproduct.productInfo.date_publishing"
v-if="myproduct.productInfo.date_publishing && complete"
class="book-data-pub"
>
Data Pubblicazione:
@@ -86,222 +130,185 @@
<q-separator class="q-my-sm"></q-separator>
<div
:class="
`row items-center q-pa-nome block-variazione ` +
(indvariazSel == index ? 'block-variazione-selected' : '')
"
v-for="(variazione, index) of myproduct.arrvariazioni"
:key="index"
@click="setvariazioneSelected(index)"
>
<div class="flex justify-between items-center q-mx-sm">
<q-badge
v-if="variazione.versione > 0"
:color="
shared_consts.VERSIONI_PRODOTTO[variazione.versione].color
"
>{{
shared_consts.VERSIONI_PRODOTTO[variazione.versione].label
}}</q-badge
>
<div v-if="variazione.formato && false">
formato: {{ variazione.formato }}
</div>
<div v-if="variazione.tipologia && false">
tipologia: {{ variazione.tipologia }}
</div>
<div v-if="variazione.edizione && false">
edizione: {{ variazione.edizione }}
</div>
<div v-if="variazione.status && false">
status: {{ variazione.status }}
</div>
<div v-if="variazione.preOrderDate">
preOrderDate: {{ variazione.preOrderDate }}
</div>
</div>
<q-item-section>
<q-item-label>
<span class="prod_sale_price" v-if="!!variazione.sale_price"
>{{
variazione.sale_price
? variazione.sale_price.toFixed(2)
: 0
}}
€</span
>
<span
:class="
variazione.sale_price ? 'prod_off_price' : 'prod_price'
"
v-if="!!variazione.price"
>{{ variazione.price ? variazione.price.toFixed(2) : 0 }} €
</span>
<span v-if="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</q-item-label>
<q-item-label
v-if="
myproduct.scontisticas && myproduct.scontisticas.length > 0
"
>
<div
class="prod_sconti"
v-for="(sconti, index) of myproduct.scontisticas"
:key="index"
>
{{ sconti.description }}
</div>
</q-item-label>
</q-item-section>
<q-item-section side v-if="!!variazione.quantita">
<q-icon
v-if="variazione.quantita > 10"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-check"
/>
<q-icon
v-else-if="
variazione.quantita > 3 && variazione.quantita <= 10
"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-exclamation"
/>
<q-icon
v-else-if="
variazione.quantita > 0 && variazione.quantita <= 3
"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-exclamation"
/>
<q-icon
v-else-if="variazione.quantita === 0"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-times"
/>
</q-item-section>
</div>
<q-slide-transition>
<div v-if="indvariazSel >= 0">
<div
v-if="
indvariazSel >= 0 &&
tools.disponibStr(
myproduct.arrvariazioni[indvariazSel].quantita
)
"
class="row justify-center q-mt-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm"
>{{ $t('ecomm.disponibilita') }}:&nbsp;</span
>
<q-chip
size="md"
dense
text-color="white"
:color="
tools.colordisponib(
myproduct.arrvariazioni[indvariazSel].quantita
)
"
>{{
tools.disponibStr(
myproduct.arrvariazioni[indvariazSel].quantita
)
}}</q-chip
>
</div>
<div
v-if="indvariazSel >= 0"
class="row justify-center vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.price') }}:</span>
<span
class="prod_sale_price text-bold"
v-if="!!myproduct.arrvariazioni[indvariazSel].sale_price"
>{{
myproduct.arrvariazioni[indvariazSel].sale_price
? myproduct.arrvariazioni[
indvariazSel
].sale_price.toFixed(2)
: 0
}}
€</span
>
<span
:class="
myproduct.arrvariazioni[indvariazSel].sale_price
? 'prod_off_price'
: 'prod_price'
"
v-if="!!myproduct.arrvariazioni[indvariazSel].price"
>{{
myproduct.arrvariazioni[indvariazSel].price
? myproduct.arrvariazioni[indvariazSel].price.toFixed(2)
: 0
}}
€
</span>
<span v-if="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</div>
<div
v-if="
indvariazSel >= 0 &&
!!myproduct.arrvariazioni[indvariazSel].formato
"
class="row justify-center q-ma-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.formato') }}:</span>
<div v-if="options.show_price">
<div
:class="{
'row items-center q-pa-nome block-variazione': true,
'block-variazione-selected': indvariazSel == index,
}"
v-for="(variazione, index) of myproduct.arrvariazioni"
:key="index"
@click="setvariazioneSelected(index)"
>
<div class="flex justify-between items-center q-mx-sm">
<q-badge
v-if="myproduct.arrvariazioni[indvariazSel].versione > 0"
class="q-badge--large"
:color="
shared_consts.VERSIONI_PRODOTTO[
myproduct.arrvariazioni[indvariazSel].versione
].color
shared_consts.VERSIONI_PRODOTTO[variazione.versione].color
"
>{{
myproduct.arrvariazioni[indvariazSel].formato
}}</q-badge
>
<q-icon
v-if="variazione.versione > 0"
:name="tools.getIconByVersione(variazione.versione)"
color="white"
></q-icon
>&nbsp;
{{
shared_consts.VERSIONI_PRODOTTO[variazione.versione].label
}}
</q-badge>
<div v-if="variazione.formato && false">
formato: {{ variazione.formato }}
</div>
<div v-if="variazione.tipologia && false">
tipologia: {{ variazione.tipologia }}
</div>
<div v-if="variazione.edizione && false">
edizione: {{ variazione.edizione }}
</div>
<div v-if="variazione.status && false">
status: {{ variazione.status }}
</div>
<div v-if="variazione.preOrderDate">
preOrderDate: {{ variazione.preOrderDate }}
</div>
</div>
<div
v-if="indvariazSel >= 0"
class="row justify-center q-mt-sm"
>
<q-btn
<q-item-section>
<q-item-label>
<CPrice
:sale_price="variazione.sale_price"
:price="variazione.price"
></CPrice>
<span v-if="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</q-item-label>
<q-item-label
v-if="
myproduct.arrvariazioni[indvariazSel].addtocart_link &&
true
myproduct.scontisticas &&
myproduct.scontisticas.length > 0
"
:href="myproduct.arrvariazioni[indvariazSel].addtocart_link"
target="_blank"
color="primary"
icon="fas fa-cart-plus"
no-caps
:label="$t('products.addtocart_ext')"
></q-btn>
<q-btn
v-if="myproduct.productInfo.checkout_link && true"
:href="myproduct.productInfo.checkout_link"
target="_blank"
color="white"
icon="fas fa-shopping-cart"
outline
text-color="black"
no-caps
:label="$t('ecomm.carrello')"
></q-btn>
>
<div
class="prod_sconti"
v-for="(sconti, index) of myproduct.scontisticas"
:key="index"
>
{{ sconti.description }}
</div>
</q-item-label>
</q-item-section>
<q-item-section side v-if="!!variazione.quantita">
<q-icon
v-if="variazione.quantita > 10"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-check"
/>
<q-icon
v-else-if="
variazione.quantita > 3 && variazione.quantita <= 10
"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-exclamation"
/>
<q-icon
v-else-if="
variazione.quantita > 0 && variazione.quantita <= 3
"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-exclamation"
/>
<q-icon
v-else-if="variazione.quantita === 0"
:color="tools.colordisponib(variazione.quantita)"
name="fas fa-times"
/>
</q-item-section>
</div>
<div
v-for="(variazione, index) of myproduct.arrvariazioni"
:key="index"
>
<div v-show="indvariazSel == index">
<div
v-show="
indvariazSel >= 0 &&
tools.disponibStr(variazione.quantita)
"
class="row justify-center q-mt-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm"
>{{ $t('ecomm.disponibilita') }}:&nbsp;</span
>
<q-chip
size="md"
dense
text-color="white"
:color="tools.colordisponib(variazione.quantita)"
>{{ tools.disponibStr(variazione.quantita) }}</q-chip
>
</div>
<div
v-show="indvariazSel >= 0"
class="row justify-center vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.price') }}:</span>
<CPrice
:sale_price="variazione.sale_price"
:price="variazione.price"
bold="true"
></CPrice>
<span v-show="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</div>
<div
v-show="indvariazSel >= 0 && !!variazione.formato"
class="row justify-center q-ma-sm vertical-middle"
style="align-items: center"
>
<span class="q-mr-sm">{{ $t('products.formato') }}:</span>
<q-badge
v-show="variazione.versione > 0"
:color="
shared_consts.VERSIONI_PRODOTTO[variazione.versione]
.color
"
>{{ variazione.formato }}</q-badge
>
</div>
<div class="row justify-center q-mt-sm">
<q-btn
v-if="
indVariazSel >= 0 && variazione.addtocart_link && true
"
:href="variazione.addtocart_link"
target="_blank"
color="primary"
icon="fas fa-cart-plus"
class="q-mr-sm"
no-caps
:label="$t('products.addtocart_ext')"
></q-btn>
<q-btn
v-if="myproduct.productInfo.checkout_link && true"
:href="myproduct.productInfo.checkout_link"
target="_blank"
class="q-ml-sm"
color="white"
icon="fas fa-shopping-cart"
outline
text-color="black"
no-caps
:label="$t('ecomm.carrello')"
></q-btn>
</div>
</div>
</div>
</q-slide-transition>
</div>
</div>
</div>
</q-card-section>
@@ -490,12 +497,14 @@
: myproduct.productInfo.image_link
"
:alt="myproduct.productInfo.name"
:fit="tools.isMobile() ? 'fill' : 'none'"
:fit="tools.isMobile() ? 'fill' : 'contain'"
class="fullscreen-image"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
ref="fullscreenImage"
/>
>
</q-img>
<br />
</div>
<div class="text-center">

103
src/components/CPrice/CPrice.scss Executable file
View File

@@ -0,0 +1,103 @@
.prod_price {
font-size: 1.1rem;
font-style: bold;
@media (max-width: 718px) {
font-size: 1rem;
}
}
.prod_sale_price {
font-size: 1.10rem;
font-style: bold;
@media (max-width: 718px) {
font-size: 1.05rem;
}
}
.prod_off_price {
font-size: 1rem;
@media (max-width: 718px) {
font-size: 0.85rem;
}
color: gray;
text-decoration: line-through;
padding-left: 8px;
}
/* ******** */
.a-price {
text-decoration: none;
position: relative;
line-height: normal
}
.a-price[data-a-strike=true]:after {
border-top: .1rem solid;
position: absolute;
content: "";
right: 0;
top: 50%;
left: 0
}
.a-price .a-price-fraction+.a-price-symbol {
left: .2em
}
.a-price .a-offscreen {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.a-price[data-a-size=mini][data-a-strike=true],.a-price[data-a-size="s"][data-a-strike=true],.a-price[data-a-size="b"][data-a-strike=true] {
display: inline-block;
text-decoration: inherit
}
.a-price[data-a-color=base] {
color: #0F1111
}
.a-price[data-a-color=price] {
color: #B12704
}
.a-price[data-a-color=secondary] {
color: #565959
}
.a-price[data-a-color=tertiary] {
color: #767676
}
.a-price[data-a-size$=plus] .a-price-fraction,.a-price[data-a-size$=plus] .a-price-symbol,.a-price[data-a-size$=l] .a-price-fraction,.a-price[data-a-size$=l] .a-price-symbol {
position: relative
}
.a-price[data-a-size$=plus] .a-price-decimal,.a-price[data-a-size$=l] .a-price-decimal {
position: absolute;
opacity: 0
}
.a-price[data-a-size=l] {
font-size: 1.3rem
}
.a-price[data-a-size=l] .a-price-symbol {
font-size: 1.1rem
}
.a-price[data-a-size=l] .a-price-fraction {
top: -.5em;
font-size: 0.8rem
}
.a-text-price {
color: inherit
}

37
src/components/CPrice/CPrice.ts Executable file
View File

@@ -0,0 +1,37 @@
import { defineComponent, onMounted, ref, toRef, watch } from 'vue'
import { tools } from '@store/Modules/tools'
export default defineComponent({
name: 'CPrice',
props: {
sale_price: {
type: Number,
},
price: {
type: Number,
},
bold: {
type: Boolean,
default: false,
},
},
setup(props) {
const real_price = ref(0)
onMounted(() => {
if (props.sale_price)
real_price.value = props.sale_price
else
real_price.value = props.price ? props.price : 0
})
return {
tools,
real_price,
}
},
})

25
src/components/CPrice/CPrice.vue Executable file
View File

@@ -0,0 +1,25 @@
<template>
<span class="a-price" data-a-size="l" data-a-color="base">
<span aria-hidden="true" v-if="!!real_price">
<span class="a-price-whole">{{ tools.getIntPart(real_price) }}</span>
<span class="a-price-decimal">,</span>
<span class="a-price-fraction">{{
tools.getDecPart2Digit(real_price)
}}</span>
<span class="a-price-symbol">€</span>
</span>
</span>
<span v-if="!!sale_price && !bold" :class="sale_price ? 'prod_off_price' : ''"
>{{ price ? price.toFixed(2) : 0 }} €
</span>
</template>
<script lang="ts" src="./CPrice.ts">
</script>
<style lang="scss" scoped>
@import './CPrice.scss';
</style>

1
src/components/CPrice/index.ts Executable file
View File

@@ -0,0 +1 @@
export { default as CPrice } from './CPrice.vue'

24
src/components/CProductCard/CProductCard.ts
View File

@@ -181,9 +181,9 @@ export default defineComponent({
}
function updateproduct() {
async function updateproduct() {
myproduct.value = products.getProductById(props.id)
myproduct.value = await products.getProductById(props.id)
// products.updateQuantityAvailable(myproduct.value._id)
}
@@ -194,15 +194,15 @@ export default defineComponent({
if (prod) {
myproduct.value = prod
}
load()
await load()
endload.value = true
}
function updateproductmodif() {
async function updateproductmodif() {
try {
myproduct.value = products.getProductById(props.id)
myproduct.value = await products.getProductById(props.id)
updateLabel()
} catch (e) {
@@ -250,16 +250,16 @@ export default defineComponent({
return ''
}
watch(() => props.id, (newval, oldval) => {
watch(() => props.id, async (newval, oldval) => {
// console.log('change code')
load()
await load()
})
watch(() => storeSelected.value, (newval, oldval) => {
myorder.idStorehouse = newval
})
function updateLabel() {
function updateLabel() {
let dataArrivoMerce = ''
let dataRitiro = ''
try {
@@ -283,8 +283,8 @@ export default defineComponent({
updateTimerLabel()
}
function mounted() {
load()
async function mounted() {
await load()
// Start the timer when the component is mounted
startTimer();
@@ -312,9 +312,9 @@ export default defineComponent({
timerInterval.value = setInterval(() => updateTimerLabel(), 60000);
}
function load() {
async function load() {
initproduct()
updateproduct()
await updateproduct()
labelDataArrivoMerce.value = ''
labelDataRitiro.value = ''

3
src/components/CProductCard/CProductCard.vue
View File

@@ -997,7 +997,8 @@
<q-img
:src="myproduct.productInfo.img ? `` + myproduct.productInfo.img : myproduct.productInfo.image_link"
:alt="myproduct.productInfo.name"
:fit="tools.isMobile() ? 'fill' : 'none'"
:fit="tools.isMobile() ? 'fill' : 'cover'"
class="fullscreen-image"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"