added no cart item style

This commit is contained in:
Mamalizz
2025-03-13 20:22:58 +03:30
parent 2d6bcc5a18
commit 8e706e9293
+21 -6
View File
@@ -7,7 +7,7 @@ import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
definePageMeta({
layout: "cart",
middleware: ["check-is-logged-in", 'check-has-cart-item'],
middleware: "check-is-logged-in",
pageTitle: "سبد خرید",
prevPage: { name: "index", label: "بازگشت به خانه" },
nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
@@ -15,12 +15,21 @@ definePageMeta({
// queries
const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
const { data: cart, isLoading: cartIsLoading, suspense } = useGetOrdersCart();
await suspense();
// 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-5 py-4 rounded-xl bg-slate-50 border border-slate-200"
>
<Skeleton
@@ -52,10 +61,16 @@ const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
<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"
/>
<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