添加

packageRc/pages/needs/components/choosePerson.vue

@@ -0,0 +1,132 @@
+<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 '@/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>