Mamalizz
63 lines
2.0 KiB
Vue
63 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|
|
|
// state
|
|
|
|
const showMore = ref(false);
|
|
|
|
// queries
|
|
|
|
const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-slate-200 rounded-xl bg-gray-50">
|
|
<span class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900">
|
|
خلاصه سفارش
|
|
</span>
|
|
|
|
<div
|
|
class="grid w-full grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-3 md:grid-cols-2 lg:h-max transition-all"
|
|
:class="showMore ? 'h-[calc(100px)]' : 'h-max'"
|
|
>
|
|
<template v-if="cartIsLoading">
|
|
<Skeleton
|
|
v-for="i in 6"
|
|
class="w-full !h-14 !rounded-100"
|
|
></Skeleton>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="w-full overflow-hidden gap-4 flex flex-col">
|
|
<MinimalCartItem
|
|
v-for="(cartItem, index) in cart?.items"
|
|
:key="index"
|
|
:image="cartItem.product.image"
|
|
:title="cartItem.product.title"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="cart && cart.items.length > 5"
|
|
class="h-7 flex-center col-span-full lg:hidden"
|
|
>
|
|
<button
|
|
@click="showMore = !showMore"
|
|
class="gap-2 flex-center"
|
|
>
|
|
<span class="text-sm text-black"> مشاهده بیشتر </span>
|
|
<Icon
|
|
name="bi:chevron-down"
|
|
class="**:stroke-black"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|