phongdt:podcast

2024-05-31 13:57:40 +07:00
parent c5887d911f
commit 3a7132ea98
7 changed files with 702 additions and 1 deletions
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
+import ArticlePodcast from "~/organisms/article/ArticlePodcast.vue";
+
+const props = defineProps<{ article: any }>();
+
+const getSrc = (htmlString: string) => {
+  const srcRegex = /src="([^"]+)"/;
+  return htmlString?.match(srcRegex);
+};
+const getArticleById = async (articleId: number) => {
+  try {
+    const { apiUrl } = useRuntimeConfig().public;
+    const { item }: any = await $fetch(`${apiUrl}/cms/article/${articleId}`, {
+      headers: {
+        Site: "1",
+      },
+    });
+    return item;
+  } catch (error) {
+    handleError(error);
+  }
+};
+const listArticle = computed(() => {
+  // if (props.article && props.article.audioIds) {
+  //   return props.article.audioIds.split(",").map((audioId: number) => getArticleById(audioId));
+  // }
+  // return []
+    const test = "8,2,3";
+    return test.split(",").map((audioId) => getArticleById(audioId));
+});
+</script>
+
+<template>
+  <div class="w-full grid grid-cols-12 gap-4" v-if="listArticle?.length > 0">
+    <div class="col-span-9 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + listArticle[0]?.thumbnail + '); background-size: cover;'">
+      <div class="absolute inset-0 bg-black opacity-80 z-1"></div>
+      <Wrap class="relative flex items-center justify-center">
+        <div class="w-full h-40 md:h-80 absolute inset-0 z-2">
+          <div class="grid grid-cols-10 w-full">
+            <div class="col-span-3 flex justify-center items-center h-60 md:h-80 mx-2 md:mx-8">
+              <div
+                class="h-40 md:h-60 w-full rounded-tl-3xl rounded-br-3xl border-double px-2 overflow-x-hidden relative overflow-y-hidden bg-cover z-1 after:z-2 after:content-[''] after:w-full after:h-full after:top-0 after:left-0 after:bg-#000 after:opacity-30 after:absolute"
+                :style="{ backgroundImage: `url(${listArticle[0]?.thumbnail})` }"
+              >
+                <img :src="listArticle[0]?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
+              </div>
+            </div>
+            <div class="col-span-7 grid grid-cols-12 relative">
+              <div class="col-span-12 w-full grid grid-cols-12 mt-8 md:mb-4">
+                <div class="col-span-11">
+                  <h1 v-html="listArticle[0]?.sub" class="text-xl font-bold text-white opacity-60"></h1>
+                  <h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']">{{ listArticle[0]?.title }}</h1>
+                  <time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
+                    {{ utils.dateFormat(listArticle[0]?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
+                  </time>
+                </div>
+              </div>
+              <div class="col-span-12 w-full mb-4 hidden md:block">
+                <div v-html="listArticle[0]?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
+              </div>
+              <div class="col-span-11">
+                <AudioPlayer :src="getSrc(listArticle[0]?.detail)?.[1]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Wrap>
+    </div>
+    <div class="col-span-3">
+      <div class="flex items-center mt-5 mb-5">
+        <ul class="bg-red-500 text-white text-sm font-semibold hover:bg-red-400 font-medium inline-block rounded-tl-lg rounded-br-lg">
+          <li class="inline-block uppercase rounded-l-lg border-radius border-red-500 border-r-0 px-2 py-1 text-center block transition-transform duration-300 transform hover:scale-105">Podcast Hôm nay</li>
+        </ul>
+        <div class="border border-slate-7 flex-grow ml-4"></div>
+      </div>
+      <div class="grid w-full">
+        <div class="" v-for="(item, index) in listArticle.slice(1)" :key="index">
+          <ArticlePodcast mode="podcast" image-size="md" text-size="lg" :createdOn="item?.createdOn" :title="item?.title" :slug="'/' + item.category?.code + '/' + item.code" :thumb="item?.thumbnail" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.name {
+  text-align: center;
+  line-height: 100px;
+}
+</style>