added cart page

2025-01-25 02:11:33 +03:30
parent acfd77ac28
commit 29211e1c03
1 changed files with 118 additions and 0 deletions
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+// state
+
+const route = useRoute();
+
+// computed
+
+const pageTitle = computed(() => route.meta.pageTitle);
+const prevPage = computed(() => route.meta.prevPage);
+const nextPage = computed(() => route.meta.nextPage);
+</script>
+
+<template>
+    <div
+        class="w-full flex flex-col-center persian-number font-iran-yekan-x"
+        dir="rtl"
+    >
+        <Header />
+        <main
+            class="w-full overflow-x-hidden container flex flex-col gap-[5rem]"
+        >
+            <div class="w-full flex flex-col">
+                <div
+                    class="flex flex-col items-center justify-center gap-4 py-[5rem] lg:gap-0 lg:flex-row"
+                >
+                    <div
+                        class="flex items-center justify-start w-full lg:w-3/12"
+                    >
+                        <NuxtLink
+                            v-if="prevPage"
+                            :to="{ name: prevPage.name }"
+                            class="flex items-center gap-2 text-sm lg:text-[1rem]"
+                        >
+                            <Icon
+                                name="bi:arrow-right"
+                                class="**:stroke-cyan-400"
+                            />
+                            <span class="font-bold text-cyan-400">
+                                {{ prevPage.label }}
+                            </span>
+                        </NuxtLink>
+                    </div>
+
+                    <h1
+                        class="w-full text-center typo-h-3 lg:w-6/12 title-large"
+                    >
+                        {{ pageTitle }}
+                    </h1>
+
+                    <div class="hidden w-3/12 shrink-0 lg:block">&nbsp;</div>
+                </div>
+                <div
+                    class="w-full flex flex-col items-center relative justify-between gap-8 lg:gap-6 lg:flex-row lg:items-start"
+                >
+                    <div class="flex flex-col w-full gap-4 lg:gap-6 lg:w-9/12">
+                        <slot />
+                    </div>
+
+                    <div
+                        class="space-y-[1.25rem] bg-gray-50 p-4 sticky top-44 w-full lg:w-3/12 transition-all border border-gray-300 rounded-xl"
+                    >
+                        <div
+                            class="flex items-center justify-between w-full text-gray-800"
+                        >
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                جمع سبد خرید:
+                            </span>
+
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                ۳,۲۹۱,۰۰۰ تومان
+                            </span>
+                        </div>
+
+                        <div
+                            class="flex items-center justify-between w-full text-status-error-primary"
+                        >
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                تخفیف:
+                            </span>
+
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                ۹۰۰,۰۰۰ تومان
+                            </span>
+                        </div>
+
+                        <div
+                            class="flex items-center justify-between w-full text-gray-900"
+                        >
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                جمع کل:
+                            </span>
+
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                ۲,۳۹۱,۰۰۰ تومان
+                            </span>
+                        </div>
+
+                        <NuxtLink :to="{ name: nextPage.name }">
+                            <Button
+                                start-icon="bi:arrow-right"
+                                class="w-full rounded-full"
+                            >
+                                {{ nextPage.label }}
+                            </Button>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <ProductsSlider title="دیگران این محصولات را هم خریده‌اند" />
+        </main>
+        <div class="w-full flex-col flex">
+            <ServiceHighlights />
+            <Footer />
+        </div>
+    </div>
+</template>
+
+<style scoped></style>