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

<template>
	<view class="refund-detail-page">
		<!-- 状态头部 -->
		<view class="status-header">
			<view class="status-title"
				v-if="orderInfo.disposeType && orderInfo.disposeType == 2 && orderInfo.status == 2">退货商品异常</view>
			<view class="status-title" v-else>{{ getStatusText(orderInfo.status) }}</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" separator-size="26" separator-color="#999" color="#999"
					bg-color="transparent"></u-count-down>
				<template>
					<text class="status-desc" v-if="orderInfo.status == 1">后平台未处理将自动同意</text>
					<text class="status-desc" v-if="orderInfo.status == 2">后买家未处理将自动撤销</text>
					<text class="status-desc" v-if="orderInfo.status == 3">后平台处理将自动同意退款</text>
					<text class="status-desc" v-if="orderInfo.status == 4">后未寄出平台将自动撤销退货申请</text>
				</template>
			</view>

			<template v-if="orderInfo.status == '1'">
				<view class="status-tip">您已成功发起退款申请，请耐心等待平台处理</view>
			</template>
			<template v-else>
				<!-- 协商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.disposeMoney || orderInfo.refundMoney
							}}元</view>
							<view class="negotiation-desc" v-if="orderInfo.disposeType == 3">
								我们愿意支持退货退款，若您接受修改退货退款，请将退货商品寄回平台</view>

							<view class="negotiation-desc" v-else>我们愿意支持退款，若您接受修改金额，我们将立刻退款给您</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 == '9'">
					<view class="amount-row">
						<!-- @Schema(description = "金额退回方式:1-余额 2-微信 3-支付宝") private String moneyType; -->
						<text class="label">退回{{ orderInfo.moneyType ? ['余额', '微信', '支付宝'][orderInfo.moneyType - 1] : '余额'
							}}</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.receiverName }} {{ orderInfo.receiverMobile }}</view>
					<view class="detail">{{ orderInfo.receiverAddress }} <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" v-if="orderInfo.bookName">
			<view class="goods-item">
				<image :src="orderInfo.cover" mode="aspectFill" class="goods-cover"></image>
				<view class="goods-info">
					<view class="goods-title u-line-2">{{ orderInfo.bookName }}</view>
					<view class="goods-sku" v-if="orderInfo.isbn">品相：{{ orderInfo.conditionType | conditionText }}
					</view>
					<view class="price-box">
						<text class="price" v-if="orderInfo.price">¥{{ orderInfo.price }}</text>
						<text class="price" v-else></text>
						<text class="num">x{{ orderInfo.refundNum || 1 }}</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 == '9'">退款成功</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 history-row" @click="openRefundHistory">
				<text class="label">历史退款记录</text>
				<view class="value flex-row link-text">
					<text>查看</text>
					<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>

		<refund-history-popup ref="historyPopup" @view="handleViewHistoryRefund"></refund-history-popup>
	</view>
</template>

<script>
import FloatingDrag from "@/components/floating-drag.vue";
import RefundHistoryPopup from "../components/refund-history-popup.vue";
import navbarVue from '../../components/navbar/navbar.vue';
export default {
	components: {
		FloatingDrag,
		RefundHistoryPopup
	},
	data() {
		return {
			// 客服按钮位置
			servicePosition: {
				left: 0,
				right: 'auto',
				bottom: "10%",
			},
			refundOrderId: '',
			orderInfo: {
				status: '',
				restAuditSecond: 0,
				detailOrderId: '',
				bookName: '',
				cover: '',
				isbn: '',
				conditionType: '',
				refundNum: 0,
				price: 0,
				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;
		} else if (options.orderId) {
			this.refundOrderId = options.orderId;
		}
	},
	onShow() {
		if (this.refundOrderId) {
			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-超时关闭 7-买家已发货 8-确认收货 9-退款成功
			const map = {
				'1': '请等待平台处理',
				'2': '协商中待用户确认',
				'3': '协商中待商家确认',
				'4': '审核已通过，请您把书籍自行寄回',
				'5': '审核已驳回',
				'6': '超时关闭',
				'7': '待平台确认收货',
				'8': '平台已确认收货',
				'9': '退款成功'
			};
			return map[status] || '处理中';
		},
		copyAddress() {
			const address = (this.orderInfo.receiverName || '') + ' ' + (this.orderInfo.receiverMobile || '') + ' ' + (this.orderInfo.receiverAddress || '');
			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.navigateTo({
				url: `/pages-car/pages/negotiation-history?refundOrderId=${this.refundOrderId}`
			});
		},
		openRefundHistory() {
			const orderDetailId = this.orderInfo.detailOrderId || this.orderInfo.orderDetailId || this.orderInfo.detailId;
			if (!orderDetailId) {
				uni.showToast({ title: '缺少订单详情ID', icon: 'none' });
				return;
			}
			uni.showLoading({ title: '加载中' });
			this.$u.api.getRefundOrderDetailListAjax({ orderDetailId }).then(res => {
				uni.hideLoading();
				if (res.code == 200) {
					this.$refs.historyPopup && this.$refs.historyPopup.open(res.data || []);
				} else {
					uni.showToast({ title: res.msg || '获取失败', icon: 'none' });
				}
			}).catch(() => {
				uni.hideLoading();
			});
		},
		handleViewHistoryRefund(item) {
			if (!item || !item.refundOrderId) return;
			uni.redirectTo({
				url: `/pages-car/pages/refund-detail?refundOrderId=${item.refundOrderId}`
			});
		},
		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) {
						uni.showLoading({ title: '处理中' });
						const api = accept ? this.$u.api.refundDisposeAgreeAjax : this.$u.api.refundDisposeRefuseAjax;
						api({ refundOrderId: this.refundOrderId }).then(res => {
							uni.hideLoading();
							if (res.code == 200) {
								uni.showToast({
									title: accept ? '已接受协商' : '已拒绝协商',
									icon: 'success'
								});
								// 刷新详情
								this.getDetail();
							} else {
								uni.showToast({
									title: res.msg || '操作失败',
									icon: 'none'
								});
							}
						}).catch(() => {
							uni.hideLoading();
						});
					}
				}
			});
		},
		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();
										setTimeout(() => {
											uni.navigateBack();
										}, 1000);
									}
								});
							}
						}
					});
					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>