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

<template>
	<view class="refund-detail-page">
		<!-- 状态头部 -->
		<view class="status-header">
			<template v-if="orderInfo.status == '1'">
				<view class="status-title">请等待平台处理</view>
				<!-- 倒计时 -->
				<view class="status-desc" v-if="orderInfo.restAuditSecond > 0">
					<u-count-down :timestamp="orderInfo.restAuditSecond" separator="zh" :show-seconds="false"
						@end="getDetail" font-size="26" color="#999" bg-color="transparent"></u-count-down>后平台未处理将自动同意
				</view>
				<view class="status-tip">您已成功发起退款申请，请耐心等待平台处理</view>
			</template>
			<template v-else>
				<view class="status-title">{{ getStatusText(orderInfo.status) }}</view>
				<!-- 协商UI -->
				<view class="negotiation-card" v-if="orderInfo.status == '2'">
					<view class="negotiation-content">
						<u-icon name="file-text-fill" color="#FF6600" size="40" class="negotiation-icon"></u-icon>
						<view class="negotiation-text">
							<view class="negotiation-title">协商修改退款金额为{{ orderInfo.refundMoney }}元</view>
							<view class="negotiation-desc">我们愿意支持退款，若您接受修改金额，我们将立刻退款给您</view>
						</view>
					</view>
					<view class="negotiation-actions">
						<u-button size="mini" :custom-style="rejectBtnStyle" @click="handleNegotiation(false)">拒绝协商</u-button>
						<u-button size="mini" :custom-style="acceptBtnStyle" @click="handleNegotiation(true)">接受协商</u-button>
					</view>
				</view>
				<!-- 退款成功金额展示 -->
				<view class="refund-amount-box" v-if="orderInfo.status == '8'">
					<view class="amount-row">
						<text class="label">退回余额</text>
						<text class="value">¥{{ orderInfo.refundMoney }}</text>
					</view>
				</view>
			</template>
		</view>

		<!-- 退货方式 (状态为4时显示) -->
		<view class="info-card return-method-card" v-if="orderInfo.status == '4'">
			<view class="card-title">请选择退货方式</view>
			<!-- 这里可以加倒计时，类似：1天11时57分后未寄出平台将自动撤销退货申请，需根据接口返回字段 -->
			
			<view class="method-tabs">
				<view class="tab-item disabled">
					<view class="tab-name">上门取件</view>
					<view class="tab-desc">(快递员上门取包裹)</view>
				</view>
				<view class="tab-item disabled">
					<view class="tab-name">驿站自寄</view>
					<view class="tab-desc">(随到随退)</view>
				</view>
				<view class="tab-item active">
					<view class="tab-name">自行寄回</view>
					<view class="tab-desc">(需填写单号)</view>
				</view>
			</view>
			
			<view class="warning-box">
				需您自行联系快递公司退回，请不要邮寄到付
			</view>
			
			<view class="address-box">
				<view class="address-label">平台地址</view>
				<view class="address-content">
					<view class="name">{{ orderInfo.platformReceiveName || '张三' }}</view>
					<view class="detail">{{ orderInfo.platformReceiveAddress || '河南省鹤壁市浚县即可获得发货单收到单方事故师范号到' }} <image src="/pages-mine/static/copy.png" class="copy-icon" @click="copyAddress"></image></view>
				</view>
				<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
			</view>
			
			<u-button type="success" shape="circle" :custom-style="fillBtnStyle" @click="goToFillLogistics">填写单号</u-button>
		</view>

		<!-- 商品列表 -->
		<view class="info-card goods-card">
			<view class="goods-item" v-for="(goods, index) in orderInfo.detailList" :key="index">
				<image :src="goods.cover" mode="aspectFill" class="goods-cover"></image>
				<view class="goods-info">
					<view class="goods-title u-line-2">{{ goods.bookName }}</view>
					<view class="goods-sku" v-if="goods.isbn">品相：{{ goods.conditionType | conditionText }}
					</view>
					<view class="price-box">
						<text class="price">¥{{ goods.price }}</text>
						<text class="num">x{{ goods.refundNum }}</text>
					</view>
					<!-- 状态Badge -->
					<view class="refund-status-tag red-tag" v-if="orderInfo.status == '1'">
						<text>退款中</text>
					</view>
					<view class="refund-status-tag" v-if="orderInfo.status == '6'">退款成功</view>
				</view>
			</view>
		</view>

		<!-- 退款信息 (包含协商历史) -->
		<view class="info-card detail-card">
			<!-- 协商历史 -->
			<view class="row history-row" @click="goToHistory">
				<text class="label">协商历史</text>
				<view class="value flex-row link-text">
					<text>查看</text>
					<!-- <u-icon name="arrow-right" color="#38C148" size="24"></u-icon> -->
					<image src="/static/images/arrow-right-green.png" style="width: 24rpx; height: 24rpx;" v-if="false">
					</image>
					<!-- 使用文字或默认图标 -->
					<u-icon name="lightning-fill" color="#38C148" size="28" style="margin-left: 6rpx;"></u-icon>
				</view>
			</view>

			<view class="row">
				<text class="label">退款原因</text>
				<text class="value">{{ orderInfo.refundReason }}</text>
			</view>
			<view class="row">
				<text class="label">申请金额</text>
				<text class="value">共{{ orderInfo.refundMoney }}元</text>
			</view>
			<view class="row">
				<text class="label">申请时间</text>
				<text class="value">{{ orderInfo.createTime }}</text>
			</view>
			<view class="row">
				<text class="label">退款编号</text>
				<view class="value flex-row">
					<text>{{ refundOrderId }}</text>
					<image src="/pages-mine/static/copy.png" style="width: 28rpx; height: 28rpx; margin-left: 10rpx;"
						@click="copyOrderNo"></image>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar" v-if="showBottomBar">
			<view class="btn-group">
				<u-button v-if="orderInfo.showComplaint == 1" shape="circle" plain :custom-style="btnStyle"
					@click="handleAction('complaint')">投诉</u-button>

				<u-button v-if="orderInfo.showCancel == 1" shape="circle" plain :custom-style="btnStyle"
					@click="handleAction('cancel')">撤销申请</u-button>

				<u-button v-if="orderInfo.showModifyApply == 1" shape="circle" type="success"
					:custom-style="primaryBtnStyle" @click="handleAction('modify')">修改申请</u-button>

				<u-button v-if="orderInfo.showClose == 1" shape="circle" plain :custom-style="btnStyle"
					@click="handleAction('close')">关闭退款</u-button>
			</view>
		</view>

		<!-- 占位符 -->
		<view style="height: 150rpx;" v-if="showBottomBar"></view>

		<!-- 客服按钮 -->
		<FloatingDrag :width="126" :height="140" :initial-position="servicePosition"
			@position-change="handlePositionChange">
			<!-- #ifdef MP-ALIPAY -->
			<button class="service-btn" @click="navigateToCustomerService">
				<image src="/static/img/kf.png" mode="widthFix" style="width: 126rpx; height: 140rpx"></image>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<button class="service-btn" open-type="contact">
				<image src="/static/img/kf.png" mode="widthFix" style="width: 126rpx; height: 140rpx"></image>
			</button>
			<!-- #endif -->
		</FloatingDrag>
	</view>
</template>

<script>
	import FloatingDrag from "@/components/floating-drag.vue";
	export default {
		components: {
			FloatingDrag
		},
		data() {
			return {
				// 客服按钮位置
				servicePosition: {
					left: 0,
					right: 'auto',
					bottom: "10%",
				},
				refundOrderId: '',
				orderInfo: {
					status: '',
					restAuditSecond: 0,
					detailList: [],
					refundMoney: 0,
					refundReason: '',
					createTime: '',
					refundOrderId: '',
					showCancel: 0,
					showModifyApply: 0,
					showComplaint: 0,
					showClose: 0
				},
				btnStyle: {
					marginLeft: '20rpx',
					minWidth: '160rpx',
					height: '64rpx',
					lineHeight: '64rpx',
					padding: '0 20rpx',
					color: '#666',
					borderColor: '#ccc',
					fontSize: '28rpx',
				},
				primaryBtnStyle: {
					marginLeft: '20rpx',
					minWidth: '160rpx',
					height: '64rpx',
					lineHeight: '64rpx',
					padding: '0 20rpx',
					backgroundColor: '#38C148',
					color: '#fff',
					border: 'none'
				},
				rejectBtnStyle: {
					color: '#333',
					backgroundColor: '#fff',
					border: '1rpx solid #ccc',
					minWidth: '160rpx',
					height: '60rpx',
					lineHeight: '60rpx',
					fontSize: '26rpx',
					margin: '0 20rpx 0 0'
				},
				acceptBtnStyle: {
					color: '#fff',
					backgroundColor: '#FF6600',
					border: 'none',
					minWidth: '160rpx',
					height: '60rpx',
					lineHeight: '60rpx',
					fontSize: '26rpx',
					margin: '0'
				},
				fillBtnStyle: {
					backgroundColor: '#38C148',
					color: '#fff',
					height: '80rpx',
					fontSize: '30rpx',
					marginTop: '30rpx',
					width: '100%'
				}
			};
		},
		computed: {
			showBottomBar() {
				const { showCancel, showModifyApply, showComplaint, showClose } = this.orderInfo;
				return showCancel == 1 || showModifyApply == 1 || showComplaint == 1 || showClose == 1;
			}
		},
		onLoad(options) {
			if (options.refundOrderId) {
				this.refundOrderId = options.refundOrderId;
				this.getDetail();
			} else if (options.orderId) {
				// 兼容处理：如果传入的是 orderId，尝试通过 orderId 获取退款单（如果后端支持）
				// 或者提示错误
				// 假设暂时用 refundOrderId
				this.refundOrderId = options.orderId; // 尝试用这个ID
				this.getDetail();
			}
		},
		methods: {
			getDetail() {
				this.$u.api.getNewRefundOrderDetailAjax({
					refundOrderId: this.refundOrderId
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.data;
					}
				});
			},
			getStatusText(status) {
				// 状态 1-申请退款 2-审核通过 3-审核驳回 4-超时关闭 5-卖家已发货 6-已完成
				// 状态 1-申请退款 2-协商中待用户确认 3-协商中待商家确认 4-审核通过 5-审核驳回 6-超时关闭 7-卖家已发货 8-已完成
				const map = {
					'1': '待卖家处理',
					'2': '协商中待用户确认',
					'3': '协商中待商家确认',
					'4': '审核已通过，请您把书籍自行寄回',
					'5': '审核已驳回',
					'6': '退款关闭', // 超时关闭
					'7': '卖家已发货', // 可能是换货场景
					'8': '退款成功'
				};
				return map[status] || '处理中';
			},
			copyAddress() {
				const address = (this.orderInfo.platformReceiveName || '张三') + ' ' + (this.orderInfo.platformReceiveAddress || '河南省鹤壁市浚县即可获得发货单收到单方事故师范号到');
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({ title: '地址复制成功', icon: 'none' });
					}
				});
			},
			goToFillLogistics() {
				uni.navigateTo({
					url: `/pages-car/pages/fill-logistics?refundOrderId=${this.refundOrderId}`
				});
			},
			copyOrderNo() {
				uni.setClipboardData({
					data: String(this.orderInfo.refundOrderId || ''),
					success: () => {
						uni.showToast({ title: '复制成功', icon: 'none' });
					}
				});
			},
			goToHistory() {
				// 跳转协商历史页面 (如果有)
				uni.showToast({ title: '协商历史功能开发中', icon: 'none' });
			},
			navigateToCustomerService() {
				// 联系客服
				uni.navigateTo({
					url: '/pages/customer-service/index'
				});
			},
			// 处理位置变更
			handlePositionChange(position) {
				this.servicePosition = position;
			},
			handleNegotiation(accept) {
				const title = accept ? '确认接受协商金额？' : '确认拒绝协商？';
				uni.showModal({
					title: '提示',
					content: title,
					success: (res) => {
						if (res.confirm) {
							// TODO: Call API
							// const api = accept ? this.$u.api.refundNegotiateAgreeAjax : this.$u.api.refundNegotiateRefuseAjax;
							// api(...)
							
							// 模拟成功
							uni.showLoading({ title: '处理中' });
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: accept ? '已接受协商' : '已拒绝协商',
									icon: 'success'
								});
								// 刷新详情
								this.getDetail();
							}, 1000);
						}
					}
				});
			},
			handleAction(type) {
				switch (type) {
					case 'cancel':
						// 撤销申请逻辑
						uni.showModal({
							title: '提示',
							content: '确定要撤销退款申请吗？',
							success: (res) => {
								if (res.confirm) {
									uni.showLoading({
										title: '处理中'
									});
									this.$u.api.refundCancelAjax({
										refundOrderId: this.refundOrderId
									}).then(res => {
										uni.hideLoading();
										if (res.code == 200) {
											uni.showToast({
												title: '撤销成功',
												icon: 'success'
											});
											// 刷新页面
											this.getDetail();
										}
									});
								}
							}
						});
						break;
					case 'modify':
						// 跳转到修改申请页面
						uni.navigateTo({
							url: `/pages-car/pages/apply-refund?refundOrderId=${this.refundOrderId}&isModify=1`
						});
						break;
					case 'complaint':
						uni.navigateTo({
							url: `/pages-car/pages/complaint?orderId=${this.orderInfo.originOrderId}`
						});
						break;
					case 'close':
						// 关闭退款
						uni.showToast({ title: '关闭退款', icon: 'none' });
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-btn {
		height: max-content;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}

	.refund-detail-page {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 20rpx;

		.status-header {
			background-color: #fff;
			padding: 40rpx 30rpx;
			text-align: center;
			margin-bottom: 20rpx;

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

			.status-desc {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.status-tip {
				font-size: 24rpx;
				color: #999;
			}

			.negotiation-card {
				margin-top: 30rpx;
				text-align: left;
				
				.negotiation-content {
					display: flex;
					align-items: flex-start;
					margin-bottom: 30rpx;
					
					.negotiation-icon {
						margin-right: 20rpx;
						margin-top: 6rpx;
					}
					
					.negotiation-text {
						flex: 1;
						
						.negotiation-title {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}
						
						.negotiation-desc {
							font-size: 26rpx;
							color: #999;
							line-height: 1.4;
						}
					}
				}
				
				.negotiation-actions {
					display: flex;
					justify-content: flex-end;
				}
			}

			.refund-amount-box {
				margin-top: 30rpx;
				padding-top: 30rpx;

				.amount-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;

					.label {
						color: #333;
					}

					.value {
						color: #333;
						font-weight: bold;
					}
				}
			}
		}

		.info-card {
			background-color: #fff;
			margin: 20rpx;
			border-radius: 16rpx;
			padding: 30rpx;
			
			&.return-method-card {
				.card-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					text-align: center;
					margin-bottom: 30rpx;
				}
				
				.method-tabs {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					
					.tab-item {
						flex: 1;
						background-color: #F8F8F8;
						border-radius: 12rpx;
						padding: 20rpx 0;
						text-align: center;
						margin-right: 20rpx;
						border: 2rpx solid transparent;
						
						&:last-child {
							margin-right: 0;
						}
						
						&.active {
							background-color: #F0F9F1;
							border-color: #38C148;
							.tab-name { color: #38C148; }
							.tab-desc { color: #38C148; opacity: 0.8; }
						}
						
						&.disabled {
							opacity: 0.5;
						}
						
						.tab-name {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 6rpx;
						}
						
						.tab-desc {
							font-size: 22rpx;
							color: #999;
						}
					}
				}
				
				.warning-box {
					background-color: #E8F5E9;
					color: #38C148;
					font-size: 26rpx;
					padding: 16rpx;
					border-radius: 8rpx;
					text-align: center;
					margin-bottom: 30rpx;
				}
				
				.address-box {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-top: 1rpx solid #F5F5F5;
					
					.address-label {
						width: 140rpx;
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
					
					.address-content {
						flex: 1;
						padding-right: 20rpx;
						
						.name {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}
						
						.detail {
							font-size: 26rpx;
							color: #666;
							line-height: 1.4;
							
							.copy-icon {
								width: 28rpx;
								height: 28rpx;
								vertical-align: middle;
								margin-left: 10rpx;
							}
						}
					}
				}
			}

			&.goods-card {
				.goods-item {
					display: flex;
					margin-bottom: 20rpx;

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

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

					.goods-info {
						flex: 1;
						position: relative;

						.goods-title {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 10rpx;
						}

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

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

							.price {
								font-size: 28rpx;
								color: #333;
							}

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

						.refund-status-tag {
							position: absolute;
							right: 0;
							top: 50%; // Adjust as needed
							transform: translateY(-50%);
							font-size: 24rpx;
							color: #999;

							&.red-tag {
								color: #ff3b30;
								border: 1rpx solid #ff3b30;
								padding: 2rpx 10rpx;
								border-radius: 6rpx;
								font-size: 22rpx;
							}
						}
					}
				}
			}

			&.detail-card {
				.row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					font-size: 26rpx;

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

					.label {
						color: #999;
					}

					.value {
						color: #333;

						&.flex-row {
							display: flex;
							align-items: center;
						}

						&.link-text {
							color: #38C148; // 使用主题色
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 20rpx 30rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			z-index: 100;

			.service-btn {
				padding: 10rpx;
			}

			.btn-group {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
			}
		}
	}
</style>