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

<template>
  <DetailTabPage
    ref="page"
    :load="load"
    :extraTabs="[
      {
        id: 5,
        text: '传习所',
        visible: true,
      },
      {
        id: 6,
        text: '传承人',
        visible: true,
      },
      {
        id: 7,
        text: '传承谱系',
        width: 180,
        visible: true,
      },
      {
        id: 8,
        text: '非遗作品',
        width: 180,
        visible: true,
      },
      {
        id: 9,
        text: '相关资讯',
        width: 180,
        visible: true,
      },
      {
        id: 10,
        text: '地理位置',
        width: 180,
        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/seminar/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">
        <view class="d-flex flex-col mt-3 mb-2">
          <Parse :content="content.pedigree" :tagStyle="commonParserStyle" />
        </view>
      </template>
      <template v-else-if="tabCurrentId==8">
        <!-- 非遗作品 -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'worksList')"
          :detailsPage="`/pages/inhert/product/details`"
          :detailsParams="{
            mainBodyColumnId: ProductsContent.mainBodyColumnId,
            modelId: ProductsContent.modelId,
          }"
        />
      </template>
      <template v-else-if="tabCurrentId==9">
        <!-- 相关资讯 -->
        <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==10">
        <!-- 地理位置 -->
        <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 flex-shrink-0" @click="handleNavTo(content)">
              <text class="color-orange">去这里</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view>
      </template>
    </template>
    <template #titleEnd="{ content }">
      <Tag
        v-if="content.levelText"
        :text="StringUtils.cutString(content.levelText as string, 4)"
        size="small" scheme="light" type="primary"
        class="flex-shrink-0"
      />
    </template>
    <template #titleExtra="{ content }">
      <view class="d-flex flex-col">
        <IntroBlock 
          small
          :descItems="[
            {
              label: '项目级别',
              value: content.levelText ,
            },
            {
              label: '项目类别',
              value: content.ichTypeText,
            },
            {
              label: '批次时间',
              value: content.batchText,
            },
            {
              label: '所属区域',
              value: content.regionText ,
            },
            {
              label: '保护单位',
              value: content.unit 
            },
            {
              label: '地址',
              value: content.address,
            },
            {
              label: '其他级别保护单位',
              value: content.otherLevel && content.otherLevel.length > 0 ? `${content.otherLevel.length}个` : ''
            },
          ]"
        />
        <!-- 同级别非遗项目显示 -->
        <view v-if="content.otherLevel && content.otherLevel.length > 0" class="mt-2">
          <view 
            v-for="(item, k) in content.otherLevel"
            :key="k"
            class="d-flex flex-row align-center justify-between p-3 radius-base bg-light"
            @click="navTo('/pages/inhert/intangible/details', {
              id: item.id,
            })"
          >
            <view class="d-flex flex-row align-center">
              <Tag
                :text="StringUtils.cutString(item.levelText as string, 3)"
                size="small" scheme="light" type="primary"
                class="flex-shrink-0"
              />
              <view class="d-flex flex-col ml-2">
                <view class="d-flex flex-row align-center">
                  <text>{{ item.title }}</text>
                  <text v-if="item.regionText" class="ml-2">({{ item.regionText }})</text>
                </view>
                <text v-if="item.unit" class="size-s color-second">{{ item.unit }}</text>
              </view>
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </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 { h, ref, type Ref } from "vue";
import { navTo } from "@/components/utils/PageAction";
import { StringUtils } from "@imengyu/imengyu-utils";
import InheritorContent from "@/api/inheritor/InheritorContent";
import ProductsContent from "@/api/inheritor/ProductsContent";
import SeminarContent from "@/api/inheritor/SeminarContent";
import ImagesUrls from "@/common/config/ImagesUrls";
import Tag from "@/components/display/Tag.vue";
import Parse from "@/components/display/parse/Parse.vue";
import commonParserStyle from "@/common/style/commonParserStyle";

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.pedigree);
  tabsArray.value[7].visible = Boolean(d.worksList && (d.worksList as any[]).length > 0);
  tabsArray.value[8].visible = Boolean(d.associationMeList && (d.associationMeList as any[]).length > 0);
  tabsArray.value[9].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)
  } else if (subList == 'worksList') {
    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 {
    list,
    total: list.length,
  }
}

function handleNavTo(content: any) {
  if (!content?.latitude || !content?.longitude) 
    return;
  uni.openLocation({
    latitude: Number(content.latitude),  
    longitude: Number(content.longitude),  
  }) 
}

const page = ref();

const { querys } = useLoadQuerys({ modelId: 0 })

defineExpose({
  getPageShareData() {
    return page.value.getPageShareData();
  } 
})
</script>

<style lang="scss">

</style>