aiot-app/pages/salesServiceManagement/accessory/components/searchSelect.vue

<template>
	<uni-popup ref="popup" type="bottom" :mask-click="true" @maskClick="close">
		<view class="bottom-selector">
			<!-- 标题 -->
			<view class="selector-title">{{ title }}</view>

			<!-- 搜索框 -->
			<view class="search-box">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<input v-model="searchText" placeholder="请输入姓名搜索" class="search-input" placeholder-class="placeholder"
					@input="filterData" />
			</view>

			<!-- 列表数据 -->
			<scroll-view scroll-y class="list-container">
				<view v-for="(item, index) in filteredData" :key="item.value" class="list-item"
					:class="{ selected: isSelected(item.value) }" @click="selectItem(item)">
					<view class="item-text">{{ item.text }}</view>
					<!-- 单选模式显示对勾 -->
					<uni-icons v-if="!multiple && innerValue === item.value" type="checkmarkempty" size="20"
						color="#2979ff"></uni-icons>
					<!-- 多选模式显示勾选框 -->
					<view v-else-if="multiple" class="checkbox"
						:class="{ checked: isSelected(item.value) }">
						<uni-icons v-if="isSelected(item.value)" type="checkmarkempty" size="16" color="#fff"></uni-icons>
					</view>
				</view>

				<!-- 空状态提示 -->
				<view v-if="filteredData.length === 0" class="empty-tip">
					<uni-icons type="search" size="40" color="#ccc"></uni-icons>
					<text>未找到匹配的使用人</text>
				</view>
			</scroll-view>

			<!-- 底部按钮 -->
			<view class="footer">
				<button class="btn cancel" @click="close">取消</button>
				<!-- 多选模式显示确定按钮 -->
				<button v-if="multiple" class="btn confirm" @click="confirm">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'BottomSelector',
		props: {
			// 标题
			title: {
				type: String,
				default: '选择使用人'
			},
			// 原始数据
			dataList: {
				type: Array,
				default: () => []
			},
			// 选中的值（v-model）- 单选为 String/Number，多选为 Array
			value: {
				type: [String, Number, Array],
				default: ''
			},
			// 是否为多选模式
			multiple: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				searchText: '',
				// 过滤后的数据
				filteredData: [],
				// 内部选中的值（用于临时存储，确定后更新）
				innerValue: this.value,
			}
		},
		watch: {
			dataList: {
				immediate: true,
				handler(newList) {
					// 初始化显示所有数据
					this.filteredData = [...newList];
				}
			},
			value(newVal) {
				this.innerValue = newVal;
			}
		},
		methods: {
			// 打开弹窗
			open() {
				this.$refs.popup.open();
				// 深拷贝，避免直接修改父组件的值
				this.innerValue = this.multiple ? [...(this.value || [])] : this.value;
			},
			clearSearchText(){
				this.searchText = ''
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close();
			},

			// 过滤数据
			filterData() {
				if (this.searchText.trim() === '') {
					this.filteredData = [...this.dataList];
					return;
				}

				const keyword = this.searchText.toLowerCase();
				this.filteredData = this.dataList.filter(item =>
					item.text.toLowerCase().includes(keyword)
				);
			},

			// 判断是否选中
			isSelected(value) {
				if (this.multiple) {
					return this.innerValue.includes(value);
				}
				return this.innerValue === value;
			},

			// 选择项目
			selectItem(item) {
				if (this.multiple) {
					// 多选模式
					const index = this.innerValue.indexOf(item.value);
					if (index > -1) {
						// 已选中则取消
						this.innerValue.splice(index, 1);
					} else {
						// 未选中则添加
						this.innerValue.push(item.value);
					}
					// 触发change事件，但不关闭弹窗
					this.$emit('change', this.getSelectedItems());
				} else {
					// 单选模式
					this.innerValue = item.value;
					this.$emit('input', this.innerValue);
					this.$emit('change', item);
					this.close();
				}
			},

			// 获取选中的完整数据项（多选模式）
			getSelectedItems() {
				if (!this.multiple) {
					return this.dataList.find(item => item.value === this.innerValue);
				}
				return this.dataList.filter(item => this.innerValue.includes(item.value));
			},

			// 确定选择（多选模式）
			confirm() {
				if (this.multiple) {
					// 更新父组件v-model绑定的值
					this.$emit('input', [...this.innerValue]);
					this.$emit('confirm', this.getSelectedItems());
				}
				this.close();
			}
		}
	}
</script>

<style scoped>
	.bottom-selector {
		width: 100%;
		background-color: #ffffff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.08);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 标题样式 */
	.selector-title {
		padding: 36rpx 32rpx 24rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
	}

	/* 搜索框样式 */
	.search-box {
		display: flex;
		align-items: center;
		padding: 0 32rpx 24rpx;
		margin: 0 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.search-input {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-radius: 40rpx;
		margin-left: 16rpx;
		font-size: 30rpx;
		color: #333;
	}

	.placeholder {
		color: #999;
		font-size: 30rpx;
	}

	/* 列表容器 */
	.list-container {
		max-height: 60vh;
		min-height: 45vh;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	/* 列表项样式 */
	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.list-item.selected {
		color: #2979ff;
		font-weight: 500;
	}

	.list-item:active {
		background-color: #f9f9f9;
	}

	.item-text {
		flex: 1;
	}

	/* 勾选框样式（多选模式） */
	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s;
	}

	.checkbox.checked {
		background-color: #2979ff;
		border-color: #2979ff;
	}

	/* 空状态提示 */
	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.empty-tip text {
		margin-top: 20rpx;
	}

	/* 底部按钮 */
	.footer {
		display: flex;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
	}

	.btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		font-size: 34rpx;
		margin: 0 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel {
		background-color: #f5f5f5;
		color: #333;
	}

	.confirm {
		background-color: #2979ff;
		color: white;
	}
</style>