图片预览

src/main.js

@@ -11,10 +11,10 @@ import "./assets/css/layout.scss";
 // import "bootstrap/dist/js/bootstrap.min.js";
 import "./plugins/element.js";
 import "./plugins/qrcode.js";
+import ElementUI from 'element-ui'
 import "./assets/css/element-variables.scss";
 import GsTable from './components/table/index'
 import './utils/codeTable'
-
 // 百度地图
 import BaiduMap from 'vue-baidu-map'
 
@@ -23,6 +23,7 @@ Vue.use(BaiduMap, {
     ak: 'EoRpk2HWln2YKTEYYH5wutFX'
 })
 // 公共样式、布局样式
+Vue.use(ElementUI)
 
 // 主题色调修改在assets/_style.scss  修改里面的变量即可
 

src/views/MyManage/Admin/certificationDetail.vue

@@ -53,6 +53,12 @@
         <el-button @click="auditEvent(2)" class="plain-with-border">审核不通过</el-button>
         <el-button class="plain-with-border" v-if="reset">重置</el-button>
       </div>
+      <el-image
+          id="image"
+          style="width: 10px; height: 10px;opacity: 0;"
+          :src="url"
+          :preview-src-list="srcList">
+      </el-image>
     </div>
   </div>
 </template>
@@ -74,6 +80,8 @@ export default {
       subCenterName: '',
       status: '', //1.首次 2.变更
       id: '', //各个表的主键
+      url: '',
+      srcList: [],
       // 原静态页面定义数据
       // entInfoFields: [
       //   {
@@ -395,13 +403,14 @@ export default {
           fileType: '1', //1.第一步文件 2.第二步文件
           id: this.id
         }
-        this.getFile(form)
+        this.showImage(form)
       }
     },
-    getFile(form) {
+    showImage(form) {
       const result = this.$api.myManage.tycpdmfirmReturnFile(form)
-      window.open(result, '_black')
-      console.log(result)
+      this.url = result
+      this.srcList = [result]
+      document.getElementById('image').click()
     },
     getBranchLabel(branchCode) {
      return (this.branchList.find(item => item.value === branchCode) || {label: '--'}).label
@@ -439,6 +448,12 @@ export default {
       this.id = this.$route.query.type === 'new' ? this.detailInfo.fid : this.detailInfo.id
       this.status = this.$route.query.type === 'new' ? 1 : 2
 
+      // 需要对预览图片进行初始化
+      const form = { status: this.status, fileType: '1', id: this.id }
+      const result = this.$api.myManage.tycpdmfirmReturnFile(form)
+      this.url = result
+      this.srcList = [result]
+
       this.branchCode = this.detailInfo.branchcode
       this.subCenterName = this.getBranchLabel(this.branchCode)