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">
					{{ formatCountDown(orderInfo.restAuditSecond) }}后平台未处理将自动同意
				</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.conditionName || '默认' }}</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>{{ orderInfo.refundOrderId }}</text>
					<u-icon name="copy" size="28" color="#333" style="margin-left: 10rpx;" @click="copyOrderNo"></u-icon>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar" v-if="showBottomBar">
			<view class="service-btn" @click="contactService">
				<!-- 假设有一个客服图标 -->
				<u-icon name="server-man" size="60" color="#666"></u-icon>
			</view>
			<view class="btn-group">
				<u-button v-if="orderInfo.showComplaint == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
					@click="handleAction('complaint')">投诉</u-button>
				
				<u-button v-if="orderInfo.showCancel == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
					@click="handleAction('cancel')">撤销申请</u-button>
				
				<u-button v-if="orderInfo.showModifyApply == 1" size="mini" shape="circle" type="success" :custom-style="primaryBtnStyle"
					@click="handleAction('modify')">修改申请</u-button>
					
				<u-button v-if="orderInfo.showClose == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
					@click="handleAction('close')">关闭退款</u-button>
			</view>
		</view>
		
		<!-- 占位符 -->
		<view style="height: 120rpx;" v-if="showBottomBar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundOrderId: '',
				orderInfo: {
					status: '',
					restAuditSecond: 0,
					detailList: [],
					refundMoney: 0,
					refundReason: '',
					createTime: '',
					refundOrderId: '',
					showCancel: 0,
					showModifyApply: 0,
					showComplaint: 0,
					showClose: 0
				},
				timer: null,
				btnStyle: {
					marginLeft: '20rpx',
					minWidth: '160rpx',
					height: '64rpx',
					lineHeight: '64rpx',
					padding: '0 20rpx',
					color: '#666',
					borderColor: '#ccc'
				},
				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();
			}
		},
		onUnload() {
			if (this.timer) clearInterval(this.timer);
		},
		methods: {
			getDetail() {
				this.$u.api.getNewRefundOrderDetailAjax({
					refundOrderId: this.refundOrderId
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.data;
						if (this.orderInfo.restAuditSecond > 0) {
							this.startTimer();
						}
					}
				});
			},
			getStatusText(status) {
				// 状态 1-申请退款 2-审核通过 3-审核驳回 4-超时关闭 5-卖家已发货 6-已完成
				const map = {
					'1': '待卖家处理',
					'2': '审核通过',
					'3': '审核驳回',
					'4': '退款关闭', // 超时关闭
					'5': '卖家已发货', // 可能是换货场景
					'6': '退款成功'
				};
				return map[status] || '处理中';
			},
			formatCountDown(seconds) {
				if (seconds <= 0) return '0分';
				const d = Math.floor(seconds / 86400);
				const h = Math.floor((seconds % 86400) / 3600);
				const m = Math.floor((seconds % 3600) / 60);
				
				let str = '';
				if (d > 0) str += `${d}天`;
				if (h > 0) str += `${h}时`;
				if (m > 0) str += `${m}分`;
				if (!str) str = '即将';
				return str;
			},
			startTimer() {
				if (this.timer) clearInterval(this.timer);
				this.timer = setInterval(() => {
					if (this.orderInfo.restAuditSecond > 0) {
						this.orderInfo.restAuditSecond--;
					} else {
						clearInterval(this.timer);
						// 倒计时结束，刷新页面
						this.getDetail();
					}
				}, 1000);
			},
			copyOrderNo() {
				uni.setClipboardData({
					data: String(this.orderInfo.refundOrderId || ''),
					success: () => {
						uni.showToast({ title: '复制成功', icon: 'none' });
					}
				});
			},
			goToHistory() {
				// 跳转协商历史页面 (如果有)
				uni.showToast({ title: '协商历史功能开发中', icon: 'none' });
			},
			contactService() {
				// 联系客服
				uni.navigateTo({
					url: '/pages/service/index'
				});
			},
			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.showToast({ title: '修改申请', icon: 'none' });
						break;
					case 'complaint':
						// 投诉
						uni.navigateTo({
							url: `/pages-car/pages/complaint?orderId=${this.orderInfo.orderId}`
						});
						break;
					case 'close':
						// 关闭退款
						uni.showToast({ title: '关闭退款', icon: 'none' });
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
				border-top: 1rpx solid #eee;
				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: 140rpx;
						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;
							
							.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;
			}
		}
	}
</style>