MoeNovaClient/components/MultiSelectPopup/MultiSelectPopup.vue

<template>
	<view v-if="visible" class="popup-overlay" @click.self="closePopup">
		<view class="popup-content" @click.stop>
			<!-- Parent Categories as Tabs -->
			<view class="parent-tabs">
				<scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false"
					:scroll-into-view="'tab-' + activeParentIndex - 1" scroll-with-animation>
					<view v-for="(parent, index) in options" :key="index" :id="'tab-' + index" class="tab-item"
						:class="{ 'active': activeParentIndex === index }" @click="setActiveParent(index)">
						{{ parent.label }}
					</view>
				</scroll-view>
			</view>

			<!-- Child Items as Tags in a Grid -->
			<scroll-view scroll-y class="child-tags-container">
				<view class="tags-grid" v-if="activeParentIndex !== null && currentChildOptions.length > 0">
					<view v-for="(child, cIndex) in currentChildOptions" :key="child.value + '-' + cIndex"
						class="tag-item" :class="{ 'selected': selectedChildValues.includes(child.value) }"
						@click="selectChild(child)">
						{{ child.label }}
					</view>
				</view>
				<view v-else-if="activeParentIndex !== null && currentChildOptions.length === 0"
					class="no-children-text">
					暂无子选项
				</view>
			</scroll-view>

			<!-- Confirm Button -->
			<view class="popup-footer">
				<view class="confirm-btn" @click="confirmSelection">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MultiSelectPopup',
	props: {
		initialOptions: {
			type: Array,
			default: () => []
		},
		initialSelectedValues: { // Optional: to pre-select items
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			visible: false,
			options: [],
			activeParentIndex: null,
			selectedChildValues: [] // Changed to array for multi-select
		};
	},
	computed: {
		currentChildOptions() {
			if (this.activeParentIndex !== null && this.options[this.activeParentIndex] && this.options[this.activeParentIndex].children) {
				return this.options[this.activeParentIndex].children;
			}
			return [];
		}
	},
	watch: {
		initialOptions: {
			immediate: true,
			handler(newVal) {
				this.options = JSON.parse(JSON.stringify(newVal));
				// Ensure selectedChildValues is initialized from props when options load
				this.selectedChildValues = [...this.initialSelectedValues];

				if (this.options.length > 0) {
					let preselectedParentIndex = 0;
					// Find the first parent that has any of the initially selected children
					for (let i = 0; i < this.options.length; i++) {
						const parent = this.options[i];
						if (parent.children && parent.children.some(c => this.initialSelectedValues.includes(c.value))) {
							preselectedParentIndex = i;
							break;
						}
					}
					this.activeParentIndex = preselectedParentIndex;
				} else {
					this.activeParentIndex = null;
				}
			}
		}
	},
	methods: {
		openPopup() {
			this.options = JSON.parse(JSON.stringify(this.initialOptions));
			this.selectedChildValues = [...this.initialSelectedValues];

			if (this.options.length > 0) {
				let preselectedParentIndex = 0;
				for (let i = 0; i < this.options.length; i++) {
					const parent = this.options[i];
					if (parent.children && parent.children.some(c => this.selectedChildValues.includes(c.value))) {
						preselectedParentIndex = i;
						break;
					}
				}
				this.activeParentIndex = (this.options.length > 0) ? preselectedParentIndex : null;
			} else {
				this.activeParentIndex = null;
			}
			this.visible = true;
		},
		closePopup() {
			this.visible = false;
			this.$emit('popup-closed');
		},
		setActiveParent(parentIndex) {
			this.activeParentIndex = parentIndex;
		},
		selectChild(child) {
			const index = this.selectedChildValues.indexOf(child.value);
			if (index > -1) {
				this.selectedChildValues.splice(index, 1);
			} else {
				this.selectedChildValues.push(child.value);
			}
		},
		confirmSelection() {
			if (this.selectedChildValues.length > 0) {
				this.$emit('selection-confirmed', [...this.selectedChildValues]);
				this.closePopup();
			} else {
				uni.showToast({
					title: '请至少选择一个选项',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); // Darker overlay
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 1000;
}

.popup-content {
	background:url("../../static/makedetail/ai-bg.jpg") center top/100% 100%; 
	width: 100%;
	max-height: 70vh; // Increased height
	min-height: 40vh;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease-out;
	padding: 0 30rpx; // Add horizontal padding to content
	box-sizing: border-box;
	border-radius: 28rpx 28rpx 0 0;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.parent-tabs {
	width: 100%;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
	margin-bottom: 20rpx;
	padding-top: 30rpx; // Space at the top

	.tabs-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.tab-item {
		display: inline-block;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.7);
		cursor: pointer;
		position: relative;

		&.active {
			color: #FFFFFF;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 6rpx;
				background-color: #FFFFFF;
				border-radius: 3rpx;
			}
		}
	}
}

.child-tags-container {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 20rpx;
 

	.tags-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx; // Spacing between tags
	}

	.tag-item {
		background-color: rgba(255, 255, 255, 0.1);
		color: rgba(255, 255, 255, 0.8);
		padding: 15rpx 30rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
		cursor: pointer;
		border: 2rpx solid transparent;
		transition: all 0.2s ease;
		text-align: center;
		min-width: 120rpx; // Ensure tags have some minimum width
		box-sizing: border-box;
		border: 2rpx solid transparent;
		&.selected {
			border-color: #ACF934;
			color: #ACF934;
		}
	}
}

.no-children-text {
	padding: 40rpx;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 26rpx;
}

.popup-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
	border-top: 1rpx solid rgba(255, 255, 255, 0.1);

	.confirm-btn { 
		background:url("../../static/makedetail/ai-btn-bg.png") center  /100% 100%; 
	
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		width: 100%;
		max-width: 600rpx;
		padding: 25rpx 0;
		border-radius: 50rpx;
		cursor: pointer;
		transition: opacity 0.2s ease;

		&:active {
			opacity: 0.8;
		}
	}
}
</style>