hossein-por-shop/frontend/pages/cart/delivery.vue

<script setup lang="ts">
// imports

import useGetAllAddress from "~/composables/api/account/useGetAllAddress";

// meta

definePageMeta({
    layout: "cart",
    middleware: ["check-is-logged-in", "check-has-cart-item"],
    pageTitle: "انتخاب آدرس",
    prevPage: { name: "cart", label: "سبد خرید" },
    nextPage: { name: "cart-checkout", label: "تسویه حساب" },
});

// types

type DeliveryData = {
    address: Address | null;
    deliveryMethod: {
        tipax: boolean;
        pishtaz: boolean;
        peyk: boolean;
    };
};

// state

const deliveryData = ref<DeliveryData>({
    address: null,
    deliveryMethod: {
        peyk: false,
        pishtaz: true,
        tipax: false,
    },
});

const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();

// methods

const handleSelectAddress = (address: Address) => {
    deliveryData.value.address = { ...address };
};
</script>

<template>
    <div class="flex flex-col w-full gap-5">
        <AddressItem />
        <div class="flex flex-col w-full gap-6">
            <span class="typo-sub-h-xl"> آدرس های شما </span>
            <div v-if="addressesIsLoading" class="flex flex-col gap-6 w-full">
                <Skeleton
                    v-for="i in 3"
                    class="w-full !h-[10rem] !rounded-xl"
                />
            </div>
            <template v-else>
                <div
                    v-if="!addresses?.length"
                    class="flex flex-grow w-full"
                    v-auto-animate
                >
                    <Placeholder
                        title="آدرسی یافت نشد :("
                        icon="bi:map"
                        class="!py-[2rem]"
                    />
                </div>

                <div v-else class="flex flex-col gap-6 w-full">
                    <AddressItem
                        v-for="(address, index) in addresses"
                        :key="index"
                        :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"
            >
                شیوه ارسال
            </span>

            <label
                @click="deliveryData.deliveryMethod.pishtaz = true"
                :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-black ring-offset-2 focus-within:border-black rounded-100 border-slate-200 bg-slate-50"
            >
                <div class="flex items-center justify-between w-full">
                    <div class="flex items-center gap-2.5">
                        <SwitchRoot
                            v-model="deliveryData.deliveryMethod.pishtaz"
                            :defaultValue="false"
                            class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-black border border-slate-200 data-[state=checked]:border-black/20 rounded-full relative transition-all focus-within:outline-none"
                        >
                            <SwitchThumb
                                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
                        >
                    </div>

                    <span class="text-slate-800 text-sm lg:text-[1rem]">
                        ۱۵۰٬۰۰۰ تومان
                    </span>
                </div>
            </label>

            <label
                class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-black ring-offset-2 focus-within:border-black rounded-100 border-slate-200 bg-slate-50"
            >
                <div class="flex items-center gap-2.5">
                    <SwitchRoot
                        v-model="deliveryData.deliveryMethod.tipax"
                        class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-black border border-slate-200 data-[state=checked]:border-black/20 rounded-full relative transition-all focus-within:outline-none"
                    >
                        <SwitchThumb
                            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
                    >
                </div>

                <span class="text-slate-800 text-sm lg:text-[1rem]">
                    ۱۵۰٬۰۰۰ تومان
                </span>
            </label>

            <label
                class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-black ring-offset-2 focus-within:border-black rounded-100 border-slate-200 bg-slate-50"
            >
                <div class="flex items-center gap-2.5">
                    <SwitchRoot
                        v-model="deliveryData.deliveryMethod.peyk"
                        class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-black border border-slate-200 data-[state=checked]:border-black/20 rounded-full relative transition-all focus-within:outline-none"
                    >
                        <SwitchThumb
                            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
                    >
                </div>

                <span class="text-slate-800 text-sm lg:text-[1rem]">
                    ۱۵۰٬۰۰۰ تومان
                </span>
            </label>
        </div>

        <div
            class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 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>

            <div
                class="grid w-full grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2"
            >
                <MinimalCartItem v-for="i in 9" />

                <div class="h-7 flex-center col-span-full lg:hidden">
                    <button class="gap-2 flex-center">
                        <span class="text-sm text-black"> مشاهده بیشتر </span>
                        <Icon name="bi:chevron-down" class="**:stroke-black" />
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped></style>