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

changed some styles

Browse Source
This commit is contained in:
Mamalizz
2025-04-18 19:50:25 +03:30
parent 31ee23406a
commit d2eacef876
1 changed files with 31 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/cart/index/CartItem.vue
+31 -47
View File
@@ -26,7 +26,7 @@ const { $queryClient: queryClient } = useNuxtApp();
const { addToast } = useToast(); const { addToast } = useToast();
const counter = ref(data.value.quantity); const counter = ref(data.value.quantity);
const debouncedCounter = refDebounced(counter, 700); const debouncedCounter = refDebounced(counter, 500);
const { isLoading: cartImageIsLoading } = useImage({ const { isLoading: cartImageIsLoading } = useImage({
src: data.value.product.image, src: data.value.product.image,
@@ -34,8 +34,7 @@ const { isLoading: cartImageIsLoading } = useImage({
// queries // queries
const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } = const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } = useDeleteCartItem();
useDeleteCartItem();
const { mutateAsync: addCartItem } = useAddCartItem(); const { mutateAsync: addCartItem } = useAddCartItem();
@@ -96,6 +95,7 @@ watch(
{ {
onSuccess: () => { onSuccess: () => {
invalidateCart(); invalidateCart();
queryClient.refetchQueries({ queryKey: [QUERY_KEYS.product, data.value.product.id] });
}, },
onError: () => { onError: () => {
invalidateCart(); invalidateCart();
@@ -134,24 +134,23 @@ watch(
<div class="flex flex-col w-full gap-3 lg:gap-4"> <div class="flex flex-col w-full gap-3 lg:gap-4">
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
<span <span class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600">
class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600"
>
{{ data.product.category }} {{ data.product.category }}
</span> </span>
<div <div
v-if="data.discount > 0" v-if="data.discount > 0"
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" 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" /> <Icon
name="bi:percent"
class="size-4"
/>
{{ data.discount }} {{ data.discount }}
تخفیف تخفیف
</div> </div>
</div> </div>
<span <span class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black">
class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black"
>
{{ data.product.title }} {{ data.product.title }}
</span> </span>
@@ -171,8 +170,7 @@ watch(
</div> </div>
<span <span
v-if="data.product.product_attributes.length > 0" v-if="data.product.product_attributes.length > 0"
v-for="(variant, index) in data.product v-for="(variant, index) in data.product.product_attributes"
.product_attributes"
:index="index" :index="index"
class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm" class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
> >
@@ -180,20 +178,17 @@ watch(
</span> </span>
</div> </div>
<div <div class="items-center justify-between hidden w-full lg:flex -mt-1">
class="items-center justify-between hidden w-full lg:flex -mt-1"
>
<div class="flex items-center"> <div class="flex items-center">
<button <button
@click="handleIncreaseQuantity" @click="handleIncreaseQuantity"
class="border size-10 flex-center rounded-100 border-slate-300" class="border size-10 flex-center rounded-100 border-slate-300"
:class=" :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
deleteCartItemIsPending
? 'pointer-events-none'
: ''
"
> >
<Icon name="bi:plus" class="**:stroke-slate-800" /> <Icon
name="bi:plus"
class="**:stroke-slate-800"
/>
</button> </button>
<div class="size-10 flex-center">{{ counter }}</div> <div class="size-10 flex-center">{{ counter }}</div>
@@ -201,19 +196,11 @@ watch(
<button <button
@click="handleDecreaseQuantity" @click="handleDecreaseQuantity"
class="border size-10 flex-center rounded-100 border-slate-300" class="border size-10 flex-center rounded-100 border-slate-300"
:class=" :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
deleteCartItemIsPending
? 'pointer-events-none'
: ''
"
> >
<Icon <Icon
v-if="counter == 1" v-if="counter == 1"
:name=" :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
deleteCartItemIsPending
? 'svg-spinners:3-dots-bounce'
: 'bi:trash'
"
class="**:fill-red-700" class="**:fill-red-700"
/> />
<Icon <Icon
@@ -232,9 +219,7 @@ watch(
> >
{{ data.price }} {{ data.price }}
</span> </span>
<span <span class="typo-p-xl relative flex-center w-fit font-medium">
class="typo-p-xl relative flex-center w-fit font-medium"
>
{{ data.final_price }} {{ data.final_price }}
</span> </span>
</div> </div>
@@ -248,11 +233,12 @@ watch(
<button <button
@click="handleIncreaseQuantity" @click="handleIncreaseQuantity"
class="border size-7 p-1 lg:size-10 flex-center rounded-50 border-slate-300" class="border size-7 p-1 lg:size-10 flex-center rounded-50 border-slate-300"
:class=" :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
deleteCartItemIsPending ? 'pointer-events-none' : ''
"
> >
<Icon name="bi:plus" class="**:stroke-slate-800" /> <Icon
name="bi:plus"
class="**:stroke-slate-800"
/>
</button> </button>
<div class="size-10 text-sm flex-center"> <div class="size-10 text-sm flex-center">
@@ -262,20 +248,18 @@ watch(
<button <button
@click="handleDecreaseQuantity" @click="handleDecreaseQuantity"
class="border size-7 lg:size-10 p-1 flex-center rounded-50 border-slate-300" class="border size-7 lg:size-10 p-1 flex-center rounded-50 border-slate-300"
:class=" :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
deleteCartItemIsPending ? 'pointer-events-none' : ''
"
> >
<Icon <Icon
v-if="counter == 1" v-if="counter == 1"
:name=" :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
deleteCartItemIsPending
? 'svg-spinners:3-dots-bounce'
: 'bi:trash'
"
class="**:fill-red-700" class="**:fill-red-700"
/> />
<Icon v-else name="bi:dash" class="**:stroke-slate-800" /> <Icon
v-else
name="bi:dash"
class="**:stroke-slate-800"
/>
</button> </button>
</div> </div>