Updated
This commit is contained in:
marzban-dev
@@ -1,5 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// import
|
||||
|
||||
import useGetProduct from "~/composables/api/product/useGetProduct";
|
||||
@@ -31,61 +30,78 @@ const { selectedVariant, changeSelectedVariant } = inject("productVariant") as P
|
||||
const addItemToCart = async () => {
|
||||
await addCartItem({
|
||||
id: selectedVariant.value!.id,
|
||||
quantity: selectedQuantity.value
|
||||
quantity: selectedQuantity.value,
|
||||
});
|
||||
await refetchProduct();
|
||||
};
|
||||
|
||||
// watch
|
||||
|
||||
watch(() => selectedVariantId.value, (newId) => {
|
||||
const newVariant = product.value!.variants.find(variant => variant.id === newId)!;
|
||||
changeSelectedVariant(newVariant);
|
||||
});
|
||||
watch(
|
||||
() => selectedVariantId.value,
|
||||
(newId) => {
|
||||
const newVariant = product.value!.variants.find((variant) => variant.id === newId)!;
|
||||
changeSelectedVariant(newVariant);
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => selectedColor.value, (newValue) => {
|
||||
const filteredVariants = product.value!.variants.filter(v => v.color === newValue);
|
||||
selectedVariantId.value = filteredVariants[0].id;
|
||||
selectedVariant.value = filteredVariants[0];
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
|
||||
watch(() => selectedVariant.value!, (newValue) => {
|
||||
selectedQuantity.value = 1;
|
||||
selectedSlide.value = newValue.images[0].id;
|
||||
});
|
||||
watch(
|
||||
() => selectedColor.value,
|
||||
(newValue) => {
|
||||
const filteredVariants = product.value!.variants.filter((v) => v.color === newValue);
|
||||
selectedVariantId.value = filteredVariants[0].id;
|
||||
selectedVariant.value = filteredVariants[0];
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => selectedVariant.value!,
|
||||
(newValue) => {
|
||||
selectedQuantity.value = 1;
|
||||
selectedSlide.value = newValue.images[0].id;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex max-lg:flex-col gap-12 xl:gap-16 container pt-[5rem] pb-28">
|
||||
<div class="flex flex-col gap-3 lg:hidden">
|
||||
<NuxtLink to="#" class="typo-label-sm"> {{ product!.category.name }}</NuxtLink>
|
||||
<h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2"> {{ product!.name }} </h1>
|
||||
<NuxtLink
|
||||
to="#"
|
||||
class="typo-label-sm"
|
||||
>
|
||||
{{ product!.category.name }}</NuxtLink
|
||||
>
|
||||
<h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
|
||||
{{ product!.name }}
|
||||
</h1>
|
||||
<div class="flex w-full items-center justify-between h-[85px]">
|
||||
<div class="flex items-end gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span
|
||||
v-if="selectedVariant!.discount > 0"
|
||||
class="typo-p-lg relative flex-center w-fit"
|
||||
class="typo-p-md sm:typo-p-lg relative flex-center w-fit"
|
||||
:class="'after:w-full after:h-[2px] after:bg-black after:absolute'"
|
||||
>
|
||||
{{ selectedVariant!.price }}
|
||||
</span>
|
||||
<span
|
||||
class="typo-p-2xl relative flex-center w-fit font-medium"
|
||||
>
|
||||
<span class="typo-p-md sm:typo-p-2xl relative flex-center w-fit font-medium">
|
||||
{{ selectedVariant!.discount > 0 ? selectedVariant!.price : selectedVariant!.price }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedVariant!.discount > 0"
|
||||
class="text-white bg-blue-500 mb-1 px-4 py-2 text-xs rounded-full flex items-center gap-1"
|
||||
class="text-white bg-blue-500 mb-1 px-3 sm:px-4 py-1.5 sm:py-2 text-xs rounded-full flex items-center gap-1"
|
||||
>
|
||||
<Icon name="material-symbols:percent" class="size-4" />
|
||||
<Icon
|
||||
name="material-symbols:percent"
|
||||
class="size-3.5 sm:size-4"
|
||||
/>
|
||||
{{ selectedVariant!.discount }}
|
||||
درصد تخفیف
|
||||
<span class="max-sm:hidden"> تخفیف درصد </span>
|
||||
</div>
|
||||
</div>
|
||||
<Rating :rate="3" />
|
||||
@@ -103,7 +119,9 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
>
|
||||
{{ product!.category.name }}
|
||||
</NuxtLink>
|
||||
<h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden"> {{ product!.name }} </h1>
|
||||
<h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden">
|
||||
{{ product!.name }}
|
||||
</h1>
|
||||
<div class="flex w-full items-center justify-between h-[85px] max-lg:hidden">
|
||||
<div class="flex items-end gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@@ -114,9 +132,7 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
>
|
||||
{{ selectedVariant!.price }}
|
||||
</span>
|
||||
<span
|
||||
class="typo-p-2xl relative flex-center w-fit font-medium"
|
||||
>
|
||||
<span class="typo-p-2xl relative flex-center w-fit font-medium">
|
||||
{{ selectedVariant!.discount > 0 ? selectedVariant!.price : selectedVariant!.price }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -124,37 +140,42 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
v-if="selectedVariant!.discount > 0"
|
||||
class="text-white bg-blue-500 mb-1 px-4 py-2 text-xs rounded-full flex items-center gap-1"
|
||||
>
|
||||
<Icon name="material-symbols:percent" class="size-4" />
|
||||
<Icon
|
||||
name="material-symbols:percent"
|
||||
class="size-4"
|
||||
/>
|
||||
{{ selectedVariant!.discount }}
|
||||
<span class="max-sm:hidden">درصد</span>
|
||||
تخفیف
|
||||
</div>
|
||||
|
||||
<Rating :rate="3" class="sm:hidden" />
|
||||
|
||||
<Rating
|
||||
:rate="3"
|
||||
class="sm:hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Rating :rate="3" class="max-sm:hidden" />
|
||||
|
||||
<Rating
|
||||
:rate="3"
|
||||
class="max-sm:hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="py-8 typo-p-md text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
|
||||
class="py-8 typo-sm max-sm:leading-[175%] sm:typo-p-md text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
|
||||
v-html="product!.description"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="typo-p-lg">
|
||||
تنوع رنگی :
|
||||
</span>
|
||||
<span class="typo-md sm:typo-p-lg"> تنوع رنگی : </span>
|
||||
<div class="flex items-center gap-4 py-4">
|
||||
<ColorCircle
|
||||
v-for="color in product!.colors"
|
||||
:key="color"
|
||||
@click="selectedColor = color"
|
||||
selectable
|
||||
:selected="selectedColor === color "
|
||||
:style="{backgroundColor: color}"
|
||||
:selected="selectedColor === color"
|
||||
:style="{ backgroundColor: color }"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
@@ -162,7 +183,7 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
|
||||
<div class="flex items-center gap-6 flex-wrap">
|
||||
<ProductVariant
|
||||
@click="variant.in_stock > 0 ? selectedVariantId = variant.id : undefined"
|
||||
@click="variant.in_stock > 0 ? (selectedVariantId = variant.id) : undefined"
|
||||
v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
|
||||
:key="variant.id"
|
||||
:variantDetail="variant"
|
||||
@@ -171,7 +192,6 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
</div>
|
||||
|
||||
<div class="w-full flex flex-col gap-6 mt-10">
|
||||
|
||||
<RemainQuantity
|
||||
:maxQuantity="selectedVariant!.in_stock"
|
||||
:quantity="selectedQuantity"
|
||||
@@ -184,24 +204,31 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
@click="addItemToCart"
|
||||
:loading="isAddCartItemPending"
|
||||
:disabled="isAddCartItemPending"
|
||||
class="w-full rounded-full"
|
||||
class="w-full rounded-full max-sm:h-[48px]"
|
||||
end-icon="ci:plus"
|
||||
>
|
||||
|
||||
افزودن به سبد خرید
|
||||
</Button>
|
||||
<NuxtLink v-else to="/cart" class="w-full">
|
||||
<NuxtLink
|
||||
v-else
|
||||
to="/cart"
|
||||
class="w-full"
|
||||
>
|
||||
<Button
|
||||
class="w-full rounded-full h-full"
|
||||
class="w-full rounded-full h-full max-sm:h-[48px]"
|
||||
end-icon="ci:cart"
|
||||
>
|
||||
مشاهده در سبد خرید
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<NuxtLink v-else to="/signin" class="w-full">
|
||||
<NuxtLink
|
||||
v-else
|
||||
to="/signin"
|
||||
class="w-full"
|
||||
>
|
||||
<Button
|
||||
class="w-full rounded-full h-full"
|
||||
class="w-full rounded-full h-full max-sm:h-[48px]"
|
||||
end-icon="ci:user"
|
||||
>
|
||||
ابتدا وارد شوید
|
||||
@@ -216,13 +243,11 @@ watch(() => selectedVariant.value!, (newValue) => {
|
||||
/>
|
||||
|
||||
<UpdateQuantity v-else />
|
||||
|
||||
</div>
|
||||
|
||||
<InfoCard />
|
||||
|
||||
<Share />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user