mingnan-website/src/views/details/IntangibleDetailView.vue

<template>
  <!-- 非遗详情页 -->
  <TabDetailView 
    :load="loadData"
  >
    <template #extraInfo="{ content }">
     <IntroBlock
        :descItems="[
          {
            label: '地址',
            value: content.address,
          },
          {
            label: '项目级别',
            value: content.levelText ,
          },
          {
            label: '项目类别',
            value: content.ichTypeText,
          },
          {
            label: '批次时间',
            value: content.batchText,
          },
          {
            label: '所属区域',
            value: content.regionText ,
          },
          {
            label: '保护单位',
            value: content.unit 
          },
        ]"
      />
    </template>
    <template #extraTab="{ currentTabId, content }">
      <template v-if="currentTabId==4">
        <!-- 非遗产品(作品) -->
        <CommonListBlock 
          :showTotal="true"
          :showSearch="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'associationMeList')"
          detailsPage="/inheritor/intangible-detail"
          :detailsParams="{
            mainBodyColumnId: ProjectsContent.mainBodyColumnId,
            modelId: ProjectsContent.modelId,
          }"
        />
      </template>
      <template v-else-if="currentTabId==5">
        <!-- 非遗传习中心 -->
        <CommonListBlock 
          :showTotal="true"
          :showSearch="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'ichSitesList')"
          detailsPage="/inheritor/intangible-detail"
          :detailsParams="{
            mainBodyColumnId: ProjectsContent.mainBodyColumnId,
            modelId: ProjectsContent.modelId,
          }"
        />
      </template>
      <template v-else-if="currentTabId==6">
        <!-- 非遗传承人 -->
        <CommonListBlock 
          :showTotal="true"
          :showSearch="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'inheritorsList')"
          detailsPage="/inheritor/intangible-detail"
          :detailsParams="{
            mainBodyColumnId: ProjectsContent.mainBodyColumnId,
            modelId: ProjectsContent.modelId,
          }"
        />
      </template>
    </template>
  </TabDetailView>
</template>

<script setup lang="ts">
import TabDetailView from './TabDetailView.vue';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import CommonListBlock from '@/components/content/CommonListBlock.vue';
import IntroBlock from '@/components/parts/IntroBlock.vue';
import { useRoute } from 'vue-router';

const route = useRoute();

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.levelText,
        content.ichTypeText,
      ];
    })
  } else if (subList == 'inheritorsList') {
    list.forEach((p) => {
      p.bottomTags = [
        p.levelText,
        p.nation,
        content.ichTypeText,
      ];
    }) 
  }
  return {
    page: page,
    total: list.length,
    data: list.slice((page - 1) * pageSize, page * pageSize)
  };
}

async function loadData(id: number) {
  const d = await ProjectsContent.getContentDetail(id, 
    route.query.modelId ? Number(route.query.modelId) : undefined
  );
  d.contentProps = {
    tabs: [
      { id: 0, text: '简介', visible: true },
      { id: 1, text: '相册', visible: d.images.length > 0  },
      { id: 2, text: '音频', visible: Boolean(d.audio) },
      { id: 3, text: '视频', visible: Boolean(d.video) },
      { id: 4, text: '非遗作品', visible: Boolean(d.associationMeList && (d.associationMeList as any[]).length > 0) },
      { id: 5, text: '非遗传习中心', visible: Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0) },
      { id: 6, text: '非遗传承人', visible: Boolean(d.inheritorsList && (d.inheritorsList as any[]).length > 0) },
    ]
  };
  return d;
}

</script>