133 lines
3.0 KiB
Vue
133 lines
3.0 KiB
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 '@/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>
|