MoreStrive
81 lines
2.7 KiB
Vue
81 lines
2.7 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 _cloneDeep from 'lodash/cloneDeep';
|
|
|
|
import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
|
|
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
|
|
|
|
const route = useRoute();
|
|
|
|
import { useDynamicPageStore } from '~/stores/dynamic-page';
|
|
import { useArticleStore } from '~/stores/articles';
|
|
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
|
|
const { currentArticle } = storeToRefs(useArticleStore());
|
|
|
|
const store = reactive({
|
|
dynamicPage: useDynamicPageStore(),
|
|
article: useArticleStore(),
|
|
});
|
|
(async () => {
|
|
try {
|
|
store.article.getArticleById(route.params.slug);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
}
|
|
})();
|
|
|
|
const loadPage = async (contentType: string | number) => {
|
|
store.dynamicPage.fetchPageByCode('trang-chu');
|
|
store.dynamicPage.setSectionPublished();
|
|
store.dynamicPage.setComponentPublished();
|
|
}
|
|
|
|
watch(currentArticle, async () => {
|
|
let isContentType : string = '';
|
|
switch (currentArticle.value?.contentType) {
|
|
case 1:
|
|
isContentType = 'ArticleLayoutDefault'
|
|
case 2:
|
|
isContentType = 'ArticleLayoutImage'
|
|
case 3:
|
|
isContentType = 'ArticleLayoutPodcast'
|
|
case 4:
|
|
isContentType = 'ArticleLayoutVideo'
|
|
case 5:
|
|
if (currentArticle.value?.layoutType === 3) isContentType = 'ArticleLayoutInfographics'
|
|
else isContentType = 'ArticleLayoutFullPage'
|
|
default:
|
|
isContentType = 'ArticleLayoutDefault'
|
|
}
|
|
await loadPage(isContentType)
|
|
}, { deep: true })
|
|
|
|
useSeoMeta({
|
|
title: currentArticle.value?.title,
|
|
ogTitle: currentArticle.value?.title,
|
|
description: currentArticle.value?.intro,
|
|
ogDescription: currentArticle.value?.intro,
|
|
ogImage: currentArticle.value?.thumbnail,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="h-screen" v-if="currentPage">
|
|
<DynamicTemplate :settings="currentPage.settings">
|
|
<template v-if="sectionPublished && sectionPublished.length > 0">
|
|
<DynamicSection
|
|
v-for="(section, index) in sectionPublished"
|
|
:key="index"
|
|
:settings="section.settings"
|
|
:content="section.content ? JSON.parse(section.content) : null"
|
|
:section="section"
|
|
/>
|
|
</template>
|
|
</DynamicTemplate>
|
|
</main>
|
|
</template> |