HaiDeBaoHotspot/src/views/HomeWeb.vue

<template>
  <div
    ref="comp-root"
    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>
    <div
      class="bg-wrapper"
    >
      <h1
        :title="hotspotData.title"
        :style="{
          backgroundImage: `url(${titleBottomLine})`,
        }"
        v-html="hotspotData.title"
      />
      <div
        class="desc"
        v-html="descForShow"
      />
      <menu>
        <button
          v-if="bgAudioUrl"
          @click="isBgAudioMuted = !isBgAudioMuted"
        >
          <img
            v-show="isBgAudioMuted"
            class="bg-audio-control"
            src="@/assets/images/bg-audio.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="!isBgAudioMuted"
            class="bg-audio-control"
            src="@/assets/images/bg-audio-muted.png"
            alt=""
            draggable="false"
          >
        </button>
        <!-- <button @click="onClickLike">
          <img
            class="like"
            src="@/assets/images/like.png"
            alt=""
            draggable="false"
          >
          <transition name="bubble">
            <div
              v-if="isShowPlusOne"
              class="plus-one"
            >
              +1
            </div>
          </transition>
        </button> -->
        <!-- <button @click="onClickShare">
          <img
            class="share"
            src="@/assets/images/share.png"
            alt=""
            draggable="false"
          >
        </button> -->
      </menu>

      <div
        v-if="isShowVideos"
        v-show="!isShowShare"
        class="swiper-wrapper-mine video-wrap"
      >
        <div
          class="swiper-root"
        >
          <div
            class="swiper-wrapper"
          >
            <div
              v-for="(item, index) in hotspotData.video"
              :key="index"
              class="swiper-slide"
            >
              <video
                ref="video"
                :src="item.url"
                controls
                controlslist="nodownload"
                disablePictureInPicture
              />
            </div>
          </div>
          <div class="swiper-pagination" />
          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </div>
      </div>

      <div
        v-if="isShowModels"
        class="swiper-wrapper-mine model-wrap"
      >
        <div
          class="swiper-root"
        >
          <div
            class="swiper-wrapper"
          >
            <iframe
              v-for="(item, index) in hotspotData.model"
              :key="index"
              :src="item"
              frameborder="0"
              class="swiper-slide"
            />
          </div>
          <div class="swiper-pagination" />
          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </div>
      </div>

      <div
        v-if="isShowAudios"
        v-show="!isShowShare"
        class="swiper-wrapper-mine audio-wrap"
      >
        <div
          class="swiper-root"
        >
          <div
            class="swiper-wrapper"
          >
            <div
              v-for="(item, index) in hotspotData.audio"
              :key="index"
              class="swiper-slide"
            >
              <audio
                ref="audio"
                :src="item.url"
                controls
                controlslist="nodownload"
                disablePictureInPicture
              />
            </div>
          </div>
          <div class="swiper-pagination" />
          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </div>
      </div>

      <div
        v-if="isShowImages"
        v-show="!isShowShare"
        class="swiper-wrapper-mine image-wrap"
      >
        <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
              v-for="(item, index) in hotspotData.images"
              :key="index"
              v-lazy="item"
              class="swiper-slide"
              alt=""
              draggable="false"
            >
          </div>
          <div class="swiper-pagination">
          <!-- <span
            class="cur"
          >
            {{ currentSlideIdx + 1 }}
          </span>
          /
          <span>
            {{ hotspotData.Images ? hotspotData.images.length : '' }}
          </span> -->
          </div>
          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </div>
      </div>

      <div
        v-if="isShowShare"
        v-click-outside.click="closeCode2d"
        class="share-wrap"
      >
        <img
          src="@/assets/images/code2d.png"
          alt=""
          class="code"
          draggable="false"
        >
        <img
          src="@/assets/images/share-tip.png"
          alt=""
          class="tip"
          draggable="false"
        >
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.esm.js'
import 'swiper/swiper-bundle.css'
import titleBottomLine from "@/assets/images/title-bottom-line.png"
import { deepProcess } from "@/utils/other.js"
// import browser from "@/utils/browser";

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

      bgAudioUrl: "", //背景音频url
      isBgAudioMuted: false,

      isShowImages: false,
      isShowVideos: false,
      isShowModels: false,
      isShowAudios: false,

      currentSlideIdx: 0,
      titleBottomLine,
      isShowPlusOne: false,
      isShowShare: false,
    }
  },
  computed: {
    descForShow() {
      if (this.isShowImages) {
        return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
      } else if (this.isShowVideos) {
        return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
      } else {
        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-root', {
        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()
                }
              }
            }
          }
        }
      })
    })

    if (window.innerWidth < 1350 || window.innerHeight < 810) {
      const realWHRatio = window.innerWidth / window.innerHeight
      if (realWHRatio > 1350 / 810) {
        const scaleRate = window.innerHeight / 810
        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
      } else {
        const scaleRate = window.innerWidth / 1350
        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
      }
    }
  },
  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.images && this.hotspotData.images.length) {
        this.isShowImages = true
      } else if (this.hotspotData.video && this.hotspotData.video.length) {
        this.isShowVideos = true
      } else if (this.hotspotData.model && this.hotspotData.model.length) {
        this.isShowModels = true
      } else if (this.hotspotData.backgroundMusic) {
        this.isShowAudios = true
        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
      }
    },
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
    // onClickLike() {
    //   const res = globalApi.like()
    //   if (res && res.then) {
    //   res.then(() => {
    //   this.isShowPlusOne = true
    //   setTimeout(() => {
    //     this.isShowPlusOne = false
    //   }, 1000)
    //   })
    //   }
    // },
    onClickShare() {
      setTimeout(() => {
        this.isShowShare = true
      }, 200)
    },
    closeCode2d() {
      if (this.isShowShare) {
        this.isShowShare = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.hotspot-home {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1350px;
  height: 810px;
  padding: 0 70px 0 0;
  color: #F1F3F4;
  transform: translate(-50%, -50%);
  > .bg-audio {
    display: none;
  }
  > button.close {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 58px;
    height: 58px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > .bg-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    > h1 {
      position: absolute;
      top: 211px;
      left: 44px;
      max-width: 418px;
      font-size: 28px;
      font-family: DFLiShuW7;
      overflow: hidden;
      white-space: pre;
      text-overflow: ellipsis;
      letter-spacing: 5px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
    }
    > .desc {
      position: absolute;
      top: 347px;
      left: 55px;
      width: 390px;
      font-size: 16px;
      line-height: 26px;
      font-family: Adobe Heiti Std;
      overflow: auto;
      height: 300px;
    }
    > menu {
      position: absolute;
      right: 817px;
      bottom: 90px;
      > button {
        display: inline-block;
        width: 48px;
        height: 48px;
        margin-left: 24px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        // .plus-one {
        //   position: absolute;
        //   top: 0;
        //   right: 0;
        //   transform: translate(50%, -50%);
        // }
      }
    }
    .swiper-wrapper-mine {
      position: absolute;
      top: 50%;
      right: 30px;
      width: 720px;
      height: 476px;
      transform: translateY(-50%);
      .swiper-root {
        overflow: hidden;
        height: 100%;
        width: 100%;
        .swiper-wrapper {
        }
        .swiper-pagination {
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          font-size: 1.33rem;
          font-family: Inter-Regular, Inter;
          .cur {
          }
        }
        .swiper-button-prev {
          left: -30px;
          width: 30px;
          // background-image: url(../assets/images/arrow-left.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          &::after {
            content: '';
          }
        }
        .swiper-button-next {
          right: -30px;
          width: 30px;
          // background-image: url(../assets/images/arrow-right.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          &::after {
            content: '';
          }
        }
      }
    }
    .swiper-wrapper-mine.video-wrap {
      .swiper-root {
        .swiper-wrapper {
          .swiper-slide {
            > video {
              width: 100%;
              height: 100%;
              background: #000;
            }
          }
        }
      }
    }
    .swiper-wrapper-mine.model-wrap {
      .swiper-root {
        .swiper-wrapper {
        }
      }
    }
    .swiper-wrapper-mine.audio-wrap {
      .swiper-root {
        .swiper-wrapper {
          .swiper-slide {
            > audio {
              position: absolute;
              top: 50%;
              width: 100%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .swiper-wrapper-mine.image-wrap {
      .swiper-root {
        .swiper-wrapper {
          > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }

    .share-wrap {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 244px;
      > img.code {
        width: 300px;
        height: 300px;
      }
      > img.tip {
        position: absolute;
        left: 50%;
        top: calc(100% + 10px);
        transform: translateX(-50%);
        width: 150px;
      }
    }
  }
}

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

// .bubble-enter {
//   opacity: 0;
//   top: 1rem !important;
// }
// .bubble-enter-to {
//   opacity: 1;
//   top: 0 !important;
// }
// .bubble-enter-active {
//   transition: all 0.5s;
// }
// .bubble-leave {
//   opacity: 1;
//   top: 0 !important;
// }
// .bubble-leave-to {
//   opacity: 0;
//   top: -1rem !important;
// }
// .bubble-leave-active {
//   transition: all 0.5s;
// }
</style>