book-hi/pages-car/components/refund-step-one.vue

<template>
	<view class="refund-step-one">
		<view class="card">
			<view class="type-section">
				<view class="section-title">选择售后类型</view>
				<view class="type-btn-group">
					<view class="type-btn" :class="{ active: localRefundType === '1' }"
						@click="changeRefundType('1')">
						<text>退货退款</text>
					</view>
					<view class="type-btn" :class="{ active: localRefundType === '2' }"
						@click="changeRefundType('2')">
						<text>仅退款</text>
					</view>
				</view>
			</view>

			<view class="card-header">
				<text class="card-title">选择售后商品</text>
				<text class="sub-title">已选 {{ selectedCount }}/{{ goodsList.length }}</text>
			</view>
			<view class="goods-list">
				<view v-for="(item, index) in localGoodsList" :key="index" class="goods-item" :class="{ 'is-disabled': item.disabled }" @click="toggleCheck(index)">
					<view class="checkbox-box">
						<u-icon v-if="item.disabled" name="minus-circle" color="#ccc" size="44"></u-icon>
						<u-icon v-else-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="goods-sku" v-if="item.conditionType">品相：{{ item.conditionType | conditionText }}</view>
						<view class="price-box">
							<text class="price">¥{{ item.payPrice || item.price }}</text>
							<view class="num-wrap">
								<text class="status-tag" v-if="item.status == '2'">退款中</text>
								<text class="status-tag" v-if="item.status == '3'">退款成功</text>
								<text class="num">x{{ item.refundNum || item.num || 1 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="card-header" style="border-bottom: none; padding-bottom: 0;">
				<text class="card-title">选择售后原因</text>
			</view>
			
			<!-- 货物状态选择 (如果是退货退款) -->
			<view v-if="localRefundType === '1'" class="status-tabs">
				<view class="status-tab" :class="{ active: globalShopStatus === '1' }" @click="globalShopStatus = '1'">未收到货</view>
				<view class="status-tab" :class="{ active: globalShopStatus === '2' }" @click="globalShopStatus = '2'">已收到货</view>
			</view>

			<view class="reason-list">
				<view class="reason-item" v-for="(reason, index) in reasonList" :key="index" @click="selectReason(reason)">
					<text class="reason-label">{{ reason.label }}</text>
					<u-icon v-if="globalRefundReason === reason.label" name="checkmark-circle-fill" color="#38C148" size="44"></u-icon>
					<u-icon v-else name="checkmark-circle" color="#ccc" size="44"></u-icon>
				</view>
			</view>
		</view>

		<view class="footer-bar two-btns">
			<view class="btn-wrap">
				<u-button shape="circle" :custom-style="cancelBtnStyle" @click="cancelRefund">先不退了</u-button>
			</view>
			<view class="btn-wrap">
				<u-button type="primary" shape="circle" :custom-style="btnStyle" @click="goNextInnerStep">下一步</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'RefundStepOne',
	props: {
		goodsList: {
			type: Array,
			default: () => []
		},
		refundType: {
			type: String,
			default: '1'
		},
		reasonList: {
			type: Array,
			default: () => []
		},
		statusList: {
			type: Array,
			default: () => [
				{ value: '1', label: '未收到货' },
				{ value: '2', label: '已收到货' }
			]
		}
	},
	data() {
			return {
				localRefundType: this.refundType,
				localGoodsList: [],
				
				globalShopStatus: '1',
				globalShopStatusText: '未收到货',
				globalRefundReason: '',
				globalRefundReasonText: '',
				
				btnStyle: {
					width: '100%',
					height: '80rpx',
					fontSize: '30rpx',
					backgroundColor: '#38C148',
					color: '#ffffff',
					border: 'none'
				},
				cancelBtnStyle: {
					width: '100%',
					height: '80rpx',
					fontSize: '30rpx',
					backgroundColor: '#ffffff',
					color: '#333',
					border: '1px solid #f0f0f0'
				}
		};
	},
	watch: {
			goodsList: {
				handler(val) {
					// 深度拷贝，避免直接修改 props
					this.localGoodsList = JSON.parse(JSON.stringify(val));
					
					// 自动回填售后原因（如果是修改申请且已存在全局原因或第一件商品有原因）
					if (val.length > 0 && val[0].refundReason) {
						this.globalRefundReason = val[0].refundReason;
						this.globalRefundReasonText = val[0].refundReasonText || val[0].refundReason;
					}
					if (val.length > 0 && val[0].shopStatus) {
						this.globalShopStatus = val[0].shopStatus;
						this.globalShopStatusText = val[0].shopStatusText;
					}
				},
				deep: true,
				immediate: true
			},
			refundType(val) {
				this.localRefundType = val;
				this.globalShopStatus = val === '1' ? '2' : '1';
			},
			globalShopStatus(val) {
				this.globalShopStatusText = val === '1' ? '未收到货' : '已收到货';
			}
		},
	computed: {
		selectedCount() {
			return this.localGoodsList.filter(item => item.checked).length;
		},
		selectedGoods() {
			return this.localGoodsList.filter(item => item.checked);
		}
	},
	methods: {
		changeRefundType(type) {
			if (this.localRefundType !== type) {
				this.localRefundType = type;
				this.$emit('update:refundType', type);
			}
		},
		toggleCheck(index) {
			if (this.localGoodsList[index].disabled) {
				this.$u.toast('该商品状态不可退款');
				return;
			}
			this.$set(this.localGoodsList[index], 'checked', !this.localGoodsList[index].checked);
		},
		goNextInnerStep() {
				if (this.selectedCount === 0) {
					this.$u.toast('请选择售后商品');
					return;
				}
				if (!this.globalRefundReason) {
					this.$u.toast('请选择售后原因');
					return;
				}
				
				// 将选定的全局原因和货物状态填充到每一个被选中的商品身上
				this.selectedGoods.forEach(item => {
					this.$set(item, 'shopStatus', this.localRefundType === '1' ? this.globalShopStatus : '1');
					this.$set(item, 'shopStatusText', this.localRefundType === '1' ? this.globalShopStatusText : '未收到货');
					this.$set(item, 'refundReason', this.globalRefundReason);
					this.$set(item, 'refundReasonText', this.globalRefundReasonText);
				});
				
				// 直接派发 next 事件到第二步
				this.$emit('next', {
					selectedGoods: this.selectedGoods,
					refundType: this.localRefundType
				});
			},
			selectReason(reason) {
				this.globalRefundReason = reason.label;
				this.globalRefundReasonText = reason.label;
			},
			cancelRefund() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
.refund-step-one {
	padding-bottom: 140rpx;
}

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

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

			&.is-disabled {
				opacity: 0.5;
			}

			&:last-child {
				margin-bottom: 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;
		display: flex;
		align-items: center;

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

		.sub-title {
			font-size: 24rpx;
			color: #38C148;
		}
	}

	.status-tabs {
		display: flex;
		padding: 20rpx 0;
		
		.status-tab {
			flex: 1;
			height: 72rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f5f5f5;
			color: #333;
			font-size: 28rpx;
			border-radius: 36rpx;
			margin-right: 20rpx;
			transition: all 0.3s;
			
			&:last-child {
				margin-right: 0;
			}
			
			&.active {
				background-color: rgba(56, 193, 72, 0.1);
				color: #38C148;
				font-weight: bold;
				border: 1px solid #38C148;
			}
		}
	}

	.reason-list {
		.reason-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

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

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

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

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

.goods-item {
	display: flex;
	align-items: center;

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

	.goods-info {
		flex: 1;
		height: 160rpx;
		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;
			margin-top: 10rpx;

			.price {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.num-wrap {
				display: flex;
				align-items: center;
				
				.status-tag {
					font-size: 22rpx;
					color: #ff3b30;
					border: 1rpx solid #ff3b30;
					padding: 2rpx 10rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
				}
				
				.num {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
}

.mb-30 {
	margin-bottom: 30rpx;
}

.mt-10 {
	margin-top: 10rpx;
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx;
	padding-bottom: 0;
	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);

	&.two-btns {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 40rpx;

		.btn-wrap {
			flex: 1;
		}
	}
}
</style>