- caaloghi, categorie
This commit is contained in:
Surya Paolo
@@ -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