AnhuiDailyHotspot/src/views/HomeMobile.vue

<template>
  <div class="hotspot-home">
    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close-thin.png"
        alt="关闭"
        draggable="false"
      >
    </button>

    <div
      v-if="isShowVideos"
      class="swiper-wrapper-mine video-wrap"
    >
      <div
        class="swiper-root 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
            class="swiper-slide"
          >
            <video
              ref="video"
              :src="hotspotData.video[0].url"
              controls
              controlslist="nodownload"
              disablePictureInPicture
            />
          </div>
          <div
            class="swiper-slide"
          >
            <video
              ref="video"
              :src="hotspotData.video[0].url"
              controls
              controlslist="nodownload"
              disablePictureInPicture
            />
          </div> -->
        </div>
        <div class="swiper-pagination">
          <!-- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span> -->
        </div>
        <!-- <div class="swiper-button-prev" />
        <div class="swiper-button-next" /> -->
      </div>
    </div>

    <div
      v-show="isShowImages"
      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 class="title-wrap">
      <h1
        :title="hotspotData.title"
        v-html="hotspotData.title"
      />
    </div>

    <p
      class="desc"
      v-html="descForShow"
    />
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.esm.js'
import 'swiper/swiper-bundle.css'

// import browser from "@/utils/browser";

export default {
  data() {
    return {
      hotspotData: {}, // 热点数据
      audioUrl: "", //背景音频url
      isShowImages: false,
      isShowVideos: false,
      currentSlideIdx: 0,
    }
  },
  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 ''
      }
    },
  },
  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.typesForShow[vNew].key === 'audio') {
            //   that.$nextTick(() => {
            //     that.$refs['audio-comp'][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.typesForShow[vNew].key === 'audio') {
            //   for (let index = 0; index < that.$refs['audio-comp'].length; index++) {
            //     if (index !== that.currentSlideIdx) {
            //       that.$refs['audio-comp'][index].pause()
            //     } else {
            //       that.$refs['audio-comp'][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.audioUrl = 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
      }
    },
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
  }
}
</script>

<style lang="less" scoped>
.hotspot-home {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  > button.close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    > img {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-wrapper-mine {
    position: absolute;
    left: 0;
    top: 25%;
    width: 100%;
    height: 35.6%;
    .swiper-root {
      overflow: hidden;
      height: 100%;
      width: 100%;
      .swiper-wrapper {
      }
      .swiper-pagination {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
      }
      // .swiper-button-prev {
      //   left: calc(-1.67rem - 1.83rem);
      //   width: 1.83rem;
      //   height: 3.58rem;
      //   background-image: url(../assets/images/arrow-left.png);
      //   background-size: contain;
      //   &::after {
      //     content: '';
      //   }
      // }
      // .swiper-button-next {
      //   right: calc(-1.67rem - 1.83rem);
      //   width: 1.83rem;
      //   height: 3.58rem;
      //   background-image: url(../assets/images/arrow-right.png);
      //   background-size: contain;
      //   &::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 {
  //   width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
  //   height: 30rem;
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -70%);
  //   .swiper-root {
  //     width: 100%;
  //     .swiper-wrapper {
  //     }
  //   }
  // }
  .swiper-wrapper-mine.image-wrap {
    .swiper-root {
      .swiper-wrapper {
        > img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  > .title-wrap {
    position: absolute;
    width: 100%;
    overflow: auto;
    top: 66%;
    > h1 {
      padding: 0 26px;
      white-space: pre;
      font-size: 24px;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
  .desc {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 30px;
    height: 22%;
    overflow: auto;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 19px;
    padding-right: 10px;
  }
}

/deep/.swiper-pagination-bullet {
  opacity: 1;
  background: #666;
}
/deep/.swiper-pagination-bullet-active {
  background: #a10e0c;
}
</style>