Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop
This commit is contained in:
Mamalizz
@@ -1,16 +1,15 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
maxQuantity: number;
|
||||
quantity: number;
|
||||
}
|
||||
showSlider: boolean;
|
||||
};
|
||||
|
||||
// props
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -22,11 +21,11 @@ defineProps<Props>();
|
||||
</span>
|
||||
عدد از این محصول موجود است
|
||||
</p>
|
||||
<div class="h-2 rounded-full relative bg-slate-200 w-full">
|
||||
<div v-if="showSlider" class="h-2 rounded-full relative bg-slate-200 w-full">
|
||||
<div
|
||||
:style="{ width: `${quantity * (100 / maxQuantity)}%` }"
|
||||
class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -7,9 +7,7 @@ import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
|
||||
|
||||
// provide / inject
|
||||
|
||||
const { selectedVariant } = inject(
|
||||
"productVariant"
|
||||
) as ProductVariantProvideType;
|
||||
const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
|
||||
|
||||
// state
|
||||
|
||||
@@ -46,15 +44,14 @@ watch(
|
||||
);
|
||||
|
||||
watch(selectedVariant, (newValue) => {
|
||||
quantity.value = newValue!.cart_quantity;
|
||||
quantity.value = newValue!.cart_quantity === 0 ? 1 : newValue!.cart_quantity;
|
||||
});
|
||||
|
||||
// lifecycle
|
||||
|
||||
onMounted(() => {
|
||||
quantity.value = selectedVariant.value!.cart_quantity;
|
||||
quantity.value = selectedVariant.value!.cart_quantity === 0 ? 1 : selectedVariant.value!.cart_quantity;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -65,14 +62,20 @@ onMounted(() => {
|
||||
:max="selectedVariant!.in_stock"
|
||||
>
|
||||
<NumberFieldIncrement class="cursor-pointer">
|
||||
<Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
|
||||
<Icon
|
||||
name="ci:plus"
|
||||
class="**:stroke-slate-500 size-5"
|
||||
/>
|
||||
</NumberFieldIncrement>
|
||||
<div class="relative">
|
||||
<div
|
||||
:class="isAddCartItemPending ? 'opacity-100' : 'opacity-0'"
|
||||
class="w-[40px] h-[25px] flex-center transition-all absolute bg-white"
|
||||
>
|
||||
<Icon :name="'svg-spinners:180-ring-with-bg'" class="size-[25px]" />
|
||||
<Icon
|
||||
:name="'svg-spinners:180-ring-with-bg'"
|
||||
class="size-[25px]"
|
||||
/>
|
||||
</div>
|
||||
<NumberFieldInput
|
||||
@input="onInput"
|
||||
@@ -81,7 +84,10 @@ onMounted(() => {
|
||||
/>
|
||||
</div>
|
||||
<NumberFieldDecrement class="cursor-pointer">
|
||||
<Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
|
||||
<Icon
|
||||
name="ci:minus"
|
||||
class="**:stroke-slate-500 size-5"
|
||||
/>
|
||||
</NumberFieldDecrement>
|
||||
</NumberFieldRoot>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
@@ -7,33 +6,49 @@ type Props = {
|
||||
title: string;
|
||||
color: string;
|
||||
price: string;
|
||||
}
|
||||
};
|
||||
|
||||
// props
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const { picture, price, title, color } = toRefs(props);
|
||||
|
||||
// methods
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
|
||||
<div
|
||||
class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 gap-4 bg-white rounded-150"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
|
||||
<NuxtImg :src="picture" :alt="title" class="object-cover absolute" />
|
||||
<NuxtImg
|
||||
:src="picture"
|
||||
:alt="title"
|
||||
class="object-cover absolute"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="typo-sub-h-md text-black">{{ title }}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="typo-p-sm text-slate-500">رنگ</span>
|
||||
<ColorCircle class="!size-5" :style="{backgroundColor: color}" />
|
||||
<ColorCircle
|
||||
class="!size-5"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
</div>
|
||||
<span class="typo-p-md text-black">{{ price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button class="rounded-full max-sm:h-[45px]">
|
||||
افزودن
|
||||
<span class="max-sm:hidden">به سبد</span>
|
||||
<Button
|
||||
@click="scrollToTop"
|
||||
class="rounded-full max-sm:h-[45px]"
|
||||
>
|
||||
مشاهده
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -139,7 +139,7 @@ watch(
|
||||
<Transition name="fade" :duration="250">
|
||||
<NuxtImg
|
||||
v-if="showHeymlzAnimation"
|
||||
src="/img/heymlz/heymlz-pulling.gif"
|
||||
src="/img/heymlz/heymlz-pullingg.gif"
|
||||
class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
|
||||
:style="{
|
||||
left: `${clipPathPercent}%`,
|
||||
|
||||
@@ -37,13 +37,10 @@ const addItemToCart = async () => {
|
||||
|
||||
// watch
|
||||
|
||||
watch(
|
||||
() => selectedVariantId.value,
|
||||
(newId) => {
|
||||
const newVariant = product.value!.variants.find((variant) => variant.id === newId)!;
|
||||
changeSelectedVariant(newVariant);
|
||||
}
|
||||
);
|
||||
watch([selectedVariantId, product], ([selectedVariantId, product]) => {
|
||||
const newVariant = product!.variants.find((variant) => variant.id === selectedVariantId)!;
|
||||
changeSelectedVariant(newVariant);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => selectedColor.value,
|
||||
@@ -193,6 +190,7 @@ watch(
|
||||
|
||||
<div class="w-full flex flex-col gap-6 mt-10">
|
||||
<RemainQuantity
|
||||
:showSlider="selectedVariant!.cart_quantity === 0"
|
||||
:maxQuantity="selectedVariant!.in_stock"
|
||||
:quantity="selectedQuantity"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user