<template>
|
<view class="select">
|
<view class="select_input">
|
<view class="select_input_box">
|
<u--input
|
placeholder="搜索部门/人员"
|
prefixIcon="search"
|
v-model="keyword"
|
@confirm="confirm"
|
prefixIconStyle="font-size: 26rpx;color: #B2B2B2"
|
></u--input>
|
</view>
|
</view>
|
<view class="select_list" v-if="list && list.length > 0">
|
<view class="select_list_item" v-for="(item, index) in list" :key="index" @click="clickItem(index)">
|
<view class="left">
|
<view class="left_img">
|
<image :src="item.prefixUrl + item.avatar" mode="widthFix" v-if="item.avatar"></image>
|
<view class="left_img_t">{{ item.realname.substring(0, 1) }}</view>
|
</view>
|
<view class="left_info">
|
<view class="left_info_top">
|
<text>{{item.realname}}</text>
|
<text v-if="item.status === 1">有会议</text>
|
</view>
|
<view class="left_info_bm">{{item.departmentName}}</view>
|
</view>
|
</view>
|
<image class="xuan" v-if="!item.active" src="@/static/icon/ic_choose@2x.png" mode="widthFix"></image>
|
<image class="xuan" v-else src="@/static/icon/ic_choose_sel@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="select_list" v-else>
|
<view class="select_list_wu">
|
<image src="@/static/common/364.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="select_zw"></view>
|
<view class="select_footer">
|
<view class="footer_top">
|
<view class="footer_top_label">已选择：</view>
|
<view class="footer_top_content">
|
{{users}}
|
</view>
|
<image @click="show = true" src="@/static/icon/renyuan_ic_open@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="footer_btn" @click="go">确认({{selected.length}}/{{list.length}})</view>
|
</view>
|
<u-popup :show="show" :round="20" mode="bottom" @close="show = false">
|
<view class="select_box">
|
<view class="select_box_head">
|
<text>已选择：{{selected.length}}人</text>
|
<text @click="show = false">确认</text>
|
</view>
|
<scroll-view scroll-y="true" class="select_box_list">
|
<view class="select_box_list_item" v-for="(item, index) in selected" :key="index">
|
<view class="left">
|
<view class="left_img">
|
<image :src="item.prefixUrl + item.avatar" mode="widthFix" v-if="item.avatar"></image>
|
<view class="left_img_t" v-else>{{ item.realname.substring(0, 1) }}</view>
|
</view>
|
<view class="left_info">
|
<text>{{item.realname}}</text>
|
<text>{{item.departmentName}}</text>
|
</view>
|
</view>
|
<view class="dele" @click="dele(index)">移除</view>
|
</view>
|
</scroll-view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
next: false,
|
page: 0,
|
list: [],
|
keyword: '',
|
selectedName: [],
|
selectedIds: [],
|
selected: [],
|
|
startTime: '',
|
endTime: ''
|
};
|
},
|
onLoad(option) {
|
this.startTime = option.startTime
|
this.endTime = option.endTime
|
this.getList()
|
},
|
computed: {
|
users() {
|
return this.selectedName.join('；')
|
}
|
},
|
methods: {
|
go() {
|
uni.$emit('user', { userList: this.selectedIds, usersName: this.users })
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
dele(i) {
|
this.list.forEach(item => {
|
if (item.id === this.selectedIds[i].userId) {
|
item.active = false
|
}
|
})
|
this.selectedName.splice(i, 1)
|
this.selectedIds.splice(i, 1)
|
this.selected.splice(i, 1)
|
},
|
confirm() {
|
this.list = []
|
this.next = false
|
this.page = 0
|
this.getList()
|
},
|
clickItem(i) {
|
this.selectedName = []
|
this.selectedIds = []
|
this.selected = []
|
this.list[i].active = !this.list[i].active
|
this.list.forEach(item => {
|
if (item.active) {
|
this.selectedName.unshift(item.realname)
|
this.selectedIds.unshift({ userId: item.id })
|
this.selected.unshift(item)
|
}
|
})
|
},
|
getList() {
|
if (!this.next) {
|
this.$u.api.userPage({
|
capacity: 20,
|
page: this.page,
|
model: {
|
keyword: this.keyword,
|
startTime: this.startTime,
|
endTime: this.endTime
|
}
|
}).then(res => {
|
if (res.data.records.length > 0) {
|
res.data.records.forEach(item => {
|
item.active = false
|
})
|
this.list = [...this.list, ...res.data.records]
|
this.page = this.page + 1
|
}
|
if (res.data.records.length < 20) {
|
this.next = true
|
}
|
})
|
}
|
}
|
},
|
onReachBottom(){
|
this.getList()
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #fff !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.select {
|
width: 100%;
|
.select_input {
|
width: 100%;
|
position: sticky;
|
top: 0;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
background: #ffffff;
|
.select_input_box /deep/ {
|
width: 100%;
|
background: #F7F7F7;
|
.u-border {
|
border: none !important;
|
}
|
}
|
}
|
.select_list {
|
width: 100%;
|
padding: 0 30rpx;
|
margin-top: 16rpx;
|
box-sizing: border-box;
|
.select_list_wu {
|
width: 100%;
|
margin-top: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 340rpx;
|
height: 364rpx;
|
}
|
}
|
.select_list_item {
|
width: 100%;
|
height: 138rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
.left {
|
display: flex;
|
align-items: flex-start;
|
.left_img {
|
width: 64rpx;
|
height: 64rpx;
|
margin-right: 20rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
.left_img_t {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #0055FF;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.left_info {
|
display: flex;
|
flex-direction: column;
|
.left_info_top {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
margin-right: 10rpx;
|
}
|
&:nth-child(2) {
|
padding: 8rpx;
|
border-radius: 4rpx;
|
border: 1rpx solid #F62710;
|
font-size: 22rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #F62710;
|
}
|
}
|
}
|
.left_info_bm {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 16rpx;
|
}
|
}
|
}
|
.xuan {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
}
|
}
|
.select_zw {
|
width: 100%;
|
height: calc(198rpx + env(safe-area-inset-bottom));
|
}
|
.select_footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
box-sizing: border-box;
|
padding: 22rpx 30rpx calc(22rpx + env(safe-area-inset-bottom)) 30rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 6rpx 0rpx #B2B2B2;
|
.footer_top {
|
width: 100%;
|
height: 44rpx;
|
display: flex;
|
align-items: center;
|
.footer_top_label {
|
flex-shrink: 0;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
.footer_top_content {
|
flex: 1;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #0055FF;
|
overflow:hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
-o-text-overflow:ellipsis;
|
}
|
image {
|
width: 44rpx;
|
height: 44rpx;
|
}
|
}
|
.footer_btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #0055FF;
|
border-radius: 4rpx;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-top: 22rpx;
|
}
|
}
|
.select_box {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
box-sizing: border-box;
|
.select_box_head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 40rpx;
|
text {
|
&:first-child {
|
font-size: 28rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
&:last-child {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #0055FF;
|
}
|
}
|
}
|
.select_box_list {
|
width: 100%;
|
max-height: 700rpx;
|
display: flex;
|
flex-direction: column;
|
.select_box_list_item {
|
width: 100%;
|
height: 134rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
.left {
|
display: flex;
|
align-items: center;
|
.left_img {
|
width: 64rpx;
|
height: 64rpx;
|
margin-right: 20rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
.left_img_t {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #0055FF;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.left_info {
|
display: flex;
|
flex-direction: column;
|
text {
|
&:first-child {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
&:last-child {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 20rpx;
|
}
|
}
|
}
|
}
|
.dele {
|
width: 80rpx;
|
height: 48rpx;
|
line-height: 48rpx;
|
text-align: center;
|
border-radius: 4rpx;
|
border: 1rpx solid #999999;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
