minnan-website/src/pages/details/artifact.vue

<template>
  <!-- 文物详情页 -->
  <TabDetailView 
    :load="loadData"
  >
    <template #extraInfo="{ content }">
      <IntroBlock
        :descItems="[
          {
            label: '地址',
            value: content.address
          },
          {
            label: '开放时间',
            value: content.openStatusText
          },
          {
            label: '年代',
            value: content.age 
          },
          {
            label: '级别',
            value: content.levelText 
          },
          {
            label: '所属区域',
            value: content.regionText ,
          },
          {
            label: '文物类型',
            value: content.crTypeText, 
          },
          {
            label: '文物编码',
            value: content.code,
          }
        ]"
      />
    </template>
    <template #extraTab="{ currentTabId, content }">
      <template v-if="currentTabId==4">
        <!-- VR参观 -->
        <iframe :src="(content.vr as string)" style="width: 100%;height: 80vh"/>
      </template>
      <template v-else-if="currentTabId==5">
        <SimpleRichHtml :contents="[ content.protectedArea as string ]" /> 
      </template>
      <template v-else-if="currentTabId==6">
        <SimpleRichHtml :contents="[ content.environment as string ]" /> 
      </template>
      <template v-else-if="currentTabId==7">
        <SimpleRichHtml :contents="[ content.value as string ]" /> 
      </template>
    </template>
  </TabDetailView>
</template>

<script setup lang="ts">
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import TabDetailView from './TabDetailView.vue';
import IntroBlock from '@/components/parts/IntroBlock.vue';
import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';

async function loadData(id: number) {
  const d = await UnmoveableContent.getContentDetail(id);
  d.contentProps = {
    tabs: [
      { id: 0, text: '文物基础信息', visible: true },
      { id: 1, text: '文物相册', visible: true },
      { id: 2, text: '文物音频', visible: Boolean(d.audio) },
      { id: 3, text: '文物视频', visible: Boolean(d.video) },
      { id: 4, text: 'VR参观', visible: Boolean(d.vr) },
      { id: 5, text: '保护范围', visible: Boolean(d.protectedArea) },
      { id: 6, text: '建筑环境', visible: Boolean(d.environment) },
      { id: 7, text: '价值评估', visible: Boolean(d.value) },
    ]
  };
  return d;
}

</script>