anahita-front/pages/product/[uid].vue

<template>
    <NuxtLayout v-if="config" :name="device" :config="config">
        <main class="product">
            <AppBreadcrumbs :items="breadcrumbs" />
            <ProductWrapper />
            <template v-if="device == 'desktop'">
                <ProductSpecification />
                <ProductDescription />
                <ProductCommentWrapper />
            </template>
            <TabView v-else-if="device == 'mobile'">
                <TabPanel :header="t('specifications')">
                    <ProductSpecification />
                </TabPanel>
                <TabPanel :header="t('description')">
                    <ProductDescription />
                </TabPanel>
                <TabPanel :header="t('buyersComments')">
                    <ProductCommentTabView />
                </TabPanel>
            </TabView>
            <ProductSimilars />
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../../initialize/product'

const { meta, params, path } = useRoute()
const config = ref()

const { device, t } = inject('service')
const breadcrumbs = reactive([
    { name: t('asanMarket'), link: '/' },
    { name: t('products'), link: '/search' }
])

const { status, data, error } = await useFetch(`/api/products/uid/${params.uid}`)

if (status.value == 'success') {
    const product = data.value
    breadcrumbs.push(...product.category.map((cat) => {
        cat.link = '/search?category=' + cat.link
        return cat
    }))

    breadcrumbs.push({ name: product.title, link: path })

    const { options, ...others } = init(data.value)

    meta.init = others

    provide('data', data.value)
    provide('init', others)

    config.value = {
        mobile: { header: { options }, navigation: false },
    }
}
else throw createError(error.value)
</script>

<style lang="scss">
.product {
    @apply w-full flex flex-col pb-32;

    .breadcrumbs {
        @apply px-6 pt-6 lg:pt-14 justify-start;
    }

    .wrapper {
        @apply mt-12 lg:px-6;
    }

    .specification {
        @apply mt-[1.1rem] lg:mt-[4.9rem];
    }

    .description {
        @apply mt-9 lg:mt-[6rem];
    }

    .comments {
        @apply mt-[1.1rem] lg:mt-[10rem];
    }

    .similars {
        @apply mt-[2.6rem] lg:mt-[10rem];
    }

    .p-tabview {
        @apply mt-12 rtl;

        .p-tabview-nav-content {
            @apply px-6;

            .p-tabview-nav {
                @apply border-[#E5E5E5];

                .p-tabview-nav-link {
                    @apply h-[2.3rem] p-2.5 border-[#E5E5E5];

                    .p-tabview-title {
                        @apply text-zinc-800 text-[0.7em] font-medium font-vazir;
                    }
                }

                .p-tabview-header.p-highlight .p-tabview-nav-link {
                    @apply border-[#47B556];

                    .p-tabview-title {
                        @apply text-[#47B556];
                    }
                }

            }
        }

        .p-tabview-panels {
            @apply p-0;
        }
    }
}
</style>