anahita-front/components/cart/Item.vue

<template>
    <div class="cart-item">
        <img :src="data.coverPath" />
        <div>
            <h2>{{ data.title }}</h2>
            <ul>
                <li v-for="(item, i) in items1" :key="i">
                    <i :class="`isax isax-${item.icon}`"></i>
                    <span v-for="(title, j) in item.title" :key="j">
                        {{ title }}
                    </span>
                </li>
            </ul>
            <div>
                <div>
                    <i v-for="i in 2" :key="i"></i>
                </div>
                <ul>
                    <li v-for="(item, i) in items2" :key="i">
                        <i :class="`isax isax-${item.icon}`"></i>
                        <span>{{ item.title }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div>
                <Chip>
                    <bdi>{{ quantity }} کارتن = {{ data.itemInBox * quantity }} عدد</bdi>
                </Chip>
                <CartQuantity v-model="quantity" :range="data.orderRange" />
            </div>
            <span>{{ numberFormat((data.specialPrice || data.price) * quantity) }} <small>تومان</small></span>
        </div>
    </div>
</template>

<script setup>
const { data } = defineProps(['data'])


const items1 = reactive([
    { title: ['فروشنده ' + data.shopID.shopName], icon: 'shop' },
    {
        title: [
            'خرید کارتنی', `حداقل ${data.orderRange?.min} کارتن`, `تعداد در کارتن: ${data.itemInBox} عدد`
        ],
        icon: 'd-square'
    },
    { title: [data.warranty], icon: 'shield-tick' },
    { title: ['موجود در انبار فروشنده'], icon: 'box-tick' }
])

const items2 = reactive([
    {
        title: 'ارسال از آناهیتا پس از دریافت از فروشنده', icon: 'box', primary: data.localSend
    },
    {
        title: 'ارسال از فروشنده پس از تایید نهایی 1-2 روز دیگر', icon: 'profile-circle', primary: !data.localSend
    }
])

const cart = useCartStore()
const quantity = computed({
    get: () => cart.find(data.id)?.quantity || 0,
    set: (v) => cart.update(data.id, v)
})

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>

<style lang="scss">
.cart-item {
    @apply w-auto flex flex-wrap justify-center items-center lg:flex-row lg:justify-between;
    @apply gap-9 lg:gap-10 lg:max-w-[63.1rem] lg:max-h-[19.8rem];

    &>img {
        @apply object-contain object-center;
        @apply w-40 h-40 lg:hidden xl:block;
        @apply lg:w-[13.4rem] lg:h-[13.4rem];
    }

    &>div:nth-of-type(1) {
        @apply flex flex-col gap-6;

        &>h2 {
            @apply text-[#333333] font-bold font-vazir text-base lg:text-xl;
        }

        &>ul {
            @apply flex flex-col font-vazir gap-5 lg:gap-4 lg:mt-2.5;

            li {
                @apply flex items-center text-zinc-800;
                @apply gap-[0.9rem] lg:gap-4 h-5 lg:h-7;

                i {
                    @apply text-xl lg:text-2xl;
                }

                span {
                    @apply relative pl-0.5 text-xs lg:text-lg whitespace-nowrap;

                    &:not(:last-child)::after {
                        @apply content-['_'] w-px lg:w-0.5 h-4 bg-[#E5E5E5] absolute;
                        @apply -left-1.5 top-0.5 lg:-left-2 lg:top-1.5;
                    }
                }
            }
        }

        div {
            @apply flex pr-0.5 lg:pr-[0.3rem] gap-4 lg:gap-6;

            div {
                @apply flex flex-col items-center justify-between relative;
                @apply h-[3.3rem] -mt-[0.2rem] pt-[0.4rem];
                @apply w-2.5 lg:h-[4.3rem] lg:pt-3.5 lg:-mt-1.5;

                i {
                    @apply w-2.5 h-2.5 rounded-full first:bg-primary-600 last:bg-[#E5E5E5] z-0;
                }

                &::before {
                    @apply content-['_'] absolute w-0.5 inset-y-0 bg-[#E5E5E5];
                }
            }

            ul {
                @apply flex flex-col font-vazir gap-4 lg:gap-5;

                li {
                    @apply flex gap-2 items-center h-[1.1rem] lg:h-[1.6rem];

                    i {
                        @apply text-primary-600 text-[1.1em] lg:text-xl;
                    }

                    span {
                        @apply text-zinc-500 text-[0.7em] lg:text-base;
                    }
                }
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply w-full flex justify-around items-center;
        @apply md:w-max md:flex-col-reverse md:items-end md:justify-between md:self-stretch;

        &>span {
            @apply whitespace-nowrap text-[#333333] font-bold font-vazir text-base lg:text-xl;

            small {
                @apply text-xs lg:text-inherit;
            }
        }

        &>div {
            @apply flex flex-col gap-4 flex-wrap justify-end;

            &>div:nth-of-type(1) {
                @apply bg-zinc-100 rounded-lg justify-center hidden lg:flex;
                @apply lg:h-10 lg:w-full lg:text-base;
            }
        }
    }
}
</style>