mohadese-nm
75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<div class="header-cart-list">
|
|
<h3>{{ $t("itemsSubmittedInCart", { count: cart.count }) }}</h3>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(item, i) in items" :key="i">
|
|
<AppDesktopHeaderCartItem
|
|
:id="item._id"
|
|
:index="i"
|
|
@remove="remove"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Button
|
|
:disabled="cart.count < 1"
|
|
:label="$t('showCart')"
|
|
@click="show()"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { popup } = inject("service");
|
|
const cart = useCartStore();
|
|
const items = computed(() => cart.items);
|
|
|
|
const emit = defineEmits(["hide"]);
|
|
const router = useRouter();
|
|
const token = useCookie("token");
|
|
|
|
const show = () => {
|
|
popup.value.hide();
|
|
if (token.value) router.push("/checkout/cart");
|
|
else router.push("/auth/login?redirect=/checkout/cart");
|
|
};
|
|
const remove = async (data) => {
|
|
await cart.update(data);
|
|
if (cart.count < 1) popup.value.hide();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-cart-list {
|
|
box-shadow: 0px 2px 10px 0px rgba(0, 75, 130, 0.16);
|
|
@apply rtl w-[30.9rem] h-[40.6rem] flex flex-col gap-5 py-6 pl-2 bg-white rounded-2xl border overflow-hidden relative;
|
|
|
|
& > h3 {
|
|
@apply text-primary-700 text-[0.9em] font-medium font-vazir mb-2.5 mr-8 ml-6;
|
|
}
|
|
|
|
& > div {
|
|
@apply overflow-y-auto h-[29.8rem];
|
|
|
|
ul {
|
|
@apply w-full flex py-3 pr-8 pl-4 flex-col gap-3 items-center;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
& > button {
|
|
@apply bg-primary-600 border-primary-600 mr-8 ml-6 text-xl font-bold font-vazir #{!important};
|
|
}
|
|
|
|
&::before {
|
|
content: " ";
|
|
box-shadow: 0px -3px 16px 0px rgba(7, 50, 115, 0.16);
|
|
@apply absolute inset-x-0 -bottom-3 h-28 z-0;
|
|
}
|
|
}
|
|
</style>
|