202507251746

This commit is contained in:
张潘 2025-08-13 01:30:44 +08:00
parent 0a34deda55
commit 078e4f07d0
1 changed files with 188 additions and 192 deletions

View File

@ -1,204 +1,200 @@
<template> <template>
<el-dialog title="统一退款" :visible.sync="visible" width="900px" @close="handleClose"> <el-dialog title="统一退款" :visible.sync="visible" width="900px" @close="handleClose">
<div class="refund-container"> <el-form ref="refundForm" :model="refundForm" label-width="100px">
<!-- 支付信息展示 --> <div class="refund-container">
<div class="payment-info" v-if="paymentData"> <!-- 支付信息展示 -->
<h4>支付信息</h4> <div class="payment-info" v-if="paymentData">
<el-row :gutter="20"> <h4>支付信息</h4>
<el-col :span="8"> <el-row :gutter="20">
<div class="info-item"> <el-col :span="8">
<label>微信支付</label> <div class="info-item">
<span class="amount">{{ paymentData.wechatAmount || '0.00' }}</span> <label>微信支付</label>
</div> <span class="amount">{{ paymentData.wechatAmount || '0.00' }}</span>
</el-col> </div>
<el-col :span="8"> </el-col>
<div class="info-item"> <el-col :span="8">
<label>余额支付</label> <div class="info-item">
<span class="amount">{{ paymentData.balanceAmount || '0.00' }}</span> <label>余额支付</label>
</div> <span class="amount">{{ paymentData.balanceAmount || '0.00' }}</span>
</el-col> </div>
<el-col :span="8"> </el-col>
<div class="info-item"> <el-col :span="8">
<label>购物金</label> <div class="info-item">
<span class="amount">{{ paymentData.shoppingGoldAmount || '0.00' }}</span> <label>购物金</label>
</div> <span class="amount">{{ paymentData.shoppingGoldAmount || '0.00' }}</span>
</el-col> </div>
</el-row> </el-col>
<el-row :gutter="20"> </el-row>
<el-col :span="8"> <el-row :gutter="20">
<div class="info-item"> <el-col :span="8">
<label>服务金</label> <div class="info-item">
<span class="amount">{{ paymentData.serviceGoldAmount || '0.00' }}</span> <label>服务金</label>
</div> <span class="amount">{{ paymentData.serviceGoldAmount || '0.00' }}</span>
</el-col> </div>
<el-col :span="8"> </el-col>
<div class="info-item"> <el-col :span="8">
<label>会员优惠</label> <div class="info-item">
<span class="amount">{{ paymentData.memberDiscountAmount || '0.00' }}</span> <label>会员优惠</label>
</div> <span class="amount">{{ paymentData.memberDiscountAmount || '0.00' }}</span>
</el-col> </div>
<el-col :span="8"> </el-col>
<div class="info-item"> <el-col :span="8">
<label>优惠券抵扣</label> <div class="info-item">
<span class="amount">{{ paymentData.couponAmount || '0.00' }}</span> <label>优惠券抵扣</label>
</div> <span class="amount">{{ paymentData.couponAmount || '0.00' }}</span>
</el-col> </div>
</el-row> </el-col>
<div class="total-amount"> </el-row>
<label>总支付金额</label> <div class="total-amount">
<span class="amount total">{{ totalPaymentAmount }}</span> <label>总支付金额</label>
</div> <span class="amount total">{{ totalPaymentAmount }}</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>
<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>
</div>
<!-- 退款金额输入 --> <!-- 退款金额输入 -->
<div class="refund-input"> <div class="refund-input">
<h4>本次退款金额</h4> <h4>本次退款金额</h4>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="微信退款:"> <el-form-item label="微信退款:">
<el-input <el-input
v-model="refundForm.wechatRefund" v-model="refundForm.wechatRefund"
type="number" type="number"
placeholder="0.00" placeholder="0.00"
min="0" min="0"
step="0.01" step="0.01"
@input="calculateTotalRefund" @input="calculateTotalRefund"
:max="paymentData.wechatAmount || 0" >
> <template slot="prepend"></template>
<template slot="prepend"></template> </el-input>
</el-input> <div class="input-tip">最大可退{{ paymentData.wechatAmount || '0.00' }}</div>
<div class="input-tip">最大可退{{ paymentData.wechatAmount || '0.00' }}</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="8"> <el-form-item label="余额退款:">
<el-form-item label="余额退款:"> <el-input
<el-input v-model="refundForm.balanceRefund"
v-model="refundForm.balanceRefund" type="number"
type="number" placeholder="0.00"
placeholder="0.00" min="0"
min="0" step="0.01"
step="0.01" @input="calculateTotalRefund"
@input="calculateTotalRefund" >
:max="paymentData.balanceAmount || 0" <template slot="prepend"></template>
> </el-input>
<template slot="prepend"></template> <div class="input-tip">最大可退{{ paymentData.balanceAmount || '0.00' }}</div>
</el-input> </el-form-item>
<div class="input-tip">最大可退{{ paymentData.balanceAmount || '0.00' }}</div> </el-col>
</el-form-item> <el-col :span="8">
</el-col> <el-form-item label="购物金退款:">
<el-col :span="8"> <el-input
<el-form-item label="购物金退款:"> v-model="refundForm.shoppingGoldRefund"
<el-input type="number"
v-model="refundForm.shoppingGoldRefund" placeholder="0.00"
type="number" min="0"
placeholder="0.00" step="0.01"
min="0" @input="calculateTotalRefund"
step="0.01" >
@input="calculateTotalRefund" <template slot="prepend"></template>
:max="paymentData.shoppingGoldAmount || 0" </el-input>
> <div class="input-tip">最大可退{{ paymentData.shoppingGoldAmount || '0.00' }}</div>
<template slot="prepend"></template> </el-form-item>
</el-input> </el-col>
<div class="input-tip">最大可退{{ paymentData.shoppingGoldAmount || '0.00' }}</div> </el-row>
</el-form-item> <el-row :gutter="20">
</el-col> <el-col :span="8">
</el-row> <el-form-item label="服务金退款:">
<el-row :gutter="20"> <el-input
<el-col :span="8"> v-model="refundForm.serviceGoldRefund"
<el-form-item label="服务金退款:"> type="number"
<el-input placeholder="0.00"
v-model="refundForm.serviceGoldRefund" min="0"
type="number" step="0.01"
placeholder="0.00" @input="calculateTotalRefund"
min="0" >
step="0.01" <template slot="prepend"></template>
@input="calculateTotalRefund" </el-input>
:max="paymentData.serviceGoldAmount || 0" <div class="input-tip">最大可退{{ paymentData.serviceGoldAmount || '0.00' }}</div>
> </el-form-item>
<template slot="prepend"></template> </el-col>
</el-input> <el-col :span="8">
<div class="input-tip">最大可退{{ paymentData.serviceGoldAmount || '0.00' }}</div> <el-form-item label="会员优惠退款:">
</el-form-item> <el-input
</el-col> v-model="refundForm.memberDiscountRefund"
<el-col :span="8"> type="number"
<el-form-item label="会员优惠退款:"> placeholder="0.00"
<el-input min="0"
v-model="refundForm.memberDiscountRefund" step="0.01"
type="number" @input="calculateTotalRefund"
placeholder="0.00" >
min="0" <template slot="prepend"></template>
step="0.01" </el-input>
@input="calculateTotalRefund" <div class="input-tip">最大可退{{ paymentData.memberDiscountAmount || '0.00' }}</div>
:max="paymentData.memberDiscountAmount || 0" </el-form-item>
> </el-col>
<template slot="prepend"></template> <el-col :span="8">
</el-input> <el-form-item label="优惠券退款:">
<div class="input-tip">最大可退{{ paymentData.memberDiscountAmount || '0.00' }}</div> <el-input
</el-form-item> v-model="refundForm.couponRefund"
</el-col> type="number"
<el-col :span="8"> placeholder="0.00"
<el-form-item label="优惠券退款:"> min="0"
<el-input step="0.01"
v-model="refundForm.couponRefund" @input="calculateTotalRefund"
type="number" >
placeholder="0.00" <template slot="prepend"></template>
min="0" </el-input>
step="0.01" <div class="input-tip">最大可退{{ paymentData.couponAmount || '0.00' }}</div>
@input="calculateTotalRefund" </el-form-item>
:max="paymentData.couponAmount || 0" </el-col>
> </el-row>
<template slot="prepend"></template>
</el-input> <!-- 总退款金额显示 -->
<div class="input-tip">最大可退{{ paymentData.couponAmount || '0.00' }}</div> <div class="total-refund">
</el-form-item> <label>本次退款金额</label>
</el-col> <span class="amount refund">{{ totalRefundAmount }}</span>
</el-row> </div>
<!-- 总退款金额显示 --> <!-- 退款验证提示 -->
<div class="total-refund"> <div class="refund-validation" v-if="totalRefundAmount > 0">
<label>本次退款金额</label> <el-alert
<span class="amount refund">{{ totalRefundAmount }}</span> :title="validationMessage"
:type="validationType"
show-icon
:closable="false"
/>
</div>
</div> </div>
<!-- 退款验证提示 --> <!-- 退款备注 -->
<div class="refund-validation" v-if="totalRefundAmount > 0"> <div class="refund-remark">
<el-alert <el-form-item label="退款备注:">
:title="validationMessage" <el-input
:type="validationType" v-model="refundForm.refundRemark"
show-icon type="textarea"
:closable="false" :rows="3"
/> placeholder="请输入退款备注信息"
maxlength="200"
show-word-limit
/>
</el-form-item>
</div> </div>
</div> </div>
</el-form>
<!-- 退款备注 -->
<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 slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取消</el-button> <el-button @click="handleClose">取消</el-button>