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

updated style and fixed update quantity bug

Browse Source
This commit is contained in:
Mamalizz
2025-03-18 16:21:43 +03:30
parent e065e6381a
commit adc212638e
1 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/cart/index/CartItem.vue
+33 -31
View File
@@ -92,7 +92,7 @@ watch(
() => debouncedCounter.value,
(nv) => {
addCartItem(
{ id: data.value.id, quantity: nv },
{ id: data.value.product.id, quantity: nv },
{
onSuccess: () => {
invalidateCart();
@@ -116,20 +116,10 @@ watch(
<li
class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50 overflow-hidden relative"
>
<img
src="/logo.png"
class="absolute -top-5 -left-5 rotate-[135deg] size-28"
/>
<div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
<Skeleton
v-if="cartImageIsLoading"
class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
/>
<div class="flex items-start justify-start w-full gap-2.5 lg:gap-4">
<div
v-else
class="size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
v-if="!cartImageIsLoading"
class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
>
<img
:src="data.product.image"
@@ -137,34 +127,42 @@ watch(
alt="product"
/>
</div>
<Skeleton
v-else
class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
/>
<div class="flex flex-col w-full gap-4">
<span class="font-semibold typo-sub-h-sm text-slate-600">
{{ data.product.category }}
</span>
<div class="flex items-center justify-start gap-3">
<span class="font-semibold typo-sub-h-xl text-black">
{{ data.product.title }}
<div class="flex flex-col w-full gap-3 lg:gap-4">
<div class="flex items-center justify-between gap-3">
<span
class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600"
>
{{ data.product.category }}
</span>
<div
v-if="data.product.discount > 0"
class="text-white bg-blue-500 px-4 py-2 text-xs rounded-full flex items-center gap-1"
class="text-white bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[10px] lg:text-xs rounded-full flex items-center gap-1"
>
<Icon name="bi:percent" class="size-4" />
{{ data.product.discount }}
% تخفیف
تخفیف
</div>
</div>
<span
class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black"
>
{{ data.product.title }}
</span>
<div class="flex items-center justify-start gap-1.5">
<div
v-if="!!data.product.color"
class="px-3 py-1 rounded-full border border-slate-200 text-sm flex-center gap-1.5"
class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm flex-center gap-1.5"
>
<span> رنگ </span>
<span
class="!size-4 shadow-black/30 shadow-inner rounded-full"
class="size-3 lg:!size-4 shadow-black/30 shadow-inner rounded-full"
:style="{
backgroundColor: `${data.product.color}`,
}"
@@ -176,7 +174,7 @@ watch(
v-for="(variant, index) in data.product
.product_attributes"
:index="index"
class="px-3 py-1 rounded-full border border-slate-200 text-sm"
class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
>
{{ variant.value }}
</span>
@@ -249,7 +247,7 @@ watch(
<div class="flex items-center">
<button
@click="handleIncreaseQuantity"
class="border size-10 flex-center rounded-100 border-slate-300"
class="border size-7 p-1 lg:size-10 flex-center rounded-50 border-slate-300"
:class="
deleteCartItemIsPending ? 'pointer-events-none' : ''
"
@@ -257,11 +255,13 @@ watch(
<Icon name="bi:plus" class="**:stroke-slate-800" />
</button>
<div class="size-10 text-[1.125rem] flex-center">1</div>
<div class="size-10 text-sm flex-center">
{{ counter }}
</div>
<button
@click="handleDecreaseQuantity"
class="border size-10 flex-center rounded-100 border-slate-300"
class="border size-7 lg:size-10 p-1 flex-center rounded-50 border-slate-300"
:class="
deleteCartItemIsPending ? 'pointer-events-none' : ''
"
@@ -279,7 +279,9 @@ watch(
</button>
</div>
<span class="text-[1.125rem] text-slate-900 font-semibold">
<span
class="text-sm lg:text-[1.125rem] text-slate-900 font-semibold"
>
{{ data.product.price }}
</span>
</div>