marzban-dev
114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|
|
|
// meta
|
|
|
|
useSeoMeta({
|
|
title: "سبد خرید",
|
|
});
|
|
|
|
definePageMeta({
|
|
layout: "cart",
|
|
middleware: "check-is-logged-in",
|
|
prevPage: { name: "index", label: "بازگشت به خانه" },
|
|
nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
|
});
|
|
|
|
// queries
|
|
|
|
const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
|
|
|
|
// computed
|
|
|
|
const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex flex-col gap-4 lg:gap-6">
|
|
<div
|
|
v-if="hasCartItem"
|
|
class="flex items-center justify-between w-full gap-3 px-4 py-4 rounded-xl bg-slate-50 border border-slate-200"
|
|
>
|
|
<Skeleton
|
|
v-if="cartIsLoading"
|
|
class="!w-36 !h-[43px] !rounded-lg"
|
|
/>
|
|
|
|
<div
|
|
v-else
|
|
class="flex items-center w-full gap-2 lg:w-1/2"
|
|
>
|
|
<NuxtImg
|
|
src="/img/box.gif"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
class="size-12 pb-2"
|
|
/>
|
|
<p class="font-semibold lg:text-lg text-black">{{ cart?.items.length }} مرسوله</p>
|
|
</div>
|
|
|
|
<Skeleton
|
|
v-if="cartIsLoading"
|
|
class="!w-28 !h-[43px] !rounded-full"
|
|
/>
|
|
|
|
<DeleteCartAllModal v-else />
|
|
</div>
|
|
|
|
<ul
|
|
v-if="cartIsLoading"
|
|
class="w-full flex flex-col gap-4 lg:gap-6"
|
|
>
|
|
<Skeleton
|
|
v-for="i in 4"
|
|
:key="i"
|
|
class="w-full !h-[12rem] !rounded-xl"
|
|
/>
|
|
</ul>
|
|
|
|
<div
|
|
v-else
|
|
class="w-full h-max"
|
|
>
|
|
<div
|
|
v-if="!cart?.items.length"
|
|
class="flex flex-grow w-full"
|
|
>
|
|
<Placeholder
|
|
title="سبد خرید شما خالی است :("
|
|
icon="ci:bi-cart"
|
|
>
|
|
<template #actions>
|
|
<NuxtLink :to="{ name: 'products-slug' }">
|
|
<Button
|
|
class="rounded-full"
|
|
size="md"
|
|
>
|
|
<span> مشاهده محصولات </span>
|
|
<Icon
|
|
name="ci:left-rotation"
|
|
size="24"
|
|
/>
|
|
</Button>
|
|
</NuxtLink>
|
|
</template>
|
|
</Placeholder>
|
|
</div>
|
|
<ul
|
|
v-else
|
|
class="w-full flex flex-col gap-4 lg:gap-6"
|
|
>
|
|
<CartItem
|
|
v-for="(item, index) in cart?.items"
|
|
:key="index"
|
|
:data="item"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|