YuHuaTai-Mobile/src/components/HotspotDetail.vue

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

    <h1 v-html="titleForShow" />

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

    <div
      v-if="typesForShow[currentTabIdx].key === 'video'"
      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="`${$swkkHotspotVideoAudioPath}${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].key === 'link'"
      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-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === 'audio'"
      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="`${$swkkHotspotVideoAudioPath}${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-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === 'image'"
      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="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>

    <div
      v-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === '2d'"
      class="swiper-wrapper-mine d2-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="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>

    <div
      v-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === 'article'"
      class="swiper-wrapper-mine article-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="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>

    <div class="type-tabbar">
      <button
        v-for="(typeItem, index) in typesForShow"
        :key="typeItem.name"
        class="tab"
        :class="{
          active: currentTabIdx === index
        }"
        @click="currentTabIdx = index"
      >
        <button
          v-if="typeItem.key === 'image' && typesForShow[currentTabIdx].key === 'image'"
          class="expand-list-btn"
        >
          <img
            v-show="!isShowImgList"
            class=""
            src="@/assets/images/arrow-up.png"
            alt=""
            draggable="false"
            @click="isShowImgList = true"
          >
          <img
            v-show="isShowImgList"
            class=""
            src="@/assets/images/arrow-down.png"
            alt=""
            draggable="false"
            @click="isShowImgList = false"
          >
        </button>
        <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"
    />

    <HotspotDetailImgList
      v-show="isShowImgList"
      class="img-list"
      :img-list="types[3].list"
      :active-index="currentSlideIdx"
      @close="isShowImgList = false"
      @selectItem="onSelectImageItem"
    />
  </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"
import { hotData as hotspotDataListFromLocal } from "@/assets/data/swkkHotspotData.js"
import HotspotDetailImgList from "@/components/HotspotDetailImgList"

export default {
  components: {
    Audio,
    MyDesc,
    HotspotDetailImgList,
  },
  props: {
    hotspotList: {
      type: Array,
      required: true,
    },
    sceneCode: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentTabIdx: 0,
      currentSlideIdx: 0,
      isShowDesc: false,
      isShowImgList: false,
      swiper: null,
    }
  },
  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: [
          ]
        },
        {
          key: '2d',
          name: '二维',
          icon: require('@/assets/images/swkk/pic.png'),
          iconActive: require('@/assets/images/swkk/pic_1.png'),
          list: [
          ]
        },
        {
          key: 'article',
          name: '文章',
          icon: require('@/assets/images/swkk/pic.png'),
          iconActive: require('@/assets/images/swkk/pic_1.png'),
          list: [
          ]
        },
      ]
      for (const hotspot of this.hotspotList) {
        if (hotspot.type === 'audio' || hotspot.type === 'video' || hotspot.type === 'link') {
          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,
            })
          }
        }
      }

      const hotspotDataFromLocal = hotspotDataListFromLocal.find((item) => {
        return item.hotId === this.id
      })
      if (hotspotDataFromLocal) {
        for (const imgItem of hotspotDataFromLocal.img || []) {
          ret[3].list.push({
            title: imgItem.name,
            url: `${process.env.VUE_APP_SWKK_PATH}${this.id}/img/${imgItem.id}`,
            desc: imgItem.content,
          })
        }
        for (const item2d of hotspotDataFromLocal['2d'] || []) {
          ret[4].list.push({
            title: item2d.name,
            url: `${process.env.VUE_APP_SWKK_PATH}${this.id}/2d/${item2d.id}`,
            desc: item2d.content,
          })
        }
        for (const articleItem of hotspotDataFromLocal.article || []) {
          ret[5].list.push({
            title: articleItem.name,
            url: `${process.env.VUE_APP_SWKK_PATH}${this.id}/article/${articleItem.id}`,
            desc: articleItem.content,
          })
        }
      }
      console.log(ret)
      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
          this.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',
    ]),
    onSelectImageItem(index) {
      this.isShowImgList = false
      this.swiper.slideTo(index, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.hotspot-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,251,245,0.9);
  backdrop-filter: blur(4px);
  z-index: 2;
  > button.desc {
    position: absolute;
    top: 3.2rem;
    left: 1.25rem;
    width: 5rem;
    height: 5rem;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > h1 {
    position: absolute;
    top: 5rem;
    left: 10.46rem;
    right: 10.46rem;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #930909;
    line-height: 2.34rem;
  }
  > button.close {
    position: absolute;
    top: 3.2rem;
    right: 1.25rem;
    width: 5rem;
    height: 5rem;
    > img {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-wrapper-mine {
    top: 11rem;
    width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
    margin: 0 auto;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .swiper-root {
      overflow: hidden;
      height: 100%;
      .swiper-wrapper {
      }
      // .swiper-pagination {
      //   top: 100%;
      //   bottom: initial;
      //   height: 0.42rem;
      //   /deep/.swiper-pagination-bullet {
      //     width: 5.34rem;
      //     height: 0.42rem;
      //     background-color: #999999;
      //     margin-right: 0.79rem;
      //     // background-color: #930909;
      //     border-radius: initial;
      //   }
      //   /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
      //     background-color: #930909;
      //   }
      // }
      .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-wrapper-mine.d2-wrap, .swiper-wrapper-mine.article-wrap {
    .swiper-root {
      .swiper-wrapper {
        > img {
          object-fit: contain;
        }
      }
    }
  }

  > .type-tabbar {
    position: absolute;
    bottom: 11.9%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    > button {
      margin-right: 2.08rem;
      position: relative;
      &:last-child {
        margin-right: initial;
      }
      > button.expand-list-btn {
        position: absolute;
        left: 50%;
        top: -3.5rem;
        transform: translateX(-50%);
        width: 3.5rem;
        padding: 0.5rem;
        > img {
          width: 100%;
        }
      }
      > img {
        width: 5rem;
        height: 5rem;
        margin-bottom: 0.42rem;
      }
      > div {
        font-size: 1.25rem;
        color: #666666;
      }
      &.active {
        > div {
          color: #930909;
        }
      }
    }
  }
}
</style>