ylrz_scrm_company_h5/pages/user/users/users.vue

<template>
	<view class="column" style="height: calc(100% - 20rpx) ;">
		<view class="top " >
			<u-search placeholder="输入姓名/昵称搜索" bgColor='#F8F8FC'
			 v-model="searchContent" @custom="search()" @search="search()"></u-search>
			 <view class="justify-around  fs28">
			 	<view v-for="(item,index) in tabs" :key="index" :class="act==index?'active':'notact'" 
				@click="tabact(index)" class="flex-1 center ptb20">{{item}}</view>
				<view v-show="act==1" @click="selectact=!selectact" :class="selectact?'active':''"
				class="flex-1 center ptb20">批量</view>
			 </view>
		</view>
		
		<scroll-view scroll-y class="indexes flex-1 pb60" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - 300rpx)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true" >
			<view v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.firstLetter" :id="'indexes-' + item.firstLetter" :data-index="item.firstLetter">
					<view class="zm">{{item.firstLetter}}</view>
					<view class="user-list">
						<view class="user-item justify-start" v-for="(subitem,index) in item.list" 
						@click="navTo(subitem)" :key="index">
							<u-checkbox-group @change="changeitem(subitem.userId)" v-if="selectact">
								<u-checkbox :checked="subitem.checked" shape="circle" activeColor="#1773ff" :name="subitem.userId"
									labelColor="#1773ff" />
							</u-checkbox-group>
							<view class="bgf p20 radius16 flex-1">
								<view class="justify-between align-center">
									<view class="justify-start align-center">
										<view class="avatar" >
											<image class="img" :src="subitem.avatar?(baseUrl+subitem.avatar):avatar" mode="aspectFill"></image>
										</view> 
										<view class="content">
											<view class="name">
												{{subitem.nickName}}
											</view>
											<view class="dept justify-start align-center">
												<u-icon name="phone"></u-icon><view>1576984582</view> </view>
											<view class="dept">注册时间：2025-01-24</view>
										</view>
									</view>
									<view class="base-color fs24">未禁用</view>
								</view>
								<view class="justify-between mt10">
									<view class="fs24 mt20 ml10" style="color: #115296;">
										{{subitem.deptName}}
									</view>
									<!-- <view class="fs24 base-color-red mr10 bor-red
									base-bg-false plr20 radius40 ptb4">已禁用</view> -->
									<view class="fs24 base-color mr10 bor-blue h52 lh50
									base-bg-sure plr20 radius40 " style="width: fit-content;" v-if="act==0">已审核</view>
									<view class="fs24 base-color-red mr10 bor-red h52 lh50
									base-bg-false plr20 radius40 " style="width: fit-content;" v-if="!selectact&&act==1">待审核</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - 88rpx)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" 
				@touchstart="getCur" @touchend="setCur"> {{item.firstLetter}}</view>
			</view>
		</view>
		<view class="justify-between base-bg-f foot-select " v-if="selectact">
			<view class="align-center justify-between " v-if="selectact">
				<u-checkbox-group @change="selectAll">
					<u-checkbox :checked="isSelectAll" shape="circle" activeColor="#1773ff" :name="true"
						label="全选" labelColor="#333" />
						<text class="fs24 base-color-9 ml12">已选{{ selectedUsers.length }}个</text>
						<!-- {{selectedCount}} -->
				</u-checkbox-group>
			</view>
			<view class="justify-center ">
				<button class="base-bg-f radius100 base-color-red h62 ml10 fs28 lh60"
					style="border: #ef4c50 solid 2rpx;" 
					@click="batchApprove">通过审核</button>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

<script>
	import {getAllUsers} from '@/api/user.js';
	export default {
		data() {
			return {
				baseUrl:uni.getStorageSync('requestPath'),
				avatar:"/static/images/default.png",
				CustomBar: 0,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				searchContent:"",
				tabs:['已审核','未审核'],
				act:0,
				selectact:false,
				isSelectAll:false,
				selectedUsers:[]
			}
		},
		onLoad() {
			this.getUser();
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			batchApprove(){
				 if (this.selectedUsers.length === 0) {
					  uni.showToast({
						title: '请先选择用户',
						icon: 'none',
					  });
					  return;
				}
			},
			// 全选
			selectAll() {
				this.isSelectAll = !this.isSelectAll;
				this.selectedUsers = []; // 清空已选列表
				 // 遍历所有用户项，更新 checked 状态
				    this.list = this.list.map(group => {
				      group.list = group.list.map(user => {
				        if (this.isSelectAll) {
				          this.selectedUsers.push(user.userId); // 添加用户ID到选中列表
				        }
				        return {
				          ...user,
				          checked: this.isSelectAll,
				        };
				      });
				      return group;
				    });
				// 如果取消全选，清空 selectedUsers
					if (!this.isSelectAll) {
					  this.selectedUsers = [];
					}
			},
			// 单选 /反选 
			changeitem(userId) {
				const index = this.selectedUsers.indexOf(userId);
				if (index === -1) {
				  this.selectedUsers.push(userId); // 选中
				} else {
				  this.selectedUsers.splice(index, 1); // 取消选中
				}
				// 更新全选状态
				this.isSelectAll = this.selectedUsers.length === this.getTotalUsers();
			},
			// 计算总用户数
			  getTotalUsers() {
			    return this.list.reduce((total, group) => total + group.list.length, 0);
			  },
			tabact(index){
				this.act=index
				if(index==0){
					this.selectact=false
				}
			},
			getUser(){
				var data = {searchKey:this.searchContent};
				var that=this;
				getAllUsers(data).then(
					res => {
						if(res.code==200){
							 that.list=res.users;
						}
					},
					rej => {}
				);
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].firstLetter;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					console.log(num);
					if(num<that.list.length){
						this.listCur = that.list[num].firstLetter
					}
				};
			},
			
			//触发全部开始选择
			tStart() {
				this.hidden = false
			},
			
			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].firstLetter;
						that.movableY = i * 20
						return false
					}
				}
			},
			navTo(subitem){
				uni.navigateTo({
					url: './userInfo?userId='+subitem.userId
				})
			},
			search(){
				this.getUser()
			}
			
		}
	}
</script>
<style  lang="scss">
	::v-deep {
		.foot-select {
			 position: fixed;
			  bottom: 0;
			  width: 100%;
			  padding: 20rpx;
			  background: #fff;
			  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
			  z-index: 1000;
		}
	}
	 .active{
		 color: #1773ff;
		 font-weight: bold;
	 }
	 .notact{
		 color: #888;
	 }
	page {
		background-color: #F8F8FC; 
	}
	.top{
		/* height: 88rpx; */
		background-color: #fff;
		padding: 0rpx 15rpx;
		padding-top: 20rpx;
	}
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	.zm{
		height:30rpx;
		padding: 0rpx 20rpx;
		font-size: 24rpx;
		color: #888;
		background: #F8F8FC;
	}
	.user-list{
		 margin: 20rpx;
		 border-radius: 20rpx;
	}
	.user-item{
		width: 100%;
		margin: 12rpx 0;
	}
	.user-item .avatar{
		width: 100upx;
		height: 100upx;
	}
	.user-item .avatar .img{
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}
	.user-item .content{
		margin-left: 15rpx;
	}
	.user-item .content .name{
		font-size: 26rpx;
		color: #111;
	}
	.user-item .content .dept{
		font-size: 24rpx;
		color: #888;
		margin-top: 15rpx;
		
	}
</style>