baiyuApp/pages_manage/selectMember.vue

<template>
	<view class="container u-f es-ver flex-1">
		<view class="u-f searchBox">
			<view class="u-f-ajc" @tap="goBack">
				<image class="es-icon-56" src="/static/image/black_back.png" mode=""></image>
			</view>
			<view class="u-f-ajc flex-1">
				<u-search placeholder="请输入会员昵称" v-model="keyword" :showAction="false" height="30px"
					@search="gettagUserlist" @change="searchKeyword"></u-search>
			</view>
			<view class="es-c-00 es-fs-28 es-ml-32 u-f-ajc">
				取消
			</view>
		</view>
		<view class="es-c-33 es-fs-32 es-fw-500 es-mt-28" v-if="selectTagList && selectTagList.length>0">
			选择标签
		</view>
		<view class="u-f es-mt-8 acea-row maxHeight" v-if="selectTagList && selectTagList.length>0">
			<view class="es-mr-20 es-mt-20 tabBox" v-for="(item, index) in selectTagList" :key="item.tagId"
				@tap="selectTag(index)" :class="[item.checked?'active':'es-c-22']">
				{{item.tag}}
			</view>
		</view>
		<view class="u-f u-f-jsb es-fs-24 es-mt-42">
			<view class="">
				<text class="es-c-99">已选择 </text>
				<text class="w-calc-22">{{this.params.selectUser.length}} </text>
				<text class="es-c-99">人：</text>
			</view>
			<view class="u-f-ajc" @tap="selectAll">
				<image v-if="isSelectAll" class="es-icon-44" src="/static/images/icon_circle_sel.png" mode=""></image>
				<image v-else class="es-icon-44" src="/static/images/check_icon.png" mode=""></image>
				<text class="es-fs-28 es-c-22 es-ml-12">全选</text>
			</view>
		</view>
		<view class="selectBox u-f maxHeight" v-if="this.params.selectUser.length>0">
			<view class="selectBox-list es-mr-24 es-mt-26" v-for="(item,index) in this.params.selectUser" :key='index'
				@tap="delUser(index)">
				<text class="es-fs-28 es-c-22 es-fw-400 es-mr-12">{{item.nickname}}</text>
				<image class="es-icon-24" src="/static/images/icon_close1.png" mode=""></image>
			</view>
		</view>
		<scroll-view scroll-y="true" class="flex-1 scroll-y mt20" :lower-threshold="300" @scrolltolower="reachBottom">
			<view class="tagbox-list x-f" style="white-space: nowrap;flex-wrap: wrap;">
				<view class="u-f-ajc flex-1" v-if="tagsuserlist.length<=0">
					<u-empty class="u-f-ajc"  mode="data"></u-empty>
				</view>
				<view class="u-f es-mt-20 flex-1 user-list" v-for="(item,index) in tagsuserlist" :key='index'
					@tap="selectUser(index)" :class="[item.checked?'userSelectBg':'']">
					<view class="es-icon-88 es-br-ban es-mr-24">
						<image class="es-icon-88 es-br-ban" :src="item.avatar" mode=""></image>
					</view>
					<view class="flex-1 u-f u-f-jsb">
						<view class="">
							<view class="">
								<text class="es-fs-32 w-calc-22 es-fw-500 es-mr-16">{{item.nickname}}</text>
								<text class="es-fs-22 idBox">ID:{{item.userId}}</text>
							</view>
							<view class="es-fs-24 es-c-66 es-mt-10">
								项目名称：{{item.projectName}}
							</view>
						</view>
						<view class="u-f-ajc">
							<image v-if="item.checked" class="es-icon-44" src="/static/images/icon_circle_sel.png"
								mode="">
							</image>
							<image v-else class="es-icon-44" src="/static/images/check_icon.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="fixedBox u-f u-f-jsb">
			<button class="fixedBox-btn" @click="resetUser">重置</button>
			<button class="fixedBox-btn con-btn" @click="sure">确定</button>
		</view>
	</view>

</template>

<script>
	import {
		getallTags,
		getFsCourseList,
		getCourseVdieoList,
		getfsuserList,
		pageListByApp,

	} from "./api/manageCompany.js"
	export default {
		components: {
			// courseItem,
			// dropdownPanel
		},
		data() {
			return {
				keyword: '',
				selectTagList: [],
				tagsuserlist: [],
				timer: null,
				isEnableds: true,
				triggereds: false,
				isSelectAll: false,

				pagetag: [],
				parameter: {
					pageNum: 1,
					pageSize: 10
				},
				totalPage: 0,
				params: {
					selectUser: [],
					tagIds: [],
				},
				projectId: '',
				paramsId: ''
			}
		},
		onLoad(params) {
			if (params.projectId) {
				this.projectId = params.projectId
			}
			if (params.paramsId) {
				this.paramsId = params.paramsId
			}
			this.gettagUserlist('refresh')
			this.selectTagFun('refresh')
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			sure() {
				uni.$emit('selectUserData', this.params.selectUser)
				uni.navigateBack()
			},
			//选择标签
			selectTag(index) {
				this.selectTagList[index].checked = !this.selectTagList[index].checked
				this.params.tagIds = this.columnsa.filter(item => item.checked).map(v => v.tagId)
				this.gettagUserlist('refresh')
			},
			//选择会员
			selectUser(index) {
				this.tagsuserlist[index].checked = !this.tagsuserlist[index].checked
				this.params.selectUser = this.tagsuserlist.filter(item => item.checked)
				this.isSelectAll = this.tagsuserlist.every(item => item.checked)
			},
			selectAll() {
				this.isSelectAll = !this.isSelectAll
				this.tagsuserlist.forEach(item => {
					item.checked = this.isSelectAll
				})
				this.params.selectUser = this.tagsuserlist.filter(item => item.checked)
			},
			delUser(index) {
				this.tagsuserlist.forEach(item => {
					if (item.userId == this.params.selectUser[index].userId) {
						item.checked = !item.checked
					}
				})
				this.params.selectUser = this.tagsuserlist.filter(item => item.checked)
			},
			getuserid() {
				//会员确定
				this.userName = this.tagsuserlist.filter(item => item.checked)
					.map(v => v.nickname)
				this.params.userIds = this.tagsuserlist.filter(item => item.checked).map(v => v.userId)
				this.showvip = !this.showvip
				if (this.recipientType == 2) {
					this.selectTagList = this.params.tagIds = this.params.tagNames = []
				}
			},
			//获取标签列表
			async selectTagFun(type) {
				uni.showLoading({
					title: '加载中...'
				})
				const data = {
					pageNum: this.parameter.pageNum,
					pageSize: this.parameter.pageSize,
					keyword: this.keyword,
				}
				getallTags(data).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						const dataList = res.data.list.map(item => {
							let check = false
							if (this.params.tagIds.length > 0 && this.params.tagIds.includs(item
									.tagId)) {
								check = true
							}
							return {
								...item,
								checked: check,
							}
						})
						if (type == 'refresh') {
							this.columnsa = dataList
						} else {
							this.columnsa = [...this.columnsa, ...dataList]
						}
						if (res.data.isLastPage) {
							this.statusA = 'nomore'
						} else {
							this.statusA = 'loadmore'
						}
						this.pagetag = res.data
						this.selectTagList = this.columnsa
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			resetUser() {
				this.keyword = ''
				this.params.tagIds = []
				this.params.selectUser = []
				this.tagsuserlist = this.tagsuserlist.map(item => {
					return {
						...item,
						checked: false
					};
				})
				this.selectTagList = this.selectTagList.map(item => {
					return {
						...item,
						checked: false
					};
				})
				this.gettagUserlist('refresh')
			},
			searchKeyword(e) {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.keyword = e
					this.parameter.pageNum = 1
					this.gettagUserlist('refresh')
					this.timer = ''
				}, 1000)
			},
			reachBottom() {
				if (this.totalPage < this.parameter.pageNum) return
				this.parameter.pageNum++
				this.gettagUserlist()
			},
			//会员列表
			gettagUserlist(type) {
				const param = {
					pageNum: this.parameter.pageNum,
					pageSize: this.parameter.pageSize,
					keyword: this.keyword,
					projectId: this.projectId * 1,
					tagIds: this.params.tagIds
				}
				// pageListByApp(param).then(res => {
				getfsuserList(param).then(res => {
					if (res.code == 200) {
						this.viewload = false;
						let dataList = res.data.list.map((item) => {
							let checked = false
							if (this.paramsId && this.paramsId.split(',').includes(item.userId + '')) {
								checked = true
							}
							return {
								...item,
								checked: checked
							};
						});
						if (type == 'refresh') {
							this.tagsuserlist = dataList;
						} else if (type == 'more') {
							this.tagsuserlist = dataList;
						} else {
							this.tagsuserlist = [...this.tagsuserlist, ...dataList];
						}
						if (this.paramsId) {
							this.params.selectUser = this.tagsuserlist.filter(item => item.checked)
						}
						if (res.data.isLastPage) {
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
						this.pagetag = res.data;
						this.totalPage = Math.ceil(res.data.total / this.parameter.pageSize)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.searchBox {
		padding-top: var(--status-bar-height);
		height: calc(var(--status-bar-height) + 88rpx);
	}

	.tabBox {
		background: #F5F7FA;
		border-radius: 8rpx;
		padding: 8rpx 24rpx;
	}

	.active {
		color: #2583EB;
		background: #F0FAFF;
	}

	.userSelectBg {
		background: rgba(37, 131, 235, 0.06);
	}

	.user-list {
		padding: 20rpx;
		border-radius: 24rpx;

		.idBox {
			background: #FFF6E5;
			color: #C89743;
			padding: 2rpx 12rpx;
			border-radius: 8rpx;
		}
	}

	.maxHeight {
		max-height: 200rpx;
		overflow-y: scroll;
	}

	.selectBox {
		flex-wrap: wrap;

		.selectBox-list {
			border-radius: 76rpx;
			padding: 12rpx 24rpx;
			border: 2rpx solid #F5F5F5;
		}
	}

	.scroll-y {
		overflow-y: auto;
		padding-bottom: 128rpx;
	}

	.fixedBox {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 24rpx;
		width: 100%;

		.fixedBox-btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 20rpx;
			border-radius: 42rpx;
			border: none;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #757575;
			background: #F5F7FA;

			&::after {
				border: none;
			}
		}

		.con-btn {
			background: #2583EB;
			color: #fff;
		}
	}
</style>