增加删除图片后续处理

src/views/ebiz/questions/QuestionsDetail.vue

@@ -15,9 +15,21 @@
             </p>
           </div>
           <p class="uploadTitle">身份证头像面照片</p>
-          <van-uploader :max-count="1" :after-read="insurantUpload" name="insurantIdCardA" v-model="supplement.insurantIdCardA" />
+          <van-uploader
+            :max-count="1"
+            :after-read="insurantUpload"
+            :before-delete="insurantDelete"
+            name="insurantIdCardA"
+            v-model="supplement.insurantIdCardA"
+          />
           <p class="uploadTitle">身份证国徽面照片</p>
-          <van-uploader :max-count="1" :after-read="insurantUpload" name="insurantIdCardB" v-model="supplement.insurantIdCardB" />
+          <van-uploader
+            :max-count="1"
+            :after-read="insurantUpload"
+            :before-delete="insurantDelete"
+            name="insurantIdCardB"
+            v-model="supplement.insurantIdCardB"
+          />
         </div>
       </div>
       <div class="updateInfo">
@@ -30,11 +42,29 @@
             </p>
           </div>
           <p class="uploadTitle">身份证头像面照片</p>
-          <van-uploader :max-count="1" :after-read="policyHolderUpload" name="policyholderIdCardA" v-model="supplement.policyholderIdCardA" />
+          <van-uploader
+            :max-count="1"
+            :after-read="policyHolderUpload"
+            :before-delete="policyHolderDelete"
+            name="policyholderIdCardA"
+            v-model="supplement.policyholderIdCardA"
+          />
           <p class="uploadTitle">身份证国徽面照片</p>
-          <van-uploader :max-count="1" :after-read="policyHolderUpload" name="policyholderIdCardB" v-model="supplement.policyholderIdCardB" />
+          <van-uploader
+            :max-count="1"
+            :after-read="policyHolderUpload"
+            :before-delete="policyHolderDelete"
+            name="policyholderIdCardB"
+            v-model="supplement.policyholderIdCardB"
+          />
           <p class="uploadTitle">银行卡照片</p>
-          <van-uploader :max-count="1" :after-read="policyHolderUpload" name="policyholderBankCardA" v-model="supplement.policyholderBankCardA" />
+          <van-uploader
+            :max-count="1"
+            :after-read="policyHolderUpload"
+            @delete="policyHolderDelete"
+            name="policyholderBankCardA"
+            v-model="supplement.policyholderBankCardA"
+          />
         </div>
       </div>
     </div>
@@ -75,7 +105,7 @@
         <div class="item">
           <van-field label-class="labels" readonly label="银行卡照片"></van-field>
           <div class="cardList">
-            <van-uploader :max-count="1" :after-read="cardUpload" name="card" v-model="transfer.cardPhoto" />
+            <van-uploader :max-count="1" :after-read="cardUpload" @delete="transferBankCardDelete" name="card" v-model="transfer.cardPhoto" />
           </div>
         </div>
       </div>
@@ -155,13 +185,16 @@ export default {
         descriptionPolicyholder: '',
         // 被保人身份证明
         insurantIdCardA: [],
+        insurantIdCardAUploadResult: null,
         insurantIdCardB: [],
-        insurantUploadResult: [],
+        insurantIdCardBUploadResult: null,
         // 投保人身份证明等资料
         policyholderIdCardA: [],
+        policyholderIdCardAUploadResult: null,
         policyholderIdCardB: [],
+        policyholderIdCardBUploadResult: null,
         policyholderBankCardA: [],
-        policyholderUploadResult: []
+        policyholderBankCardAUploadResult: null
       },
       newContract: {
         // 新契约
@@ -206,6 +239,7 @@ export default {
     }
   },
   methods: {
+    // 补充资料问题件投保人上传身份证照片,银行卡照片
     async policyHolderUpload(file, detail) {
       // 微信端将上传的图片保存到localstorage中供签名回调使用
       if (this.isWeixin) {
@@ -213,23 +247,76 @@ export default {
       }
       let res = await this.afterRead(file)
       let imageType = detail.name === 'policyholderIdCardA' ? 1 : detail.name === 'policyholderIdCardB' ? 2 : 3
-      this.supplement.policyholderUploadResult.push({
+      let result = {
         rgssUrl: res.path,
         imageInfoType: imageType,
         subBusinessType: 0
-      })
+      }
+      switch (detail.name) {
+        case 'policyholderIdCardA':
+          this.supplement.policyholderIdCardAUploadResult = result
+          break
+        case 'policyholderIdCardB':
+          this.supplement.policyholderIdCardBUploadResult = result
+          break
+        case 'policyholderBankCardA':
+          this.supplement.policyholderBankCardAUploadResult = result
+          break
+      }
     },
+    // 投保人删除资料回调方法
+    policyHolderDelete(file, detail) {
+      switch (detail.name) {
+        case 'policyholderIdCardA':
+          this.supplement.policyholderIdCardAUploadResult = null
+          return true
+        case 'policyholderIdCardB':
+          this.supplement.policyholderIdCardBUploadResult = null
+          return true
+        case 'policyholderBankCardA':
+          this.supplement.policyholderBankCardAUploadResult = null
+          return true
+      }
+    },
+    checkPolicyholderUpload() {
+      return (
+        this.supplement.policyholderIdCardAUploadResult && this.supplement.policyholderIdCardBUploadResult && this.supplement.policyholderBankCardAUploadResult
+      )
+    },
+    // 补充资料问题件被保人上传身份证照片
     async insurantUpload(file, detail) {
       if (this.isWeixin) {
         localStorage.setItem(detail.name, file.content)
       }
       let res = await this.afterRead(file)
-      this.supplement.insurantUploadResult.push({
+      let result = {
         rgssUrl: res.path,
         imageInfoType: detail.name === 'insurantIdCardA' ? 1 : 2,
         subBusinessType: 1
-      })
+      }
+      switch (detail.name) {
+        case 'insurantIdCardA':
+          this.supplement.insurantIdCardAUploadResult = result
+          break
+        case 'insurantIdCardB':
+          this.supplement.insurantIdCardBUploadResult = result
+          break
+      }
     },
+    insurantDelete(file, detail) {
+      switch (detail.name) {
+        case 'insurantIdCardA':
+          this.supplement.insurantIdCardAUploadResult = null
+          return true
+        case 'insurantIdCardB':
+          this.supplement.insurantIdCardBUploadResult = null
+          return true
+      }
+    },
+    checkInsurantUpload() {
+      return this.supplement.insurantIdCardAUploadResult && this.supplement.insurantIdCardBUploadResult
+    },
+    // 转账不成功问题件添加银行卡照片
     async cardUpload(file, detail) {
       if (this.isWeixin) {
         localStorage.setItem(detail.name, file.content)
@@ -239,6 +326,10 @@ export default {
         rgssUrl: res.path
       })
     },
+    // 转账不成功问题件删除银行卡照片
+    transferBankCardDelete() {
+      this.transfer.cardUploadResult.splice(0)
+    },
     // 签名
     async autograph(personType) {
       // 新契约问题件签名前必须输入回复内容
@@ -369,6 +460,8 @@ export default {
       this.transfer.bankCode = ''
       this.transfer.bank = ''
       this.transfer.card = ''
+      this.transfer.cardPhoto.splice(0)
+      this.transfer.cardUploadResult.splice(0)
     },
     async afterRead(file) {
       let data = new FormData()
@@ -381,9 +474,8 @@ export default {
       if (this.issueType === 'TB89' && this.newContract.feedback.trim() === '') return this.$toast('请填写回复内容')
       // 校验补充资料
       if (this.issueType === '828601') {
-        if (this.supplement.insurantUploadResult.length < 2 || this.supplement.policyholderUploadResult.length < 3) {
+        if (!this.checkInsurantUpload()) return this.$toast('请上传被保人补充资料')
-          return this.$toast('请上传补充资料')
+        if (!this.checkPolicyholderUpload()) return this.$toast('请上传投保人补充资料')
-        }
       }
       // 转账不成功
       if (this.issueType === '818901') {
@@ -438,7 +530,6 @@ export default {
         bankName: '',
         bankNo: '',
         list: [],
-        pdfUrl: '/opt/ebiz/webapps/ebiz-epolicy/pdf/2020/08/09/1000000891076891/1000000891076891.pdf',
         signInfo: signInfo
       }
       // 验证码验证成功
@@ -452,9 +543,12 @@ export default {
         // 补充资料类问题件
         else if (this.issueType === '828601') {
           // 被保人资料
-          problemData.list.push(...this.supplement.insurantUploadResult)
+          problemData.list.push(this.supplement.insurantIdCardAUploadResult)
+          problemData.list.push(this.supplement.insurantIdCardBUploadResult)
           // 投保人资料
-          problemData.list.push(...this.supplement.policyholderUploadResult)
+          problemData.list.push(this.supplement.policyholderIdCardAUploadResult)
+          problemData.list.push(this.supplement.policyholderIdCardBUploadResult)
+          problemData.list.push(this.supplement.policyholderBankCardAUploadResult)
         }
         // 转账不成功问题件
         else {
@@ -466,8 +560,11 @@ export default {
             item.imageInfoType = '3'
             item.subBusinessType = '0'
           }
+          // 选择非终止转账时上传银行卡照片
+          if (this.transfer.mode !== 2) {
             problemData.list = this.transfer.cardUploadResult
           }
+        }
         // 更新问题件数据
         let res = await updateQuestionDetail(problemData)
         console.dir(res)
@@ -623,7 +720,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .iframe {
-  width: 100vw;
+  width: 99%;
   height: 70vh;
 }
 
@@ -698,8 +795,7 @@ export default {
     }
   }
   .pdf {
-    width: 100%;
+    width: 100vw;
-    border-bottom: 1px solid #eee;
   }
   .checkedBox {
     padding: 10px;