diff --git a/src/components/CProductCard/CProductCard.scss b/src/components/CProductCard/CProductCard.scss index 5ec45aaa..20d01f56 100755 --- a/src/components/CProductCard/CProductCard.scss +++ b/src/components/CProductCard/CProductCard.scss @@ -12,20 +12,25 @@ .prod_price { font-size: 1.25rem; + @media (max-width: 718px) { + font-size: 1rem; + } } + .prod_disp { font-size: 1.2rem; - font-size: 1.2rem; + @media (max-width: 718px) { + font-size: 1rem; + } } .prod_preorder{ font-size: 1.2rem; -} - -.prod_preorder{ - font-size: 1.2rem; + @media (max-width: 718px) { + font-size: 1rem; + } } .prod_qtywarn { @@ -61,4 +66,34 @@ .subtit_prod { font-style: italic; -} \ No newline at end of file +} + +.icone_prod{ + font-size: 1.25rem; + @media (max-width: 718px) { + font-size: 1rem; + } +} + +.thumbnail { + max-width: 100%; + max-height: 100%; +} + +.fullscreen-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: black; + display: flex; + align-items: center; + justify-content: center; +} + +.fullscreen-image { + max-width: 100%; + max-height: 100%; +} + diff --git a/src/components/CProductCard/CProductCard.ts b/src/components/CProductCard/CProductCard.ts index 173c9c51..44914209 100755 --- a/src/components/CProductCard/CProductCard.ts +++ b/src/components/CProductCard/CProductCard.ts @@ -53,6 +53,8 @@ export default defineComponent({ const site = ref(globalStore.site) + const fullscreenImage = ref(null) + let myorder = reactive({ idapp: process.env.APP_ID, quantity: 0, @@ -77,6 +79,12 @@ export default defineComponent({ const endload = ref(false) const myproduct = ref({}) + const isFullScreen = ref(false) + const imageSrc = ref('URL_DEL_TUO_FILE_IMMAGINE') + const startX = ref(0) + const startY = ref(0) + const scale = ref(1) + const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => { // console.log('valoriopt', item.table) return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter) @@ -363,6 +371,41 @@ export default defineComponent({ return 0 } + function toggleFullScreen() { + isFullScreen.value = !isFullScreen.value; + scale.value = 1; + } + + function onTouchStart(e: any) { + startX.value = e.touches[0].pageX; + startY.value = e.touches[0].pageY; + } + + function onTouchMove(e: any) { + const deltaX = e.touches[0].pageX - startX.value; + const deltaY = e.touches[0].pageY - startY.value; + + // Calcola la distanza percorsa + const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2); + + // Imposta il fattore di scala in base alla distanza percorsa + scale.value = Math.min(Math.max(1, scale.value + distance / 100), 3); + + // Salva le nuove coordinate di partenza + startX.value = e.touches[0].pageX; + startY.value = e.touches[0].pageY; + + // Applica la trasformazione + if (fullscreenImage.value) + fullscreenImage.value.style.transform = `scale(${scale.value})`; + } + + function onTouchEnd() { + // Ripristina la trasformazione quando l'utente solleva il dito + if (fullscreenImage.value) + fullscreenImage.value.fullscreenImage.style.transform = 'scale(1)'; + } + onMounted(mounted) onBeforeUnmount(beforeDestroy) @@ -402,6 +445,12 @@ export default defineComponent({ labelDataArrivoMerce, getpercqtaraggiunta, isOrdGas, + isFullScreen, + toggleFullScreen, + onTouchStart, + onTouchMove, + onTouchEnd, + } } }) diff --git a/src/components/CProductCard/CProductCard.vue b/src/components/CProductCard/CProductCard.vue index 1abb1958..1ee4b93b 100755 --- a/src/components/CProductCard/CProductCard.vue +++ b/src/components/CProductCard/CProductCard.vue @@ -12,93 +12,301 @@ v-if="!!myproduct && endload && !!myproduct.productInfo" bordered > - + + + - - - + + + + + + -
-
- {{ myproduct.productInfo.name }} -
-
-   {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }} -
+ + + {{ + myproduct.price ? myproduct.price.toFixed(2) : 0 + }} + {{ + myproduct.after_price + }} + + +
+ {{ sconti.description }} +
+ + + + + + + + + + + {{ myproduct.productInfo.weight }} + {{ + tools.getUnitsMeasure(myproduct.productInfo.unit, true) + }} + + + + + + + + + + + {{ t('ecomm.available') }} + + + + {{ products.getQtyAvailable(myproduct) }} + +
+
+ {{ + t('ecomm.qta_in_attesa', { + qty: myproduct.QuantitaOrdinateInAttesa, + }) + }} +
+
+ + + + + + + + {{ t('ecomm.bloccati') }}: + + + {{ products.getQtyBloccataAvailable(myproduct) }} + + + + + + + + +
+
+ {{ myproduct.productInfo.name }}
- - -
-
- -
+
+   {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
- +
+ + +
+
+ +
+
+ + +
+ + {{ t('products.ritiro_presso') }}: +
+
+
+ + +
+
+ {{ + getSingleStorehouse() + }} +
+
+ + +
+
+ + {{ t('products.origine') }}: + + {{ myproduct.producer.city }} ({{ + myproduct.producer.region + }}) +
+
+
+ + {{ t('products.producer') }}: + + {{ myproduct.producer.name }} +
+ + + - + + + + + + + + + + + + + + - {{ t('products.price') }} + {{ t('ecomm.preorders') }} - {{ - myproduct.price ? myproduct.price.toFixed(2) : 0 - }} - {{ - myproduct.after_price - }} - - -
- {{ sconti.description }} + + {{ products.getQtyBookableAvailable(myproduct) }} + +
+
+ {{ + t('ecomm.qta_prenotate_in_attesa', { + qty: myproduct.QuantitaPrenotateInAttesa, + }) + }} +
- - - - - - {{ t('products.weight') }} - - - - {{ myproduct.productInfo.weight }} - {{ - tools.getUnitsMeasure(myproduct.productInfo.unit, true) - }} - + + + + + + + {{ t('ecomm.bloccati') }}: + + + + {{ + products.getQtyBloccataBookableAvailable(myproduct) + }} + + @@ -136,22 +344,13 @@ - - - - + - - - - - - -
-
-
- - {{ t('products.origine') }}: - - {{ myproduct.producer.city }} ({{ - myproduct.producer.region - }}) -
-
-
- - {{ t('products.producer') }}: - - {{ myproduct.producer.name }} -
-
+ - + -
- - - - - - - - - {{ t('ecomm.available') }} - - - - {{ products.getQtyAvailable(myproduct) }} - -
-
- {{ - t('ecomm.qta_in_attesa', { - qty: myproduct.QuantitaOrdinateInAttesa, - }) - }} -
-
- - - - - - - - {{ t('ecomm.bloccati') }}: - - - {{ products.getQtyBloccataAvailable(myproduct) }} - - - - - - - - - - - - {{ t('ecomm.preorders') }} - - - - {{ products.getQtyBookableAvailable(myproduct) }} - -
-
- {{ - t('ecomm.qta_prenotate_in_attesa', { - qty: myproduct.QuantitaPrenotateInAttesa, - }) - }} -
-
- - - - - - - - - {{ t('ecomm.bloccati') }}: - - - - {{ - products.getQtyBloccataBookableAvailable(myproduct) - }} - - - - - -
-
- - {{ t('products.ritiro_presso') }}: -
-
-
- - -
-
- {{ - getSingleStorehouse() - }} -
-
-
-
+ +
-
- - - - -
+
+ + @@ -581,9 +584,9 @@
- {{ ordcart.user.name }} {{ ordcart.user.surname }} + {{ + tools.getNomeUtenteEUsernameByRecUser(ordcart.user) + }} {{ @@ -628,6 +631,41 @@ + + +
+ +
+
+
+ +
+
diff --git a/src/css/app.scss b/src/css/app.scss index d257518e..8ddb7cd7 100755 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -355,9 +355,9 @@ h3 { .myimgproduct{ max-width: 100%; - height: 500px; + height: 300px; @media (max-width: 718px) { - height: 300px; + height: 250px; } } diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js index 5f5ff54e..07775c47 100755 --- a/src/statics/lang/it.js +++ b/src/statics/lang/it.js @@ -1674,7 +1674,7 @@ const msg_it = { ord_not_confirmed: 'E\' avvenuto un errore. Ordine non Confermato. Ricaricare la pagina e riprovare.', btn_cassa: 'Procedi all\'Ordine', btn_ordini: 'I tuoi Ordini', - available: 'Disponibili', + available: 'Disponib.', preorders: 'Quantità Massima Pre-Ordinabili', preord: 'Pre-Ordinate', di_cui_x_in_carrello: '(nel tuo carrello: {qty})', diff --git a/src/views/ecommerce/productsList/productsList.vue b/src/views/ecommerce/productsList/productsList.vue index f2e91b4a..9049fff8 100755 --- a/src/views/ecommerce/productsList/productsList.vue +++ b/src/views/ecommerce/productsList/productsList.vue @@ -9,7 +9,7 @@ -
+