详情页面查看大图

src/components/approval-result.vue

@@ -2,39 +2,13 @@
 <template>
   <div class='com'>
     <block-header title='审批结果' />
-    <el-table
-      ref="tableSort"
-      v-loading="listLoading"
-      border
-      :data="list"
-      style="width: 100%"
-    >
-      <el-table-column
-        v-for="(item, index) in finallyColumns"
-        :key="index"
-        align="center"
-        :label="item.label"
-        :sortable="item.sortable"
-        :width="item.width"
-        :fixed="!!item.fixed"
-        :show-overflow-tooltip="!!item.overflow"
-      >
-        <template #default="{ row }">
-          <div v-if="item.label==='营业执照' || item.label==='小贷拍照' || item.label==='金融办批文'">
-            <el-image
-              style="width: 100px; height: 75px"
-              :src="row[item.prop]"
-              fit="fit"
-            />
-          </div>
-          <div v-else-if="item.label==='机构状态'">
-            <span>{{ row[item.prop]==="1"?'启用':'禁用' }}</span>
-          </div>
-          <span v-else>{{ row[item.prop] }}</span>
-        </template>
-      </el-table-column>
-
-    </el-table>
+    <el-descriptions style='margin-bottom: 20px;' border size='small' :column='3'>
+      <el-descriptions-item label-class-name='labelCls' label='用户申请金额'>{{result.applyAmount}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='剩余未还本金'>{{result.creditAmount}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='机审建议额度'>{{result.manualAmount}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='人审额度'>{{result.partnerGrade}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='合作商等级'>{{result.surplusNoPrincipal}}</el-descriptions-item>
+    </el-descriptions>
 
   </div>
 </template>
@@ -44,87 +18,13 @@
   import API from '@/server/api'
 
   export default {
-    name: 'TableEdit',
-    data() {
-      return {
-        checkList: ["用户申请金额", "剩余未还本金", "机审建议额度", "人审额度", "合作商等级"],
-        columns: [
-          {
-            order: 1,
-            label: "用户申请金额",
-            prop: "tenantNo"
-          },
-          {
-            order: 2,
-            label: "剩余未还本金",
-            prop: "tenantFullName"
-          },
-          {
-            order: 3,
-            label: "机审建议额度",
-            prop: "tenantName"
-          },
-          {
-            order: 4,
-            label: "人审额度",
-            prop: "status"
-          },
-          {
-            order: 5,
-            label: "合作商等级",
-            prop: "businessLicenseUrl",
-            overflow: true
-          }
-        ],
-        list: [],
-        listLoading: true,
-        layout: "total, sizes, prev, pager, next, jumper",
-        total: 1,
-        queryForm: {
-          current: 1,
-          size: 9,
-          status: "",
-          tenantName: "",
-          tenantNo: ""
-        }
-      }
-    },
-    computed: {
-      finallyColumns() {
-        let finallyArray = [];
-        this.checkList.forEach((checkItem) => {
-          finallyArray.push(
-            this.columns.filter((item) => item.label === checkItem)[0]
-          );
-        });
-        return _.sortBy(finallyArray, (item) => item.order);
-        //return finallyArray;
+    name: 'ApprovalResult',
+    props:{
+      //eslint-disable-next-line vue/require-default-prop
+      result:{
+        type:Object,
+        require:true
       }
-    },
-    created() {
-      //防止三级以上路由时多次走created
-      if (this.$route.name === this.$options.name) this.fetchData();
-    },
-    mounted() {
-      this.fetchData();
-    },
-    methods: {
-      handleSizeChange(val) {
-        this.queryForm.size = val;
-        this.fetchData();
-      },
-      handleCurrentChange(val) {
-        this.queryForm.current = val;
-        this.fetchData();
-      },
-      async fetchData() {
-        this.listLoading = true;
-        const result = await API.merchant_list(this.queryForm);
-        const { records, total } = result.result;
-        this.list = records;
-        this.total = total;
-        this.listLoading = false;
     }
-    },
   }
 </script>

src/components/user-other-info.vue

@@ -6,7 +6,7 @@
       <el-row>
         <el-col v-for='(o, index) in clientIdCardInfoResponse' :key='index' :span='4' :offset='index > 0 ? 1 : 0'>
           <el-card :body-style="{ padding: '10px' }">
-            <el-image class='el-card-image' :src='o[1]' :preview-src-list='imgList'></el-image>
+            <el-image class='el-card-image' :src='o[1]' @click.native='showImgViewer(clientIdCardInfoResponse,"idCard")'></el-image>
             <div class='el-card-intro'>
               <span v-if='o[0]==="frontImgPath"'>身份证正面</span>
               <span v-else>身份证反面</span>
@@ -21,7 +21,7 @@
       <el-row>
         <el-col v-for='(o, index) in faceInfoResponse' :key='index' :span='4' :offset='index > 0 ? 1 : 0'>
           <el-card :body-style="{ padding: '10px' }">
-            <el-image class='el-card-image' :src='o[1]' :preview-src-list='imgList'></el-image>
+            <el-image class='el-card-image' :src='o[1]' @click.native='showImgViewer(faceInfoResponse,"face")'></el-image>
             <div class='el-card-intro'>
               <span v-if='o[0]==="panoramaImgPath"'>全景照</span>
               <span v-else-if='o[0]==="randomImgPath"'>随机照</span>
@@ -36,11 +36,12 @@
     <template v-if='creditAttachInfo.length'>
       <block-header title='授信附件信息' />
       <el-row>
-        <el-col v-for='(o, index) in data.PRODUCTS' :key='index' :span='4' :offset='index > 0 ? 1 : 0'>
+        <el-col v-for='(o, index) in creditAttachInfo' :key='index' :span='4' :offset='index > 0 ? 1 : 0'>
           <el-card :body-style="{ padding: '10px' }">
-            <el-image class='el-card-image' :src='o.content' :preview-src-list='imgList'></el-image>
+            <el-image class='el-card-image' :src='o.echoList[0]'
+                      @click.native='showImgViewer(o.echoList,"annex")'></el-image>
             <div class='el-card-intro'>
-              <span>{{ o.name }}</span>
+              <span>{{ o.tit }}</span>
             </div>
           </el-card>
         </el-col>
@@ -65,9 +66,13 @@
 
     <!--审批结果-->
     <template v-if='approvalResultResponse!==null'>
-      <approval-result />
+      <approval-result :result='approvalResultResponse' />
     </template>
 
+
+    <!--  图片预览-->
+    <el-image-viewer v-if='imgViewerVisible' :on-close='closeImgViewer' :url-list='imgList' />
+
   </div>
 </template>
 
@@ -83,13 +88,17 @@
     data() {
       return {
         data: '',
-        approvalResultResponse:null,
-        faceInfoResponse:[],
-        creditAttachInfo:[],
-        clientIdCardInfoResponse:[],
-        reportResponse:null,
-        thirdPartyReport:null,
-        imgList:[]
+        approvalResultResponse: null,
+        faceInfoResponse: [],
+        creditAttachInfo: [],
+        clientIdCardInfoResponse: [],
+        reportResponse: null,
+        thirdPartyReport: null,
+
+
+        imgViewerVisible: false,
+        imgList: []
+
       }
     },
     created() {
@@ -100,18 +109,57 @@
         faceInfoResponse,
         reportResponse,
         thirdPartyReport
-      } = this.info;
-      this.data = this.info;
+      } = this.info
+      this.data = this.info
+
+      this.approvalResultResponse = approvalResultResponse
+      this.clientIdCardInfoResponse = Object.entries(clientIdCardInfoResponse)
+      this.faceInfoResponse = Object.entries(faceInfoResponse)
+      this.creditAttachInfo = JSON.parse(creditAttachInfo)
+      this.reportResponse = reportResponse
+      this.thirdPartyReport = thirdPartyReport
+
+      console.log(creditAttachInfo, '信息')
 
-      this.approvalResultResponse = approvalResultResponse;
-      this.clientIdCardInfoResponse = Object.entries(clientIdCardInfoResponse);
-      this.faceInfoResponse = Object.entries(faceInfoResponse);
-      this.creditAttachInfo = JSON.parse(creditAttachInfo);
-      this.reportResponse = reportResponse;
-      this.thirdPartyReport = thirdPartyReport;
+    },
+    methods: {
+      showImgViewer(item, type) {
+
+        switch (type) {
+          case 'idCard':
+          case 'face':
+            const arr = []
+            item.forEach(o => {
+              console.log(o,'是啥');
+              arr.push(o[1])
+            })
+
+            console.log(arr,'预览图片的地址');
+
+            this.imgList = arr
+
+            break
+          default:
+            this.imgList = item
+            break
+        }
 
-      console.log(creditAttachInfo,'信息')
+        this.imgViewerVisible = true
+        const m = (e) => {
+          e.preventDefault()
+        }
+        document.body.style.overflow = 'hidden'
+        document.addEventListener('touchmove', m, false) // 禁止页面滑动
 
+      },
+      closeImgViewer() {
+        this.imgViewerVisible = false
+        const m = (e) => {
+          e.preventDefault()
+        }
+        document.body.style.overflow = 'auto'
+        document.removeEventListener('touchmove', m, true)
+      }
     }
   }
 </script>

src/minix/index.js

@@ -9,8 +9,8 @@ import UserBaseInfo from '@/components/user-base-info'
 import UserProjectInfo from '@/components/user-project-info'
 
 export default {
-  name: "Minix",
-  components:{
+  name: 'Minix',
+  components: {
     BlockHeader,
     OperationLog,
     PrePlead,
@@ -19,12 +19,13 @@ export default {
     ApprovalResult,
     AuditResult,
     UserBaseInfo,
-    UserProjectInfo
+    UserProjectInfo,
+    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
   },
   methods: {
     onReset(formName) {
       if (formName) {
-        this.$refs[formName].resetFields();
+        this.$refs[formName].resetFields()
       }
     }
   }