init git

components/cart/total/Aside.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="cart-total-aside">
+        <ul>
+            <li v-for="(value, key) in items" :key="key">
+                <label>{{ $t(key) }}</label>
+                <span>
+                    {{ numberFormat(value) }}
+                    {{ key == 'productsCount' ? $t('product') : '' }}
+                </span>
+            </li>
+        </ul>
+        <Button :label="$t('submitAndViewPreFactor')" :loading="loading" @click="submitOrder()" />
+    </div>
+</template>
+
+<script setup>
+import init from '../../../initialize/cart-total-invoice'
+
+const { dialog } = inject('service')
+const data = inject('data')
+
+const items = computed(() => init(data.value))
+
+const loading = ref(false)
+
+const submitOrder = async () => {
+    loading.value = true
+    const { status, data: res } = await useFetch('/api/orders', {
+        headers: { Authorization: useCookie('token') }, method: 'post'
+    })
+    loading.value = false
+
+    if (status.value == 'success') {
+        dialog.show(resolveComponent('CartDialogPreFactor'), res.value)
+        const cart = useCartStore()
+        cart.get()
+    }
+}
+
+const numberFormat = (number) =>
+    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
+</script>
+
+<style lang="scss">
+.cart-total-aside {
+    @apply w-full lg:max-w-[28.1rem] lg:h-[25rem] flex flex-col justify-between p-6 grow;
+    @apply lg:bg-neutral-50 lg:rounded-[0.6rem] lg:border border-neutral-200 font-vazir lg:mr-auto;
+
+    ul {
+        @apply flex flex-col gap-[1.1rem] lg:gap-6 lg:mt-2;
+
+        li {
+            @apply flex justify-between items-center;
+
+            label {
+                @apply text-zinc-500 text-sm lg:text-xl font-medium;
+            }
+
+            span {
+                @apply text-zinc-800 text-lg lg:text-2xl lg:font-medium;
+            }
+        }
+    }
+
+    button {
+        @apply max-lg:hidden;
+
+        span {
+            @apply text-xl font-bold;
+        }
+    }
+}
+</style>

components/cart/total/Fixed.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="total-invoice-fixed">
+        <Button :label="$t('submitAndViewPreFactor')" @click="submitOrder()" />
+        <div>
+            <label>{{ $t('totalFactor') }}</label>
+            <span>{{ numberFormat(items.totalFactor) }} {{ $t('priceUnit') }}</span>
+        </div>
+        <Button icon="isax isax-trash" severity="danger" text rounded @click="remove()" />
+    </div>
+</template>
+
+<script setup>
+import init from '../../initialize/cart-total-invoice'
+
+const { dialog } = inject('service')
+
+const data = inject('data')
+
+const items = computed(() => init(data.value))
+
+const loading = ref(false)
+
+const submitOrder = async () => {
+    loading.value = true
+    const { status, data } = await useFetch('/api/orders', {
+        headers: { Authorization: useCookie('token') }, method: 'post'
+    })
+    loading.value = false
+
+    if (status.value == 'success') {
+        dialog.open(resolveComponent('DialogPreFactorSubmit'), {
+            props: { modal: true },
+            data
+        })
+    }
+}
+
+const remove = () => {
+    dialog.show()
+}
+
+const numberFormat = (number) =>
+    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
+</script>
+
+<style lang="scss">
+.total-invoice-fixed {
+    @apply fixed inset-x-0 bottom-16 h-[4.6rem] z-[11] bg-white flex justify-between items-center;
+    @apply shadow-[0px_-3px_5px_#0000000a] border-t border-[#F1F2F4] px-6 lg:hidden;
+
+    &>button:first-of-type {
+        @apply h-10 w-[10.7rem] #{!important};
+
+        .p-button-label {
+            @apply text-xs font-iran-sans font-bold;
+        }
+    }
+
+    &>div {
+        @apply flex flex-col gap-2 justify-between items-end font-vazir;
+
+        label {
+            @apply text-[#7F7F7F] text-xs;
+        }
+
+        span {
+            @apply text-[#333333] text-sm font-bold;
+        }
+    }
+
+    &>button:last-of-type {
+        @apply fixed lg:hidden w-[3.8rem] h-[3.8rem] right-6 bottom-36 z-10 bg-white #{!important};
+        @apply shadow-[0px_0px_10px_#00000014];
+
+        .p-button-icon {
+            @apply text-[2em] text-[#AD3434];
+        }
+    }
+}
+</style>