Просмотр исходного кода

修复在上传高清图之后支付方法重置的问题,支付总额增加失焦更新

Yannay недель назад: 2
Родитель
Сommit
b4a7af59fb
1 измененных файлов с 25 добавлено и 11 удалено
  1. 25 11
      pages/orderDetailRefactored/components/PageThree.vue

+ 25 - 11
pages/orderDetailRefactored/components/PageThree.vue

@@ -99,7 +99,8 @@
99
         <view class="payment-total-container">
99
         <view class="payment-total-container">
100
           <text class="payment-label">支付总额</text>
100
           <text class="payment-label">支付总额</text>
101
           <view class="payment-amount-wrap">
101
           <view class="payment-amount-wrap">
102
-            <u-input v-model="paymentAmount" class="payment-amount" type="number" decimal="2" prefix="¥" />
102
+            <u-input v-model="paymentAmount" class="payment-amount" type="number" decimal="2" prefix="¥"
103
+              @blur="handlePaymentAmountBlur" />
103
           </view>
104
           </view>
104
           <view class="pay-now-btn-wrap">
105
           <view class="pay-now-btn-wrap">
105
           <u-button type="primary" shape="circle" plain text="立即支付" size="small" @click="handlePayNowClick"></u-button>
106
           <u-button type="primary" shape="circle" plain text="立即支付" size="small" @click="handlePayNowClick"></u-button>
@@ -280,15 +281,20 @@ export default {
280
     currentReceipt: {
281
     currentReceipt: {
281
       handler(newVal, oldVal) {
282
       handler(newVal, oldVal) {
282
         if (newVal) {
283
         if (newVal) {
283
-          this.paymentAmount = newVal.tableFee || '0.00'
284
-          // 从回单表 receiptForm 回填支付信息(与 PC 端一致)
285
-          this.paymentInfo.customName = newVal.customName || ''
286
-          this.paymentInfo.bankName = newVal.bankName || ''
287
-          this.paymentInfo.bankAccount = newVal.bankCardNumber || ''
288
-          this.paymentInfo.idNumber = newVal.idCard || ''
289
-          this.initPaymentMethod(newVal.paymentMethod)
284
+          //是为了修复一个问题,当上传高清图片时,支付方式会被重置,这里是为了避免这个问题
285
+          // 仅当回单 id 变化时(切换了回单)才从 receipt 回填表单,避免上传图片等只更新 fileIds 时触发 watch 导致支付方式被重置
286
+          const receiptIdChanged = !oldVal || oldVal.id !== newVal.id
287
+          if (receiptIdChanged) {
288
+            this.paymentAmount = newVal.tableFee || '0.00'
289
+            // 从回单表 receiptForm 回填支付信息(与 PC 端一致)
290
+            this.paymentInfo.customName = newVal.customName || ''
291
+            this.paymentInfo.bankName = newVal.bankName || ''
292
+            this.paymentInfo.bankAccount = newVal.bankCardNumber || ''
293
+            this.paymentInfo.idNumber = newVal.idCard || ''
294
+            this.initPaymentMethod(newVal.paymentMethod)
295
+          }
290
           // 只有当 receipt id 变化时才重新加载图片,避免 fileIds 更新时重新加载
296
           // 只有当 receipt id 变化时才重新加载图片,避免 fileIds 更新时重新加载
291
-          if (!oldVal || oldVal.id !== newVal.id) {
297
+          if (receiptIdChanged) {
292
             this.loadDetailImages()
298
             this.loadDetailImages()
293
           }
299
           }
294
         }
300
         }
@@ -385,7 +391,7 @@ export default {
385
     },
391
     },
386
 
392
 
387
     /**
393
     /**
388
-     * 失焦后保存支付信息(开户人/银行名称/账号/身份证)
394
+     * 失焦后保存支付信息(开户人/银行名称/账号/身份证/支付总额
389
      */
395
      */
390
     async savePaymentInfoOnBlur() {
396
     async savePaymentInfoOnBlur() {
391
       if (!this.currentReceipt || !this.currentReceipt.id) return
397
       if (!this.currentReceipt || !this.currentReceipt.id) return
@@ -396,7 +402,8 @@ export default {
396
           customName: this.paymentInfo.customName || '',
402
           customName: this.paymentInfo.customName || '',
397
           bankName: this.paymentInfo.bankName || '',
403
           bankName: this.paymentInfo.bankName || '',
398
           bankCardNumber: this.paymentInfo.bankAccount || '',
404
           bankCardNumber: this.paymentInfo.bankAccount || '',
399
-          idCard: this.paymentInfo.idNumber || ''
405
+          idCard: this.paymentInfo.idNumber || '',
406
+          tableFee: this.paymentAmount || '0.00'
400
         })
407
         })
401
       } catch (e) {
408
       } catch (e) {
402
         console.error('保存支付信息失败:', e)
409
         console.error('保存支付信息失败:', e)
@@ -446,6 +453,13 @@ export default {
446
     },
453
     },
447
 
454
 
448
     /**
455
     /**
456
+     * 支付总额失焦保存
457
+     */
458
+    async handlePaymentAmountBlur() {
459
+      this.savePaymentInfoOnBlur()
460
+    },
461
+
462
+    /**
449
      * 获取图片类型
463
      * 获取图片类型
450
      */
464
      */
451
     getImageType(index) {
465
     getImageType(index) {