mohadese-nm
80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<div class="header-cart-list-item">
|
|
<div class="flex">
|
|
<img :src="product.coverPath" />
|
|
<div class="w-full">
|
|
<h3>{{ product.category[product.category.length - 1]?.name }}</h3>
|
|
<h2>{{ product.title }}</h2>
|
|
|
|
<span class="text-zinc-800 text-[0.9em] mt-auto">
|
|
<b>{{ numberFormat(product.specialPrice * productQuantity || product.price * productQuantity) }} </b>
|
|
{{ $t("priceUnit") }}
|
|
</span>
|
|
<div class="flex flex-row justify-start w-48">
|
|
<CartQuantity
|
|
v-if="cart.items[index]"
|
|
v-model="productQuantity"
|
|
:range="product.orderRange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <Button
|
|
icon="isax isax-trash"
|
|
severity="secondary"
|
|
text
|
|
@click="$emit('remove', product)"
|
|
/> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(["id", "index"]);
|
|
const cart = useCartStore();
|
|
console.log(props.id);
|
|
console.log(props.index);
|
|
const product = cart.items[props.index].product;
|
|
console.log(product);
|
|
const productQuantity = computed({
|
|
get: () => cart.items[props.index].quantity || 0,
|
|
set: (v) => cart.update(product, v),
|
|
});
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
|
|
number
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-cart-list-item {
|
|
box-shadow: 0px 2px 12px #004b8226;
|
|
@apply flex p-2 pl-6 w-[26.9rem] bg-white rounded-lg shadow border relative;
|
|
|
|
& > div {
|
|
& > span {
|
|
@apply absolute left-5 top-4 text-xs font-poppins;
|
|
}
|
|
|
|
img {
|
|
@apply w-[9.2rem] h-[9.2rem] p-2;
|
|
}
|
|
|
|
div:nth-of-type(1) {
|
|
@apply w-max gap-1 flex flex-col py-4 font-vazir mr-6;
|
|
|
|
h3 {
|
|
@apply text-right text-neutral-400 text-[0.9em] font-medium;
|
|
}
|
|
|
|
h2 {
|
|
@apply w-[13.1rem] h-14 text-right text-zinc-800 text-[1.1em] font-bold line-clamp-2;
|
|
}
|
|
& > div {
|
|
@apply flex flex-row mr-0 h-14 items-center #{!important};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|