202507251746
This commit is contained in:
parent
0a34deda55
commit
078e4f07d0
|
|
@ -1,204 +1,200 @@
|
|||
<template>
|
||||
<el-dialog title="统一退款" :visible.sync="visible" width="900px" @close="handleClose">
|
||||
<div class="refund-container">
|
||||
<!-- 支付信息展示 -->
|
||||
<div class="payment-info" v-if="paymentData">
|
||||
<h4>支付信息</h4>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>微信支付：</label>
|
||||
<span class="amount">￥{{ paymentData.wechatAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>余额支付：</label>
|
||||
<span class="amount">￥{{ paymentData.balanceAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>购物金：</label>
|
||||
<span class="amount">￥{{ paymentData.shoppingGoldAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>服务金：</label>
|
||||
<span class="amount">￥{{ paymentData.serviceGoldAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>会员优惠：</label>
|
||||
<span class="amount">￥{{ paymentData.memberDiscountAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>优惠券抵扣：</label>
|
||||
<span class="amount">￥{{ paymentData.couponAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="total-amount">
|
||||
<label>总支付金额：</label>
|
||||
<span class="amount total">￥{{ totalPaymentAmount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 退款历史信息 -->
|
||||
<div class="refund-history" v-if="refundHistory && refundHistory.length > 0">
|
||||
<h5>退款历史</h5>
|
||||
<div class="history-item" v-for="(item, index) in refundHistory" :key="index">
|
||||
<span class="history-time">{{ formatTime(item.refundTime) }}</span>
|
||||
<span class="history-amount">￥{{ item.totalRefund }}</span>
|
||||
<span class="history-desc">{{ item.name }}</span>
|
||||
<el-form ref="refundForm" :model="refundForm" label-width="100px">
|
||||
<div class="refund-container">
|
||||
<!-- 支付信息展示 -->
|
||||
<div class="payment-info" v-if="paymentData">
|
||||
<h4>支付信息</h4>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>微信支付：</label>
|
||||
<span class="amount">￥{{ paymentData.wechatAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>余额支付：</label>
|
||||
<span class="amount">￥{{ paymentData.balanceAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>购物金：</label>
|
||||
<span class="amount">￥{{ paymentData.shoppingGoldAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>服务金：</label>
|
||||
<span class="amount">￥{{ paymentData.serviceGoldAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>会员优惠：</label>
|
||||
<span class="amount">￥{{ paymentData.memberDiscountAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<label>优惠券抵扣：</label>
|
||||
<span class="amount">￥{{ paymentData.couponAmount || '0.00' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="total-amount">
|
||||
<label>总支付金额：</label>
|
||||
<span class="amount total">￥{{ totalPaymentAmount }}</span>
|
||||
</div>
|
||||
<div class="history-summary">
|
||||
<span>累计已退款：￥{{ totalRefundedAmount }}</span>
|
||||
<span class="remaining">剩余可退款：￥{{ remainingRefundableAmount }}</span>
|
||||
|
||||
<!-- 退款历史信息 -->
|
||||
<div class="refund-history" v-if="refundHistory && refundHistory.length > 0">
|
||||
<h5>退款历史</h5>
|
||||
<div class="history-item" v-for="(item, index) in refundHistory" :key="index">
|
||||
<span class="history-time">{{ formatTime(item.refundTime) }}</span>
|
||||
<span class="history-amount">￥{{ item.totalRefund }}</span>
|
||||
<span class="history-desc">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="history-summary">
|
||||
<span>累计已退款：￥{{ totalRefundedAmount }}</span>
|
||||
<span class="remaining">剩余可退款：￥{{ remainingRefundableAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退款金额输入 -->
|
||||
<div class="refund-input">
|
||||
<h4>本次退款金额</h4>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="微信退款：">
|
||||
<el-input
|
||||
v-model="refundForm.wechatRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
:max="paymentData.wechatAmount || 0"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.wechatAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="余额退款：">
|
||||
<el-input
|
||||
v-model="refundForm.balanceRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
:max="paymentData.balanceAmount || 0"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.balanceAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="购物金退款：">
|
||||
<el-input
|
||||
v-model="refundForm.shoppingGoldRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
:max="paymentData.shoppingGoldAmount || 0"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.shoppingGoldAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="服务金退款：">
|
||||
<el-input
|
||||
v-model="refundForm.serviceGoldRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
:max="paymentData.serviceGoldAmount || 0"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.serviceGoldAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="会员优惠退款：">
|
||||
<el-input
|
||||
v-model="refundForm.memberDiscountRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
:max="paymentData.memberDiscountAmount || 0"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.memberDiscountAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="优惠券退款：">
|
||||
<el-input
|
||||
v-model="refundForm.couponRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
:max="paymentData.couponAmount || 0"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.couponAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 总退款金额显示 -->
|
||||
<div class="total-refund">
|
||||
<label>本次退款金额：</label>
|
||||
<span class="amount refund">￥{{ totalRefundAmount }}</span>
|
||||
<!-- 退款金额输入 -->
|
||||
<div class="refund-input">
|
||||
<h4>本次退款金额</h4>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="微信退款：">
|
||||
<el-input
|
||||
v-model="refundForm.wechatRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.wechatAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="余额退款：">
|
||||
<el-input
|
||||
v-model="refundForm.balanceRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.balanceAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="购物金退款：">
|
||||
<el-input
|
||||
v-model="refundForm.shoppingGoldRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.shoppingGoldAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="服务金退款：">
|
||||
<el-input
|
||||
v-model="refundForm.serviceGoldRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.serviceGoldAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="会员优惠退款：">
|
||||
<el-input
|
||||
v-model="refundForm.memberDiscountRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.memberDiscountAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="优惠券退款：">
|
||||
<el-input
|
||||
v-model="refundForm.couponRefund"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@input="calculateTotalRefund"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
<div class="input-tip">最大可退：￥{{ paymentData.couponAmount || '0.00' }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 总退款金额显示 -->
|
||||
<div class="total-refund">
|
||||
<label>本次退款金额：</label>
|
||||
<span class="amount refund">￥{{ totalRefundAmount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 退款验证提示 -->
|
||||
<div class="refund-validation" v-if="totalRefundAmount > 0">
|
||||
<el-alert
|
||||
:title="validationMessage"
|
||||
:type="validationType"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退款验证提示 -->
|
||||
<div class="refund-validation" v-if="totalRefundAmount > 0">
|
||||
<el-alert
|
||||
:title="validationMessage"
|
||||
:type="validationType"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<!-- 退款备注 -->
|
||||
<div class="refund-remark">
|
||||
<el-form-item label="退款备注：">
|
||||
<el-input
|
||||
v-model="refundForm.refundRemark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入退款备注信息"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退款备注 -->
|
||||
<div class="refund-remark">
|
||||
<el-form-item label="退款备注：">
|
||||
<el-input
|
||||
v-model="refundForm.refundRemark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入退款备注信息"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue