Browse Source

feat(退款申请): 添加自定义退款金额功能

增加用户自定义修改退款金额的功能,仅当退款类型为"仅退款"时显示修改按钮
添加金额输入验证逻辑,确保金额不超过最大可退金额且不为负数
修改退款金额弹窗标题和按钮文字以适配不同场景
ylong 1 tháng trước cách đây
mục cha
commit
5e15be5de5
1 tập tin đã thay đổi với 80 bổ sung25 xóa
  1. 80 25
      pages-car/pages/apply-refund.vue

+ 80 - 25
pages-car/pages/apply-refund.vue

@@ -60,7 +60,7 @@
 				<u-cell-item :title="refundChannelText" :arrow="false">
 					<view slot="right-icon" class="refund-money-box" @click="showRefundAmountPopup = true">
 						<text class="money">¥{{ refundMoney }}</text>
-						<view class="edit-tag">
+						<view class="edit-tag" v-if="refundType === '2'">
 							<u-icon name="edit-pen" size="24"></u-icon>
 							<text>修改</text>
 						</view>
@@ -173,7 +173,7 @@
 		<u-popup v-model="showRefundAmountPopup" mode="bottom" border-radius="24">
 			<view class="popup-container">
 				<view class="popup-header">
-					<text class="title">退款金额明细</text>
+					<text class="title">{{ refundType === '2' ? '修改退款金额' : '退款金额明细' }}</text>
 					<u-icon name="close" size="32" color="#999" @click="showRefundAmountPopup = false"></u-icon>
 				</view>
 				<view class="popup-content">
@@ -181,7 +181,12 @@
 						<view class="item-row">
 							<u-icon name="rmb-circle" size="36" color="#666"></u-icon>
 							<text class="item-label">{{ refundChannelText }}</text>
-							<text class="item-value">¥{{ refundMoney }}</text>
+							<text v-if="refundType !== '2'" class="item-value">¥{{ refundMoney }}</text>
+							<u-input v-else v-model="customRefundMoney" type="number" placeholder="请输入退款金额" 
+								class="money-input" @blur="validateRefundMoney" />
+						</view>
+						<view v-if="refundType === '2'" class="max-money-hint">
+							<text>最大可退金额: ¥{{ maxRefundMoney }}</text>
 						</view>
 					</view>
 					<!-- 如果有红包/优惠,展示在这里 -->
@@ -204,7 +209,9 @@
 					</view>
 				</view>
 				<view class="popup-footer safe-area-bottom">
-					<u-button type="primary" shape="circle" :custom-style="submitBtnStyle"
+					<u-button v-if="refundType === '2'" type="primary" shape="circle" :custom-style="submitBtnStyle"
+						@click="confirmRefundMoney">确认修改</u-button>
+					<u-button v-else type="primary" shape="circle" :custom-style="submitBtnStyle"
 						@click="showRefundAmountPopup = false">我知道了</u-button>
 				</view>
 			</view>
@@ -248,6 +255,9 @@
 
 				address: {}, // 上门取件地址
 
+				// 退款金额相关
+				customRefundMoney: '', // 用户自定义的退款金额
+
 				// 辅助数据
 				showReasonPicker: false,
 				showStatusPicker: false,
@@ -301,6 +311,9 @@
 				return refund.toFixed(2);
 			},
 			refundMoney() {
+				if (this.customRefundMoney) {
+					return this.customRefundMoney;
+				}
 				return this.maxRefundMoney;
 			},
 			refundChannelText() {
@@ -446,26 +459,32 @@
 				});
 			},
 			toggleCheck(item) {
-				item.checked = !item.checked;
-			},
+					item.checked = !item.checked;
+					// 当勾选状态变化时,重置自定义退款金额,让系统重新计算
+					this.customRefundMoney = '';
+				},
 			calculateRefundMoney() {
-				// Computed auto updates
-			},
+					// 当商品数量变化时,重置自定义退款金额,让系统重新计算
+					this.customRefundMoney = '';
+				},
 			confirmType(e) {
-				this.refundType = e[0].value;
-				this.refundTypeText = e[0].label;
-
-				// 切换类型时重置一些状态
-				if (this.refundType === '2') { // 仅退款
-					this.returnMethod = '';
-					this.returnMethodText = '';
-				} else {
-					if (!this.returnMethod) {
-						this.returnMethod = '3';
-						this.returnMethodText = '自行寄回';
+					this.refundType = e[0].value;
+					this.refundTypeText = e[0].label;
+
+					// 切换类型时重置一些状态
+					if (this.refundType === '2') { // 仅退款
+						this.returnMethod = '';
+						this.returnMethodText = '';
+					} else {
+						if (!this.returnMethod) {
+							this.returnMethod = '3';
+							this.returnMethodText = '自行寄回';
+						}
 					}
-				}
-			},
+					
+					// 切换退款类型时,重置自定义退款金额
+					this.customRefundMoney = '';
+				},
 			confirmReason(e) {
 				this.refundReason = e[0].value;
 				this.refundReasonText = e[0].label;
@@ -479,10 +498,31 @@
 				this.returnMethodText = e[0].label;
 			},
 			chooseAddress() {
-				uni.navigateTo({
-					url: `/pages-mine/pages/address/list?id=${this.address.id || ''}&isSelect=1`
-				});
-			},
+					uni.navigateTo({
+						url: `/pages-mine/pages/address/list?id=${this.address.id || ''}&isSelect=1`
+					});
+				},
+				validateRefundMoney() {
+					if (!this.customRefundMoney) {
+						this.customRefundMoney = this.maxRefundMoney;
+						return;
+					}
+					
+					const refund = Number(this.customRefundMoney);
+					const max = Number(this.maxRefundMoney);
+					
+					if (refund > max) {
+						this.$u.toast(`退款金额不能超过最大可退金额 ¥${max}`);
+						this.customRefundMoney = max.toFixed(2);
+					} else if (refund < 0) {
+						this.$u.toast('退款金额不能为负数');
+						this.customRefundMoney = '0.00';
+					}
+				},
+				confirmRefundMoney() {
+					this.validateRefundMoney();
+					this.showRefundAmountPopup = false;
+				},
 			submit() {
 				if (this.selectedGoods.length === 0) {
 					this.$u.toast('请选择退款商品');
@@ -831,6 +871,21 @@
 						color: #999;
 					}
 				}
+				
+				.money-input {
+					width: 200rpx;
+					text-align: right;
+					font-size: 30rpx;
+					color: #333;
+					font-weight: 500;
+				}
+				
+				.max-money-hint {
+					margin-top: 10rpx;
+					padding-left: 60rpx;
+					font-size: 24rpx;
+					color: #999;
+				}
 			}
 
 			.upload-textarea-box {