vue3-scene-web/src/views/hotspot/index.vue

<template>
  <div class="hotspot-page">
    <div class="hotspot-page-info">
      <h3>{{ myTitle }}</h3>
      <p>{{ myTxt }}</p>
    </div>

    <!-- 音频图标 -->
    <div
      v-if="audio && !isOneAduio"
      class="audioIcon"
      :title="audioSta ? '关闭音频' : '打开音频'"
      @click="audioSta = !audioSta"
    >
      <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
    </div>

    <div class="hotspot-page-main">
      <!-- 音频播放器 -->
      <audio
        id="myAudio"
        v-if="audio"
        ref="volumeRef"
        v-show="isOneAduio"
        :src="audio"
        controls
      ></audio>

      <!-- 模型页面 -->
      <Swiper
        v-if="myType === 'model'"
        class="hotspot-page-swiper hotspot-page-model"
        @swiper="initSwiper"
        @slideChange="handleChange"
      >
        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
          <iframe v-if="index === myInd" :src="item" frameborder="0" />
        </SwiperSlide>
      </Swiper>

      <!-- 视频页面 -->
      <Swiper
        v-if="myType === 'video'"
        class="hotspot-page-swiper hotspot-page-video"
        @swiper="initSwiper"
        @slideChange="handleChange"
      >
        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
          <video
            v-if="index === myInd"
            id="videoID"
            class="hotspot-page-video"
            controls
            :src="item.url"
            autoplay
          />
        </SwiperSlide>
      </Swiper>

      <!-- 图片页面 -->
      <Swiper
        v-if="myType === 'img'"
        class="hotspot-page-swiper hotspot-page-img-swiper"
        @swiper="initSwiper"
        @slideChange="handleChange"
      >
        <SwiperSlide v-for="item in curList" :key="item">
          <div class="hotspot-page-img">
            <img :src="item" alt="" />
          </div>
        </SwiperSlide>
      </Swiper>

      <template v-if="curList.length > 1">
        <div class="hotspot-page-swiper__left" @click="handlePre" />
        <div class="hotspot-page-swiper__right" @click="handleNext" />
      </template>
    </div>

    <!-- 底部的tab -->
    <div v-if="flooTab.length > 1" class="hotspot-page-nav">
      <div
        v-for="item in flooTab"
        :key="item.id"
        :class="[
          'hotspot-page-nav__item',
          {
            active: myType === item.type,
          },
        ]"
        @click="handleTab(item)"
      >
        <img :class="`${item.type}-icon`" :src="myType === item.type ? item.acIcon : item.icon" />
        {{ item.name }}
        {{ item.type === 'img' ? `${myInd + 1}/${data.img.length}` : '' }}
      </div>
    </div>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/css';
  import ModelIcon from '@/assets/images/icon-model@2x.png';
  import AcModelIcon from '@/assets/images/icon-model-1@2x.png';
  import ImageIcon from '@/assets/images/icon-image@2x.png';
  import AcImageIcon from '@/assets/images/icon-image-1@2x.png';
  import VideoIcon from '@/assets/images/icon-video@2x.png';
  import AcVideoIcon from '@/assets/images/icon-video-1@2x.png';
  import VolumeOn from '@/assets/images/Volume-on.png';
  import VolumeOff from '@/assets/images/Volume-off.png';

  export default {
    name: 'hotspot',
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {
        VolumeOn,
        VolumeOff,
        m: this.$route.query.m,
        id: this.$route.query.id,
        // 音频地址
        audio: '',
        // 如果只有单独的音频
        isOneAduio: false,
        // 音频状态
        audioSta: false,

        data: {
          // 模型数组
          model: [],
          // 视频数组
          video: [],
          // 图片数组
          img: [],
        },
        // 当前 type
        myType: '',

        // 当前索引
        myInd: 0,

        // 底部的tab
        flooTab: [],

        // 标题
        myTitle: '',
        // 内容
        myTxt: '',
        // 视频内容
        videoTxt: [],
        imgTxt: [],

        // 只有标题和文字（没有视频，没有模型，没有图片）
        oneTxt: false,
      };
    },
    computed: {
      curList() {
        return this.data[this.myType] || [];
      },
    },
    watch: {
      audioSta(val) {
        if (val) {
          this.$refs.volumeRef.play();
          this.$refs.volumeRef.onended = () => {
            // console.log("----音频播放完毕");
            this.audioSta = false;
          };
        } else this.$refs.volumeRef.pause();
      },
    },
    mounted() {
      this.getData();
    },
    methods: {
      async getData() {
        // https://www.4dmodel.com/
        let url = `https://super.4dage.com/data/${this.id}/hot/js/data.js?time=${Math.random()}`;
        let result = await fetch(url).then((response) => response.json());
        const resData = result[this.m];
        console.log('----', resData);
        if (resData) {
          this.audio = resData.backgroundMusic;
          // 只有单独的音频上传
          if (resData.backgroundMusic && !resData.model && !resData.video && !resData.images) {
            this.isOneAduio = true;
          }
          // 底部的tab
          const arr = [];
          const obj = {};
          if (resData.model) {
            obj.model = resData.model;
            arr.push({ id: 1, type: 'model', name: '模型', icon: ModelIcon, acIcon: AcModelIcon });
          }
          if (resData.video) {
            obj.video = resData.video;
            arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon, acIcon: AcVideoIcon });
          } else {
            this.$nextTick(() => {
              this.audioSta = true;
              this.$refs.volumeRef.play();
            });
          }
          if (resData.images) {
            obj.img = resData.images;
            arr.push({ id: 3, type: 'img', name: '图片', icon: ImageIcon, acIcon: AcImageIcon });
          }
          this.flooTab = arr;
          this.data = obj;

          // 当前type的值 应该为
          if (resData.model) this.myType = 'model';
          else if (resData.video) this.myType = 'video';
          else if (resData.images) this.myType = 'img';

          this.myTitle = resData.title || '';
          this.myTxt = resData.content || '';
          this.videoTxt = resData.videosDesc || [];
          this.imgTxt = resData.imagesDesc || [];

          // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
          if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
            this.oneTxt = true;
          }
        }
      },

      handleTab(item) {
        this.myInd = 0;
        this.myType = item.type;
      },

      initSwiper(swiper) {
        this.swiper = swiper;
      },
      handleChange({ activeIndex }) {
        this.myInd = activeIndex;
      },
      handlePre() {
        this.swiper?.slidePrev();
      },
      handleNext() {
        this.swiper?.slideNext();
      },
    },
  };
</script>

<style lang="scss">
  @import './index.scss';
</style>