phongdt:page video

2024-06-03 12:27:22 +07:00
parent 94ea03f189
commit 0bfbfa7711
19 changed files with 538 additions and 511 deletions
@@ -0,0 +1,70 @@
+<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}&amp;width=160&amp;layout=button&amp;action=like&amp;size=small&amp;share=true&amp;height=65&amp;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>