图片上传

.env.development

-NODE_ENV=dev
 BASE_URL=''
 VUE_APP_API_PATH=/api

.env.production

-NODE_ENV=prod
 BASE_URL=''
 VUE_APP_API_PATH=https://aphrodite-admin.rockstect.net

src/components/detail/new-attach-img.vue

+<!-- 图片信息 -->
+<template>
+  <div>
+    <block-header title='稽核上传信息' />
+    <template v-if='addAttachInfo!==null && addAttachInfo.length'>
+      <el-row :gutter='20'>
+        <el-col v-for='(o, index) in addAttachInfo' :key='index' :span='4'>
+          <el-card :body-style="{ padding: '10px' }">
+            <el-image class='el-card-image' :src='o'
+                      @click.native='showImgViewer(o,"annex")'>
+              <div slot='error' class='image-slot'>
+                <span>未上传</span>
+              </div>
+            </el-image>
+          </el-card>
+        </el-col>
+      </el-row>
+    </template>
+    <no-data v-else />
+    <!--  图片预览-->
+    <el-image-viewer v-if='imgViewerVisible' :on-close='closeImgViewer' :url-list='imgList' />
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'UserOtherInfo',
+    props: {
+      info: {
+        type: Object,
+        require: true
+      },
+      isLoan: {
+        type: Boolean,
+        require: false
+      }
+    },
+    data() {
+      return {
+        data: '',
+        approvalResultResponse: null,
+        faceInfoResponse: [],
+        creditAttachInfo: [],
+        clientIdCardInfoResponse: [],
+        reportResponse: null,
+        thirdPartyReport: null,
+        supplAttachInfo: [],
+
+        imgViewerVisible: false,
+        imgList: [],
+        xcxSupplAttachInfo: null,
+
+        addAttachInfo: null
+      }
+    },
+    created() {
+      const {
+        approvalResultResponse,
+        clientIdCardInfoResponse,
+        creditAttachInfo,
+        faceInfoResponse,
+        reportResponse,
+        thirdPartyReport,
+        supplAttachInfo,
+        xcxSupplAttachInfo,
+        addAttachInfo
+      } = this.info
+      this.data = this.info
+
+      this.approvalResultResponse = approvalResultResponse
+      this.clientIdCardInfoResponse = Object.entries(clientIdCardInfoResponse)
+      this.faceInfoResponse = Object.entries(faceInfoResponse)
+      this.creditAttachInfo = creditAttachInfo // 授信图片信息
+      this.reportResponse = reportResponse
+      this.thirdPartyReport = JSON.parse(thirdPartyReport)
+      this.supplAttachInfo = supplAttachInfo // 附件信息
+      //this.supplAttachInfo = [] // 附件信息
+
+      this.addAttachInfo = addAttachInfo
+
+      if (xcxSupplAttachInfo && xcxSupplAttachInfo.length > 0) {
+        this.xcxSupplAttachInfo = xcxSupplAttachInfo
+      }
+
+      //console.log(this.thirdPartyReport, '第三方报告')
+
+    },
+    methods: {
+      showImgViewer(item, type) {
+
+        const {
+          clientIdCardInfoResponse,
+          creditAttachInfo,
+          faceInfoResponse,
+          supplAttachInfo,
+          xcxSupplAttachInfo
+        } = this.info
+
+        let imgArray = []
+        const { values } = Object
+
+        // 客户身份证
+        if (clientIdCardInfoResponse) {
+          for (let val of values(clientIdCardInfoResponse)) {
+            if (val) imgArray.push(val)
+          }
+        }
+
+        // 活体
+        if (faceInfoResponse) {
+          for (let val of values(faceInfoResponse)) {
+            if (val) imgArray.push(val)
+          }
+        }
+
+        // 授信图片
+        if (creditAttachInfo && creditAttachInfo.length) {
+          creditAttachInfo.forEach(item => {
+            imgArray = imgArray.concat(item.screenList)
+          })
+        }
+
+        // 附件图片
+        if (supplAttachInfo && supplAttachInfo.length) {
+          supplAttachInfo.forEach(item => {
+            imgArray = imgArray.concat(item.screenList)
+          })
+        }
+
+        // 补充图片
+        if (xcxSupplAttachInfo && xcxSupplAttachInfo.length) {
+          xcxSupplAttachInfo.forEach(item => {
+            imgArray = imgArray.concat(item.screenList)
+          })
+        }
+
+
+        this.imgList = imgArray
+
+        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>
+<style lang='scss' scoped>
+  .page-fence {
+    ::v-deep {
+      i {
+        cursor: pointer;
+      }
+    }
+
+    box-sizing: border-box;
+    padding: 20px;
+  }
+</style>
+<style lang='scss'>
+  .custom-table-checkbox {
+    .el-checkbox {
+      display: block !important;
+      margin: 0 0 $base-padding/4 0;
+    }
+  }
+
+  .action-bar {
+    margin-bottom: 15px;
+  }
+
+  .el-card-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100px;
+    max-height: 100px;
+
+    background: #f5f7fa;
+
+  }
+
+  .el-card-intro {
+    box-sizing: border-box;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 5px;
+    overflow: hidden;
+  }
+</style>

src/minix/index.js

@@ -18,6 +18,7 @@ import CreditEnclosureImg from '@/components/detail/credit-enclosure-img'
 import UserEnclosureImg from '@/components/detail/user-enclosure-img'
 import FaceImg from '@/components/detail/face-img'
 import SupplEnclosureImg from '@/components/detail/supple-enclosure-img'
+import NewAttachImg from '@/components/detail/new-attach-img'
 
 import NoData from '@/components/NoData';
 import moment from 'moment'
@@ -44,6 +45,7 @@ export default {
     UserEnclosureImg,
     FaceImg,
     SupplEnclosureImg,
+    NewAttachImg,
     NoData,
     'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
   },

src/vab/styles/vab.scss

@@ -46,9 +46,9 @@ html {
     -moz-osx-font-smoothing: grayscale;
     @include base-scrollbar;
 
-    .wrapClass{
-      overflow-x: hidden !important;
-    }
+    //.wrapClass{
+    //  overflow-x: hidden !important;
+    //}
 
 
     * {

src/views/loan/detail.vue

@@ -52,27 +52,6 @@
     <!--补充附件信息-->
     <suppl-enclosure-img :info='detail' />
 
-    <!--额外附件-->
-    <block-header title='稽核附件信息' />
-    <el-form label-suffix=':' label-width='100px'>
-      <el-form-item label='附件图片'>
-
-        <el-upload
-          class='auditUpload'
-          list-type='picture-card'
-          :action='UploadUrl'
-          :data='uploadParams'
-          :multiple='true'
-          :headers='headers'
-          :show-file-list='true'
-          :with-credentials='true'
-          :disabled='false'
-          :http-request='handleUpload'>
-          <i slot='trigger' class='el-icon-plus'></i>
-        </el-upload>
-
-      </el-form-item>
-    </el-form>
 
     <!--资金方-->
     <template v-if='capitalName!==null'>
@@ -119,6 +98,7 @@
     </el-collapse>
 
 
+
     <!--操作日志-->
     <block-header title='操作日志' />
     <template v-if='detail.operationLogResponse!==null'>
@@ -126,6 +106,31 @@
     </template>
 
 
+
+    <!--额外附件-->
+    <new-attach-img :info='detail' />
+    <el-form label-suffix=':' label-width='80px' label-position='left'>
+      <el-form-item label='附件图片'>
+
+        <el-upload
+          class='auditUpload'
+          list-type='picture-card'
+          :action='UploadUrl'
+          :data='uploadParams'
+          :multiple='true'
+          :headers='headers'
+          :show-file-list='true'
+          :with-credentials='true'
+          :disabled='false'
+          :http-request='handleUpload'>
+          <i slot='trigger' class='el-icon-plus'></i>
+        </el-upload>
+
+      </el-form-item>
+    </el-form>
+
+
+
     <!--稽核弹框-->
     <template v-if='visible'>
       <div style='margin-top: 15px'>