XuzhouArtwork-hotspot/src/views/HomeWeb.vue

<template>
  <div
    ref="comp-root"
    class="hotspot-home"
  >
    <audio
      ref="bg-audio"
      class="bg-audio"
      :src="bgAudioUrl"
    />

    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.png"
        alt="关闭"
        draggable="false"
      >
    </button>
    <div
      class="bg-wrapper"
      :style="{
        backgroundImage: `url(${bgImg})`,
      }"
    >
      <h1
        :title="hotspotLocalInfo.title"
        :style="{
          backgroundImage: `url(${titleBottomLine})`,
        }"
        v-html="hotspotLocalInfo.title"
      />
      <div
        class="textInfo"
      >
        <ul>
          <li v-show="hotspotLocalInfo.age">
            <span class="key">时代：</span>
            <span class="value">{{ hotspotLocalInfo.age }}</span>
          </li>
          <li v-show="hotspotLocalInfo.position">
            <span class="key">出土地：</span>
            <span class="value">{{ hotspotLocalInfo.position }}</span>
          </li>
          <li v-show="hotspotLocalInfo.size">
            <span class="key">尺寸：</span>
            <span class="value">{{ hotspotLocalInfo.size }}</span>
          </li>
          <li v-show="hotspotLocalInfo.desc">
            <span class="key">介绍：</span>
            <span
              class="value"
              v-html="hotspotLocalInfo.desc"
            />
          </li>
        </ul>
      </div>
      <menu>
        <button
          v-if="bgAudioUrl"
          @click="isBgAudioMuted = !isBgAudioMuted"
        >
          <img
            v-show="!isBgAudioMuted"
            class="bg-audio-control"
            src="@/assets/images/bg-audio.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="isBgAudioMuted"
            class="bg-audio-control"
            src="@/assets/images/bg-audio-muted.png"
            alt=""
            draggable="false"
          >
        </button>
        <!-- <button @click="onClickLike">
          <img
            class="like"
            src="@/assets/images/like.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.png"
            alt=""
            draggable="false"
          >
        </button> -->
      </menu>

      <div class="type-tabbar">
        <button
          v-if="hasModels"
          :class="{inactive: activeType !== 0}"
          @click="activeType = 0"
        >
          <img
            :src="require(`@/assets/images/hotspot-model-pc-${activeType === 0 ? 'active' : 'normal'}.png`)"
            alt=""
            draggable="false"
          >
        </button>
        <button
          v-if="hasImages"
          :class="{inactive: activeType !== 1}"
          @click="activeType = 1"
        >
          <img
            :src="require(`@/assets/images/hotspot-image-pc-${activeType === 1 ? 'active' : 'normal'}.png`)"
            alt=""
            draggable="false"
          >
        </button>
      </div>

      <!-- <div
        v-if="hasVideos"
        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="hasModels && activeType === 0"
        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="$env.VUE_APP_CLI_MODE === 'local' ? `${$env.VUE_APP_RELIC_MODEL_PATH}?m=${item.split('m=')[1]}` : item"
              frameborder="0"
              class="swiper-slide"
            />
          </div>
          <div class="swiper-pagination" />
          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </div>
      </div>

      <!-- <div
        v-if="hasAudios"
        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 class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </div>
      </div> -->

      <div
        v-if="hasImages && activeType === 1"
        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
        v-if="isShowShare"
        v-click-outside.click="closeCode2d"
        class="share-wrap"
      >
        <img
          src="@/assets/images/code2d.png"
          alt=""
          class="code"
          draggable="false"
        >
        <img
          src="@/assets/images/share-tip.png"
          alt=""
          class="tip"
          draggable="false"
        >
      </div>
    </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 titleBottomLine from "@/assets/images/title-bottom-line.png"
import { deepProcess } from "@/utils/other.js"
// import browser from "@/utils/browser";
import hotspotLocalData from "@/assets/data/hotspotData.js"

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

      isBgAudioMuted: true,

      hasImages: false,
      hasModels: false,
      // hasVideos: false,
      // hasAudios: false,

      activeType: null, // 0: 模型, 1: 图片

      currentSlideIdx: 0,
      bgImg,
      titleBottomLine,
      isShowPlusOne: false,
      isShowShare: false,
    }
  },
  computed: {
    hotspotLocalInfo() {
      const ret = hotspotLocalData.find((item) => {
        return item.id === this.$route.query.m
      })
      return ret
    },
    bgAudioUrl() {
      return this.hotspotLocalInfo?.audio ? require(`@/assets/audios/${this.hotspotLocalInfo.audio}`) : ''
    }
  },
  watch: {
    isBgAudioMuted: {
      handler(vNew) {
        if (vNew) {
          this.$refs['bg-audio'].pause() // or toggle静音？
        } else {
          this.$refs['bg-audio'].play() // or toggle静音？
        }
      }
    },
    activeType: {
      handler(vNew) {
        this.currentSlideIdx = 0
        // init swiper
        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.hasVideos) {
            //       that.$nextTick(() => {
            //         that.$refs.video[0].play()
            //       })
            //     }
            //     if (that.hasAudios) {
            //       that.$nextTick(() => {
            //         that.$refs.audio[0].play()
            //       })
            //     }
            //   },
            //   slideChange: function(e) {
            //     that.currentSlideIdx = e.activeIndex

            //     // 自动播放
            //     if (that.hasVideos) {
            //       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.hasAudios) {
            //       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()
            //         }
            //       }
            //     }
            //   }
            // }
          })
        })
      }
    }
  },
  async mounted() {
    setTimeout(() => {
      if (this.bgAudioUrl) {
        this.isBgAudioMuted = false
      }
    }, 2000)

    await this.getData()

    // 热点详情弹窗尺寸适应窗口
    if (window.innerWidth < 1350 || window.innerHeight < 810) {
      const realWHRatio = window.innerWidth / window.innerHeight
      if (realWHRatio > 1350 / 810) {
        const scaleRate = window.innerHeight / 810
        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
      } else {
        const scaleRate = window.innerWidth / 1350
        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
      }
    }
  },
  methods: {
    changeSubStr(str) {
      return str.replace('https://super.4dage.com/', process.env.VUE_APP_G_PREFIX)
    },
    async getData() {
      let url = `${process.env.VUE_APP_G_PREFIX}data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
      let result = (await this.$http.get(url)).data

      // 打印所有热点中的感兴趣的字段
      // console.log(result)
      // for (const key in result) {
      //   if (Object.hasOwnProperty.call(result, key)) {
      //     const element = result[key]
      //     console.log(element.sid, element.title)
      //   }
      // }

      deepProcess(result, this.changeSubStr)

      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.hasImages = true
      }
      if (this.hotspotData.model && this.hotspotData.model.length) {
        this.hasModels = true
      }
      // if (this.hotspotData.video && this.hotspotData.video.length) {
      //   this.hasVideos = true
      // }
      //  else if (this.hotspotData.backgroundMusic) {
      //   this.hasAudios = true
      //   this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
      // }

      if (this.hasModels) {
        this.activeType = 0
      } else if (this.hasImages) {
        this.activeType = 1
      }
    },
    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: 50%;
  top: 50%;
  width: 1350px;
  height: 810px;
  padding: 0 70px 0 0;
  color: #F1F3F4;
  transform: translate(-50%, -50%);
  > .bg-audio {
    display: none;
  }
  > button.close {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 58px;
    height: 58px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > .bg-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    > h1 {
      text-align: center;
      position: absolute;
      top: 150px;
      left: 44px;
      max-width: 418px;
      font-size: 38px;
      font-family: DFLiShuW7;
      letter-spacing: 5px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
    }
    > .textInfo {
      position: absolute;
      top: 347px;
      left: 55px;
      width: 400px;
      font-size: 16px;
      line-height: 26px;
      font-family: Adobe Heiti Std;
      overflow: auto;
      height: 300px;
      padding-right: 10px;
      > ul {
        > li {
          display: block;
          margin-bottom: 0.5em;
          margin-left: 31px;
          position: relative;
          white-space: pre-wrap;
          &::before {
            position: absolute;
            left: -24px;
            top: 6px;
            content: '';
            background-color: #F1F3F4;
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 6px;
          }
        }
      }
    }
    > menu {
      position: absolute;
      right: 817px;
      bottom: 90px;
      > button {
        display: inline-block;
        width: 48px;
        height: 48px;
        margin-left: 24px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        // .plus-one {
        //   position: absolute;
        //   top: 0;
        //   right: 0;
        //   transform: translate(50%, -50%);
        // }
      }
    }
    > .type-tabbar {
      position: absolute;
      top: 10%;
      right: 580px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > button {
        width: 80px;
        margin-left: 10px;
        &:first-of-type.inactive {
          width: 50px;
        }
        &:last-of-type.inactive {
          width: 50px;
          margin-right: 5px;
          margin-left: 30px;
        }
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .swiper-wrapper-mine {
      position: absolute;
      top: 50%;
      right: 30px;
      width: 720px;
      height: 476px;
      transform: translateY(-50%);
      .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: -30px;
          width: 30px;
          background-image: url(../assets/images/arrow-left.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          &::after {
            content: '';
          }
        }
        .swiper-button-next {
          right: -30px;
          width: 30px;
          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%;
              width: 100%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .swiper-wrapper-mine.image-wrap {
      .swiper-root {
        .swiper-wrapper {
          > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }

    .share-wrap {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 244px;
      > img.code {
        width: 300px;
        height: 300px;
      }
      > img.tip {
        position: absolute;
        left: 50%;
        top: calc(100% + 10px);
        transform: translateX(-50%);
        width: 150px;
      }
    }
  }
}

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