helong-memorial-hall/packages/pc/src/views/Antiquity/Detail/index.vue

<template>
  <div class="antiquity-detail">
    <topbar />

    <div class="antiquity-detail-two">
      <template v-if="!isThree">
        <div
          v-if="Array.isArray(detail?.img) && detail.img.length"
          class="antiquity-detail-two-left"
        >
          <ElImage :src="getEnvImagePath(detail?.minImg)" />

          <img
            class="antiquity-detail-two-left__preview"
            draggable="false"
            :src="FullscreenImg"
            @click="handlePreviewImg"
          />
        </div>
      </template>

      <div v-else class="antiquity-detail-two-left is-model">
        <iframe ref="iframe" :src="`./model.html?m=${detail?.link}`" />
        <div class="antiquity-detail-two-left-tools">
          <img
            draggable="false"
            :src="isFullscreen ? UnFullscreenImg : FullscreenImg"
            @click="toggle"
          />
          <img
            draggable="false"
            src="@/assets/images/2.png"
            @click="handleZoom"
          />
          <img
            draggable="false"
            :src="autoPlay ? PauseImg : PlayImg"
            @click="handleAutoPlay"
          />
          <img
            draggable="false"
            src="@/assets/images/4.png"
            @click="handleResetView"
          />
        </div>
      </div>

      <ElScrollbar class="antiquity-detail-two-right">
        <h3>{{ detail?.name }}</h3>
        <div class="antiquity-detail-two-right-content">
          <!-- <p v-if="detail?.level">文物等级：{{ detail?.level || "--" }}</p> -->
          <p v-if="detail?.size">尺寸：{{ detail?.size || "--" }}</p>
          <p v-if="detail?.sd">时代：{{ detail?.sd || "--" }}</p>
          <p v-if="detail?.zd">质地：{{ detail?.zd || "--" }}</p>
          <p v-if="detail?.from">来源：{{ detail?.from || "--" }}</p>
          <p v-if="detail?.type">类别：{{ detail?.type || "--" }}</p>
          <p v-if="detail?.address">存放位置：{{ detail?.address || "--" }}</p>
          <p v-html="detail?.content" />
        </div>
      </ElScrollbar>
    </div>
  </div>

  <ElImageViewer v-if="preview" :url-list="imgs" @close="preview = false" />
</template>

<script setup>
import { useFullscreen } from "@vueuse/core";
import { computed, ref } from "vue";
import { antiquityData, getEnvImagePath } from "@helong/base";
import { useRoute } from "vue-router";
import Topbar from "@/components/Topbar.vue";
import FullscreenImg from "@/assets/images/icon.png";
import UnFullscreenImg from "@/assets/images/1.png";
import PlayImg from "@/assets/images/3.png";
import PauseImg from "@/assets/images/3-1.png";

const { isFullscreen, toggle } = useFullscreen();
const route = useRoute();
const detail = computed(() =>
  antiquityData.find((i) => i.id === Number(route.params.id))
);
const imgs = computed(() =>
  detail.value?.img ? detail.value.img.map((i) => getEnvImagePath(i)) : []
);
const preview = ref(false);
// 是否三维文物
const isThree = computed(() => Boolean(detail.value.link));
const iframe = ref(null);
// 模型自动旋转
const autoPlay = ref(true);

const handlePreviewImg = () => {
  preview.value = true;
};

const handleZoom = () => {
  iframe.value.contentWindow.webview.zoomIn(); // 放大
};

const handleAutoPlay = () => {
  if (!iframe.value.contentWindow.modelLoding) return;

  iframe.value.contentWindow.webview.stopRotate();
  autoPlay.value = !autoPlay.value;
};

const handleResetView = () => {
  iframe.value.contentWindow.webview.resetView();

  if (!autoPlay.value) handleAutoPlay();
};
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>