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>