Fix：5564 【商城小程序】【旅居团购-退款】退款被驳回后再次进入退款页面，金额仅显示“￥”且“确认退款”按钮可点击显示“加载中”

pkg_product/views/sojoumOrderRefund.vue

@@ -7,16 +7,16 @@
           <view class="v12-font-28 v12-font-bold">退款金额</view>
           <view class="return-method">退回原支付方</view>
         </view>
-        <view class="v12-font-32 v12-primary-text v12-font-bold">¥{{refundAmount}}</view>
+        <view class="v12-font-32 v12-primary-text v12-font-bold">¥{{ displayRefundAmount }}</view>
       </view>
       <u-divider></u-divider>
       <view class="order-amount">
         <text class="v12-font-28 v12-font-bold">订单支付金额</text>
-        <text class="v12-font-32 v12-font-bold">¥{{orderAmount}}</text>
+        <text class="v12-font-32 v12-font-bold">¥{{ displayOrderAmount }}</text>
       </view>
       <view class="deduction-amount v12-mt-2">
         <text class="v12-font-24 v12-primary-text">退款违约金</text>
-        <text class="v12-primary-text">¥{{deductionAmount}}</text>
+        <text class="v12-primary-text">¥{{ displayDeductionAmount }}</text>
       </view>
     </view>
 
@@ -49,19 +49,26 @@
 
     <!-- 提交按钮 -->
     <view class="v12-mt-3">
-      <button class="submit-btn v12-primary v12-white-text v12-radius-100 v12-font-32" block @click="submitRefund">点击确认退款</button>
+      <button
+        class="submit-btn v12-primary v12-white-text v12-radius-100 v12-font-32"
+        :class="{ 'submit-btn-disabled': isSubmitDisabled }"
+        :disabled="isSubmitDisabled"
+        block
+        @click="submitRefund"
+      >点击确认退款</button>
     </view>
   </view>
 </template>
 
 <script>
-import { sojoumOrderRefundInfo, sojoumOrderRefund } from '@/api/sojoumOrder.js'
+import { fetchSojoumOrderDetail, sojoumOrderRefundInfo, sojoumOrderRefund } from '@/api/sojoumOrder.js'
 export default {
   data() {
     return {
       refundAmount: '',
       orderAmount: '',
       deductionAmount: '',
+      refundStatus: 0,
       refundReasons: [
         '行程变更',
         '定错时间/地址',
@@ -72,7 +79,22 @@ export default {
       ],
       selectedReason: '',
       otherReason: '',
-      key: ''
+      key: '',
+      submitting: false
+    }
+  },
+  computed: {
+    displayRefundAmount() {
+      return this.formatMoney(this.refundAmount)
+    },
+    displayOrderAmount() {
+      return this.formatMoney(this.orderAmount)
+    },
+    displayDeductionAmount() {
+      return this.formatMoney(this.deductionAmount)
+    },
+    isSubmitDisabled() {
+      return this.submitting || Number(this.refundStatus) === 3
     }
   },
   onLoad(opts) {
@@ -80,21 +102,63 @@ export default {
     this.getRefundInfo(opts.id)
   },
   methods: {
-    getRefundInfo(id) {
+    async getRefundInfo(id) {
-      sojoumOrderRefundInfo({
+      try {
-        orderId: id
+        const [refundRes, orderRes] = await Promise.all([
-      }).then(res => {
+          sojoumOrderRefundInfo({
-        if (res.status === 200) {
+            orderId: id
-          this.refundAmount = res.data.refundPrice
+          }),
-          this.orderAmount = res.data.payPrice
+          fetchSojoumOrderDetail({
-          this.deductionAmount = res.data.penalty
+            key: id
-        }
+          })
-      })
+        ])
+        const refundData = refundRes && refundRes.status === 200 ? (refundRes.data || {}) : {}
+        const orderData = orderRes && orderRes.status === 200 ? (orderRes.data || {}) : {}
+        const orderAmount = this.pickFirstValidValue(refundData.payPrice, orderData.payPrice, 0)
+        const deductionAmount = this.pickFirstValidValue(refundData.penalty, orderData.penalty, 0)
+        this.refundAmount = this.resolveRefundAmount(refundData.refundPrice, orderAmount, deductionAmount)
+        this.orderAmount = orderAmount
+        this.deductionAmount = deductionAmount
+        this.refundStatus = Number(this.pickFirstValidValue(orderData.refundStatus, refundData.refundStatus, 0))
+      } catch (e) {
+      }
     },
     selectReason(reason) {
+      if (this.isSubmitDisabled) {
+        return
+      }
       this.selectedReason = reason
     },
+    hasValidValue(value) {
+      return value !== '' && value !== null && value !== undefined
+    },
+    pickFirstValidValue(...values) {
+      for (let index = 0; index < values.length; index += 1) {
+        if (this.hasValidValue(values[index])) {
+          return values[index]
+        }
+      }
+      return ''
+    },
+    formatMoney(value) {
+      return this.$force2Decimal(Number(value || 0))
+    },
+    resolveRefundAmount(refundPrice, orderAmount, deductionAmount) {
+      if (this.hasValidValue(refundPrice)) {
+        return refundPrice
+      }
+      const orderPriceNumber = Number(orderAmount || 0)
+      const deductionNumber = Number(deductionAmount || 0)
+      return Math.max(orderPriceNumber - deductionNumber, 0)
+    },
     submitRefund() {
+      if (this.isSubmitDisabled) {
+        uni.showToast({
+          title: '退款申请已被驳回',
+          icon: 'none'
+        })
+        return
+      }
       // TODO: 实现退款提交逻辑
       // orderId string 订单号
       // refundReasonWap string 选择的退款原因
@@ -122,6 +186,7 @@ export default {
         title: '加载中...',
         mask: true,
       })
+      this.submitting = true
       sojoumOrderRefund(refundData).then(res => {
         if (res.status === 200) {
           uni.showToast({
@@ -133,6 +198,7 @@ export default {
           })
         }
       }).finally(() => {
+        this.submitting = false
         uni.hideLoading();
       })
     }
@@ -229,27 +295,22 @@ export default {
     }
   }
 
-  .submit-section {
+  .submit-btn {
-    position: fixed;
+    width: 100%;
-    bottom: 0;
+    height: 80rpx;
-    left: 0;
+    line-height: 80rpx;
-    right: 0;
+    text-align: center;
-    padding: 30rpx;
+    color: #fff;
-    background-color: #fff;
+    font-size: 28rpx;
-    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+    border-radius: 40rpx;
+    border: none;
+    letter-spacing: 4rpx;
+    font-weight: 500;
+  }
 
-    .submit-btn {
+  .submit-btn-disabled {
-      width: 100%;
+    background-color: #c0c4cc !important;
-      height: 80rpx;
+    color: #ffffff !important;
-      line-height: 80rpx;
-      text-align: center;
-      color: #fff;
-      font-size: 28rpx;
-      border-radius: 40rpx;
-      border: none;
-      letter-spacing: 4rpx;
-      font-weight: 500;
-    }
   }
 }
 </style>