book-hi/pages-car/pages/apply-refund.vue

<template>
	<view class="apply-refund-page">
		<!-- 退款商品 -->
		<view class="card">
			<view class="type-section">
				<view class="section-title">请选择售后类型</view>
				<view class="type-btn-group">
					<view class="type-btn" :class="{ active: refundType === '1' }"
						@click="confirmType([{ value: '1', label: '退货退款' }])">
						<text>退货退款</text>
					</view>
					<view class="type-btn" :class="{ active: refundType === '2' }"
						@click="confirmType([{ value: '2', label: '仅退款' }])">
						<text>仅退款</text>
					</view>
				</view>
			</view>

			<view class="card-header">
				<text class="card-title">退款商品</text>
			</view>
			<view class="goods-list">
				<view v-for="(item, index) in orderInfo.detailVoList" :key="index" class="goods-item">
					<view class="checkbox-box" @click.stop="toggleCheck(item)">
						<u-icon v-if="item.checked" name="checkmark-circle-fill" color="#38C148" size="44"></u-icon>
						<u-icon v-else name="checkmark-circle" color="#ccc" size="44"></u-icon>
					</view>
					<image :src="item.cover" mode="aspectFill" class="goods-cover"></image>
					<view class="goods-info">
						<view class="goods-name u-line-2">{{ item.bookName }}</view>
						<view class="goods-sku" v-if="item.isbn">ISBN: {{ item.isbn }}</view>
						<view class="price-box">
							<text class="price">¥{{ item.payPrice }}</text>
							<u-number-box v-model="item.refundNum" :min="1" :max="item.num"
								@change="calculateRefundMoney"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 退款原因配置 -->
		<view class="card no-padding">
			<u-cell-group :border="false">
				<!-- 退款原因 -->
				<u-cell-item title="退款原因" :value="refundReasonText || '请选择'" @click="showReasonPicker = true" required
					:border-bottom="refundType === '2' ? false : true"></u-cell-item>

				<!-- 货物状态 (仅退款显示) -->
				<u-cell-item v-if="refundType === '1'" title="货物状态" :value="shopStatusText"
					@click="showStatusPicker = true" required :border-bottom="false"></u-cell-item>
			</u-cell-group>
		</view>

		<!-- 退款金额与凭证 -->
		<view class="card no-padding">
			<view class="card-title" style="padding:30rpx 0 0 20rpx">退款金额:</view>
			<u-cell-group :border="false">
				<!-- 退回支付渠道 -->
				<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">
							<u-icon name="edit-pen" size="24"></u-icon>
							<text>修改</text>
						</view>
					</view>
				</u-cell-item>
				<!-- 上传描述和凭证 -->
				<u-cell-item title="上传描述和凭证" :value="uploadStatusText" @click="showUploadPopup = true" is-link
					:border-bottom="false"></u-cell-item>
			</u-cell-group>
		</view>

		<!-- 退货方式 (仅退货退款显示) - 单独分区 -->
		<view class="card no-padding" v-if="refundType === '1'">
			<u-cell-group :border="false">
				<u-cell-item title="退货方式" :value="returnMethodText || '请选择'" @click="showReturnMethodPicker = true"
					required></u-cell-item>

				<!-- 上门取件地址 (仅上门取件显示) -->
				<view class="address-section" @click="chooseAddress">
					<view class="flex-a flex-j-b mb-20" v-if="address.name">
						<view class="address-label">我的地址</view>
						<image src="/pages-mine/static/adderss.png" style="width: 40rpx; height: 40rpx"></image>
						<view class="flex-d flex-1 ml-24" style="margin-right: 20rpx">
							<view class="flex-a flex-j-b mb-10">
								<view class="address-text">{{ address.name }}</view>
								<view class="address-text">{{ address.mobile }}</view>
							</view>
							<view class="address-text">{{ address.province || '' }}{{ address.city || '' }}{{
								address.area || '' }}{{ address.fullAddress }}</view>
						</view>
						<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
					</view>

					<view class="flex-a flex-j-b" v-else>
						<view class="flex-a">
							<u-icon name="plus-circle-fill" :size="48" color="#38C148" top="2"></u-icon>
							<view class="ml-10 font-30 address-text">我的地址</view>
							<text class="u-required">*</text>
						</view>
						<view class="flex-a">
							<view class="ml-10 address-text">请添加</view>
							<u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
						</view>
					</view>
				</view>
			</u-cell-group>
		</view>


		<!-- 我的服务 - 单独分区 -->
		<view class="card no-padding">
			<view class="card-title" style="padding:30rpx 0 0 20rpx">我的服务</view>
			<u-cell-group :border="false">
				<u-cell-item title="退换无忧" value="服务生效中" :arrow="true" :border-bottom="false">
					<u-icon slot="icon" name="checkmark-circle-fill" color="#38C148" size="32"
						style="margin-right: 10rpx;"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>

		<!-- 底部占位 -->
		<view style="height: 60rpx;"></view>

		<!-- 底部固定栏 -->
		<view class="footer-bar">
			<view class="footer-left" @click="showRefundAmountPopup = true">
				<text class="label">{{ refundChannelText }}:</text>
				<text class="amount">¥{{ refundMoney }}</text>
				<text class="detail-link">明细</text>
			</view>
			<view class="footer-right">
				<u-button type="primary" shape="circle" :custom-style="submitBtnStyle" @click="submit">提交申请</u-button>
			</view>
		</view>

		<!-- 弹窗: 退款原因 -->
		<u-select v-model="showReasonPicker" :list="reasonList" @confirm="confirmReason"></u-select>
		<!-- 弹窗: 货物状态 -->
		<u-select v-model="showStatusPicker" :list="statusList" @confirm="confirmStatus"></u-select>
		<!-- 弹窗: 退货方式 -->
		<u-select v-model="showReturnMethodPicker" :list="returnMethodList" :default-value="returnMethodIndex"
			@confirm="confirmReturnMethod"></u-select>

		<!-- 弹窗: 上传描述和凭证 -->
		<u-popup v-model="showUploadPopup" mode="bottom" border-radius="24" height="800">
			<view class="popup-container full-height">
				<view class="popup-header">
					<text class="title">上传描述和凭证</text>
					<u-icon name="close" size="32" color="#999" @click="showUploadPopup = false"></u-icon>
				</view>
				<view class="popup-content">
					<view class="upload-textarea-box">
						<u-input v-model="description" type="textarea" placeholder="补充描述，有助于平台更好的处理售后问题" :height="100"
							maxlength="200" />
					</view>
					<view class="upload-area">
						<u-upload ref="uUpload" :action="uploadAction" :max-count="5" :header="uploadHeader" name="file"
							:file-list="fileList" @on-list-change="handleUploadChange" width="160" height="160">
						</u-upload>
					</view>
				</view>
				<view class="popup-footer safe-area-bottom">
					<u-button type="primary" shape="circle" :custom-style="submitBtnStyle"
						@click="showUploadPopup = false">完成</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 弹窗: 退款明细 -->
		<u-popup v-model="showRefundAmountPopup" mode="bottom" border-radius="24">
			<view class="popup-container">
				<view class="popup-header">
					<text class="title">退款金额明细</text>
					<u-icon name="close" size="32" color="#999" @click="showRefundAmountPopup = false"></u-icon>
				</view>
				<view class="popup-content">
					<view class="detail-item">
						<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>
						</view>
					</view>
					<!-- 如果有红包/优惠，展示在这里 -->
					<view class="detail-item" v-if="otherRefundAmount > 0">
						<view class="item-row">
							<u-icon name="red-packet" size="36" color="#666"></u-icon>
							<text class="item-label">退回其他</text>
						</view>
						<view class="sub-list">
							<view class="sub-item" v-if="orderInfo.discountMoney > 0">
								<text class="sub-label">优惠金额</text>
								<text class="sub-value">¥{{ orderInfo.discountMoney }}</text>
							</view>
							<!-- 预留红包字段 -->
							<view class="sub-item" v-if="orderInfo.redPacketMoney > 0">
								<text class="sub-label">红包</text>
								<text class="sub-value">¥{{ orderInfo.redPacketMoney }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-footer safe-area-bottom">
					<u-button type="primary" shape="circle" :custom-style="submitBtnStyle"
						@click="showRefundAmountPopup = false">我知道了</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {
					detailVoList: [],
					discountMoney: 0,
					redPacketMoney: 0 // 假设有
				},

				// 表单数据
				refundType: '1', // 1: 退货退款, 2: 仅退款
				refundTypeText: '退货退款',

				refundReason: '',
				refundReasonText: '',

				shopStatus: '2', // 1: 未收到货, 2: 已收到货
				shopStatusText: '已收到货',

				returnMethod: '3', // 1: 上门取件, 2: 寄件点自寄, 3: 自行寄回
				returnMethodText: '自行寄回',

				description: '',
				fileList: [], // 用于回显和同步状态

				address: {}, // 上门取件地址

				// 辅助数据
				showReasonPicker: false,
				showStatusPicker: false,
				showReturnMethodPicker: false,
				showRefundAmountPopup: false,
				showUploadPopup: false, // 上传弹窗

				reasonList: [],
				statusList: [
					{ value: '1', label: '未收到货' },
					{ value: '2', label: '已收到货' }
				],
				returnMethodList: [
					{ value: '1', label: '上门取件' },
					{ value: '2', label: '寄件点自寄' },
					{ value: '3', label: '自行寄回' }
				],

				uploadAction: uni.$u.http.config.baseUrl + '/token/shop/feedback/fileUpload',
				uploadHeader: {
					'Authorization': uni.getStorageSync('token') || ''
				},
				submitBtnStyle: {
					width: '100%',
					height: '80rpx',
					fontSize: '30rpx',
					backgroundColor: '#38C148',
					color: '#ffffff'
				}
			};
		},
		computed: {
			returnMethodIndex() {
				const index = this.returnMethodList.findIndex(item => item.value === this.returnMethod);
				return index > -1 ? [index] : [2];
			},
			selectedGoods() {
				return this.orderInfo.detailVoList.filter(item => item.checked);
			},
			maxRefundMoney() {
				if (!this.orderInfo.detailVoList || this.orderInfo.detailVoList.length === 0) return '0.00';

				let totalOriginal = 0;
				this.orderInfo.detailVoList.forEach(item => {
					totalOriginal += Number(item.payPrice) * item.num;
				});

				if (totalOriginal === 0) return '0.00';

				let selectedOriginal = 0;
				this.selectedGoods.forEach(item => {
					selectedOriginal += Number(item.payPrice) * item.refundNum;
				});

				let payMoney = Number(this.orderInfo.payMoney) || 0;
				// 按比例计算: (选中商品原价 / 订单总原价) * 实付金额
				let refund = (selectedOriginal / totalOriginal) * payMoney;
				return refund.toFixed(2);
			},
			refundMoney() {
				return this.maxRefundMoney;
			},
			refundChannelText() {
				const type = String(this.orderInfo.payType);
				if (type === '1') return '退回余额';
				if (type === '2') return '退回微信';
				return '退回支付渠道';
			},
			otherRefundAmount() {
				return (Number(this.orderInfo.discountMoney) || 0) + (Number(this.orderInfo.redPacketMoney) || 0);
			},
			uploadStatusText() {
				if ((this.description && this.description.trim().length > 0) || this.fileList.length > 0) {
					return '已补充';
				}
				return '上传有助于处理退款';
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId;
				this.loadOrderDetail();
				this.getRefundReasons();
			}
		},
		onShow() {
			let selectAddr = uni.getStorageSync("selectAddr");
			if (selectAddr) {
				this.address = selectAddr;
				uni.removeStorageSync("selectAddr");
			}
		},
		onUnload() {

		},
		methods: {
			loadOrderDetail() {
				this.$u.api.getShopOrderDetailAjax({ orderId: this.orderId }).then(res => {
					if (res.code === 200) {
						this.orderInfo = res.data;
						// 初始化商品选中状态和退款数量
						this.orderInfo.detailVoList.forEach(item => {
							this.$set(item, 'checked', true);
							this.$set(item, 'refundNum', item.num);
						});

						// 根据状态默认选中类型
						if (this.orderInfo.status == '3') { // 待收货
							// 默认退货退款
							this.refundType = '1';
							this.refundTypeText = '退货退款';
							this.shopStatus = '1';
							this.shopStatusText = '未收到货';
						} else {
							this.refundType = '1';
							this.refundTypeText = '退货退款';
							this.shopStatus = '2';
							this.shopStatusText = '已收到货';
						}

						// 默认使用订单收货地址作为取件地址
						this.address = {
							id: this.orderInfo.receiverAddressId,
							name: this.orderInfo.receiverName,
							mobile: this.orderInfo.receiverMobile,
							fullAddress: this.orderInfo.receiverAddress,
						};
					}
				});
			},
			getRefundReasons() {
				uni.$u.http.get("/token/common/getDictOptions?type=shop_order_complaints_options").then(res => {
					if (res.code === 200) {
						this.reasonList = res.data.map(item => ({
							value: item.dictValue || item.dictLabel,
							label: item.dictLabel
						}));
					}
				});
			},
			toggleCheck(item) {
				item.checked = !item.checked;
			},
			calculateRefundMoney() {
				// Computed auto updates
			},
			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 = '自行寄回';
					}
				}
			},
			confirmReason(e) {
				this.refundReason = e[0].value;
				this.refundReasonText = e[0].label;
			},
			confirmStatus(e) {
				this.shopStatus = e[0].value;
				this.shopStatusText = e[0].label;
			},
			confirmReturnMethod(e) {
				this.returnMethod = e[0].value;
				this.returnMethodText = e[0].label;
			},
			chooseAddress() {
				uni.navigateTo({
					url: `/pages-mine/pages/address/list?id=${this.address.id || ''}&isSelect=1`
				});
			},
			handleUploadChange(lists) {
				this.fileList = lists;
			},
			submit() {
				if (this.selectedGoods.length === 0) {
					this.$u.toast('请选择退款商品');
					return;
				}
				if (!this.refundReason) {
					this.$u.toast('请选择退款原因');
					return;
				}
				if (this.refundType === '1' && !this.returnMethod) {
					this.$u.toast('请选择退货方式');
					return;
				}
				if (this.refundType === '1' && this.returnMethod === '1' && !this.address.name) {
					this.$u.toast('请选择取件地址');
					return;
				}

				// 处理图片
				let files = [];
				// 优先使用 fileList (因为 handleUploadChange 已同步)
				// 或者直接从 ref 获取，双重保险
				let uploadFiles = this.fileList;
				if (this.$refs.uUpload && this.$refs.uUpload.lists) {
					uploadFiles = this.$refs.uUpload.lists;
				}

				uploadFiles.forEach(item => {
					if (item.response && item.response.code === 200) {
						files.push(item.response.data);
					} else if (item.url) {
						files.push(item.url);
					}
				});

				const params = {
					orderId: this.orderId,
					refundDetailList: this.selectedGoods.map(item => ({
						detailOrderId: item.detailOrderId || item.id,
						num: item.refundNum
					})),
					refundType: this.refundType,
					shopStatus: this.shopStatus,
					refundReason: this.refundReason,
					refundMoney: this.refundMoney,
					sendType: this.returnMethod,
					addressId: this.address.id || '',
					description: this.description,
					fileUrlList: files
				};

				// 附加地址信息(如果是上门取件)
				if (this.refundType === '1' && this.returnMethod === '1') {
					// 这里的参数结构需根据后端实际要求调整，这里假设后端接收 address 对象
					params.address = this.address;
				}

				this.$u.api.applyRefundAjax(params).then(res => {
					if (res.code === 200) {
						this.$u.toast('提交成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						this.$u.toast(res.msg || '提交失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply-refund-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
		padding-bottom: 140rpx; // Space for fixed footer
	}

	.card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		overflow: hidden;

		&.no-padding {
			padding: 0;
		}

		.type-section {
			margin-bottom: 30rpx;

			.section-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.type-btn-group {
				display: flex;

				.type-btn {
					flex: 1;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #e5e5e5;
					border-radius: 8rpx;
					margin-right: 20rpx;
					font-size: 28rpx;
					color: #333;
					transition: all 0.3s;

					&:last-child {
						margin-right: 0;
					}

					&.active {
						border-color: #38C148;
						color: #38C148;
						background-color: rgba(56, 193, 72, 0.05);
						font-weight: bold;
					}
				}
			}
		}

		.card-header {
			padding: 10rpx 0 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			margin-bottom: 20rpx;

			.card-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.card-title {
			// For simple title without header line
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
	}

	.goods-list {
		.goods-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.checkbox-box {
				margin-right: 20rpx;
			}

			.goods-cover {
				width: 140rpx;
				height: 140rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.goods-info {
				flex: 1;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-name {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
				}

				.goods-sku {
					font-size: 24rpx;
					color: #999;
				}

				.price-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}
	}

	.refund-money-box {
		display: flex;
		align-items: center;

		.money {
			font-size: 32rpx;
			color: #38C148; // Theme color
			font-weight: bold;
		}

		.edit-tag {
			display: flex;
			align-items: center;
			background-color: #f0f0f0;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
			margin-left: 16rpx;

			text {
				font-size: 22rpx;
				color: #666;
				margin-left: 4rpx;
			}
		}
	}

	.address-box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		color: #333;
		font-size: 28rpx;

		.addr-detail {
			font-size: 24rpx;
			color: #999;
			max-width: 300rpx;
		}
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 200rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 100;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.footer-left {
			flex: 1;
			display: flex;
			align-items: center;

			.label {
				font-size: 26rpx;
				color: #333;
			}

			.amount {
				font-size: 36rpx;
				color: #38C148;
				font-weight: bold;
				margin: 0 10rpx;
			}

			.detail-link {
				font-size: 24rpx;
				color: #999;
				text-decoration: underline;
			}
		}

		.footer-right {
			width: 240rpx;
		}
	}

	.popup-container {
		padding: 30rpx;
		background-color: #fff;

		&.full-height {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			flex-shrink: 0;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.popup-content {
			margin-bottom: 40rpx;
			flex: 1;
			overflow-y: auto;

			.detail-item {
				margin-bottom: 30rpx;

				.item-row {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.item-label {
						flex: 1;
						margin-left: 20rpx;
						font-size: 30rpx;
						color: #333;
					}

					.item-value {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
					}
				}

				.sub-list {
					padding-left: 60rpx;

					.sub-item {
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}

			.upload-textarea-box {
				background-color: #f9f9f9;
				padding: 20rpx;
				border-radius: 12rpx;

				.counter {
					text-align: right;
					font-size: 24rpx;
					color: #999;
					margin: 10rpx 0 0;
				}
			}

			.upload-area {
				margin-top: 20rpx;
			}
		}

		.popup-footer {
			margin-top: 20rpx;
			flex-shrink: 0;

			&.safe-area-bottom {
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}
		}
	}

	.address-section {
		padding: 26rpx 32rpx;
	}

	.address-text {
		color: #333333;
		font-family: PingFang SC;
		font-weight: 400;
	}

	.address-label {
		font-size: 28rpx;
		color: #909399;
		margin-right: 20rpx;
		width: 140rpx;
	}

	.u-required {
		color: #ff0000;
		margin-left: 8rpx;
	}
</style>