HaiDeBaoHotspot/src/views/HomeMobile.vue

<template>
  <div class="hotspot-home">
    <audio
      ref="bg-audio"
      class="bg-audio"
      :src="bgAudioUrl"
      loop
      autoplay
    />

    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.png"
        alt="关闭"
        draggable="false"
      >
    </button>

    <h1
      :title="hotspotData.title"
      v-html="hotspotData.title"
    />

    <button
      class="download"
      @click="onClickDownload"
    >
      <img
        class=""
        src="@/assets/images/download.png"
        alt=""
        draggable="false"
      >
      <span>
        Download brochure
      </span>
    </button>

    <div class="content-wrapper">
      <div
        class="desc"
        v-html="descForShow"
      />
      <div
        class="swiper-wrapper-mine image-wrapper"
      >
        <div
          class="swiper-root"
        >
          <div
            v-viewer="{
              button: true,
              navbar: false,
              title: false,
              toolbar: false,
              tooltip: false,
              movable: true,
              zoomable: true,
              rotatable: true,
              scalable: true,
              transition: false,
              fullscreen: false,
              keyboard: true,
              loop: false,
            }"
            class="swiper-wrapper img-list-wrapper"
          >
            <img
              v-for="(item, index) in hotspotData.images"
              :key="index"
              v-lazy="item"
              class="swiper-slide"
              :class="{
                single: hotspotData.images.length === 1
              }"
              alt=""
              draggable="false"
            >
          </div>
        <!-- <div class="swiper-pagination" />
        <div class="swiper-button-prev" />
        <div class="swiper-button-next" /> -->
        </div>
      </div>

      <div
        class="swiper-wrapper-mine video-wrapper"
      >
        <div
          class="swiper-root"
        >
          <div
            class="swiper-wrapper video-list-wrapper"
          >
            <div
              v-for="(item, index) in hotspotData.video"
              :key="index"
              class="swiper-slide"
              :class="{
                single: hotspotData.images.length === 1
              }"
              @click="viewVideo(item)"
            >
              <video
                ref="video"
                :src="item.url"
              />
              <img
                class="icon"
                src="@/assets/images/play.png"
                alt=""
                draggable="false"
              >
            </div>
          </div>
        <!-- <div class="swiper-pagination" />
        <div class="swiper-button-prev" />
        <div class="swiper-button-next" /> -->
        </div>
      </div>
    </div>

    <!-- <menu>
      <button
        v-if="bgAudioUrl"
        @click="isBgAudioMuted = !isBgAudioMuted"
      >
        <img
          v-show="isBgAudioMuted"
          class="bg-audio-control"
          src="@/assets/images/bg-audio-mobile.png"
          alt=""
          draggable="false"
        >
        <img
          v-show="!isBgAudioMuted"
          class="bg-audio-control"
          src="@/assets/images/bg-audio-mobile-muted.png"
          alt=""
          draggable="false"
        >
      </button>
    </menu> -->

    <div
      v-if="isShowVideoForPlay"
      class="video-for-play-wrapper"
    >
      <button
        class="close"
        @click="isShowVideoForPlay = false"
      >
        <img
          src="@/assets/images/close.png"
          alt="关闭"
          draggable="false"
        >
      </button>
      <video
        ref="video-for-play"
        :src="videoSrcForPlay"
        controls
        controlslist="nodownload"
        disablePictureInPicture
      />
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.esm.js'
import 'swiper/swiper-bundle.css'
import { deepProcess } from "@/utils/other.js"

export default {
  data() {
    return {
      hotspotData: {}, // 热点数据

      isShowVideoForPlay: false,
      videoSrcForPlay: '',

      bgAudioUrl: "", //背景音频url
      isBgAudioMuted: false,
    }
  },
  computed: {
    descForShow() {
      return this.hotspotData.content
    },
  },
  watch: {
    isBgAudioMuted: {
      handler(vNew) {
        if (vNew) {
          this.$refs['bg-audio'].pause() // or toggle静音？
        } else {
          this.$refs['bg-audio'].play() // or toggle静音？
        }
      }
    }
  },
  async mounted() {
    await this.getData()
    this.$nextTick(() => {
      const that = this
      new Swiper('.swiper-wrapper-mine .swiper-root', {
        slidesPerView: 'auto',
        // pagination: {
        //   el: '.swiper-pagination',
        // },
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },

        // on: {
        //   // 自动播放
        //   afterInit: function (e) {
        //     if (that.isShowVideos) {
        //       that.$nextTick(() => {
        //         that.$refs.video[0].play()
        //       })
        //     }
        //     if (that.isShowAudios) {
        //       that.$nextTick(() => {
        //         that.$refs.audio[0].play()
        //       })
        //     }
        //   },
        //   slideChange: function(e) {
        //     that.currentSlideIdx = e.activeIndex

        //     // 自动播放
        //     if (that.isShowVideos) {
        //       for (let index = 0; index < that.$refs.video.length; index++) {
        //         if (index !== that.currentSlideIdx) {
        //           that.$refs.video[index].pause()
        //         } else {
        //           that.$refs.video[index].play()
        //         }
        //       }
        //     }
        //     if (that.isShowAudios) {
        //       for (let index = 0; index < that.$refs.audio.length; index++) {
        //         if (index !== that.currentSlideIdx) {
        //           that.$refs.audio[index].pause()
        //         } else {
        //           that.$refs.audio[index].play()
        //         }
        //       }
        //     }
        //   }
        // }
      })
    })
  },
  methods: {
    // changeSubStr(str) {
    //   return str.replace('https://super.4dage.com/', process.env.VUE_APP_G_PREFIX)
    // },
    async getData() {
      let url = `${process.env.VUE_APP_G_PREFIX}/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
      let result = (await this.$http.get(url)).data
      // deepProcess(result, this.changeSubStr) // 本地化部署时的处理

      this.hotspotData = result[this.$route.query.m]
      if (!this.hotspotData) {
        return alert("热点解析错误")
      }
      console.log('热点数据：', this.hotspotData)

      this.bgAudioUrl = this.hotspotData.backgroundMusic

      if (this.hotspotData.backgroundMusic) {
        this.isShowAudios = true
        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
      }
    },
    viewVideo(videoItem) {
      this.videoSrcForPlay = videoItem.url
      this.isShowVideoForPlay = true
      this.$nextTick(() => {
        this.$refs['video-for-play'].play()
      })
    },
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
    onClickDownload() {
      window.open(
        "https://www.heidelbergchina.com/app/index.php?i=136&c=official&a=article&id=303&type=0&utm_source=vr&utm_campaign=cx104"
      )
    }
  }
}
</script>

<style lang="less" scoped>
.hotspot-home {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  border-top: 2.1vw solid #00A0E6;
  width: 81.5vw;
  height: 80vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 9vw 1vw 4vw 4vw;
  > .bg-audio {
    display: none;
  }
  > button.close {
    position: absolute;
    top: 4.8vw;
    right: 2.8vw;
    width: 6.2vw;
    height: 6.2vw;
    z-index: 1;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > h1 {
    font-size: 5vw;
    font-weight: bold;
    color: #1F3E7C;
    line-height: 1.5em;
    flex: 0 0 auto;
  }
  > button.download {
    margin-top: 3vw;
    height: 5.4vw;
    border: 1px solid #00A0E6;
    border-radius: 2.7vw;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    font-size: 2.8vw;
    color: #00A0E6;
    > img {
      vertical-align: middle;
      width: 2.9vw;
      height: 3.2vw;
      margin-right: 1vw;
    }
    > span {
      vertical-align: middle;
    }
  }
  > .content-wrapper {
    flex: 1 0 1px;
    overflow: auto;
    margin-top: 6.2vw;
    padding-right: 3vw;
    width: 100%;
    > .desc {
      font-family: Adobe Heiti Std;
      font-size: 3.6vw;
      color: #666666;
      line-height: 5.3vw;
    }
    .swiper-wrapper-mine {
      margin-top: 5vw;
      .swiper-root {
        overflow: hidden;
        height: 100%;
        width: 100%;
        .swiper-wrapper.img-list-wrapper {
          > .swiper-slide {
            object-fit: contain;
            border-radius: 4px;
            margin-right: 1.8vw;
            width: 30.2vw;
            height: 19.6vw;
            position: relative;
          }
          > .swiper-slide.single {
            width: 100%;
            height: initial;
            margin-right: initial;
          }
        }
        .swiper-wrapper.video-list-wrapper {
          > .swiper-slide {
            margin-right: 1.8vw;
            width: 30.2vw;
            height: 19.6vw;
            position: relative;
            > video {
              object-fit: contain;
              border-radius: 4px;
              width: 100%;
              height: 100%;
            }
            > img.icon {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 6.2vw;
              height: 6.2vw;
            }
          }
          > .swiper-slide.single {
            width: 100%;
            height: initial;
            margin-right: initial;
          }
        }
        .swiper-pagination {
        }
        .swiper-button-prev {
        }
        .swiper-button-next {
        }
      }
    }
  }
  > .video-for-play-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2;
    > button.close {
      position: absolute;
      top: 4.8vw;
      right: 2.8vw;
      width: 6.2vw;
      height: 6.2vw;
      z-index: 1;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    > video {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
    }
  }
}

/deep/.swiper-pagination-bullet-active {
  background: #a10e0c;
}

</style>

<style lang="less">
h3 {
  font-size: 4.3vw;
  color: black;
}
</style>