MoeNovaClient/components/MultiSelectPopup/MultiSelectPopup.vue

<template>
	<view v-if="visible" class="popup-overlay" @click.self="closePopup">
		<view class="popup-content">
			<view class="popup-header">
				<text class="popup-action popup-cancel" @click="closePopup">取消</text>
				<text class="popup-action popup-confirm" @click="confirmSelection">确定</text>
			</view>
			<view class="picker-container">
				<scroll-view scroll-y class="column parent-column">
					<view v-for="(parent, index) in options" :key="index" 
					      class="column-item parent-item"
					      :class="{ 'active': activeParentIndex === index }"
					      @click="setActiveParent(index)">
						{{ parent.label }}
					</view>
				</scroll-view>
				<scroll-view scroll-y class="column child-column">
					<view v-if="activeParentIndex !== null && currentChildOptions.length > 0">
						<view v-for="(child, index) in currentChildOptions" :key="index"
						      class="column-item child-item"
						      :class="{ 'selected': selectedChildValues.includes(child.value) }"
						      @click="selectChild(child)">
							{{ child.label }}
							<view v-if="selectedChildValues.includes(child.value)" class="checkmark">✓</view>
						</view>
					</view>
					<view v-else-if="activeParentIndex !== null && currentChildOptions.length === 0" class="no-children-text">
						暂无选项
					</view>
				</scroll-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));
				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.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.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 1000;
}

.popup-content {
	background-color: white;
	width: 100%;
	max-height: 50vh; /* Adjusted max height */
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease-out;
}

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

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 30rpx;
	border-bottom: 1rpx solid #eee;
}

.popup-action {
	font-size: 30rpx;
	cursor: pointer;
}

.popup-cancel {
	color: #666;
}

.popup-confirm {
	color: #007aff; // Blue color for confirm
}

.picker-container {
	display: flex;
	flex: 1;
	height: calc(50vh - 81rpx); /* Max height minus header height */
	overflow: hidden; /* Prevent overall container from scrolling */
}

.column {
	height: 100%;
	overflow-y: auto;
	padding: 10rpx 0;
}

.parent-column {
	flex: 1;
	background-color: #f8f8f8;
	border-right: 1rpx solid #eee;
}

.child-column {
	flex: 1.5; // Child column can be wider
	background-color: #fff;
}

.column-item {
	padding: 25rpx 30rpx;
	font-size: 28rpx;
	cursor: pointer;
	text-align: center;
	border-bottom: 1rpx solid #f0f0f0; /* Light border for items */
}

.parent-item.active {
	background-color: #fff; 
	color: #007aff; 
	font-weight: bold;
	border-right: 4rpx solid #007aff; /* Indicate active parent */
	margin-right: -1rpx; /* Overlap border */
}

.child-item.selected {
	color: #007aff;
	font-weight: bold;
	background-color: #e6f2ff; /* Light blue background for selected child */
}

.no-children-text {
	padding: 40rpx;
	text-align: center;
	color: #999;
	font-size: 26rpx;
}
</style>