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>
				<!-- 退款成功金额展示 -->
				<view class="refund-amount-box" v-if="orderInfo.status == '6' || orderInfo.status == '2'">
					<view class="amount-row">
						<text class="label">退回余额</text>
						<text class="value">¥{{ orderInfo.refundMoney }}</text>
					</view>
				</view>
			</template>
		</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'
				}
			};
		},
		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-已完成
				const map = {
					'1': '待卖家处理',
					'2': '审核通过',
					'3': '审核驳回',
					'4': '退款关闭', // 超时关闭
					'5': '卖家已发货', // 可能是换货场景
					'6': '退款成功'
				};
				return map[status] || '处理中';
			},
			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;
			},
			handleAction(type) {
				switch (type) {
					case 'cancel':
						// 撤销申请逻辑
						uni.showModal({
							title: '提示',
							content: '确定要撤销退款申请吗？',
							success: (res) => {
								if (res.confirm) {
									// 调用撤销接口 (需确认接口名)
									// 假设: cancelRefundAjax
									uni.showToast({ title: '撤销申请', icon: 'none' });
								}
							}
						});
						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;
			}

			.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;

			&.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>