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" @click="onClickPrevious()">
          <div>
            <div class="remark">上一张</div>
          </div>
        </i>
        <i class="iconfont icon-material_preview_next1 hover-tips append-splitter" @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;
        &: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;
    }
  }
</style>