mohadese-nm
96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
|
<div class="buy">
|
|
<p>
|
|
<span>{{ $t("priceForYou") }}</span>
|
|
<small v-if="boxSeller">
|
|
{{ $t("everyBox") }}
|
|
</small>
|
|
</p>
|
|
<div>
|
|
<span v-if="specialPrice">
|
|
{{ numberFormat(specialPrice) }}
|
|
<small>{{ $t("priceUnit") }}</small>
|
|
</span>
|
|
|
|
<span>
|
|
{{ numberFormat(price) }}
|
|
<small v-if="!specialPrice">
|
|
{{ $t("priceUnit") }}
|
|
</small>
|
|
</span>
|
|
|
|
</div>
|
|
<CartQuantity v-if="cart.find(id)" v-model="quantity" :range="orderRange" />
|
|
<Button v-else :label="$t('addToCart')" :loading="cart.loading" @click="quantity = orderRange.min" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const product = inject("data");
|
|
const { id, orderRange, boxSeller, specialPrice, price } = product;
|
|
|
|
const cart = useCartStore();
|
|
const quantity = computed({
|
|
get: () => cart.find(id)?.quantity || 0,
|
|
set: (v) => cart.update(product, v),
|
|
});
|
|
// const productAddedToCart = computed(() => {
|
|
// cart.items.find((item) => item.product._id == id);
|
|
// });
|
|
// console.log(productAddedToCart);
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
|
|
number
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product .buy {
|
|
@apply flex flex-wrap justify-between items-center px-6 pt-1 pb-2.5 lg:gap-6 shadow-[0px_-3px_5px_#00000005];
|
|
@apply fixed inset-x-0 bottom-0 h-[6.2rem] bg-white shadow border-t border-[#F1F2F4] lg:h-auto;
|
|
@apply z-10 lg:z-0 lg:static lg:bg-transparent lg:shadow-none lg:border-t-0 lg:p-0 lg:gap-y-6 lg:mt-auto;
|
|
|
|
p {
|
|
@apply w-full lg:w-max text-[#7F7F7F] font-medium font-vazir pr-1.5 lg:p-0;
|
|
|
|
span {
|
|
@apply text-xs lg:text-xl leading-[2.1rem];
|
|
}
|
|
|
|
small {
|
|
@apply text-[0.7em] lg:text-base leading-[1.9rem];
|
|
}
|
|
}
|
|
|
|
& > div:nth-of-type(1) {
|
|
@apply flex flex-col justify-end gap-2 max-lg:order-last;
|
|
|
|
span {
|
|
@apply text-left text-[#333] text-sm font-bold lg:text-[1.6em] font-vazir;
|
|
}
|
|
|
|
small {
|
|
@apply text-xs font-medium lg:hidden;
|
|
}
|
|
|
|
&:has(span:nth-child(2)) {
|
|
span:first-child {
|
|
@apply max-lg:-mt-8;
|
|
}
|
|
|
|
span:last-child {
|
|
@apply line-through text-xs lg:text-base text-gray-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > button {
|
|
@apply w-[10.8rem] h-[2.6rem] lg:w-[25.1rem] lg:h-14 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply text-xs lg:text-xl font-bold font-iran-sans;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|