AnhuiDailyHotspot/src/views/HomeNew.vue

<template>
  <div class="hotspot-home">
    <h1
      :title="hotspotData.title"
      v-html="hotspotData.title"
    />

    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.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>
        <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>

    <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 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 1329px;
  max-height: 848px;
  background: #E5DFCD;
  border-top: solid 8px #A10E0C;
  border-bottom: solid 8px #A10E0C;
  padding: 28px 100px;
  > button.close {
    position: absolute;
    top: 29px;
    right: 37px;
    width: 28px;
    height: 28px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > h1 {
    text-align: center;
    font-size: 32px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #A10E0C;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    margin-bottom: 28px;
  }
  .swiper-wrapper-mine {
    height: calc(100% - 32px - 28px - 22px - 72px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 22px;
    .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;
        color: #666;
        .cur {
          color: #930909;
        }
      }
      .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;
        }
      }
    }
  }

  > p.desc {
    font-size: 16px;
    color: #494140;
    line-height: 19px;
    height: 72px;
    overflow: auto;
    padding-right: 6px;
  }
}

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