minnan-tv/src/views/Details/IntangibleDetail.vue

<script setup lang="ts">
import Tab from '@/components/small/Tab.vue';
import CommonDetail from './CommonDetail.vue';
import { computed, ref, watch } from 'vue';
import type { GetContentDetailItem } from '@/api/CommonContent';
import SimpleRichHtml from '@/components/SimpleRichHtml.vue';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import TabCommonList from '../Content/TabCommonList.vue';
import { useRoute } from 'vue-router';
import { CommonHtmlStyles } from '@/composeable/HtmlStyles';

const route = useRoute();
const currentContent = ref<GetContentDetailItem>();
const activeSubTab = ref(0);
const activeSubTabId = computed(() => {
  return tabs.value[activeSubTab.value]?.id || tabs.value[0]?.id || 0;
});
const tabs = computed(() => {
  const res = [
    { label: '简介', id: 0 }
  ] as { label: string, id: number }[];

  if (currentContent.value?.audio)
    res.push({ label: '音频', id: 1 });
  if (currentContent.value?.video)
    res.push({ label: '视频', id: 2 });
  
  if (currentContent.value?.associationMeList && (currentContent.value?.associationMeList as any[]).length > 0)
    res.push({ label: '相关非遗', id: 5 });
  if (currentContent.value?.worksList && (currentContent.value?.worksList as any[]).length > 0)
    res.push({ label: '非遗作品', id: 3 });
  if (currentContent.value?.inheritorsList && (currentContent.value?.inheritorsList as any[]).length > 0)
    res.push({ label: '非遗传承人', id: 4 });
  
  return res;
});

watch(route, () => {
  activeSubTab.value = 0;
});

async function loadSubList(page: number, pageSize: number, content: any, subList: string) {
  const list = content[subList] as any[] || [];
  if (subList == 'associationMeList') {
    list.forEach((p) => {
      p.bottomTags = [
        p.levelText,
        p.ichTypeText,
        p.batchText,
      ];
    })
  } else if (subList == 'ichSitesList') {
    list.forEach((p) => {
      p.bottomTags = [
        content.ichTypeText,
      ];
    })
  } else if (subList == 'inheritorsList') {
    list.forEach((p) => {
      p.bottomTags = [
        p.levelText,
        p.nation,
        content.ichTypeText,
      ];
    }) 
  }
  return {
    page: page,
    total: list.length,
    list: list.slice((page - 1) * pageSize, page * pageSize)
  };
}

</script>

<template>
  <CommonDetail @contentLoaded="currentContent = $event">
    <template #afterTitle="{ content }">
      <div class="desc">
        <div v-if="content.address">地址: {{ content.address }}</div>
        <div v-if="content.ichTypeText">项目类别: {{ content.ichTypeText }}</div>
        <div v-if="content.levelText">项目级别: {{ content.levelText }}</div>
        <div v-if="content.batchText">批次时间: {{ content.batchText }}</div>
        <div v-if="content.regionText">所属区域: {{ content.regionText }}</div>
        <div v-if="content.unit">保护单位: {{ content.unit }}</div>
      </div>
    </template>
    <template #content="{ content }">
      <Tab 
        v-model="activeSubTab"
        :tabs="tabs"
        autoSize
        itemWidth="100px"
      />
      <ScrollRect v-if="activeSubTabId === 0" scroll="vertical">
        <SimpleRichHtml :contents="[ content.intro as string, content.content ]" :tagStyle="CommonHtmlStyles" />
      </ScrollRect>
      <video 
        v-else-if="activeSubTabId === 1"
        controls
        :src="content.audio" 
      />
      <video 
        v-else-if="activeSubTabId === 2"
        controls
        :src="content.video" 
      />
      <TabCommonList 
        v-else-if="activeSubTabId === 3" 
        :loader="(page, size) => loadSubList(page, size, content, 'worksList')"
        detailPageNames="IntangibleDetail"
      />
      <TabCommonList 
        v-else-if="activeSubTabId === 5" 
        :loader="(page, size) => loadSubList(page, size, content, 'associationMeList')"
        detailPageNames="IntangibleDetail"
      />
      <TabCommonList 
        v-else-if="activeSubTabId === 4" 
        :loader="(page, size) => loadSubList(page, size, content, 'inheritorsList')"
        detailPageNames="IntangibleDetail"
      />
    </template>

  </CommonDetail>
</template>

<style lang="scss" scoped>
h3 {
  font-size: 0.8rem;
  color: var(--color-text-primary);
  text-align: left;
  width: 100%;
  margin-top: 0.5rem;
}
.desc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    width: 48%;
    color: var(--color-text-primary);
    font-size: 0.8rem;
  }

}
</style>