added order summary component

2025-03-18 16:20:57 +03:30
parent d037cc4bb8
commit e065e6381a
1 changed files with 63 additions and 0 deletions
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// imports
+
+import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
+
+// state
+
+const showMore = ref(false);
+
+// queries
+
+const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
+</script>
+
+<template>
+    <div
+        class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-gray-300 rounded-xl bg-gray-50"
+    >
+        <span
+            class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
+        >
+            خلاصه سفارش
+        </span>
+
+        <div
+            class="grid w-full grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-3 md:grid-cols-2 lg:h-max transition-all"
+            :class="showMore ? 'h-[calc(100px)]' : 'h-max'"
+        >
+            <template v-if="cartIsLoading">
+                <Skeleton
+                    v-for="i in 6"
+                    class="w-full !h-14 !rounded-100"
+                ></Skeleton>
+            </template>
+
+            <template v-else>
+                <div class="w-full overflow-hidden gap-4 flex flex-col">
+                    <MinimalCartItem
+                        v-for="(cartItem, index) in cart?.items"
+                        :key="index"
+                        :image="cartItem.product.image"
+                        :title="cartItem.product.title"
+                    />
+                </div>
+
+                <div
+                    v-if="cart?.items.length > 5"
+                    class="h-7 flex-center col-span-full lg:hidden"
+                >
+                    <button
+                        @click="showMore = !showMore"
+                        class="gap-2 flex-center"
+                    >
+                        <span class="text-sm text-black"> مشاهده بیشتر </span>
+                        <Icon name="bi:chevron-down" class="**:stroke-black" />
+                    </button>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>