Mamalizz
85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|
|
|
// meta
|
|
|
|
definePageMeta({
|
|
layout: "cart",
|
|
middleware: "check-is-logged-in",
|
|
pageTitle: "سبد خرید",
|
|
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-3 lg:w-1/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="bi:cart">
|
|
<template #actions>
|
|
<NuxtLink :to="{ name: 'products' }">
|
|
<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>
|