updated selecting address logic loading
This commit is contained in:
Mamalizz
@@ -2,9 +2,8 @@
|
||||
// imports
|
||||
|
||||
import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
|
||||
import useSetOrderAddress from "~/composables/api/orders/useSetOrderAddress";
|
||||
import { useToast } from "~/composables/global/useToast";
|
||||
import { QUERY_KEYS } from "~/constants";
|
||||
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
||||
|
||||
// meta
|
||||
|
||||
@@ -29,10 +28,9 @@ type DeliveryData = {
|
||||
|
||||
// queries
|
||||
|
||||
const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
|
||||
const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
|
||||
|
||||
const { mutateAsync: setOrderAddress, isPending: setOrderAddressIsPending } =
|
||||
useSetOrderAddress();
|
||||
const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
|
||||
|
||||
// computed
|
||||
|
||||
@@ -53,41 +51,6 @@ const deliveryData = ref<DeliveryData>({
|
||||
tipax: false,
|
||||
},
|
||||
});
|
||||
|
||||
// methods
|
||||
|
||||
const handleSelectAddress = (address: Address) => {
|
||||
deliveryData.value.address = { ...address };
|
||||
};
|
||||
|
||||
// watch
|
||||
|
||||
whenever(
|
||||
() => deliveryData.value.address,
|
||||
(nv) => {
|
||||
setOrderAddress(
|
||||
{ address_id: nv.id! },
|
||||
{
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [QUERY_KEYS.addresses],
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
addToast({
|
||||
message: "در انتخاب آدرس خطایی رخ داد",
|
||||
options: {
|
||||
description: "لطفا مجدد تلاش کنید",
|
||||
},
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -95,17 +58,20 @@ whenever(
|
||||
<AddressItem />
|
||||
<div class="flex flex-col w-full gap-6">
|
||||
<div class="flex items-center gap-3 py-3">
|
||||
<NuxtImg src="/img/location.gif" class="size-12 pb-1 -mr-3" />
|
||||
<span class="typo-sub-h-xl -mr-3"> آدرس های شما </span>
|
||||
<Icon
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
size="20"
|
||||
v-if="setOrderAddressIsPending"
|
||||
class="pb-0.5"
|
||||
<NuxtImg
|
||||
src="/img/location.gif"
|
||||
class="size-12 pb-1 -mr-3"
|
||||
/>
|
||||
<span class="typo-sub-h-xl -mr-3"> آدرس های شما </span>
|
||||
</div>
|
||||
<div v-if="addressesIsLoading" class="flex flex-col gap-6 w-full">
|
||||
<Skeleton v-for="i in 3" class="w-full !h-[8rem] !rounded-xl" />
|
||||
<div
|
||||
v-if="addressesIsLoading"
|
||||
class="flex flex-col gap-6 w-full"
|
||||
>
|
||||
<Skeleton
|
||||
v-for="i in 3"
|
||||
class="w-full !h-[8rem] !rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div
|
||||
@@ -120,34 +86,28 @@ whenever(
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col gap-6 w-full">
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col gap-6 w-full"
|
||||
>
|
||||
<AddressItem
|
||||
v-for="(address, index) in addresses"
|
||||
:key="index"
|
||||
:isSelected="address.id === cart?.address.id"
|
||||
:address="address"
|
||||
@select="handleSelectAddress"
|
||||
:isSelected="address.id == deliveryData.address?.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center w-full gap-4 my-3 p-4 border border-slate-200 rounded-xl bg-slate-50"
|
||||
>
|
||||
<span
|
||||
class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900"
|
||||
>
|
||||
<div class="flex flex-col items-center w-full gap-4 my-3 p-4 border border-slate-200 rounded-xl bg-slate-50">
|
||||
<span class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900">
|
||||
شیوه ارسال
|
||||
</span>
|
||||
|
||||
<label
|
||||
@click="deliveryData.deliveryMethod.pishtaz = true"
|
||||
:class="
|
||||
deliveryData.deliveryMethod.pishtaz
|
||||
? 'ring-black ring-offset-2 ring-2'
|
||||
: ''
|
||||
"
|
||||
:class="deliveryData.deliveryMethod.pishtaz ? 'ring-black ring-offset-2 ring-2' : ''"
|
||||
class="flex flex-col select-none w-full gap-2 p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-blue-500 ring-offset-2 focus-within:border-blue-500 rounded-100 border-slate-200 bg-slate-50"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
@@ -161,15 +121,10 @@ whenever(
|
||||
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
|
||||
/>
|
||||
</SwitchRoot>
|
||||
<span
|
||||
class="w-full text-slate-800 text-sm lg:text-[1rem]"
|
||||
>پست پیشتاز</span
|
||||
>
|
||||
<span class="w-full text-slate-800 text-sm lg:text-[1rem]">پست پیشتاز</span>
|
||||
</div>
|
||||
|
||||
<span class="text-slate-800 text-sm lg:text-[1rem]">
|
||||
۱۵۰٬۰۰۰ تومان
|
||||
</span>
|
||||
<span class="text-slate-800 text-sm lg:text-[1rem]"> ۱۵۰٬۰۰۰ تومان </span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@@ -185,14 +140,10 @@ whenever(
|
||||
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
|
||||
/>
|
||||
</SwitchRoot>
|
||||
<span class="w-full text-slate-800 text-sm lg:text-[1rem]"
|
||||
>تیپاکس</span
|
||||
>
|
||||
<span class="w-full text-slate-800 text-sm lg:text-[1rem]">تیپاکس</span>
|
||||
</div>
|
||||
|
||||
<span class="text-slate-800 text-sm lg:text-[1rem]">
|
||||
۱۵۰٬۰۰۰ تومان
|
||||
</span>
|
||||
<span class="text-slate-800 text-sm lg:text-[1rem]"> ۱۵۰٬۰۰۰ تومان </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user