marzban-dev
71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
// import
|
|
|
|
import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
|
|
import useGetProduct from "~/composables/api/product/useGetProduct";
|
|
import useGetComments from "~/composables/api/product/useGetComments";
|
|
import ProductsSlider from "~/components/global/product-detail/ProductsSlider.vue";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
|
|
const id = route.params.id as string | undefined;
|
|
const page = ref(1);
|
|
|
|
const { suspense: suspenseProduct, data: product } = useGetProduct(id);
|
|
// const { suspense: suspenseComments } = useGetComments(id, page);
|
|
|
|
useSeoMeta({
|
|
title: `محصول ${product.value?.name}`,
|
|
ogImage: product.value?.variants[0].images[0].image,
|
|
twitterImage: product.value?.variants[0].images[0].image,
|
|
ogDescription: product.value?.description,
|
|
twitterDescription: product.value?.description,
|
|
});
|
|
|
|
const selectedVariant = ref<ProductVariant>();
|
|
|
|
const showChatButton = ref(true);
|
|
|
|
// type
|
|
|
|
export type ProductVariantProvideType = {
|
|
selectedVariant: typeof selectedVariant;
|
|
changeSelectedVariant: (value: ProductVariant) => void;
|
|
};
|
|
|
|
// provide / inject
|
|
|
|
provide("productVariant", {
|
|
selectedVariant,
|
|
changeSelectedVariant: (value: ProductVariant) => (selectedVariant.value = value),
|
|
});
|
|
|
|
// ssr
|
|
|
|
const productResponse = await suspenseProduct();
|
|
// const commentsResponse = await suspenseComments();
|
|
|
|
if (productResponse.isError ) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: `error : product ${id} prefetch error`,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex flex-col">
|
|
<ProductHero />
|
|
<ProductVideo v-model:showChatButton="showChatButton" />
|
|
<ProductComments />
|
|
<ProductDetails />
|
|
<ProductsSlider
|
|
title="محصولات مشابه"
|
|
:products="product!.related_products"
|
|
/>
|
|
<ChatButton :showChatButton="showChatButton" />
|
|
</div>
|
|
</template>
|