feat: 【我的素材】视频预览改用新组建；删除旧组件相关代码

src/views/material/image/index.vue

@@ -110,7 +110,6 @@
     />
     <preview
       ref="image-previewer"
-      :ifShow="showPreview"
       :canFullScreen="false"
       :imageList="list.map(item => item.icon)"
       :imageTitleList="list.map(item => item.fileName)"
@@ -153,7 +152,6 @@ export default {
   data() {
     return {
       config, // TODO: 没必要这么弄
-      showPreview: false,
       showRename: false,
       showList: false,
       popupItem: null,

src/views/material/pano/index.vue

@@ -178,7 +178,6 @@ export default {
     return {
       config,
       showRename: false,
-      showPreview: false,
       showCover: false,
       showList: false,
       popupItem: null,

src/views/material/popup/preview.vue

@@ -1,119 +0,0 @@
-<template>
-    <popup v-if="show">
-      <div class="ui-message ui-message-confirm" style="width: 960px">
-        <div class="ui-message-header">
-          <span>{{item.name}}</span>
-          <span @click="$emit('close')">
-            <i class="iconfont icon_close"></i>
-          </span>
-        </div>
-        <div class="ui-message-main">
-          <template v-if="item.type=='image'">
-             <img @click.stop class="v-image"  v-viewer :src="item[typeStr[item.type]]"/>
-             <span class="scale" @click="viewImg">
-               <img :src="require('@/assets/images/icons/tool_full@2x.png')" alt="">
-             </span>
-          </template>
-          <template v-else-if="item.type=='pano'">
-            <iframe ref="pifr" allowfullscreen='true' :src="'./vr.html?vr='+item.sceneCode" frameborder="0"></iframe>
-          </template>
-          <video v-else controls autoplay :src="item.ossPath"></video>
-        </div>
-      </div>
-    </popup>
-</template>
-
-<script>
-import Popup from "@/components/shared/popup";
-
-export default {
-  props:['show','item'],
-  components:{
-    Popup
-  },
-  data(){
-    let typeStr={
-      image:'icon',
-      pano:'previewIcon'
-      // image:'icon',
-      // image:'icon',
-    }
-    return {
-      typeStr,
-      isFullscreen:false
-    }
-  },
-  methods:{
-    viewImg(){
-      const viewer = this.$el.querySelector('.v-image').$viewer
-      viewer.show()
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.ui-message-confirm{
-  border-radius: 0;
-  top: auto;
-  left: auto;
-  transform: none;
-  .icon_close{
-    color: #909090;
-  }
-  .ui-message-header{
-    border-bottom: 1px solid #EBEBEB;
-  }
-  .ui-message-main{
-    width: 100%;
-    font-size: 0;
-    position: relative;
-    >video,>iframe{
-      width: 100%;
-      height: 540px;
-    }
-    >img{
-      width: auto;
-      max-height: 80vh;
-      height: auto;
-    }
-    >.scale{
-      font-size: 0;
-      bottom: 10px;
-      right: 10px;
-      z-index: 99;
-      cursor: pointer;
-      position: absolute;
-      color: #fff;
-      width: 36px;
-      height: 36px;
-      background: rgba(0, 0, 0, 0.5);
-      padding: 10px;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 18px;
-      >img{
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-      }
-    }
-  }
-  .ui-message-footer{
-    width: 100%;
-    .btn{
-      width: 80%;
-      display: flex;
-      justify-content: center;
-      margin: 0 auto;
-      .ui-button{
-        max-width: 104px
-      }
-    }
-
-  }
-}
-</style>
-
-<style lang="less" scoped>
-@import '../style.less';
-</style>

src/views/material/popup/videoPreviewer.vue

@@ -0,0 +1,89 @@
+<template>
+  <popup v-if="ifShow">
+    <div class="preview-wrapper">
+      <div class="title">{{title}}</div>
+      <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
+      <video class="video" controls autoplay :src="videoSrc"></video>
+    </div>
+  </popup>
+</template>
+
+<script>
+import Popup from "@/components/shared/popup";
+
+export default {
+  props: {
+  },
+  components:{
+    Popup
+  },
+  data(){
+    return {
+      ifShow: false,
+      title: '',
+      videoSrc: '',
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods:{
+    show(title = '', videoSrc) {
+      if (!videoSrc) {
+        return
+      }
+      this.title = title
+      this.videoSrc = videoSrc
+      this.ifShow = true
+    },
+    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;
+    }
+    .video {
+      position: absolute;
+      width: 960px;
+      height: 540px;
+      top: 237px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 1;
+    }
+  }
+</style>

src/views/material/video/index.vue

@@ -77,15 +77,12 @@
           <div
             class="img"
             v-else-if="sub.type == 'image'"
-            @click="(showPreview = true), (popupItem = item)"
+            @click="previewVedio(item)"
           >
             <img :src="`${data}` || $thumb" alt="" />
           </div>
           <span
             v-else
-            @click="
-              sub.fontweight && ((showPreview = true), (popupItem = item))
-            "
             :style="{ fontWeight: sub.fontweight, color: '#202020' }"
             >{{ data || "-" }}</span
           >
@@ -111,6 +108,7 @@
       @close="showRename = false"
     />
     <preview
+      ref="video-previewer"
       :item="popupItem"
       :show="showPreview"
       @close="showPreview = false"
@@ -126,7 +124,7 @@ import { data } from "./video";
 import rename from "../popup/rename";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
-import preview from "../popup/preview";
+import preview from "../popup/videoPreviewer.vue";
 import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
 import { mapState } from 'vuex';
@@ -154,7 +152,6 @@ export default {
       config,
       showRename: false,
       showList: false,
-      showPreview: false,
       popupItem: null,
       tabHeader: data,
       selectedArr: [],
@@ -191,6 +188,12 @@ export default {
     },
   },
   methods: {
+    previewVedio(clickItem) {
+      const index = this.list.findIndex((eachItem) => {
+        return eachItem.id === clickItem.id
+      })
+      index >= 0 && this.$refs['video-previewer'].show(this.list[index].fileName, this.list[index].ossPath)
+    },
     onFilterFocus() {
       this.isFilterFocus = true
     },