退款优化
This commit is contained in:
磷叶
parent
9abfc8e967
commit
06ba2f1733
|
|
@ -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-radio-group v-model="form.refundType" placeholder="请选择退款类型" style="width: 100%;" @change="handleRefundTypeChange">
|
||||
<el-radio-button :label="OrderRefundType.DEPOSIT">押金 ({{ detail.canDepositRefundAmount | fix2 | dv }} 元)</el-radio-button>
|
||||
<el-radio-button :label="OrderRefundType.RIDE">订单费用 ({{ detail.canRideRefundAmount | fix2 | dv }} 元)</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="退款金额" prop="amount">
|
||||
<el-input-number
|
||||
v-model="form.amount"
|
||||
:max="canRefundAmount"
|
||||
:min="0"
|
||||
:placeholder="`请输入退款金额，最多可退款 ${canRefundAmount} 元`"
|
||||
:precision="2"
|
||||
style="width: 100%;"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="退款原因" prop="reason">
|
||||
<el-input v-model="form.reason" type="textarea" placeholder="请输入退款原因" show-word-limit maxlength="200" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<form-col :span="24" label="骑行退款" prop="ridingRefund" :tip="`最多可退 ${detail.actualReceivedRidingFee || 0} 元`">
|
||||
<el-input-number
|
||||
v-model="form.ridingRefund"
|
||||
:max="detail.actualReceivedRidingFee || 0"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
style="width: 100%;"
|
||||
controls-position="right"
|
||||
/>
|
||||
</form-col>
|
||||
<form-col :span="24" label="调度退款" prop="dispatchRefund" :tip="`最多可退 ${detail.actualReceivedDispatchFee || 0} 元`">
|
||||
<el-input-number
|
||||
v-model="form.dispatchRefund"
|
||||
:min="0"
|
||||
:max="detail.actualReceivedDispatchFee || 0"
|
||||
:precision="2"
|
||||
style="width: 100%;"
|
||||
controls-position="right"
|
||||
/>
|
||||
</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: [
|
||||
{ required: true, message: '请输入退款金额', trigger: 'blur' },
|
||||
ridingRefund: [
|
||||
{ required: true, message: '请输入骑行费退款金额', trigger: 'blur' },
|
||||
],
|
||||
refundType: [
|
||||
{ required: true, message: '请选择退款类型', trigger: 'blur' },
|
||||
dispatchRefund: [
|
||||
{ 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);
|
||||
}
|
||||
},
|
||||
// 可退款金额
|
||||
canRefundAmount() {
|
||||
if (this.detail == null || this.detail.id == null) {
|
||||
return 0;
|
||||
}
|
||||
if (this.form.refundType == OrderRefundType.DEPOSIT) {
|
||||
return this.detail.canDepositRefundAmount;
|
||||
} else if (this.form.refundType == OrderRefundType.RIDE) {
|
||||
return this.detail.canRideRefundAmount;
|
||||
}
|
||||
return 0;
|
||||
totalRefundAmount() {
|
||||
return this.dv(this.form.ridingRefund)
|
||||
+ this.dv(this.form.dispatchRefund)
|
||||
+ this.dv(this.form.manageRefund)
|
||||
+ this.dv(this.form.deductionRefund);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRefundTypeChange() {
|
||||
this.form.amount = null;
|
||||
dv(val) {
|
||||
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,
|
||||
amount: null,
|
||||
ridingRefund: null,
|
||||
dispatchRefund: null,
|
||||
manageRefund: null,
|
||||
deductionRefund: null,
|
||||
reason: null,
|
||||
};
|
||||
this.resetForm('form');
|
||||
|
|
@ -128,8 +160,6 @@ export default {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-statistic title="结算支付" v-if="detail.ridePayAmount" :value="detail.ridePayAmount" :precision="2" suffix="元">
|
||||
<el-col v-if="detail.ridePayAmount">
|
||||
<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
|
||||
title="人工退款"
|
||||
:value="detail.adminRefundAmount"
|
||||
:precision="2"
|
||||
suffix="元"
|
||||
value-style="color: #F56C6C">
|
||||
<template slot="prefix">
|
||||
<i class="el-icon-user" style="color: #F56C6C"></i>
|
||||
</template>
|
||||
</el-statistic>
|
||||
<el-popover placement="bottom" width="200" trigger="hover">
|
||||
<div>
|
||||
<div>骑行费：{{detail.ridingRefund | fix2 | dv}} 元</div>
|
||||
<div>调度费：{{detail.dispatchRefund | fix2 | dv}} 元</div>
|
||||
<div>管理费：{{detail.manageRefund | fix2 | dv}} 元</div>
|
||||
<div>车损费：{{detail.deductionRefund | fix2 | dv}} 元</div>
|
||||
</div>
|
||||
<el-statistic
|
||||
slot="reference"
|
||||
: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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user