heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
Mamalizz
2025-04-21 23:33:11 +03:30
parent 28d774892a 667ebaa482
commit e12853b107
19 changed files with 119 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/BlogPost.vue
+2 -2
View File
@@ -39,7 +39,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
<Tag
v-if="variant === 'lg'"
class="bg-success-500 absolute left-6 top-6 z-20"
class="bg-slate-950 absolute left-6 top-6 z-20"
>
{{ category.name }}
</Tag>
@@ -49,7 +49,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
class="aspect-square w-full rounded-150 overflow-hidden relative"
>
<Tag
class="bg-success-500 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
>
{{ category.name }}
</Tag>
frontend/components/global/Header.vue
+1 -1
View File
@@ -123,7 +123,7 @@ const isHomePage = computed(() => route.path === "/");
<div class="header-navbar-item flex items-center justify-end h-full">
<NuxtImg
src="/logo/logo-row.png"
src="/img/heymlz/heymlz-logomotion.gif"
class="h-2/3"
/>
</div>
frontend/components/global/LoadingOverlay.vue
+1 -1
View File
@@ -92,7 +92,7 @@ onMounted(() => {
src="/img/heymlz/heymlz-text-logo.png"
class="invert w-[250px]"
/>
<div class="bg-slate-800 w-[400px] h-1 rounded-full overflow-hidden">
<div class="bg-slate-800 w-[300px] sm:w-[400px] h-1 rounded-full overflow-hidden">
<div
class="bg-slate-100 h-full w-full transition-all duration-250"
:style="progressStyle"
frontend/components/global/product-detail/Slider.vue
+3 -1
View File
@@ -97,7 +97,9 @@ const changeSlide = (id: number) => {
:key="slide"
class="py-4"
>
<div class="brightness-[97%] bg-white aspect-square rounded-[12px] md:rounded-200 w-full" />
<div class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full">
<Icon name="ci:image-slash" class="size-[40px] sm:size-[60px] **:fill-black/20" />
</div>
</SwiperSlide>
</Swiper>
frontend/components/global/product/ProductCard.vue
+19 -26
View File
@@ -22,11 +22,17 @@ type Props = {
// props
const props = defineProps<Props>();
const { id } = toRefs(props);
const { id, colors } = toRefs(props);
// state
const { colorObject } = useImageColor(`#product-image-${id.value}`);
// computed
const limitedColors = computed(() => {
return colors.value.slice(0, 3);
});
</script>
<template>
@@ -51,33 +57,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
<div
class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
>
<Rate v-if="rate" :rate="rate" />
<Rate
v-if="rate"
:rate="rate"
/>
<Tag v-if="tag">
{{ tag }}
</Tag>
</div>
<div
:class="
colorObject?.isLight && !darkLayer
? 'text-black'
: 'text-white'
"
:class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
>
<div class="flex flex-col gap-2 items-start w-full">
<span
class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full"
>
<span class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
{{ title }}
</span>
<div
class="flex items-center justify-between w-full mt-1"
>
<div
class="flex items-center gap-2 @[280px]:mt-1"
>
<div class="flex items-center justify-between w-full mt-1">
<div class="flex items-center gap-2 @[280px]:mt-1">
<ColorCircle
v-for="color in colors"
v-for="color in limitedColors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 @[280px]:!size-6"
@@ -93,18 +92,12 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
</div>
</div>
<div
class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden"
>
<div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
<span class="typo-sub-h-sm w-full truncate">
{{ title }}
</span>
<div
class="@[280px]:hidden flex items-center justify-between w-full mt-1"
>
<span
class="typo-p-xs !font-semibold whitespace-nowrap"
>
<div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
<span class="typo-p-xs !font-semibold whitespace-nowrap">
{{ price }}
</span>
</div>
frontend/components/product/ProductComments.vue
+13 -1
View File
@@ -98,7 +98,19 @@ const limitedComments = computed(() => {
:username="'منصور مرزبان'"
/>
<div class="flex items-center justify-center w-full">
<div
class="h-[400px] lg:flex-grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
>
<NuxtImg
src="/img/heymlz/heymlz-contact-us.gif"
class="w-[200px] lg:w-[300px] translate-y-[-25px]"
/>
<span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>
</div>
<div
v-if="comments!.count > 0"
class="flex items-center justify-center w-full"
>
<Pagination
v-if="showMoreComments"
:total="comments!.count"
frontend/components/product/ProductHero.vue
+41 -28
View File
@@ -59,6 +59,9 @@ watch(
(newValue) => {
selectedQuantity.value = 1;
selectedSlide.value = newValue.images[0].id;
},
{
immediate: true,
}
);
</script>
@@ -180,7 +183,7 @@ watch(
<div class="flex items-center gap-6 flex-wrap">
<ProductVariant
@click="variant.in_stock > 0 ? (selectedVariantId = variant.id) : undefined"
@click="selectedVariantId = variant.id"
v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
:key="variant.id"
:variantDetail="variant"
@@ -190,57 +193,67 @@ watch(
<div class="w-full flex flex-col gap-6 mt-10">
<RemainQuantity
v-if="selectedVariant!.in_stock > 0"
:showSlider="selectedVariant!.cart_quantity === 0"
:maxQuantity="selectedVariant!.in_stock"
:quantity="selectedQuantity"
/>
<div class="w-full flex gap-3">
<template v-if="token">
<Button
v-if="selectedVariant!.cart_quantity === 0"
@click="addItemToCart"
:loading="isAddCartItemPending"
:disabled="isAddCartItemPending"
class="w-full rounded-full max-sm:h-[48px]"
end-icon="ci:plus"
>
افزودن به سبد خرید
</Button>
<template v-if="selectedVariant!.in_stock > 0">
<template v-if="token">
<Button
v-if="selectedVariant!.cart_quantity === 0"
@click="addItemToCart"
:loading="isAddCartItemPending"
:disabled="isAddCartItemPending"
class="w-full rounded-full max-sm:h-[48px]"
end-icon="ci:plus"
>
افزودن به سبد خرید
</Button>
<NuxtLink
v-else
to="/cart"
class="w-full"
>
<Button
class="w-full rounded-full h-full max-sm:h-[48px]"
end-icon="ci:cart"
>
مشاهده در سبد خرید
</Button>
</NuxtLink>
</template>
<NuxtLink
v-else
to="/cart"
to="/signin"
class="w-full"
>
<Button
class="w-full rounded-full h-full max-sm:h-[48px]"
end-icon="ci:cart"
end-icon="ci:user"
>
مشاهده در سبد خرید
ابتدا وارد شوید
</Button>
</NuxtLink>
</template>
<NuxtLink
<Button
v-else
to="/signin"
class="w-full"
class="w-full !cursor-default rounded-full h-full max-sm:h-[48px]"
end-icon="ci:cart"
>
<Button
class="w-full rounded-full h-full max-sm:h-[48px]"
end-icon="ci:user"
>
ابتدا وارد شوید
</Button>
</NuxtLink>
اتمام موجودی
</Button>
<QuantityCounter
v-if="selectedVariant!.cart_quantity === 0"
v-if="selectedVariant!.in_stock > 0 && selectedVariant!.cart_quantity === 0"
:disable="isAddCartItemPending"
v-model="selectedQuantity"
:max="selectedVariant!.in_stock"
/>
<UpdateQuantity v-else />
<UpdateQuantity v-else-if="selectedVariant!.in_stock > 0" />
</div>
<InfoCard />
frontend/components/product/ProductVariant.vue
+19 -31
View File
@@ -13,22 +13,12 @@ defineProps<Props>();
<template>
<div
:class="[
isSelected ? 'border-blue-500' : 'border-slate-300',
variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100',
]"
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
:class="isSelected ? 'border-blue-500' : 'border-slate-300'"
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4 cursor-pointer"
>
<div>
<div
:class="[
isSelected
? 'ring-blue-500 bg-blue-500'
: 'ring-slate-300 bg-slate-300',
variantDetail.in_stock > 0
? ''
: '!ring-slate-100 !bg-slate-300-100',
]"
:class="isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300'"
class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
></div>
</div>
@@ -38,27 +28,25 @@ defineProps<Props>();
{{ variantDetail.price }}
</span>
<div
v-if="variantDetail.discount > 0"
:class="
variantDetail.in_stock > 0
? 'bg-blue-500'
: 'bg-slate-400/60'
"
class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
v-if="variantDetail.in_stock > 0 && variantDetail.discount > 0"
class="text-white mb-1 px-3 py-1 bg-blue-500 text-xs rounded-full w-fit flex items-center justify-center gap-1"
>
<template v-if="variantDetail.in_stock > 0">
<Icon name="bi:percent" class="size-3.5" />
<span class="mt-px">
{{ variantDetail.discount }}
</span>
</template>
<span v-else class="mt-px"> اتمام موجودی </span>
<Icon
name="bi:percent"
class="size-3.5"
/>
<span class="mt-px">
{{ variantDetail.discount }}
</span>
</div>
<div
v-if="variantDetail.in_stock === 0"
class="text-slate-700 mb-1 px-3 py-1 bg-slate-200 text-xs rounded-full w-fit flex items-center justify-center gap-1"
>
اتمام موجودی
</div>
</div>
<div
class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4"
>
<div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
<!-- <div-->
<!-- class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
<!-- >-->