nguyen van thai
90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
/*
|
|
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4 | Other=5
|
|
- ContentType: None=0 | Normal=1 | Photo=2 | Video=3 | Graphic=4 | Document=5 | Reaction=6 (Poll,Quiz) | Other=7
|
|
- Type: None=0 | Editorial=1 | General=2 | Reportage=3 | Interview=4 | Survey=5 | Tutorial=6 | Podcast=7 | Broadcast=8 | TalkShow=9 | LiveStream=10 | Translation=11 | Promotion=12 | Other=13
|
|
*/
|
|
|
|
<script setup lang="ts">
|
|
import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
|
|
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
|
|
|
|
const route = useRoute();
|
|
const site = useCookie("site")
|
|
const store = reactive({
|
|
dynamicPage: useDynamicPageStore(),
|
|
article: useArticleStore(),
|
|
});
|
|
|
|
import { useDynamicPageStore } from '~/stores/dynamic-page';
|
|
import { useArticleStore } from '~/stores/articles';
|
|
|
|
const loadPage = async () => {
|
|
const article = await store.article.getArticleBySlug(String(route.params.slug));
|
|
site.value = article?.value.siteId
|
|
let isContentType
|
|
switch (article?.value?.contentType) {
|
|
case 1:
|
|
isContentType = 'trang-chi-tiet';
|
|
break;
|
|
case 2:
|
|
isContentType = 'trang-image';
|
|
break;
|
|
case 3:
|
|
isContentType = 'trang-chi-tiet';
|
|
break;
|
|
case 4:
|
|
isContentType = 'trang-video';
|
|
break;
|
|
case 5:
|
|
if (article.value?.layoutType === 4) {
|
|
isContentType = 'trang-emagazine';
|
|
break;
|
|
}
|
|
if (article.value?.layoutType === 3) {
|
|
isContentType = 'trang-inforgraphic';
|
|
break;
|
|
}
|
|
default:
|
|
isContentType = 'trang-chi-tiet';
|
|
break;
|
|
}
|
|
const dynamicPage = await store.dynamicPage.fetchPageByCode(isContentType);
|
|
|
|
return {
|
|
article,
|
|
dynamicPage
|
|
};
|
|
};
|
|
|
|
const { data } = await useAsyncData('detail-article', () => loadPage());
|
|
const article = data.value?.article;
|
|
const dynamicPage = data.value?.dynamicPage;
|
|
|
|
const asycnCurrentPage = dynamicPage?.currentPage;
|
|
const asycnSectionPublished = dynamicPage?.sectionPublished;
|
|
const asycnComponentPublished = dynamicPage?.componentPublished;
|
|
|
|
useSeoMeta({
|
|
title: () => article?.title.replace(/<[^>]+>/g, ''),
|
|
description: () => article?.intro.replace(/<[^>]+>/g, ''),
|
|
ogTitle: () => article?.title.replace(/<[^>]+>/g, ''),
|
|
ogImage: () => article?.thumbnail,
|
|
ogDescription: () => article?.intro.replace(/<[^>]+>/g, ''),
|
|
twitterCard: () => 'summary_large_image',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="h-screen" v-if="asycnCurrentPage">
|
|
<DynamicTemplate :page="asycnCurrentPage" :settings="asycnCurrentPage.settings">
|
|
<DynamicSection
|
|
v-for="(section, index) in asycnSectionPublished"
|
|
:key="index"
|
|
:settings="section.settings"
|
|
:content="section.content ? JSON.parse(section.content) : null"
|
|
:section="section"
|
|
/>
|
|
</DynamicTemplate>
|
|
</main>
|
|
</template>
|