Duong Truong Phong
71 lines
3.2 KiB
Vue
71 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
|
|
import Topic from "@/components/article/Topic.vue";
|
|
import Event from "@/components/article/Event.vue";
|
|
import Tag from "@/components/article/Tag.vue";
|
|
|
|
const { currentArticle } = storeToRefs(useArticleStore());
|
|
const store = reactive({
|
|
tag: useTagStore(),
|
|
topic: useTopicStore(),
|
|
event: useEventStore()
|
|
});
|
|
|
|
// const listTag = ref([]);
|
|
// const listTopic = ref([]);
|
|
// const listEvent = ref([])
|
|
|
|
// const getTagsAndTopicsAndEvents = async () => {
|
|
// if (!currentArticle) return;
|
|
// const fetchData = async (ids, fetchFn, list) => {
|
|
// if (!ids) return;
|
|
// const data = await Promise.all(ids.split(",").map(fetchFn));
|
|
// if (data.length > 0) list.value = data;
|
|
// };
|
|
// await Promise.all([
|
|
// fetchData(currentArticle.value.tagIds, store.tag.fetchById, listTag),
|
|
// fetchData(currentArticle.value.topicIds, store.topic.fetchById, listTopic),
|
|
// fetchData(currentArticle.value.eventIds, store.event.fetchById, listEvent)
|
|
// ]);
|
|
// };
|
|
|
|
// getTagsAndTopicsAndEvents();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-1500px mx-auto">
|
|
<article class="w-full flex flex-col lg:flex-row gap-4 overflow-x-hidden mt-4 bg-#f7f7f7">
|
|
<div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
|
|
<div v-html="currentArticle?.detail" />
|
|
</div>
|
|
<div class="lg:w-[480px] overflow-y-auto lg:max-h-560px">
|
|
<div class="w-full pt-6 pr-3">
|
|
<h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60"></h1>
|
|
<h1 v-html="currentArticle?.title" class="text-2xl font-bold text-left sm:text-3xl xl:text-4xl" />
|
|
<!-- <ArticleMeta class="!justify-start items-center gap-x-2" :authors="article?.authors" :createdOn="article?.createdOn" :createdBy="article?.createdBy" /> -->
|
|
|
|
<div id="article-brief" class="mx-auto xl:max-w-6xl text-balance">
|
|
<div v-html="currentArticle?.intro" class="font-semibold text-left" />
|
|
</div>
|
|
<!-- <section>
|
|
<article class="mb-[1rem] py-[1rem] border-y-[1px] border-solid border-[#e0e0e0] flex items-center">
|
|
<iframe
|
|
:src="`https://www.facebook.com/plugins/like.php?href=${ORIGIN}/${category?.code}/${article?.code}&width=160&layout=button&action=like&size=small&share=true&height=65&appId`"
|
|
width="140" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
|
|
allowfullscreen="true"
|
|
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
|
|
</article>
|
|
</section> -->
|
|
<!-- <Topic :topics="listTopic" />
|
|
<Event :events="listEvent" />
|
|
<Tag :tags="listTag" /> -->
|
|
<section id="comment-section" class="grid">
|
|
<Comment :articleId="currentArticle?.articleId" />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<div class="w-full border-t-2 border-dashed mt-4" />
|
|
</div>
|
|
</template>
|