daShangDao_miniProgram/components/BookConditionSelect.vue

<template>
	<view class="view-container">
		<view class="view-item horizontal">
			<!-- 品相标签 -->
			<view class="label-horizontal">品相</view>
			<!-- 横向滑动选择区 -->
			<scroll-view class="tag-scroll-group" scroll-x>
				<view class="tag-input-group">
					<view v-for="(item, index) in internalConditions" :key="index"
						:class="['custom-tag', { 'custom-tag-checked': item.checked }]"
						@click="handleSelect(index)">
						<text class="custom-tag-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BookConditionSelect',

		data() {
			// 组件内部维护品相数据
			return {
				internalConditions: [
					{ name: '八品', checked: false },
					{ name: '八五品', checked: false },
					{ name: '九品', checked: false },
					{ name: '九五品', checked: false },
					{ name: '全新', checked: false },
					{ name: '七品', checked: false },
					{ name: '六品', checked: false }
				]
			}
		},

		methods: {
			// 处理选择
			handleSelect(index) {
				// 更新选中状态
				this.internalConditions = this.internalConditions.map((item, i) => ({
					...item,
					checked: i === index
				}));

				// 向父组件发送事件 - 只传递索引和名称，避免复杂对象
				this.$emit('change', index, this.internalConditions[index].name);
			},

			// 获取当前选中的品相
			getSelectedCondition() {
				const selectedCondition = this.internalConditions.find(item => item.checked);
				if (selectedCondition) {
					return {
						name: selectedCondition.name,
						index: this.internalConditions.findIndex(item => item.checked)
					};
				}
				return null;
			},

			// 外部调用，重置选择
			resetSelection() {
				this.internalConditions = this.internalConditions.map(item => ({
					...item,
					checked: false
				}));
				this.$forceUpdate(); // 强制更新视图
			},

			// 外部调用，设置选中项
			setSelection(conditionName) {
				if (!conditionName) return;
				
				console.log('设置品相:', conditionName);
				const index = this.internalConditions.findIndex(item => item.name === conditionName);
				
				if (index !== -1) {
					this.internalConditions = this.internalConditions.map((item, i) => ({
						...item,
						checked: i === index
					}));
					
					// 强制更新视图
					this.$forceUpdate();
					
					// 触发change事件
					this.$emit('change', index, conditionName);
				}
			}
		},
		
		// 添加immediate watch以确保组件能够响应外部更新
		watch: {
			internalConditions: {
				handler(newVal) {
					console.log('品相数据更新:', newVal);
					this.$forceUpdate(); // 强制更新视图
				},
				deep: true
			}
		}
	}
</script>

<style scoped>
	.view-container {
		display: flex;
		background-color: #fff;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.view-item {
		flex: 1;
		display: flex;
		padding: 4rpx 0;
		text-align: center;
		color: #666;
		position: relative;
		border-bottom: 1px solid #ccc;
	}

	.label {
		display: inline;
		padding: 10rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		color: #000;
		font-size: 29rpx;
		background-color: #ccc;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.tag-input-group {
		display: inline-flex;
		flex-wrap: nowrap;
		gap: 10rpx;
		margin-top: 8rpx;
		min-width: max-content;
	}

	.view-container {
		display: flex;
		background-color: #fff;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.view-item {
		flex: 1;
		/* padding: rpx 10rpx; */
		color: #666;
		position: relative;
		border-bottom: 1px solid #ccc;
	}

	/* 水平布局样式 */
	.view-item.horizontal {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
	}

	/* 品相标签横向样式 */
	.label-horizontal {
		padding: 0rpx 15rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		color: #000;
		font-size: 28rpx;
		background-color: #ccc;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	/* 	.tag-input-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		align-items: center;
	} */

	/* 调整u-tag组件样式,适应水平布局 */
	/* 调整u-tag组件样式,适应水平布局 */
	/* 调整u-tag组件样式,适应水平布局 */
	::v-deep .u-tag--large {
		height: 60rpx !important;
		line-height: 60rpx !important;
		padding: 0 40rpx !important;
		min-width: 120rpx !important;
		font-size: 36rpx !important;
	}

	::v-deep .u-tag__text--large {
		font-size: 36rpx !important;
		line-height: 60rpx !important;
	}

	/* 横向滑动容器 */
	.tag-scroll-group {
		flex: 1;
		width: 0;
		min-width: 0;
		white-space: nowrap;
		overflow-x: scroll;
		padding-bottom: 2rpx;
	}
	.tag-input-group {
		display: inline-block;
		white-space: nowrap;
		margin-top: 8rpx;
	}
	.custom-tag {
		display: inline-block;
		min-width: 110rpx;
		height: 54rpx;
		padding: 0 32rpx;
		margin: 0 8rpx;
		font-size: 32rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 16rpx;
		background: #f7f7f7;
		color: #888;
		transition: all 0.2s;
		box-sizing: border-box;
		cursor: pointer;
		text-align: center;
		line-height: 54rpx;
	}
	.custom-tag-checked {
		background: #1976d2;
		color: #fff;
		border-color: #1976d2;
	}
	.custom-tag-text {
		font-size: 32rpx;
		line-height: 54rpx;
	}
</style>