新增图片预览器

package-lock.json

@@ -5743,7 +5743,7 @@
     },
     "html-tags": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
       "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos="
     },
     "html-webpack-plugin": {
@@ -6708,7 +6708,7 @@
     },
     "lodash.kebabcase": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
     },
     "loglevel": {
@@ -13580,7 +13580,7 @@
     },
     "svg-tags": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
     },
     "swiper": {
@@ -14363,6 +14363,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.9.0.tgz",
+      "integrity": "sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w=="
+    },
     "vlq": {
       "version": "0.2.3",
       "resolved": "https://registry.npm.taobao.org/vlq/download/vlq-0.2.3.tgz",

package.json

@@ -74,6 +74,7 @@
     "@ezijing/vue-form": "^2.1.9",
     "animate.css": "^4.1.0",
     "axios": "^0.19.2",
+    "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "element-ui": "^2.13.0",
     "install": "^0.13.0",
@@ -83,6 +84,7 @@
     "qrcode.vue": "^1.7.0",
     "swiper": "^5.4.5",
     "tween.js": "^16.6.0",
+    "viewerjs": "^1.9.0",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.16.0",
@@ -91,8 +93,7 @@
     "vue-router": "^3.1.6",
     "vue-scrollmagic": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.1.3",
-    "core-js": "^3.6.5"
+    "vuex": "^3.1.3"
   },
   "engines": {
     "node": ">=8.9"

src/pages/my/application/preview.vue

@@ -73,7 +73,7 @@
             <template v-if="material.attachments">
               <ul class="attachments">
                 <li class="attachments-item" v-for="(item, index) in material.attachments" :key="index">
-                  <a class="inner" :href="item.oss_sign_url" target="_blank">
+                  <div class="inner" @click="handlePreview(item)">
                     <el-image :src="item.oss_sign_url" class="pic">
                       <template #error>
                         <i class="el-icon-document"></i>
@@ -83,7 +83,7 @@
                     <div v-if="item.status_desc">
                       <el-tag size="mini">{{ item.status_desc }}</el-tag>
                     </div>
-                  </a>
+                  </div>
                   <el-button-group v-if="hasButton" style="margin-left: 40px">
                     <el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)"
                       >删除</el-button
@@ -112,9 +112,12 @@
         </div>
       </div>
     </template>
+    <img :src="previewImageUrl" :alt="previewImageTitle" id="image" style="display: none" />
   </div>
 </template>
 <script>
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'viewerjs'
 import * as api from '@/api/my'
 
 // 行业类别
@@ -175,6 +178,9 @@ export default {
   data() {
     return {
       loading: false,
+      previewImageUrl: '',
+      previewImageTitle: '',
+      viewer: null,
       material: {},
       progress: {},
       options: [
@@ -333,10 +339,10 @@ export default {
   computed: {
     right() {
       const { right = '' } = this.$route.query
-      return right
+      return right.toUpperCase()
     },
     hasButton() {
-      return this.right.includes('x')
+      return this.right.includes('X')
     }
   },
   methods: {
@@ -373,10 +379,52 @@ export default {
       api.changeFileStatus(this.material.user_id, data.id, status).then(response => {
         this.getApplication()
       })
+    },
+    // 预览
+    handlePreview(file) {
+      let url = file.oss_sign_url
+      if (!url) {
+        this.$message({ type: 'warning', message: '无法查看' })
+        return
+      }
+      url = url.includes('?') ? url.split('?').shift() : url
+      const names = ['jpg', 'jpeg', 'png', 'gif']
+      const name = url.split('.').pop() || ''
+      if (names.includes(name.toLocaleLowerCase())) {
+        this.previewImageUrl = file.oss_sign_url
+        this.previewImageTitle = file.file_type_label
+        this.$nextTick(() => {
+          this.viewer.update()
+          this.viewer.show(true)
+        })
+      } else {
+        this.newWindowPreview(file.oss_sign_url)
+      }
+    },
+    // 新窗口预览
+    newWindowPreview(url) {
+      const a = document.createElement('a')
+      a.href = url
+      a.target = '_blank'
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+    },
+    createViewer() {
+      this.viewer = new Viewer(document.getElementById('image'), {
+        navbar: false,
+        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true }
+      })
     }
   },
   beforeMount() {
     this.getApplication()
+  },
+  mounted() {
+    this.createViewer()
+  },
+  destroyed() {
+    this.viewer && this.viewer.destroy()
   }
 }
 </script>
@@ -483,6 +531,7 @@ export default {
       display: flex;
       align-items: center;
       color: #222;
+      cursor: pointer;
     }
     .pic {
       width: 40px;
@@ -508,4 +557,7 @@ export default {
     border-top: 1px solid #ebeef5;
   }
 }
+.viewer-toolbar > ul {
+  margin-bottom: 20px;
+}
 </style>