feat: 【我的素材】【全景图片】使用新版预览组件

src/views/material/pano/index.vue

@@ -91,16 +91,13 @@
           <div
             class="img"
             v-else-if="sub.type == 'image'"
-            @click="(showPreview = true), (popupItem = item)"
+            @click="previewImage(item)"
           >
             <img :src="data + `?${Math.random()}`" alt="" />
           </div>
           <!-- 文字型单元格 -->
           <span
             v-else
-            @click="
-              sub.fontweight && ((showPreview = true), (popupItem = item))
-            "
             :style="{ fontWeight: sub.fontweight, color: '#202020' }"
             >{{ data || "-" }}
           </span>
@@ -126,9 +123,10 @@
       @close="showRename = false"
     />
     <preview
-      :item="popupItem"
-      :show="showPreview"
-      @close="showPreview = false"
+      ref="image-previewer"
+      :sceneCodeList="list.map(item => item.sceneCode)"
+      :imageTitleList="list.map(item => item.fileName)"
+      @click-delete="onClickDeleteInPreview"
     />
     <cover
       @panocover="handlePanoCover"
@@ -145,7 +143,7 @@ import tableList from "@/components/table/index.vue";
 import crumbs from "@/components/crumbs/index.vue";
 import { data } from "./pano";
 import rename from "../popup/rename";
-import preview from "../popup/preview";
+import preview from "../popup/panoImagePreviewer.vue";
 import cover from "../popup/cover";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
@@ -401,6 +399,12 @@ export default {
         },
       });
     },
+    previewImage(targetItem) {
+      const index = this.list.findIndex((eachItem) => {
+        return eachItem.id === targetItem.id
+      })
+      this.$refs['image-previewer'].show(index)
+    },
     onFileChange(e) {
       e.files.forEach((eachFile, i) => {
         if (
@@ -504,6 +508,9 @@ export default {
         }
       );
     },
+    onClickDeleteInPreview(index) {
+      this.del(this.list[index])
+    },
   },
 };
 </script>

src/views/material/popup/panoImagePreviewer.vue

@@ -1,13 +1,15 @@
 <template>
   <popup v-if="ifShow">
-    <div class="preview-wrapper">
+    <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 />
-      <img
-        class="image"
-        :src="imageList[currentIndex]"
-        :style="imageStyle"
-        @wheel.prevent="onImageWheel"
+      <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
@@ -21,27 +23,17 @@
             <div class="remark">下一张</div>
           </div>
         </i>
-        <i v-if="canScale" class="iconfont icon-material_preview_enlarge hover-tips" @click="onClickZoomIn()">
-          <div>
-            <div class="remark">放大</div>
-          </div>
-        </i>
-        <i v-if="canScale" class="iconfont icon-material_preview_narrow hover-tips" @click="onClickZoomOut()">
-          <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="canFullScreen && objectFit === 'scale-down'" class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
+        <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="canFullScreen && objectFit === 'contain'" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
+        <i v-if="isFullscreen" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
           <div>
             <div class="remark">取消全屏</div>
           </div>
@@ -60,24 +52,20 @@ export default {
       type: Array,
       default: () => {
         return [
-          'aaa',
-          'bbb'
+          // 'aaa',
+          // 'bbb'
         ]
       }
     },
-    imageList: {
+    sceneCodeList: {
       type: Array,
       default: () => {
         return [
-          'https://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fodder/20220125_114634855.jpg',
-          'https://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fodder/20220125_142545584.jpg',
+          // 'fd720_jWlTO6FIr',
+          // 'fd720_egHPArS4K',
         ]
       }
     },
-    canScale: {
-      type: Boolean,
-      default: true
-    },
     canFullScreen: {
       type: Boolean,
       default: true
@@ -90,20 +78,19 @@ export default {
     return {
       ifShow: false,
       currentIndex: 0,
-      scaleRate: 1,
-      objectFit: 'scale-down',
+      isFullscreen: false,
     }
   },
   computed: {
-    imageStyle() {
-      return {
-        transform: `scale(${this.scaleRate})`,
-        objectFit: this.objectFit,
-      }
+    imageWidth() {
+      return this.isFullscreen ? '100%' : '960px'
+    },
+    imageHeight() {
+      return this.isFullscreen ? '100%': '540px'
     }
   },
   watch: {
-    imageList: {
+    sceneCodeList: {
       handler: function (newList) {
         if (newList.length - 1 < this.currentIndex) {
           this.currentIndex = newList.length - 1
@@ -116,39 +103,43 @@ export default {
       Number.isSafeInteger(index) && (this.currentIndex = index)
       this.ifShow = true
     },
-    onImageWheel(e) {
-      if (e.deltaY > 0) {
-        this.scaleRate = this.scaleRate * 1.1
-      } else {
-        this.scaleRate = this.scaleRate * 0.9
-      }
-    },
     onClickPrevious() {
       if (this.currentIndex > 0) {
         this.currentIndex--
       }
     },
     onClickNext() {
-      if (this.currentIndex < this.imageList.length - 1) {
+      if (this.currentIndex < this.sceneCodeList.length - 1) {
         this.currentIndex++
       }
     },
-    onClickZoomIn() {
-      this.scaleRate = this.scaleRate * 1.1
-    },
-    onClickZoomOut() {
-      this.scaleRate *= 0.9
-    },
     onClickDelete() {
       this.$emit('click-delete', this.currentIndex)
     },
     onClickFullScreen() {
-      this.scaleRate = 1
-      this.objectFit = 'contain'
+      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() {
-      this.scaleRate = 1
-      this.objectFit = 'scale-down'
+      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
@@ -191,7 +182,7 @@ export default {
     }
     .toolbar {
       position: absolute;
-      bottom: 147px;
+      bottom: 110px;
       left: 50%;
       transform: translateX(-50%);
       height: 60px;
@@ -222,12 +213,11 @@ export default {
         }
       }
     }
-    .image {
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+    .iframe {
       position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       z-index: 1;
     }
   }