AnhuiDaily/src/components/HotspotDetail.vue

<template>
  <div class="hotspot-detail">
    <div class="wrapper">
      <!-- <button
        v-show="descForShow"
        class="desc"
        @click="isShowDesc = true"
      >
        <img
          src="@/assets/images/desc.png"
          alt="详情"
          draggable="false"
        >
      </button> -->

      <h1
        :title="titleForShow"
        v-html="titleForShow"
      />

      <button
        class="close"
        @click="$emit('close')"
      >
        <img
          src="@/assets/images/close.png"
          alt="关闭"
          draggable="false"
        >
      </button>

      <div
        v-if="typesForShow[currentTabIdx].name === '视频'"
        class="swiper-wrapper-mine video-wrap"
      >
        <div
          class="swiper-root swiper-root"
        >
          <div
            class="swiper-wrapper"
          >
            <div
              v-for="(item, index) in typesForShow[currentTabIdx].list"
              :key="index"
              class="swiper-slide"
            >
              <video
                ref="video"
                :src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${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-if="typesForShow[currentTabIdx].name === '模型'"
        class="swiper-wrapper-mine model-wrap"
      >
        <div
          class="swiper-root"
        >
          <div
            class="swiper-wrapper"
          >
            <iframe
              v-for="(item, index) in typesForShow[currentTabIdx].list"
              :key="index"
              :src="item.url"
              frameborder="0"
              class="swiper-slide"
            />
          </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="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
        class="swiper-wrapper-mine audio-wrap"
      >
        <div
          class="swiper-root"
        >
          <div
            class="swiper-wrapper"
          >
            <Audio
              v-for="(item, index) in typesForShow[currentTabIdx].list"
              ref="audio-comp"
              :key="index"
              class="audio-custom swiper-slide"
              :audio-src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
            />
          </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="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '图片'"
        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 typesForShow[currentTabIdx].list"
              :key="index"
              v-lazy="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
              class="swiper-slide"
              alt=""
              draggable="false"
            >
          </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>

      <p class="desc">
        {{ descForShow }}
      </p>

      <!-- <div class="type-tabbar">
        <button
          v-for="(typeItem, index) in typesForShow"
          :key="typeItem.name"
          class="tab"
          :class="{
            active: currentTabIdx === index
          }"
          @click="currentTabIdx = index"
        >
          <img
            :src="currentTabIdx !== index ? typeItem.icon : typeItem.iconActive"
            alt=""
            draggable="false"
          >
          <div>{{ typeItem.name + ' ' + typeItem.list.length }}</div>
        </button>
      </div> -->

      <!-- <MyDesc
        v-show="isShowDesc"
        :title="titleForShow"
        :desc="descForShow"
        @close="isShowDesc = false"
      /> -->
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.esm.js'
import 'swiper/swiper-bundle.css'
import Audio from "@/components/Audio.vue"
// import MyDesc from "@/components/HotspotDetailDesc.vue"

export default {
  components: {
    Audio,
    // MyDesc,
  },
  props: {
    hotspotList: {
      type: Array,
      required: true,
    },
    sceneCode: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      currentTabIdx: 0,
      currentSlideIdx: 0,
      isShowDesc: false,
    }
  },
  computed: {
    types() {
      const ret = [
        {
          key: 'video',
          name: '视频',
          icon: require('@/assets/images/swkk/video.png'),
          iconActive: require('@/assets/images/swkk/video_1.png'),
          list: [
            // {
            //   title: 'title',
            //   url: 'asdf',
            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
            // },
          ]
        },
        {
          key: 'link',
          name: '模型',
          icon: require('@/assets/images/swkk/model.png'),
          iconActive: require('@/assets/images/swkk/model_1.png'),
          list: [
            // {
            //   title: 'title',
            //   url: 'asdf',
            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
            // },
          ]
        },
        {
          key: 'audio',
          name: '音频',
          icon: require('@/assets/images/swkk/audio.png'),
          iconActive: require('@/assets/images/swkk/audio_1.png'),
          list: [
            // {
            //   title: 'title',
            //   url: require('@/assets/images/close.png'),
            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
            // },
            // {
            //   title: 'title2',
            //   url: require('@/assets/images/curvy-line.png'),
            //   desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
            // },
          ]
        },
        {
          key: 'image',
          name: '图片',
          icon: require('@/assets/images/swkk/pic.png'),
          iconActive: require('@/assets/images/swkk/pic_1.png'),
          list: [
            // {
            //   title: 'title',
            //   url: require('@/assets/images/close.png'),
            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
            // },
            // {
            //   title: 'title2',
            //   url: require('@/assets/images/curvy-line.png'),
            //   desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
            // },
          ]
        },
      ]
      for (const hotspot of this.hotspotList) {
        const targetTypeItem = ret.find((item) => {
          return item.key === hotspot.type
        })
        for (const mediaItem of hotspot.media[hotspot.type]) {
          targetTypeItem.list.push({
            title: /* hotspot.content || */hotspot.title.split('&')[0],
            url: mediaItem.src,
            desc: hotspot.content,
          })
        }
      }
      return ret
    },
    titleForShow() {
      try {
        return this.typesForShow[this.currentTabIdx].list[this.currentSlideIdx].title
      } catch (error) {
        return ''
      }
    },
    descForShow() {
      try {
        return this.typesForShow[this.currentTabIdx].list[this.currentSlideIdx].desc
      } catch (error) {
        return ''
      }
    },
    typesForShow() {
      return this.types.filter((item) => {
        return item.list.length
      })
    },
  },
  watch: {
    currentTabIdx: {
      handler(vNew) {
        this.currentSlideIdx = 0
        this.$nextTick(() => {
          const that = this
          const swiper = new Swiper('.swiper-root', {
            // If we need pagination
            // pagination: {
            //   el: '.swiper-pagination',
            // },

            // Navigation arrows
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            on: {
              afterInit: function (e) {
                if (that.typesForShow[vNew].key === 'video') {
                  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.typesForShow[vNew].key === 'video') {
                  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()
                    }
                  }
                }
              }
            }
          })
        })
      },
      immediate: true,
    },
  },
  mounted() {
    this.mustMute()
  },
  beforeDestroy() {
    this.cancelMustMute()
  },
  methods: {
    ...globalMapMutations([
      'mustMute',
      'cancelMustMute',
    ])
  }
}
</script>

<style lang="less" scoped>
.hotspot-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.70);
  backdrop-filter: blur(4px);
  > .wrapper {
    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.desc {
      position: absolute;
      top: 3.2rem;
      left: 1.25rem;
      width: 5rem;
      height: 5rem;
      > 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;
    }
    > button.close {
      position: absolute;
      top: 29px;
      right: 37px;
      width: 28px;
      height: 28px;
      > img {
        width: 100%;
        height: 100%;
      }
    }

    .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: calc(100% + 1em);
          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 {
      height: calc(31.5rem * 0.85);
      width: calc(43.5rem * 0.85);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -70%);
      .swiper-root {
        .swiper-wrapper {
          .swiper-slide {
            background-image: url(@/assets/images/swkk/hotspot-video-bg.png);
            background-size: contain;
            background-repeat: no-repeat;
            padding: 5.67rem 2.21rem 1.88rem 1.8rem;
            > video {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .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 {
            object-fit: contain;
          }
        }
      }
    }

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

    > .type-tabbar {
      position: absolute;
      bottom: 11.9%;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      > button {
        margin-right: 2.08rem;
        &:last-child {
          margin-right: initial;
        }
        > img {
          width: 5rem;
          height: 5rem;
          margin-bottom: 0.42rem;
        }
        > div {
          font-size: 1.25rem;
          color: #666666;
        }
        &.active {
          > div {
            color: #930909;
          }
        }
      }
    }
  }
  ::-webkit-scrollbar { width: 2px; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
  ::-webkit-scrollbar-thumb {
    background: #958D76;
  }
}
</style>