added cart summery

2025-03-13 01:34:20 +03:30
parent 4d67e8b1f2
commit 25e023e2b3
1 changed files with 97 additions and 0 deletions
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+// imports
+
+import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
+
+// state
+
+const route = useRoute();
+
+const discountCode = ref("");
+
+// queries
+
+const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
+
+// computed
+
+const nextPage: ComputedRef<{ name: string; label: string } | undefined> =
+    computed(() => route.meta.nextPage);
+</script>
+
+<template>
+    <div
+        class="flex flex-col bg-slate-50 sticky top-44 w-full lg:w-3/12 transition-all border border-slate-200 rounded-xl"
+    >
+        <div
+            class="w-full flex items-center justify-between p-5 border-b border-slate-200"
+        >
+            <span class="typo-sub-h-xl text-black">فاکتور خرید</span>
+            <Icon name="ci:cart" class="**:stroke-black" size="24" />
+        </div>
+
+        <div class="flex flex-col p-5 gap-5">
+            <div
+                class="flex items-center justify-between w-full text-slate-800"
+            >
+                <span class="max-w-1/2 text-sm"> جمع سبد خرید: </span>
+
+                <span class="max-w-1/2 text-sm">
+                    {{ cart?.cart_total }} تومان
+                </span>
+            </div>
+
+            <div
+                class="flex items-center justify-between w-full text-slate-800"
+            >
+                <span class="max-w-1/2 text-sm"> مالیات ارزش افزوده: </span>
+
+                <span class="max-w-1/2 text-sm"> {{ cart?.tax }} تومان </span>
+            </div>
+
+            <div
+                v-if="!!cart?.discount_code"
+                class="flex items-center justify-between w-full text-status-error-primary"
+            >
+                <span class="max-w-1/2 text-sm"> تخفیف: </span>
+
+                <span class="max-w-1/2 text-sm">
+                    {{ cart?.discount_code.amount }} تومان
+                </span>
+            </div>
+
+            <div
+                v-if="!!cart?.discount_code"
+                class="flex items-center justify-between w-full text-slate-900"
+            >
+                <span class="max-w-1/2 text-sm"> جمع کل: </span>
+
+                <span class="max-w-1/2 text-sm">
+                    {{ cart?.final_price }} تومان
+                </span>
+            </div>
+
+            <Input
+                v-model="discountCode"
+                placeholder="کد تخفیف"
+                class="!py-2 !pe-2 ps-2.5"
+            >
+                <template #endItem>
+                    <button
+                        class="text-xs px-3 rounded-[7px] py-1.5 text-white bg-black hover:invert border border-white transition-all"
+                    >
+                        ثبت
+                    </button>
+                </template>
+            </Input>
+
+            <NuxtLink :to="{ name: nextPage?.name }">
+                <Button start-icon="bi:arrow-right" class="w-full rounded-full">
+                    {{ nextPage?.label }}
+                </Button>
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>