473 lines
14 KiB
Vue
Executable File
473 lines
14 KiB
Vue
Executable File
<template>
|
|
<div
|
|
:class="{
|
|
' items-start q-gutter-sm': true,
|
|
}"
|
|
:style="
|
|
scheda.height
|
|
? ' height: ' +
|
|
tools.adjustSize(optcatalogo, scheda.height) +
|
|
'px !important; '
|
|
: ''
|
|
"
|
|
>
|
|
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
|
|
|
|
<div
|
|
v-if="!!myproduct && !!myproduct.productInfo"
|
|
:class="{
|
|
'my-card-big book-details': complete,
|
|
'book-card': !complete && !optcatalogo.pdf,
|
|
colfix_prodotti_1: options.quante_col == 'c1' && !optcatalogo.pdf,
|
|
colfix_prodotti_2: options.quante_col == 'c2' && !optcatalogo.pdf,
|
|
colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
|
|
}"
|
|
>
|
|
<q-toggle
|
|
v-if="tools.isManager() && !optcatalogo.pdf"
|
|
v-model="editOn"
|
|
class="absolute-top-right"
|
|
color="green"
|
|
icon="fas fa-pencil-alt"
|
|
dense
|
|
>
|
|
</q-toggle>
|
|
<q-page-sticky
|
|
v-if="complete && !optcatalogo.pdf"
|
|
position="bottom-right"
|
|
:offset="[18, 0]"
|
|
style="z-index: 1000"
|
|
>
|
|
<q-btn
|
|
fab
|
|
icon="fas fa-arrow-up"
|
|
class="semi-transparent"
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
</q-page-sticky>
|
|
|
|
<q-card-section>
|
|
<!-- per immagine di ombra -->
|
|
<div v-if="false" class="shadow-image-wrapper">
|
|
<q-img
|
|
src="images/ombra.png"
|
|
:style="{
|
|
position: 'absolute',
|
|
justifyContent: 'center',
|
|
width:
|
|
tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.immagine_prodotto?.size.width,
|
|
10
|
|
) ?? '100%',
|
|
height: tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.immagine_prodotto?.size.height,
|
|
10
|
|
),
|
|
zIndex: 1,
|
|
}"
|
|
>
|
|
</q-img>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'flex', // Classi comuni
|
|
'image-container',
|
|
{ 'shadow-2': options.in_3d }, // Classe condizionale
|
|
scheda.testo_right.font?.posiz_text ===
|
|
costanti.POSIZ_TESTO.IN_BASSO
|
|
? 'flex-col'
|
|
: 'flex-row', // Layout flessibile
|
|
]"
|
|
:style="{
|
|
justifyContent:
|
|
scheda.testo_right.font?.posiz_text ===
|
|
costanti.POSIZ_TESTO.IN_BASSO
|
|
? 'center'
|
|
: 'flex-start',
|
|
alignItems: 'stretch', // Cambiato in 'stretch' per occupare l'altezza
|
|
gap:
|
|
tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.scheda_prodotto?.size.gap
|
|
) ?? '0.1rem',
|
|
width:
|
|
tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.scheda_prodotto?.size.width
|
|
) ?? '100%',
|
|
height: tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.scheda_prodotto?.size.height
|
|
),
|
|
}"
|
|
>
|
|
<q-img
|
|
v-if="myproduct.productInfo"
|
|
:src="
|
|
myproduct.productInfo.imagefile
|
|
? tools.getFullFileNameByImageFile(
|
|
'productInfos',
|
|
myproduct.productInfo.imagefile
|
|
)
|
|
: myproduct.productInfo.image_link
|
|
"
|
|
:alt="myproduct.productInfo.name"
|
|
:fit="scheda.dimensioni?.immagine_prodotto?.size?.fit ?? 'cover'"
|
|
:class="{
|
|
'book-image-fixed': complete,
|
|
'cursor-pointer': !complete,
|
|
'shadow-4': true,
|
|
'image-wrapper': optcatalogo.pdf,
|
|
}"
|
|
:style="{
|
|
zIndex: 2,
|
|
width:
|
|
scheda.testo_right.font?.posiz_text ===
|
|
costanti.POSIZ_TESTO.IN_BASSO
|
|
? scheda.testo_right.font?.perc_text ?? '50%'
|
|
: '45%',
|
|
...(tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.immagine_prodotto?.size?.width
|
|
) && {
|
|
width:
|
|
tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.immagine_prodotto.size?.width
|
|
) + ' !important',
|
|
}),
|
|
height: scheda.dimensioni?.immagine_prodotto?.size?.height
|
|
? tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.dimensioni?.immagine_prodotto?.size?.height
|
|
)
|
|
: undefined,
|
|
display: 'block',
|
|
}"
|
|
@click="click_opendetail()"
|
|
/>
|
|
<!-- Testo associato all'immagine -->
|
|
<div
|
|
:style="{
|
|
width:
|
|
scheda.testo_right.font?.posiz_text ===
|
|
costanti.POSIZ_TESTO.IN_BASSO
|
|
? '100%'
|
|
: scheda.testo_right.font?.perc_text ?? '50%',
|
|
textAlign: 'center',
|
|
marginTop:
|
|
scheda.testo_right.font?.posiz_text ===
|
|
costanti.POSIZ_TESTO.IN_BASSO
|
|
? '0.5rem'
|
|
: '0',
|
|
}"
|
|
>
|
|
<div
|
|
v-if="scheda.testo_right && scheda.testo_right"
|
|
:style="{
|
|
'--scalecatalog': optcatalogo.areadistampa.scale,
|
|
'line-height': scheda.testo_right.font?.line_height,
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}"
|
|
>
|
|
<div
|
|
v-html="
|
|
products.replaceKeyWordsByProduct(
|
|
optcatalogo,
|
|
myproduct,
|
|
scheda.testo_right
|
|
)
|
|
"
|
|
style="
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
"
|
|
></div>
|
|
<div class="row justify-center">
|
|
<div v-if="scheda.barcode && scheda.barcode.show">
|
|
<CBarCode
|
|
:value="myproduct.productInfo.code"
|
|
:format="scheda.barcode.format"
|
|
:fontsize="scheda.barcode.font?.size"
|
|
:width="
|
|
parseInt(
|
|
tools.adjustSize(
|
|
optcatalogo,
|
|
scheda.barcode.size?.width
|
|
)
|
|
)
|
|
"
|
|
:widthlines="scheda.barcode.widthlines"
|
|
:height="scheda.barcode.size?.height"
|
|
>
|
|
</CBarCode>
|
|
</div>
|
|
<div v-if="scheda.etichette?.bestseller?.show && isProductBestseller()">
|
|
<q-img
|
|
src="images/bestseller.png"
|
|
alt="Bestseller"
|
|
width="40px"
|
|
height="40px"
|
|
fit="contain"
|
|
></q-img>
|
|
</div>
|
|
<div v-else-if="scheda.etichette?.novita?.show && isProductNovita()">
|
|
<q-img
|
|
src="images/novita.png"
|
|
alt="Novita"
|
|
width="40px"
|
|
height="40px"
|
|
fit="contain"
|
|
></q-img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
|
|
:style="{
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
}"
|
|
>
|
|
<div
|
|
:style="{
|
|
'--scalecatalog': optcatalogo.areadistampa.scale,
|
|
'line-height': scheda.testo_bottom.font?.line_height,
|
|
}"
|
|
v-html="
|
|
products.replaceKeyWordsByProduct(
|
|
optcatalogo,
|
|
myproduct,
|
|
scheda.testo_bottom
|
|
)
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator v-if="complete" class="q-my-sm"></q-separator>
|
|
<q-card-section v-if="complete && myproduct.productInfo.description">
|
|
<div class="title-descr text-blue row">Descrizione:</div>
|
|
<div class="row items-center">
|
|
<div class="text-title text-grey-9">
|
|
<span
|
|
class="text-grey-7"
|
|
v-html="myproduct.productInfo.description"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</div>
|
|
|
|
<q-dialog v-if="myproduct" v-model="openlistorders">
|
|
<q-card class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ t('ecomm.listaord') }} - {{ myproduct.productInfo.name }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="q-pa-xs inset-shadow">
|
|
<q-markup-table
|
|
wrap-cells
|
|
bordered
|
|
separator="horizontal"
|
|
class="listaev__table"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th>Data</th>
|
|
<th>Persona</th>
|
|
<th>Stato</th>
|
|
<th>Quantita</th>
|
|
<th>Note</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="(ordcart, index) of listord"
|
|
:key="index"
|
|
class="listaev listaev__table"
|
|
>
|
|
<td class="text-center">
|
|
<div>
|
|
{{ func_tools.getDateTimeShortStr(ordcart.created_at) }}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<strong>{{
|
|
tools.getNomeUtenteEUsernameByRecUser(ordcart.user)
|
|
}}</strong>
|
|
</td>
|
|
<td class="text-center">
|
|
<strong>{{
|
|
shared_consts.getStatusStr(ordcart.status)
|
|
}}</strong>
|
|
</td>
|
|
<td class="text-center">
|
|
<div v-for="(singleord, index) in ordcart.items" :key="index">
|
|
<span
|
|
v-if="
|
|
singleord.order.idProduct === myproduct._id &&
|
|
singleord.order.quantity > 0
|
|
"
|
|
>
|
|
{{ singleord.order.quantity }}</span
|
|
>
|
|
<span
|
|
v-if="
|
|
singleord.order.idProduct === myproduct._id &&
|
|
singleord.order.quantitypreordered > 0
|
|
"
|
|
>
|
|
{{ singleord.order.quantitypreordered }}</span
|
|
>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
{{ ordcart.note }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td> </td>
|
|
<td class="text-center">
|
|
Totali:
|
|
<span class="totali">{{ sumval }}</span>
|
|
</td>
|
|
<td> </td>
|
|
</tr>
|
|
</tbody>
|
|
</q-markup-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog
|
|
v-if="
|
|
true &&
|
|
myproduct &&
|
|
myproduct.productInfo &&
|
|
myproduct.productInfo.link_scheda
|
|
"
|
|
v-model="apriSchedaPDF"
|
|
maximized
|
|
>
|
|
<q-card>
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ myproduct.productInfo.name }}
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="white"
|
|
label="CHIUDI"
|
|
icon="close"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section>
|
|
<iframe
|
|
:src="myproduct.productInfo.link_scheda"
|
|
frameborder="0"
|
|
width="100%"
|
|
height="100%"
|
|
></iframe>
|
|
</q-card-section>
|
|
</q-card>
|
|
<q-card-actions align="bottom">
|
|
<q-btn color="primary" label="Chiudi" @click="apriSchedaPDF = false" />
|
|
</q-card-actions>
|
|
</q-dialog>
|
|
|
|
<q-dialog
|
|
v-if="
|
|
false &&
|
|
myproduct &&
|
|
myproduct.productInfo &&
|
|
myproduct.productInfo.link_scheda
|
|
"
|
|
v-model="apriSchedaPDF"
|
|
fullscreen
|
|
>
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ myproduct.productInfo.name }}
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="white"
|
|
label="CHIUDI"
|
|
icon="close"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section>
|
|
<vue-pdf-app
|
|
:pdf="myproduct.productInfo.link_scheda"
|
|
style="height: 100vh"
|
|
></vue-pdf-app>
|
|
</q-card-section>
|
|
</q-dialog>
|
|
|
|
<q-dialog
|
|
v-model="isFullScreen"
|
|
position="top"
|
|
:maximized="true"
|
|
class="q-pt-none"
|
|
>
|
|
<div
|
|
v-if="isFullScreen"
|
|
class="fullscreen-container"
|
|
@touchmove.prevent
|
|
@click="toggleFullScreen"
|
|
>
|
|
<q-img
|
|
:src="
|
|
myproduct.productInfo.imagefile
|
|
? `` + myproduct.productInfo.imagefile
|
|
: myproduct.productInfo.image_link
|
|
"
|
|
:alt="myproduct.productInfo.name"
|
|
:fit="tools.isMobile() ? 'fill' : 'contain'"
|
|
class="fullscreen-image"
|
|
@touchstart="onTouchStart"
|
|
@touchmove="onTouchMove"
|
|
@touchend="onTouchEnd"
|
|
ref="fullscreenImage"
|
|
>
|
|
</q-img>
|
|
<br />
|
|
</div>
|
|
<div class="text-center">
|
|
<q-btn
|
|
class="q-ma-md"
|
|
@click="isFullScreen = false"
|
|
label="Chiudi"
|
|
rounded
|
|
color="primary"
|
|
icon="close"
|
|
></q-btn>
|
|
</div>
|
|
</q-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CCatalogoCard.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CCatalogoCard.scss';
|
|
</style>
|