- caaloghi, categorie
This commit is contained in:
Surya Paolo
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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') }}: </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
|
||||
>
|
||||
{{
|
||||
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') }}: </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">
|
||||
|
||||
Reference in New Issue
Block a user