feiYi/src/views/ArtifactModelDetailView.vue

<script setup lang="ts">
import PageTopTitleBottomContent from '@/components/parts/PageTopTitleBottomContent.vue';
import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/SimpleRichHtml.vue';
import Title from '@/assets/images/Artifact/Title3DDetails.png';
import UnmoveableContent from '@/api/inherit/UnmoveableContent';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import { useRoute, useRouter } from 'vue-router';
import { computed, ref } from 'vue';
import ImageGrid from '@/components/small/ImageGrid.vue';
import Box1 from '@/components/small/Box1.vue';
import ImageLine from '@/components/small/ImageLine.vue';
import ImagePreview from '@/components/small/ImagePreview.vue';
import Viewer from '@/components/3d/Viewer.vue';
import { getArtifactModelDetail } from '@/assets/data/3d';

const route = useRoute();
const router = useRouter();
const newsData = useSimpleDataLoader(async () => {
  const data = (await UnmoveableContent.getContentDetail(parseInt(route.query.id as string)));
  return {
    detail: data,
    model: getArtifactModelDetail(data.id)
  };
});
const subPartModels = computed(() => {
  //return newsData.content.value?.detail.associationMeList.filter((p) => p.modelId === UnmoveableContent.SubPartModelId);
  return getArtifactModelDetail(parseInt(route.query.id as string))?.subParts;
});
const previewShow = ref(false);
</script>

<template>
  <PageTopTitleBottomContent :title-image="Title" :box="false" :full="true">
    <template #belowTitle>
      <h2 class="text-bold color-text-second size-base mt-3">文物名称：{{ newsData.content.value?.detail.title }}</h2>
    </template>
    <template #content>
      <SimplePageContentLoader :loader="newsData">
        <div class="d-flex flex-row color-text-second size-ss h-90 position-relative">
          <!-- 左 文物介绍 -->
          <div class="d-flex flex-col w-30 flex-shrink-0">
            <Box1 class="h-50">
              <ScrollRect scroll="vertical">
                <h3 class="text-bold size-base">文物简介</h3>
                <SimpleRichHtml :contents="[ 
                  newsData.content.value!.detail.intro as string ,
                  newsData.content.value!.detail.description as string ,
                ]" />
              </ScrollRect>
            </Box1>
            <Box1 class="h-50 mt-3">
              <ScrollRect scroll="vertical">
                <h3 class="text-bold size-base">文物实图</h3>
                <ImageGrid class="mt-3" :data="newsData.content.value!.detail.images" :rowCount="3" imageHeight="120px">
                  <template #item="{ url, item, width, height }">
                    <img 
                      :src="url"
                      class="radius-base object-fit-cover bg-forth" 
                      tabindex="0"
                      :style="{ width, height }"
                      @click="previewShow=true"
                    />
                  </template>
                </ImageGrid>
              </ScrollRect>
            </Box1>
          </div>
          <!-- 中 3D模型 显示 -->
          <div class="d-flex flex-col w-40 flex-shrink-0">
            <div v-if="!newsData.content.value?.model?.model" class="h-100 d-flex flex-column justify-center align-center">
              暂无可用3D模型数据
            </div>
            <Viewer 
              v-else 
              ref="modelRef"
              class="h-100" 
              :path="newsData.content.value.model.model"
            />
          </div>

          <!-- 右 信息和构建 -->
          <div class="d-flex flex-col w-30 flex-shrink-0">
            <Box1 class="h-50">
              <h3 class="text-bold size-base">文物信息</h3>
              <div class="d-flex flex-col gap-ss size-s">
                <div>始建年代：{{ newsData.content.value!.detail.age }}</div>
                <div>文物类型：{{ newsData.content.value!.detail.crTypeText }}</div>
                <div>文物等级：{{ newsData.content.value!.detail.levelText }}</div>
                <div>所在区域：{{ newsData.content.value!.detail.regionText }}</div>
              </div>
            </Box1>

            <Box1 class="h-50 mt-3">
              <h3 class="text-bold size-base">构件3D模型</h3>
              <ImageLine 
                :data="subPartModels"
                :max-count="3"
                imagekey="image"
                @more-click="router.push({name: 'ArtifactSubPart', query: route.query })"
              >
                <template #item="{ url, item, width, height }">
                  <img 
                    :src="url"
                    class="radius-base object-fit-cover bg-forth" 
                    :style="{ width, height }"
                    tabindex="0"
                    @click="router.push({name: 'ArtifactSubPartModelDetail', query: { 
                      ...route.query,
                      model: item.model,
                    } })"
                  />
                </template>
              </ImageLine>
            </Box1>
          </div>

        </div>
      </SimplePageContentLoader>
    </template>
  </PageTopTitleBottomContent>
  <ImagePreview
    :list="newsData.content.value?.detail.images || []"
    v-model:show="previewShow"
  />
</template>

<style lang="scss" scoped>
.image-box {
  background-size: 100% 100%;
  background-image: url('@/assets/images/Artifact/ImageBox.png');
  padding: 10px;
  width: 100%;

  img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}
</style>