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 counter = ref(data.value.quantity);
const debouncedCounter = refDebounced(counter, 700);
const debouncedCounter = refDebounced(counter, 500);
const { isLoading: cartImageIsLoading } = useImage({
src: data.value.product.image,
@@ -34,8 +34,7 @@ const { isLoading: cartImageIsLoading } = useImage({
// queries
const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } =
useDeleteCartItem();
const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } = useDeleteCartItem();
const { mutateAsync: addCartItem } = useAddCartItem();
@@ -96,6 +95,7 @@ watch(
{
onSuccess: () => {
invalidateCart();
queryClient.refetchQueries({ queryKey: [QUERY_KEYS.product, data.value.product.id] });
},
onError: () => {
invalidateCart();
@@ -134,24 +134,23 @@ watch(
<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"
>
<span class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600">
{{ data.product.category }}
</span>
<div
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"
>
<Icon name="bi:percent" class="size-4" />
<Icon
name="bi:percent"
class="size-4"
/>
{{ data.discount }}
تخفیف
</div>
</div>
<span
class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black"
>
<span class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black">
{{ data.product.title }}
</span>
@@ -171,8 +170,7 @@ watch(
</div>
<span
v-if="data.product.product_attributes.length > 0"
v-for="(variant, index) in data.product
.product_attributes"
v-for="(variant, index) in data.product.product_attributes"
:index="index"
class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
>
@@ -180,20 +178,17 @@ watch(
</span>
</div>
<div
class="items-center justify-between hidden w-full lg:flex -mt-1"
>
<div class="items-center justify-between hidden w-full lg:flex -mt-1">
<div class="flex items-center">
<button
@click="handleIncreaseQuantity"
class="border size-10 flex-center rounded-100 border-slate-300"
:class="
deleteCartItemIsPending
? 'pointer-events-none'
: ''
"
:class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
>
<Icon name="bi:plus" class="**:stroke-slate-800" />
<Icon
name="bi:plus"
class="**:stroke-slate-800"
/>
</button>
<div class="size-10 flex-center">{{ counter }}</div>
@@ -201,19 +196,11 @@ watch(
<button
@click="handleDecreaseQuantity"
class="border size-10 flex-center rounded-100 border-slate-300"
:class="
deleteCartItemIsPending
? 'pointer-events-none'
: ''
"
:class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
>
<Icon
v-if="counter == 1"
:name="
deleteCartItemIsPending
? 'svg-spinners:3-dots-bounce'
: 'bi:trash'
"
:name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
class="**:fill-red-700"
/>
<Icon
@@ -232,9 +219,7 @@ watch(
>
{{ data.price }}
</span>
<span
class="typo-p-xl relative flex-center w-fit font-medium"
>
<span class="typo-p-xl relative flex-center w-fit font-medium">
{{ data.final_price }}
</span>
</div>
@@ -248,11 +233,12 @@ watch(
<button
@click="handleIncreaseQuantity"
class="border size-7 p-1 lg:size-10 flex-center rounded-50 border-slate-300"
:class="
deleteCartItemIsPending ? 'pointer-events-none' : ''
"
:class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
>
<Icon name="bi:plus" class="**:stroke-slate-800" />
<Icon
name="bi:plus"
class="**:stroke-slate-800"
/>
</button>
<div class="size-10 text-sm flex-center">
@@ -262,20 +248,18 @@ watch(
<button
@click="handleDecreaseQuantity"
class="border size-7 lg:size-10 p-1 flex-center rounded-50 border-slate-300"
:class="
deleteCartItemIsPending ? 'pointer-events-none' : ''
"
:class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
>
<Icon
v-if="counter == 1"
:name="
deleteCartItemIsPending
? 'svg-spinners:3-dots-bounce'
: 'bi:trash'
"
:name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
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>
</div>