ks-app-employment-service/packageRc/pages/needs/components/choosePerson.vue

<template>
	<view>
		<uni-popup ref="showPersonChooser" background-color="#fff" type="bottom">
			<view style="padding: 32rpx 32rpx 0">
				<input @change="searchChange" placeholder="搜索选择人员" v-model="searchPerson"></input>
				<scroll-view style="height: 500rpx;" :scroll-y="true">
					<view v-for="(item, index) in personList" :key="index" :label="item.name" :value="item.name"
						@click="bindPerson(item)" class="person-list" :class="{active: activePerson.id == item.id}">
						<view style="display: flex;justify-content: space-between;font-size: 32rpx;font-weight: bold;">
							{{ item.name }}
							<view style="color: #8492a6; font-size: 13px;width: 50%;text-align: right;">{{ item.phone }}
							</view>
						</view>
						<view style="color: #8492a6;margin-top: 7rpx;">现居住地：{{item.currentResidentialAddress}}</view>
					</view>
				</scroll-view>
				<view class="button-area">
					<view class="btn" @click="closeshowPersonChooser">取消</view>
					<view class="btn reset" @click="resetData">重置</view>
					<view class="btn save" @click="saveInfo">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getPersonList
	} from '@/packageRc/apiRc/needs/person'
	export default {
		data() {
			return {
				showPersonChooser: false,
				activePerson: {},
				searchPerson: '',
				personList: [],
				searcher: '',
			}
		},
		mounted() {
			this.doSearch()
		},
		methods: {
			open() {
				this.$refs.showPersonChooser.open();
				this.activePerson = {}
			},
			saveInfo() {
				this.$emit('confirm', this.activePerson)
				this.$refs.showPersonChooser.close()
			},
			searchChange() {
				if (this.searcher) {
					clearTimeout(this.searcher)
					this.doSearch()
				} else {
					this.doSearch()
				}
			},
			doSearch() {
				this.searcher = setTimeout(() => {
					getPersonList({
						name: this.searchPerson,
						pageSize: 100,
						pageNum: 1
					}).then(res => {
						this.personList = res.rows
						clearTimeout(this.searcher)
					})
				}, 200)
			},
			resetData(){
				this.searchPerson = '';
				this.personList = [];
				this.activePerson = {}
			},
			bindPerson(item) {
				this.activePerson = item;
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.person-list {
		padding: 24rpx 32rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		border: 1px solid #e4e4e4;
		margin-top: 32rpx;

		&.active {
			border: 1px solid #1890ff;
		}
	}

	.button-area {
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 24rpx 32rpx 68rpx;
		width: calc(100% + 64rpx);
		margin-left: -32rpx;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		margin-top: 40rpx;
		border-radius: 16px 16px 0px 0px;

		.btn {
			line-height: 72rpx;
			width: 176rpx;
			margin-right: 16rpx;
			font-size: 28rpx;
			border: 1px solid #B8C5D4;
			color: #282828;
			text-align: center;
			border-radius: 8rpx;
		}

		.reset {
			background: #DCE2E9;
		}

		.save {
			background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
			color: #fff;
			border: 0;
			flex-grow: 1;
		}
	}
</style>