FD_Pano/src/views/material/popup/panoImagePreviewer.vue

<template>
  <popup v-if="ifShow">
    <div class="preview-wrapper" ref="preview-wrapper">
      <div class="title">{{imageTitleList[currentIndex]}}</div>
      <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
      <iframe
        ref="iframe"
        class="iframe"
        allowfullscreen="true"
        :src="'./vr.html?hideScale=true&vr='+ sceneCodeList[currentIndex]"
        frameborder="0"
        :style="{width: imageWidth, height: imageHeight}"
      />
      <div class="toolbar">
        <i
          class="iconfont icon-material_preview_previous hover-tips" :class="{disabled: currentIndex === 0}" @click="onClickPrevious()">
          <div>
            <div class="remark">上一张</div>
          </div>
        </i>
        <i class="iconfont icon-material_preview_next1 hover-tips append-splitter" :class="{disabled: currentIndex === sceneCodeList.length - 1}" @click="onClickNext()">
          <div>
            <div class="remark">下一张</div>
          </div>
        </i>
        <i class="iconfont icon-material_preview_next hover-tips-warn" @click="onClickDelete()">
          <div>
            <div class="remark">删除</div>
          </div>
        </i>
        <i v-if="!isFullscreen" class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
          <div>
            <div class="remark">全屏</div>
          </div>
        </i>
        <i v-if="isFullscreen" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
          <div>
            <div class="remark">取消全屏</div>
          </div>
        </i>
      </div>
    </div>
  </popup>
</template>

<script>
import Popup from "@/components/shared/popup";

export default {
  props: {
    imageTitleList: {
      type: Array,
      default: () => {
        return [
          // 'aaa',
          // 'bbb'
        ]
      }
    },
    sceneCodeList: {
      type: Array,
      default: () => {
        return [
          // 'fd720_jWlTO6FIr',
          // 'fd720_egHPArS4K',
        ]
      }
    },
    canFullScreen: {
      type: Boolean,
      default: true
    },
  },
  components:{
    Popup
  },
  data(){
    return {
      ifShow: false,
      currentIndex: 0,
      isFullscreen: false,
    }
  },
  computed: {
    imageWidth() {
      return this.isFullscreen ? '100%' : '960px'
    },
    imageHeight() {
      return this.isFullscreen ? '100%': '540px'
    }
  },
  watch: {
    sceneCodeList: {
      handler: function (newList) {
        if (newList.length - 1 < this.currentIndex) {
          this.currentIndex = newList.length - 1
        }
      }
    }
  },
  methods:{
    show(index) {
      Number.isSafeInteger(index) && (this.currentIndex = index)
      this.ifShow = true
    },
    onClickPrevious() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    onClickNext() {
      if (this.currentIndex < this.sceneCodeList.length - 1) {
        this.currentIndex++
      }
    },
    onClickDelete() {
      this.$emit('click-delete', this.currentIndex)
    },
    onClickFullScreen() {
      const element = this.$refs['preview-wrapper']
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      this.isFullscreen = true
    },
    onClickCancelFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      this.isFullscreen = false
    },
    onClickClose() {
      this.ifShow = false
    }
  }
}
</script>

<style scoped lang="less">
.preview-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .title {
    position: absolute;
    top: 16px;
    left: 30px;
    z-index: 2;
    height: 36px;
    font-size: 14px;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
  }
  .close-btn {
    position: absolute;
    top: 16px;
    right: 30px;
    width: 36px;
    height: 36px;
    z-index: 2;
    cursor: pointer;
  }
  .toolbar {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 43px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    z-index: 2;
    .iconfont {
      cursor: pointer;
      color: white;
      margin-right: 36px;
      font-size: 22px;
      &.disabled {
        opacity: 0.5;
        pointer-events: none;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .append-splitter {
      &::after {
        pointer-events: none;
        content: "|";
        position: absolute;
        right: -18px;
        top: -4px;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

.hover-tips, .hover-tips-warn {
  position: relative;
  font-size: 18px;

  &:hover {
    > div {
      display: block;
    }
  }

  // tip的方框
  > div {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: default;
    display: none;
    z-index: 10000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -60px;
    color: #fff;
    pointer-events: none;
    text-align: center;
    word-break: keep-all;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 3px;
    // tip的箭头
    &::before {
      border: 7px solid transparent;
      border-top: 7px solid rgba(0, 0, 0, 0.6);
      width: 0;
      height: 0px;
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
    }

    // tip的文字
    .remark {
      line-height: 2.5;
      color: #fff;
    }
  }
}
</style>