mingnan-website/src/pages/details/intangible.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 
          },
          {
            label: '其他级别项目',
            value: content.otherLevel && content.otherLevel.length > 0 ? `${content.otherLevel.length}个` : ''
          },
        ]"
      />
      <!-- 同级别非遗项目显示 -->
      <div v-if=" content.otherLevel && content.otherLevel.length > 0" class="mt-2 mb-3 d-flex flex-column">
        <span class="mb-2">其他级别项目</span>
        <NuxtLink 
          v-for="(item, k) in content.otherLevel"
          :key="k"
          class="simple-link-item"
          :to="{ path: '/details/intangible', query: { id: item.id } }"
        >
          <div class="text">
            <div class="tag-button active">
              {{ item.levelText }}
            </div>
            <span class="ms-2">{{ item.title }}</span>
            <span v-if="item.regionText" class="ms-2">({{ item.regionText }})</span>
          </div>
          >
        </NuxtLink>
      </div>
    </template>
    <template #extraTab="{ currentTabId, content }">
      <!-- 非遗产品(作品) -->
      <CommonListBlock 
        subName="worksMeList"
        :show="currentTabId==4"
        :showTotal="true"
        :showSearch="false"
        :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'worksMeList')"
        detailsPage="/details/intangible"
        :detailsParams="{
          mainBodyColumnId: ProjectsContent.mainBodyColumnId,
          modelId: ProjectsContent.modelId,
        }"
      />
      <!-- 非遗传习中心 -->
      <CommonListBlock 
        subName="ichSitesList"
        :show="currentTabId==5"
        :showTotal="true"
        :showSearch="false"
        :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'ichSitesList')"
        detailsPage="/details/intangible"
        :detailsParams="{
          mainBodyColumnId: ProjectsContent.mainBodyColumnId,
          modelId: ProjectsContent.modelId,
        }"
      />
      <!-- 非遗传承人 -->
      <CommonListBlock 
        subName="inheritorsList"
        :show="currentTabId==6"
        :showTotal="true"
        :showSearch="false"
        :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'inheritorsList')"
        detailsPage="/details/intangible"
        :detailsParams="{
          mainBodyColumnId: ProjectsContent.mainBodyColumnId,
          modelId: ProjectsContent.modelId,
        }"
      />
      <!-- 相关资讯 -->
      <CommonListBlock 
        subName="associationMeList"
        :show="currentTabId==7"
        :showTotal="true"
        :showSearch="false"
        :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'associationMeList')"
        detailsPage="/details/intangible"
        :detailsParams="{
          mainBodyColumnId: ProjectsContent.mainBodyColumnId,
          modelId: ProjectsContent.modelId,
        }"
      />
    </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.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.worksList && (d.worksList 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) },
      { id: 7, text: '相关资讯', visible: Boolean(d.associationMeList && (d.associationMeList as any[]).length > 0) },
    ]
  };
  return d;
}

</script>

<style lang="scss">
.simple-link-item {
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #000;
  padding: 10px 20px;
  cursor: pointer;

  .text {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .tag-button {
    border-radius: 15px;
    padding: 6px 10px;
  }
}

</style>