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

<template>
  <div class="hotspot-page">
    <div class="hotspot-page-container">
      <!-- 音频播放器 -->
      <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">
            <el-image :src="item" fit="contain" style="width: 100%; height: 100%" />
          </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>

      <!-- 底部的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
        v-if="audio && !isOneAduio"
        class="audioIcon"
        :title="audioSta ? '关闭音频' : '打开音频'"
        @click="audioSta = !audioSta"
      >
        <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
      </div>
    </div>

    <el-scrollbar :height="150" style="margin-top: 20px; height: 150px; flex-shrink: 0">
      <div class="hotspot-page-info">
        <h3>{{ myTitle }}</h3>
        <p>{{ myTxt }}</p>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/css';
  import { parseUrlParams } from '@/utils';

  import ModelIcon from '@hotspot/assets/images/icon-model@2x.png';
  import AcModelIcon from '@hotspot/assets/images/icon-model-1@2x.png';
  import ImageIcon from '@hotspot/assets/images/icon-image@2x.png';
  import AcImageIcon from '@hotspot/assets/images/icon-image-1@2x.png';
  import VideoIcon from '@hotspot/assets/images/icon-video@2x.png';
  import AcVideoIcon from '@hotspot/assets/images/icon-video-1@2x.png';
  import VolumeOn from '@hotspot/assets/images/Volume-on.png';
  import VolumeOff from '@hotspot/assets/images/Volume-off.png';

  const urlParams = parseUrlParams(window.location.href);

  export default {
    name: 'hotspot',
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {
        VolumeOn,
        VolumeOff,
        m: urlParams.m,
        id: urlParams.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(() => {
              if (
                !window.navigator.userAgent.match(
                  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                )
              ) {
                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>