minnan/src/pages/inhert/intangible/DetailsCommon.vue

<template>
  <DetailTabPage
    :load="load"
    :extraTabs="[
      {
        id: 5,
        name: '传习所',
        visible: true,
      },
      {
        id: 6,
        name: '传承人',
        visible: true,
      },
      {
        id: 7,
        name: `非遗${commonRefName}`,
        visible: true,
      },
      {
        id: 8,
        name: '地理位置',
        visible: true,
      }
    ]"
  >
    <template #extraTabs="{ content, tabCurrentId }">
      <template v-if="tabCurrentId==5">
        <!-- 非遗传习中心 -->
        <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 v-else-if="tabCurrentId==6">
        <!-- 非遗传承人 -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'inheritorsList')"
          detailsPage="/pages/inhert/inheritor/details"
          :detailsParams="{
            mainBodyColumnId: InheritorContent.mainBodyColumnId,
            modelId: InheritorContent.modelId,
          }"
        />
      </template>
      <template v-else-if="tabCurrentId==7">
        <!-- 非遗产品(作品) -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'associationMeList')"
          :detailsPage="`/pages/inhert/${commonRefTarget}/details`"
          :detailsParams="{
            mainBodyColumnId: ProductsContent.mainBodyColumnId,
            modelId: ProductsContent.modelId,
          }"
        />
      </template>
      <template v-else-if="tabCurrentId==8">
        <!-- 地理位置 -->
        <view class="d-flex flex-col mt-3 mb-2">
         <HomeTitle title="地理位置" />
          <map id="map"
            class="w-100 height-350 mt-3"
            :latitude="content.latitude"
            :longitude="content.longitude"
            :markers="[
              {
                id: 1,
                latitude: content.latitude,
                longitude: content.longitude,
                iconPath: ImagesUrls.IconMarker,
                width: 40,
                height: 40,
              }
            ]"
            :scale="15"
          />
          <view class="d-flex flex-row justify-between bg-light radius-base p-2 mt-2">
            <view>
              <text class="iconfont icon-navigation"></text>
              <text class="address">{{ content.address }}</text>
            </view>
            <view class="d-flex flex-row align-center" @click="navTo('/pages/travel/nav/navto', {
              latitude: content.latitude,
              longitude: content.longitude,
            })">
              <text class="color-orange">去这里</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view>
      </template>
    </template>
    <template #titleEnd="{ content }">
      <u-tag 
        v-if="content.levelText"
        :text="content.levelText"
        size="mini" plain color="#d9492e"
        class="flex-shrink-0"
      />
    </template>
    <template #titleExtra="{ content }">
      <view class="d-flex flex-col">
        <IntroBlock 
          small
          :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 
            },
          ]"
        />
      </view>
    </template>
  </DetailTabPage>
</template>
<script setup lang="ts">
import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
import ProjectsContent from "@/api/inheritor/ProjectsContent";
import CommonListPage from "@/pages/article/common/CommonListPage.vue";
import IntroBlock from "@/pages/article/common/IntroBlock.vue";
import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
import type { TabControlItem } from "@/common/composeabe/TabControl";
import type { Ref } from "vue";
import { navTo } from "@/common/utils/PageAction";
import InheritorContent from "@/api/inheritor/InheritorContent";
import ProductsContent from "@/api/inheritor/ProductsContent";
import SeminarContent from "@/api/inheritor/SeminarContent";
import ImagesUrls from "@/common/config/ImagesUrls";

defineProps({	
  commonRefName : {
    type: String,
    default: '',
  },
  commonRefTarget : {
    type: String,
    default: '',
  },
})

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

  if (subList == 'associationMeList') {
    list.filter((p) => p.modelId == ProjectsContent.modelId).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 {
    list,
    total: list.length,
  }
}

const { querys } = useLoadQuerys({ modelId: 0 })
</script>

<style lang="scss">

</style>