WenLanGeHotspot/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>

    <div class="title-wrapper">
      <h1
        :title="hotspotData.title"
        v-html="hotspotData.title"
      />
      <img
        src="@/assets/images/title-bottom-line.png"
        alt=""
        class="bottom-line"
      >
    </div>

    <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>
    </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>
    </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>

    <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>
      <!-- <button @click="onClickLike">
          <img
            class="like"
            src="@/assets/images/like-mobile.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-mobile.png"
          alt=""
          draggable="false"
        >
      </button> -->
    </menu>

    <div class="desc-wrap">
      <div
        class="place-holder"
        @mousedown.prevent
        @touchstart.prevent
      />
      <div class="desc-bg-wrap">
        <div class="top-bar" />
        <div
          class="desc"
          v-html="descForShow"
        />
      </div>
    </div>

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

<script>
import Swiper from 'swiper/swiper-bundle.esm.js'
import 'swiper/swiper-bundle.css'
import bgImg from "@/assets/images/bg.png"
// import browser from "@/utils/browser";

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

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

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

      currentSlideIdx: 0,
      bgImg,
      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()
                }
              }
            }
          }
        }
      })
    })
  },
  methods: {
    async getData() {
      let url = `https://super.4dage.com/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
      let result = (await this.$http.get(url)).data
      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: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #F1F3F4;
  z-index: 0;
  > .bg-audio {
    display: none;
  }

  > button.close {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 33.5px;
    height: 33.5px;
    z-index: 1;
    > img {
      width: 100%;
      height: 100%;
    }
  }

  > .title-wrapper {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 1;
    > h1 {
      width: 100%;
      font-size: 27.5px;
      line-height: 1.2em;
      font-size: 27.5px;
      font-family: DFLiShuW7;
      letter-spacing: 2px;
      text-align: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    > .bottom-line {
      position: absolute;
      top: 100%;
      left: calc(50% + 10px);
      transform: translateX(-50%);
      width: 174px;
      height: 9.5px;
    }
  }

  .swiper-wrapper-mine {
    position: absolute;
    top: 150px;
    left: 0px;
    width: 100%;
    height: 250px;
    z-index: 1;
    .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: 10px;
        width: 20px;
        background-image: url(../assets/images/arrow-left.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        &::after {
          content: '';
        }
      }
      .swiper-button-next {
        right: 10px;
        width: 20px;
        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%;
            left: 50%;
            width: 80%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .swiper-wrapper-mine.image-wrap {
    .swiper-root {
      .swiper-wrapper {
        > img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  > menu {
    position: absolute;
    top: 415px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    > button {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 38.5px;
      position: relative;
      &:last-of-type{
        margin-right: initial;
      }
      img {
        width: 100%;
        height: 100%;
      }
      // .plus-one {
      //   position: absolute;
      //   top: 0;
      //   right: 0;
      //   transform: translate(50%, -50%);
      // }
    }
  }

  > .desc-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    > .place-holder {
      width: 100%;
      height: 450px;
    }
    > .desc-bg-wrap {
      z-index: 2;
      position: absolute;
      top: 450px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100vw - 11px * 2);
      height: calc((100vw - 11px * 2) * 1.7);
      background-image: url(@/assets/images/bg-mobile.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      > .top-bar {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 127px;
        height: 4px;
        background: #F4D49F;
        border-radius: 2px;
      }
      > .desc {
        position: absolute;
        font-size: 16px;
        line-height: 26px;
        font-family: Adobe Heiti Std;
        top: 77px;
        bottom: 40px;
        left: 26px;
        right: 26px;
        width: calc(100% - 26px * 2);
        overflow: auto;
      }
    }
  }

  .share-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    > img.code {
      position: absolute;
      top: 190px;
      left: 50%;
      transform: translateX(-50%);
      width: 170px;
      height: 170px;
    }
  }
}

/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;
// }

::-webkit-scrollbar { width: 0; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
</style>