minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

phongdt:podcast details

Browse Source
This commit is contained in:
Duong Truong Phong
2024-05-31 16:38:12 +07:00
parent 9e72b00aa7
commit 2f8c9b9cb8
8 changed files with 44 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue
+3 -12
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
import { getInputValue } from '@/utils/parseSQL';
import { isEmpty } from "lodash";
const _props = defineProps<{
@@ -37,7 +37,8 @@ const _dataResult = computed(() => {
<template>
<div>
<div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'">
<div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'"
:style="`grid-template-columns: repeat(${Number(LAYOUT_PARSE['COLUMN'])}}, minmax(0, 1fr))`">
<div v-for="(component, index) in _dataResult" :key="index">
<template v-if="!isEmpty(component)">
<DynamicComponent
@@ -46,16 +47,6 @@ const _dataResult = computed(() => {
layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
dataResult: { ...component },
}"
@drop-data="dropData"
/>
</template>
<template v-else>
<DynamicComponent
:settings="{
template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
}"
@drop-data="dropData"
/>
</template>
</div>
components/dynamic-page/page-component/templates/other/details/default.vue
-2
View File
@@ -1,8 +1,6 @@
<script setup lang="ts">
import { useArticleStore } from '~/stores/articles';
const emit = defineEmits(['dropData', 'selectComponent'])
const { currentArticle } = storeToRefs(useArticleStore());
console.log(currentArticle.value ,'12')
</script>
<template>
<div class="content" v-if="currentArticle">
components/dynamic-page/page-component/templates/other/details/emagazine.vue
-1
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { useArticleStore } from '~/stores/articles';
const emit = defineEmits(['dropData', 'selectComponent'])
const { currentArticle } = storeToRefs(useArticleStore());
</script>
components/dynamic-page/page-component/templates/other/details/infographics.vue
-2
View File
@@ -1,6 +1,4 @@
<script setup lang="ts">
import { isEmpty } from 'lodash';
const emit = defineEmits(['dropData', 'selectComponent'])
const _props = defineProps<{
dataResult?: any[]
components/article/podcast.vue → components/dynamic-page/page-component/templates/other/details/podcast.vue
+36 -41
View File
@@ -1,25 +1,24 @@
<script setup lang="ts">
import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
const props = defineProps<{ article: any }>();
const { currentArticle } = storeToRefs(useArticleStore());
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/digital-article/${articleId}`, {
headers: {
Site: "1",
},
});
return item;
} catch (error) {
handleError(error);
}
};
// const getArticleById = async (articleId: number) => {
// try {
// const { apiUrl } = useRuntimeConfig().public;
// const { item }: any = await $fetch(`${apiUrl}/cms/digital-article/${articleId}`, {
// headers: {
// Site: "1",
// },
// });
// return item;
// } catch (error) {
// handleError(error);
// }
// };
const listArticle = ref([]);
const audioPlay = ref({});
const defaultClass = {
@@ -28,25 +27,23 @@ const defaultClass = {
title: ["font-bold", "px-4", "md:px-0", "xl:text-xl", "text-base"],
brief: ["text-sm", "sm:text-base", "mx-4", "pb-4", "md:pb-0", "md:mx-0", "border-b", "border-stone-400", "md:border-none"],
};
const getListArticle = async () => {
if (props.article && props.article.audioIds) {
const audioIds = props.article.audioIds.split(",").map(Number);
const articles = await Promise.all(audioIds.map(async (audioId) => await getArticleById(audioId)));
if (articles.length > 0) {
listArticle.value = articles;
audioPlay.value = articles[0];
}
}
// const test = "8,9";
// const audioIds = test.split(",");
// const articles = await Promise.all(audioIds.map(async (audioId) => await getArticleById(audioId)));
};
getListArticle();
// const getListArticle = async () => {
// if (currentArticle && currentArticle.audioIds) {
// const audioIds = currentArticle.audioIds.split(",").map(Number);
// const articles = await Promise.all(audioIds.map(async (audioId) => await getArticleById(audioId)));
// if (articles.length > 0) {
// listArticle.value = articles;
// audioPlay.value = articles[0];
// }
// }
// // const test = "8,9";
// };
// getListArticle();
</script>
<template>
<div class="w-full grid grid-cols-12 gap-4" v-if="listArticle?.length > 0">
<div class="md:col-span-9 col-span-12 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + audioPlay?.thumbnail + '); background-size: cover;'">
<div class="w-full grid grid-cols-12 gap-4" v-if="currentArticle">
<div class="col-span-12 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + currentArticle?.thumbnail + '); background-size: cover;'">
<div class="absolute inset-0 bg-black opacity-80 z-1"></div>
<div class="w-full mx-auto px-4 max-w-6xl relative flex items-center justify-center">
<div class="w-full h-40 md:h-80 absolute inset-0 z-2">
@@ -54,33 +51,32 @@ getListArticle();
<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(${audioPlay?.thumbnail})` }"
:style="{ backgroundImage: `url(${currentArticle?.thumbnail})` }"
>
<img :src="audioPlay?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
<img :src="currentArticle?.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="audioPlay?.sub" class="text-xl font-bold text-white opacity-60"></h1> -->
<h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']" v-html="audioPlay?.title"></h1>
<h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']" v-html="currentArticle?.title"></h1>
<time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
{{ utils.dateFormat(audioPlay?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
{{ utils.dateFormat(currentArticle?.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="audioPlay?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
<div v-html="currentArticle?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
</div>
<div class="col-span-11">
<AudioPlayer :src="getSrc(audioPlay?.detail)?.[1]" />
<AudioPlayer :src="getSrc(currentArticle?.detail)?.[1]" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md:col-span-3 col-span-12" v-if="listArticle?.length > 1">
<!-- <div class="md:col-span-3 col-span-12" v-if="listArticle?.length > 1">
<div class="flex items-center 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>
@@ -101,7 +97,6 @@ getListArticle();
></path>
</svg>
</span>
<!-- Nghe tập này -->
</div>
</div>
<p class="xs:mt-0.5 xs:text-sm text-sm">{{ utils.dateFormat(item?.createdOn) }}</p>
@@ -109,7 +104,7 @@ getListArticle();
</article>
</div>
</div>
</div>
</div> -->
</div>
</template>
components/dynamic-page/page-component/templates/other/index.ts
+1
View File
@@ -2,6 +2,7 @@ export { default as Article_Button } from './copyLinks/ArticleButton.vue'
export { default as Article_Detail_Emagazine } from './details/emagazine.vue'
export { default as Article_Detail_Default } from './details/default.vue'
export { default as Article_Detail_Infographics } from './details/infographics.vue'
export { default as Article_Detail_Podcast } from './details/podcast.vue'
export { default as Default_Breadcrumb} from './breadcrumb/default.vue'
export { default as ADS_Default } from './ads/default.vue';
export { default as Comment } from './comments/default.vue'
components/dynamic-page/page-component/templates/other/index.vue
+2 -3
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
// import { Default_Breadcrumb, Comment, Podcast, Video, Article_Detail_Default, ADS_Default, Article_Button, Article_Detail_Infographics, Article_Detail_Emagazine} from "./index";
import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment} from "./index";
import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment, Article_Detail_Podcast} from "./index";
const _props = defineProps<{
settings: any;
component?: any;
@@ -15,7 +14,7 @@ const definedDynamicComponent: Record<string, any> = {
'ADS_DEFAULT': ADS_Default,
'ARTICLE_BUTTON': Article_Button,
COMMENT: Comment,
// POCAST: Podcast,
PODCAST: Article_Detail_Podcast,
// VIDEO: Video
};
pages/bai-viet/[slug].vue
+2 -2
View File
@@ -37,7 +37,7 @@ const loadPage = async (contentType: string | number) => {
watch(currentArticle, async () => {
let isContentType : string = '';
console.log(currentArticle.value.contentType, 'type')
console.log(currentArticle.value, 'type')
switch (currentArticle.value?.contentType) {
case 1:
isContentType = 'trang-doi-song'
@@ -47,7 +47,7 @@ watch(currentArticle, async () => {
break;
case 3:
isContentType = 'ArticleLayoutPodcast'
isContentType = 'trang-chi-tiet-podcast'
break;
case 4: