- aggiornato carrello e bottoni sul catalogo

src/components/CMyCart/CMyCart.ts

@@ -1,17 +1,16 @@
-import { ref, onMounted, onBeforeMount, PropType, reactive, watch } from 'vue'
-import { CCardState } from '../CCardState'
+import { ref, onMounted, onBeforeMount, PropType, reactive, watch } from 'vue';
+import { CCardState } from '../CCardState';
 
-import { computed, defineComponent } from 'vue'
-import { useGlobalStore } from '@store/globalStore'
-import { useProducts } from '@store/Products'
-import { CCopyBtn } from '@src/components/CCopyBtn'
-import { CSingleCart } from '@src/components/CSingleCart'
-import { CTitleBanner } from '@src/components/CTitleBanner'
+import { computed, defineComponent } from 'vue';
+import { useGlobalStore } from '@store/globalStore';
+import { useProducts } from '@store/Products';
+import { CCopyBtn } from '@src/components/CCopyBtn';
+import { CSingleCart } from '@src/components/CSingleCart';
+import { CTitleBanner } from '@src/components/CTitleBanner';
 
-import { useI18n } from 'vue-i18n'
-
-import MixinUsers from '../../mixins/mixin-users'
+import { useI18n } from 'vue-i18n';
 
+import MixinUsers from '../../mixins/mixin-users';
 
 export default defineComponent({
   name: 'CMyCart',
@@ -19,55 +18,63 @@ export default defineComponent({
   components: { CTitleBanner, CCardState, CCopyBtn, CSingleCart },
 
   setup() {
-    const globalStore = useGlobalStore()
-    const products = useProducts()
-    const { t } = useI18n()
+    const globalStore = useGlobalStore();
+    const productStore = useProducts();
+    const { t } = useI18n();
 
-    const { getnumItemsCart } = MixinUsers()
+    const { getnumItemsCart } = MixinUsers();
 
-    const myCart = computed(() => products.cart)
+    const myCart = computed(() => productStore.cart);
     const myTotalPrice = computed(() => {
-      if (products.cart) {
-        return products.cart.totalPrice
+      if (productStore.cart) {
+        return productStore.cart.totalPrice.toFixed(2);
       } else {
-        return 0
+        return 0;
       }
-    })
+    });
+
+    const totalPriceIntero = computed((): string => {
+      if (productStore.cart && productStore.cart.totalPriceIntero) {
+        return productStore.cart.totalPriceIntero.toFixed(2);
+      } else {
+        return '0';
+      }
+    });
 
     const ordersCart = computed(() => {
-      if (!!products.cart) {
-        return products.cart.items
+      if (!!productStore.cart) {
+        return productStore.cart.items;
       } else {
-        return null
+        return null;
       }
-    })
+    });
 
     const numOrders = computed(() => {
-      if (!!products.cart && products.cart.items) {
-        return products.cart.items.length
+      if (!!productStore.cart && productStore.cart.items) {
+        return productStore.cart.items.length;
       } else {
-        return 0
+        return 0;
       }
-    })
-
+    });
 
     function closecart() {
-      globalStore.rightCartOpen = false
+      globalStore.rightCartOpen = false;
     }
 
     function mounted() {
-      products.loadOrders()
+      productStore.loadOrders();
     }
 
     function existsOrders() {
-      return products.getNumOrders() > 0
+      return productStore.getNumOrders() > 0;
     }
 
-    onMounted(mounted)
+    onMounted(mounted);
 
     return {
       myCart,
       myTotalPrice,
+      totalPriceIntero,
       ordersCart,
       numOrders,
       closecart,
@@ -75,6 +82,6 @@ export default defineComponent({
       existsOrders,
       globalStore,
       t,
-    }
+    };
   },
-})
+});

src/components/CMyCart/CMyCart.vue

@@ -3,7 +3,13 @@
     <div id="mycontainer">
       <div class="myheader row justify-between">
         <div class="col-6">
-          <q-btn class="q-mx-xs" round dense flat icon="fas fa-shopping-cart">
+          <!--<q-btn
+            class="q-mx-xs"
+            round
+            dense
+            flat
+            icon="fas fa-shopping-cart"
+          >
             <q-badge
               v-if="getnumItemsCart() > 0"
               color="red"
@@ -12,25 +18,96 @@
             >
               {{ getnumItemsCart() }}
             </q-badge>
-          </q-btn>
+          </q-btn>-->
         </div>
-        <div class="col-6" style="text-align: right">
-          <span v-if="myTotalPrice" class="text-grey q-mr-xs">Totale:</span>
-          <span class="text-subtitle1 q-mr-sm"
-            >€ {{ myTotalPrice ? myTotalPrice.toFixed(2) : 0 }}</span
-          >
+        <div
+          v-if="totalPriceIntero"
+          class="q-mr-sm"
+        >
+          <table class="table">
+            <tbody>
+              <tr>
+                <td class="label">{{ $t('ecomm.prezzointero') }}:</td>
+                <td
+                  class="value text-subtitle1 text-right"
+                  :class="{ 'text-strike': myTotalPrice !== totalPriceIntero }"
+                >
+                  € {{ totalPriceIntero }}
+                </td>
+              </tr>
+              <tr v-if="myCart.codice_sconto">
+                <td class="label">{{ $t('ecomm.sconto_appl') }}:</td>
+                <td>
+                  <div class="column items-center">
+                    <q-chip
+                      square
+                      color="orange"
+                      text-color="white"
+                      size="md"
+                      icon="fas fa-tag"
+                    >
+                      <span class="sconto-text">{{ myCart.descr_sconto }}</span>
+                    </q-chip>
+                  </div>
+                </td>
+              </tr>
+
+              <tr v-if="!myCart.codice_sconto">
+                <td class="label">{{ $t('ecomm.codice_sconto') }}:</td>
+                <td>
+                  <q-input
+                    v-model="codice_sconto"
+                    :label="$t('ecomm.codice_sconto')"
+                    style="width: 200px"
+                    filled
+                    dense
+                    @keyup.enter="confermaCodiceSconto"
+                  />
+                  <q-btn
+                    :disabled="!codice_sconto || codice_sconto.trim() === ''"
+                    :label="$t('ecomm.applica_sconto')"
+                    icon="fas fa-check-circle"
+                    color="primary"
+                    class="q-mt-sm self-center"
+                    @click="confermaCodiceSconto"
+                  />
+                </td>
+              </tr>
+
+              <tr>
+                <td class="label">{{ $t('ecomm.totale_scontato') }}:</td>
+                <td class="ordine_scontato_nuovo text-right">€ {{ myTotalPrice }}</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
       <q-separator></q-separator>
       <div id="mybody">
-        <div v-for="(rec, index) in ordersCart" :key="index" class="col">
-          <CSingleCart :order="rec.order" :showall="false" :idOrdersCart="ordersCart ? ordersCart._id: ''"> </CSingleCart>
+        <div
+          v-for="(rec, index) in ordersCart"
+          :key="index"
+          class="col"
+        >
+          <CSingleCart
+            :order="rec.order"
+            :showall="false"
+            :idOrdersCart="ordersCart ? ordersCart._id : ''"
+          >
+          </CSingleCart>
         </div>
       </div>
-      <div v-if="numOrders === 0" style="text-align: center" class="text-grey">
+      <div
+        v-if="numOrders === 0"
+        style="text-align: center"
+        class="text-grey"
+      >
         {{ $t('ecomm.carrello_vuoto') }}
       </div>
-      <div v-else style="text-align: center">
+      <div
+        v-else
+        style="text-align: center"
+      >
         <div class="text-center">
           <q-btn
             rounded
@@ -50,7 +127,7 @@
           rounded
           outline
           icon="fas fa-clipboard-list"
-          style="color: green;"
+          style="color: green"
           :label="t('ecomm.btn_ordini')"
           class="q-mb-sm"
           @click="globalStore.rightCartOpen = false"
@@ -62,8 +139,7 @@
   </div>
 </template>
 
-<script lang="ts" src="./CMyCart.ts">
-</script>
+<script lang="ts" src="./CMyCart.ts"></script>
 
 <style lang="scss" scoped>
 @import './CMyCart.scss';