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: innerValue === item.value }" @click="selectItem(item)">
					<view class="item-text">{{ item.text }}</view>
					<uni-icons v-if="innerValue === item.value" type="checkmarkempty" size="20"
						color="#2979ff"></uni-icons>
				</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 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）
			value: {
				type: [String, Number],
				default: ''
			}
		},
		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.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)
				);
			},

			// 选择项目
			selectItem(item) {
				this.innerValue = item.value;
				// this.selectedItem = item;
				this.$emit('input', this.innerValue);
				this.$emit('change', item);
				this.close();
			},

			// 确定选择
			confirm() {
				console.log(this.innerValue,'123')
				if (this.innerValue) {
					// 更新父组件v-model绑定的值
					this.$emit('input', this.innerValue);
				}
				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;
	}

	/* 空状态提示 */
	.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>