marzban-dev
83 lines
2.8 KiB
Vue
83 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
|
|
// computed
|
|
|
|
const pageTitle = computed(() => route.meta.pageTitle);
|
|
const prevPage = computed(() => route.meta.prevPage as { name: string; label: string } | undefined);
|
|
|
|
// queries
|
|
|
|
const { data: cart, isLoading: cartIsLoading, suspense } = useGetCartOrders();
|
|
|
|
await suspense();
|
|
|
|
// computed
|
|
|
|
const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0);
|
|
</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 flex flex-col gap-[5rem] lg:max-w-[85vw]">
|
|
<div class="w-full flex flex-col container">
|
|
<div
|
|
class="flex flex-col items-center justify-center py-[3.5rem] lg:py-[5rem] gap-5 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] font-medium"
|
|
>
|
|
<Icon
|
|
name="ci:bi-arrow-right"
|
|
class="**:stroke-blue-500"
|
|
/>
|
|
<span class="text-blue-500">
|
|
{{ prevPage?.label }}
|
|
</span>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<h1 class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4">
|
|
{{ pageTitle }}
|
|
</h1>
|
|
|
|
<div class="hidden w-3/12 shrink-0 lg:block"> </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 shrink-0"
|
|
:class="hasCartItem ? 'lg:w-9/12' : ''"
|
|
>
|
|
<NuxtPage />
|
|
</div>
|
|
<CartSummary v-if="hasCartItem && !cartIsLoading" />
|
|
</div>
|
|
</div>
|
|
<ProductsSlider
|
|
title="دیگر محصولات"
|
|
icon-image="/img/simulare-products-section.gif"
|
|
/>
|
|
</main>
|
|
<div class="w-full flex-col flex mt-20">
|
|
<ServiceHighlights />
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|