SmartParks_uniapp/components/SelectUser.vue

<template>
	<view>
		<!-- 遮罩层 -->
		<view class="mask" v-if="visible" @click="close"></view>

		<!-- 底部弹窗 -->
		<view class="popup" v-if="visible">
			<!-- 标题栏 -->
			<view class="header">
				<text>{{ title }}</text>
				<image class="close" @click="close" src="/static/ic_close_01.png" />
			</view>

			<view class="search-bar">
				<image class="search-icon" src="/static/ic_search_gray.png" />
				<input class="search-input" placeholder="姓名、工号" />
			</view>


			<!-- 列表 -->
			<scroll-view class="user-list" scroll-y>
				<view v-for="item in filteredList" :key="item.value" class="user-item" @click="selectUser(item)">
					<view class="radio" :class="{ checked: isSelected(item) }"></view>
					<text>{{ item.name }}（{{ item.department }}）</text>
				</view>
			</scroll-view>

			<button class="footer" @click="confirm">{{ confirmText }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SelectUser',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: '选择'
			},
			multiple: {
				type: Boolean,
				default: false
			},
			confirmText: {
				type: String,
				default: '指派'
			}
		},
		data() {
			return {
				keyword: '',
				selected: []
			}
		},
		computed: {
			filteredList() {
				if (!this.keyword) return this.list;
				return this.list.filter(item => item.name.includes(this.keyword) || item.value.includes(this.keyword));
			}
		},
		methods: {
			close() {
				this.$emit('update:visible', false);
			},
			selectUser(item) {
				if (this.multiple) {
					if (this.isSelected(item)) {
						this.selected = this.selected.filter(i => i.value !== item.value);
					} else {
						this.selected.push(item);
					}
				} else {
					this.selected = [item];
				}
			},
			isSelected(item) {
				return this.selected.some(i => i.value === item.value);
			},
			confirm() {
				this.$emit('confirm', this.selected);
				this.close();
			},
			onSearch() {}
		}
	}
</script>

<style scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}

	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 80%;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		z-index: 999;
		animation: slideUp 0.3s ease;
	}

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

		to {
			transform: translateY(0);
		}
	}

	.header {
		padding-top: 45rpx;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		padding: 45rpx 30rpx 20rpx 30rpx;
		position: relative;
		justify-content: center;
	}

	.close {
		width: 22rpx;
		height: 21rpx;
		position: absolute;
		right: 30rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: #F7F7F7;
		border-radius: 29rpx;
		height: 58rpx;
		padding-left: 20rpx;
		margin-left: 34rpx;
		margin-right: 34rpx;
		margin-top: 26rpx;
	}
	.search-icon {
		width: 27rpx;
		height: 27rpx;
		margin-right: 8rpx;
	}
	.search-input {
		border: none;
		font-size: 26rpx;
		flex: 1;
		color: #000;
	}

	.user-list {
		flex: 1;
		overflow-y: auto;
		margin-top: 20rpx;
		padding-left: 52rpx;
		padding-right: 52rpx;
	}

	.user-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #F7F7F7;
		font-size: 28rpx;
	}

	.radio {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.radio.checked {
		background: #2d8cf0;
		border-color: #2d8cf0;
	}



	.footer{
		width: 80vw;
		height: 88rpx;
		background: #0090FF;
		color: #fff;
		border-radius: 44rpx;
		font-size: 36rpx;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}
</style>