退款优化

src/views/bst/order/components/OrderRefundDialog.vue

@@ -7,26 +7,54 @@
     @open="handleOpen"
   >
     <el-form :model="form" :rules="rules" ref="form" label-width="6em" v-loading="loading" size="small">
-      <el-form-item label="退款类型" prop="refundType">
+      <el-row>
-        <el-radio-group v-model="form.refundType" placeholder="请选择退款类型" style="width: 100%;" @change="handleRefundTypeChange">
+        <form-col :span="24" label="骑行退款" prop="ridingRefund" :tip="`最多可退 ${detail.actualReceivedRidingFee || 0} 元`">
-          <el-radio-button :label="OrderRefundType.DEPOSIT">押金 ({{ detail.canDepositRefundAmount | fix2 | dv }} 元)</el-radio-button>
+          <el-input-number 
-          <el-radio-button :label="OrderRefundType.RIDE">订单费用 ({{ detail.canRideRefundAmount | fix2 | dv }} 元)</el-radio-button>
+            v-model="form.ridingRefund" 
-        </el-radio-group>
+            :max="detail.actualReceivedRidingFee || 0" 
-      </el-form-item>
+            :min="0" 
-      <el-form-item label="退款金额" prop="amount">
+            :precision="2" 
-        <el-input-number 
+            style="width: 100%;" 
-          v-model="form.amount" 
+            controls-position="right"
-          :max="canRefundAmount" 
+          />  
-          :min="0" 
+        </form-col>
-          :placeholder="`请输入退款金额，最多可退款 ${canRefundAmount} 元`" 
+        <form-col :span="24" label="调度退款" prop="dispatchRefund" :tip="`最多可退 ${detail.actualReceivedDispatchFee || 0} 元`">
-          :precision="2" 
+          <el-input-number 
-          style="width: 100%;" 
+            v-model="form.dispatchRefund" 
-          controls-position="right"
+            :min="0" 
-        />
+            :max="detail.actualReceivedDispatchFee || 0"
-      </el-form-item>
+            :precision="2" 
-      <el-form-item label="退款原因" prop="reason">
+            style="width: 100%;" 
-        <el-input v-model="form.reason" type="textarea" placeholder="请输入退款原因" show-word-limit maxlength="200" />
+            controls-position="right"
-      </el-form-item>
+          />
+        </form-col>
+        <form-col :span="24" label="管理退款" prop="manageRefund" :tip="`最多可退 ${detail.actualReceivedManageFee || 0} 元`">
+          <el-input-number 
+            v-model="form.manageRefund" 
+            :min="0" 
+            :max="detail.actualReceivedManageFee || 0"
+            :precision="2" 
+            style="width: 100%;" 
+            controls-position="right"
+          />
+        </form-col>
+        <form-col :span="24" label="车损退款" prop="deductionRefund" :tip="`最多可退 ${detail.actualReceivedDeductionFee || 0} 元`">
+          <el-input-number 
+            v-model="form.deductionRefund" 
+            :min="0" 
+            :max="detail.actualReceivedDeductionFee || 0"
+            :precision="2" 
+            style="width: 100%;" 
+            controls-position="right"
+          />
+        </form-col>
+        <form-col :span="24" label="总计退款">
+          {{ totalRefundAmount  | fix2 | dv }} 元
+        </form-col>
+        <form-col :span="24" label="退款原因" prop="reason">
+          <el-input v-model="form.reason" type="textarea" placeholder="请输入退款原因" show-word-limit maxlength="200" />
+        </form-col>
+      </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="handleSubmit" :loading="submitLoading" icon="el-icon-wallet">确认退款</el-button>
@@ -37,7 +65,7 @@
 
 <script>
 import { getOrder, refundOrder } from '@/api/bst/order';
-import { OrderRefundType } from '@/utils/enums';
+import { isEmpty } from '@/utils';
 
 export default {
   props: {
@@ -52,17 +80,22 @@ export default {
   },
   data() {
     return {
-      OrderRefundType,
       detail: {},
       form: {},
       loading: false,
       submitLoading: false,
       rules: {
-        amount: [
+        ridingRefund: [
-          { required: true, message: '请输入退款金额', trigger: 'blur' },
+          { required: true, message: '请输入骑行费退款金额', trigger: 'blur' },
         ],
-        refundType: [
+        dispatchRefund: [
-          { required: true, message: '请选择退款类型', trigger: 'blur' },
+          { required: true, message: '请输入调度费退款金额', trigger: 'blur' },
+        ],
+        manageRefund: [
+          { required: true, message: '请输入管理费退款金额', trigger: 'blur' },
+        ],
+        deductionRefund: [
+          { required: true, message: '请输入车损费退款金额', trigger: 'blur' },
         ],
       }
     }
@@ -76,22 +109,19 @@ export default {
         this.$emit('update:visible', val);
       }
     },
-    // 可退款金额
+    totalRefundAmount() {
-    canRefundAmount() {
+      return this.dv(this.form.ridingRefund) 
-      if (this.detail == null || this.detail.id == null) {
+        + this.dv(this.form.dispatchRefund) 
-        return 0;
+        + this.dv(this.form.manageRefund) 
-      }
+        + this.dv(this.form.deductionRefund);
-      if (this.form.refundType == OrderRefundType.DEPOSIT) {
-        return this.detail.canDepositRefundAmount;
-      } else if (this.form.refundType == OrderRefundType.RIDE) {
-        return this.detail.canRideRefundAmount;
-      }
-      return 0;
     }
   },
   methods: {
-    handleRefundTypeChange() {
+    dv(val) {
-      this.form.amount = null;
+      if (isEmpty(val)) {
+        return 0;
+      }
+      return val;
     },
     getDetail() {
       this.loading = true;
@@ -108,8 +138,10 @@ export default {
     reset() {
       this.form = {
         orderId: this.id,
-        refundType: OrderRefundType.DEPOSIT,
+        ridingRefund: null,
-        amount: null,
+        dispatchRefund: null,
+        manageRefund: null,
+        deductionRefund: null,
         reason: null,
       };
       this.resetForm('form');
@@ -128,8 +160,6 @@ export default {
         });
       });
     }
-
-
   }
 }
 </script>

src/views/bst/order/view/view.vue

@@ -18,8 +18,8 @@
                 </template>
               </el-statistic>
             </el-col>
-            <el-col>
+            <el-col v-if="detail.ridePayAmount">
-              <el-statistic title="结算支付" v-if="detail.ridePayAmount" :value="detail.ridePayAmount" :precision="2" suffix="元">
+              <el-statistic title="结算支付" :value="detail.ridePayAmount" :precision="2" suffix="元">
                 <template slot="prefix">
                   <i class="el-icon-money" style="color: #67C23A"></i>
                 </template>
@@ -96,16 +96,27 @@
               </el-statistic>
             </el-col>
             <el-col>
-              <el-statistic 
+              <el-popover placement="bottom" width="200" trigger="hover">
-                title="人工退款" 
+                <div>
-                :value="detail.adminRefundAmount" 
+                  <div>骑行费：{{detail.ridingRefund | fix2 | dv}} 元</div>
-                :precision="2"
+                  <div>调度费：{{detail.dispatchRefund | fix2 | dv}} 元</div>
-                suffix="元"
+                  <div>管理费：{{detail.manageRefund | fix2 | dv}} 元</div>
-                value-style="color: #F56C6C">
+                  <div>车损费：{{detail.deductionRefund | fix2 | dv}} 元</div>
-                <template slot="prefix">
+                </div>
-                  <i class="el-icon-user" style="color: #F56C6C"></i>
+                <el-statistic 
-                </template>
+                  slot="reference"
-              </el-statistic>
+                  :value="detail.adminRefundAmount" 
+                  :precision="2"
+                  suffix="元"
+                  value-style="color: #F56C6C">
+                  <template slot="prefix">
+                    <i class="el-icon-user" style="color: #F56C6C"></i>
+                  </template>
+                  <template slot="title">
+                    人工退款 <i class="el-icon-info" style="color: #909399; margin-left: 4px; cursor: pointer"></i>
+                  </template>
+                </el-statistic>
+              </el-popover>
             </el-col>
           </el-row>
         </el-card>