NSG_PORTAL_V2/pages/bai-viet/[slug].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();

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(),
});

const loadPage = async () => {
  const promises = [];
  promises.push(store.article.getArticleBySlug(route.params.slug));

  let isContentType = '';
  switch (currentArticle.value?.contentType) {
    case 1:
      isContentType = 'trang-chi-tiet-bai-viet-general';
      break;
    case 2:
      isContentType = 'trang-chi-tiet-bai-viet-image';
      break;
    case 3:
      isContentType = 'trang-chi-tiet-podcast';
      break;
    case 4:
      isContentType = 'trang-chi-tiet-bai-viet-video';
      break;
    case 5:
      if (currentArticle.value?.layoutType === 4) {
        isContentType = 'trang-chi-tiet-bai-viet-emagazine';
        break;
      }
      if (currentArticle.value?.layoutType === 3) {
        isContentType = 'trang-chi-tiet-bai-viet-infographics';
        break;
      }
    default:
      isContentType = 'trang-chi-tiet-bai-viet-general';
      break;
  }
  promises.push(store.dynamicPage.fetchPageByCode(isContentType));
  await Promise.all(promises);
};

await useAsyncData('detail-article', () => loadPage());

useSeoMeta({
  title: () => currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
  description: () => currentArticle.value?.intro,
  ogTitle: () => currentArticle.value?.title,
  ogImage: () => currentArticle.value?.thumbnail,
  ogDescription: () => currentArticle.value?.intro,
  twitterCard: () => 'summary_large_image',
})
</script>

<template>
  <main class="h-screen" v-if="currentPage && currentPage.settings">
    <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>