junShiGuan-5/web/src/components/hotspot/multiple.vue

<template>
  <div class="multiple">
    <div class="images">
      <div class="img-con">
        <span v-if="hotspot[type].length > 1" @click="handlePage('prev')">
          <img :src="require('@/assets/images/pano/hotspot/left.png')" alt="" />
        </span>
        <img v-if="type == 'images'" v-viewer :src="g_dealUrl(hotspot[type][active])" alt="" />


        <iframe
          v-else
          :src="g_dealUrl(hotspot[type][active])"
          frameborder="0"
        ></iframe>

        <span v-if="hotspot[type].length > 1" @click="handlePage('next')">
          <img :src="require('@/assets/images/pano/hotspot/right.png')" alt="" />
        </span>
        <ul class="pagna" v-if="hotspot[type].length > 1">
          <li
            v-for="(item, i) in hotspot[type]"
            :class="{ active: i == active }"
            :key="i"
          ></li>
        </ul>
      </div>
      <div class="title" v-html="hotspot.title" v-show="0"></div>
      <div
        class="desc"
        v-html="
          handleContent(hotspot.contents[contentactive] || hotspot.contents[0], 16)
        "
      ></div>
    </div>

    <ul class="btnlist">
      <li @click="type = item.id" :class="{liactive:type == item.id}" v-for="(item,i) in btnlist" :key="i">
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

let btntype = {
  images:{
    id:'images',
    title:'图片',
    img:''
  },
  iframe:{
    id:'iframe',
    title:'电子书',
    img:''
  },
  model:{
    id:'model',
    title:'模型',
    img:''
  }
}

export default {
  props: ["hotspot",'count'],
  data() {
    let btnlist = this.count.map(item=>{
        return btntype[item]
      })

    return {
      active: 0,
      to: null,
      contentactive:0,
      type:this.count[0],
      mbactive: 0,
      btnlist
    };
  },
 
  watch: {
    type(newVal){
      if(newVal == this.count[0]){
        this.contentactive = 0
      }
      else{
        this.contentactive += this.hotspot[this.type].length
      }
      this.active = 0
    },
    active() {
      setTimeout(() => {
        this.$showLoading();
      });

      if (this.to) {
        clearTimeout(this.to);
        this.to = null;
      }
      this.to = setTimeout(() => {
        this.$hideLoading();
      }, 1500);
    },
  },
  beforeDestroy() {
    this.$hideLoading();
  },
  methods: {
    handlePage(type) {
      if (type === "next") {
        if (this.active >= this.hotspot[this.type].length - 1) {
          this.active = 0;
          return;
        }

        
        this.active += 1;
        this.contentactive += 1;
      } else {
        if (this.active == 0) {
          this.active = this.hotspot[this.type].length - 1;
          return;
        }
        this.active -= 1;
        this.contentactive -= 1;

      }
    },
  },
  mounted() {
    this.$showLoading();
    if (this.TO) {
      clearTimeout(this.TO);
      this.TO = null;
    }
    this.TO = setTimeout(() => {
      this.$hideLoading();
    }, 800);
  },
};
</script>

<style lang="less" scoped>
.noshow {
  opacity: 0 !important;
  pointer-events: none !important;
}
.multiple {
  width: 100%;
  height: 100%;
  position: relative;
  .images {
    width: 1410px;
    height: 760px;
    text-align: center;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    text-align: left;
    color: #fff;

    .img-con {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      padding-bottom: 40px;
      height: calc(100% - 130px);

      > span {
        @juli: 60px;
        display: inline-block;
        padding: 0 30px;
        box-sizing: content-box;
        cursor: pointer;
        position: absolute;
        left: @juli;
        top: 50%;
        transform: translateY(-50%);
        > img {
          width: 20px;
        }
        &:last-of-type {
          left: unset;
          right: @juli;
        }
      }
      > img {
        max-width: 82%;
        max-height: 520px;
        cursor: pointer;
      }

      >iframe{
        width: 100%;
        height: 100%;
      }
      .pagna {
        position: absolute;
        bottom: 0;
        text-align: center;
        z-index: 999;
        > li {
          width: 10px;
          border-radius: 50%;
          height: 10px;
          background: rgba(51, 143, 123, 0.24);
          display: inline-block;
          margin: 0 4px;
          &.active {
            background: #338f7b;
          }
        }
      }
    }
    .title {
      font-weight: bold;
      font-size: 30px;
      width: 100%;
      padding: 0 50px;
      margin-bottom: 10px;
      text-align: center;
    }
    .desc {
      margin: 0 auto;
      width: 70%;
      color: #fff;
      text-align: justify;
      line-height: 1.8;
      max-height: 120px;
      overflow-y: auto;
      font-size: 16px;
      padding-right: 10px;
    }
  }

  .btnlist{
    position: absolute;
    right: 50px;
    bottom: 50px;
    display: inline-block;

    @color: #e2c59a;
    >li{
      display: inline-block;
      padding: 10px 20px;
      min-width: 150px;
      border-radius: 4px;
      margin-left: 20px;
      text-align: center;
      color: @color;
      border: 1px solid @color;
      cursor: pointer;
      &.liactive{
        background: @color;
        color: #fff;
      }
    }
  }
}
</style>