minnan/src/pages/inhert/inheritor/details.vue

<template>
  <DetailTabPage
    :load="load"
    :extraTabs="[
      {
        id: 5,
        name: '获得奖项',
        visible: true,
      },
      {
        id: 6,
        name: '非遗项目',
        visible: true,
      },
      {
        id: 7,
        name: '传习所',
        visible: true,
      }
    ]"
    :showHead="false"
  >
    <template #extraTabs="{ content, tabCurrentId }">
      <template v-if="tabCurrentId==5">
        <!-- 获得奖项 -->
        <u-parse :content="content.prize" :tagStyle="commonParserStyle"></u-parse>
      </template>
      <template v-else-if="tabCurrentId==6">
        <!-- 非遗项目 -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'associationMeList')"
          detailsPage="/pages/inhert/intangible/details"
          :detailsParams="{
            mainBodyColumnId: ProjectsContent.mainBodyColumnId,
            modelId: ProjectsContent.modelId,
          }"
        />
      </template>
      <template v-else-if="tabCurrentId==6">
        <!-- 传习所 -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'ichSitesList')"
          detailsPage="/pages/inhert/intangible/details"
          :detailsParams="{
            mainBodyColumnId: SeminarContent.mainBodyColumnId,
            modelId: SeminarContent.modelId,
          }"
        />
      </template>
    </template>
    <template #title="{ content }">
      <view class="d-flex flex-col">
        <view class="d-flex flex-row justify-between">
          <view class="d-flex flex-col">
            <text class="size-lll font-bold color-text-content">{{ content.title }}</text>
            <text class="size-base color-text-content-second mt-2">{{ content.birthplace || content.desc }}</text>
            <RoundTags
              :tags="content.tags"
              :tags2="[
                content.age as string,
                content.nation as string
              ]"
            />
          </view>
          <image 
            class="width-150 height-150 radius-base flex-shrink-0" 
            :src="content.image" mode="aspectFill"
          />
        </view>
      </view> 
    </template>
    <template #titleExtra="{ content }">
      <IntroBlock
        small
        :descItems="[
          {
            label: '民族',
            value: content.nation,
          },
          {
            label: '性别',
            value: content.gender == '1'? '男' : '女', 
          },
          {
            label: '出生日期',
            value: content.dateBirth,
          }, 
          {
            label: '出生地区',
            value: content.birthplace,
          },
          {
            label: '单位',
            value: content.unit,
          },
          
          {
            label: '传承项目',
            value: content.associationMeList[0]?.title,
          }, 
          {
            label: '传承人级别',
            value: content.levelText,
          }, 
          {
            label: '公布批次',
            value: content.batchText,
          },
        ]"
      />
    </template>
  </DetailTabPage>
</template>
<script setup lang="ts">
import type { TabControlItem } from "@/common/composeabe/TabControl";
import type { Ref } from "vue";
import RoundTags from "@/pages/parts/RoundTags.vue";
import commonParserStyle from "@/common/style/commonParserStyle";
import SeminarContent from "@/api/inheritor/SeminarContent";
import InheritorContent from "@/api/inheritor/InheritorContent";
import ProjectsContent from "@/api/inheritor/ProjectsContent";
import IntroBlock from "@/pages/article/common/IntroBlock.vue";
import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
import CommonListPage from "@/pages/article/common/CommonListPage.vue";

async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
  const d = await InheritorContent.getContentDetail(id);
  tabsArray.value[4].visible = Boolean(d.prize);
  tabsArray.value[5].visible = Boolean(d.associationMeList && d.associationMeList.length > 0);
  tabsArray.value[6].visible = Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0);
  return d;
}
async function loadSubList(page: number, pageSize: number, content: any, subList: string) {
  const list = (content[subList] as any[] || [])
    .slice((page - 1) * pageSize, page * pageSize);

  list.forEach((p) => {
    p.bottomTags = [
      p.levelText,
      p.ichTypeText,
      p.batchText
    ];
  });
  return {
    list,
    total: list.length,
  }
}
</script>

<style lang="scss">

</style>