chanyishenghuo-uniapp/pages/serviceTeacher/addMember.vue

<template>
	<view class="member-box">
		<view class="search-box">
			<view class="search-input-box acea-row row-middle">
				<text class="iconfont icon-xiazai5"></text>
				<input type="text" placeholder="请输入会员真实姓名" v-model="keyWord" @input="search">
			</view>
		</view>
		<uni-collapse accordion="true">
			<uni-collapse-item title="会员列表" showAnimation="true" open="true" style="border-top: 1px solid #f3f3f3;">
				<view style="padding: 20rpx;">
					<view class="checkAll-box acea-row row-middle">
						<checkbox-group @change="allChoose">
							<label class="acea-row row-middle">
								<checkbox value="all" :checked="allChecked?true:false" style="transform:scale(0.7);"
									color="#fff" />
								<text>全选</text>
							</label>
						</checkbox-group>
					</view>
					<view class="member-list">
						<checkbox-group @change="changeCheckbox">
							<label class="member-item acea-row row-middle" v-for="item in memberList" :key="item.value" >
								<checkbox 
									:value="JSON.stringify(item)"
									:checked="checkedArr.includes(JSON.stringify(item))" 
									style="transform:scale(0.7);"
									color="#fff" class="member-item acea-row row-middle"></checkbox>
								<view class="img-box">
									<image :src="item.avatar"></image>
								</view>
								<view class="memberInfo-box">
									<view class="name">{{item.realName}}</view>
									<view class="jifen">{{item.level}}级会员</view>
								</view>
							</label>
						</checkbox-group>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class="footer-box">
			<view class="selected-box acea-row row-middle">
				<!-- <image :src="item.avatar" mode="" ></image> -->
				<view class="member-name-box" v-for="(item,index) in checkedAllArr" :key="index">
					<text>{{item.realName}}</text>
					<view class="close" @click="delSelect(item)">×</view>
				</view>
				<text>已选择{{checkedAllArr.length}}名会员</text>
			</view>
			<view class="submit-btn" @click="submitAdd">确认添加</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyMemberLevels,
		getSellerMembers,
		addMembers
	} from "@/api/serverTeacher"
	export default {
		data() {
			return {
				keyWord:'',
				searchType:false,
				courseId: '',
				isChecked: false,
				levelList: [],
				checkedArr: [], //复选框选中的值
				allChecked: false, //是否全选
				checkedAllArr: [], //所有选中
				memberList: [],
				showMask: false
			}
		},
		onLoad() {
			this.courseId = this.$yroute.query.id;
			this.getSellerMembers()
		},
		methods: {
			search(){
				console.log(this.checkedAllArr)
				let arr = []
				this.checkedAllArr.forEach((item)=>{
					arr.push(JSON.stringify(item))
				})
				this.checkedArr = arr;
				if(this.keyWord == '') {
					this.searchType = false;
				} else{
					this.searchType = true;
				}
				this.getSellerMembers()
			},
			getSellerMembers() {
				getSellerMembers({courseId:this.courseId,realName:this.keyWord}).then(res => {
					if (res.success) {
						this.memberList = res.data
					}
				})
			},
			//删除选中
			delSelect(item){
				let info = JSON.stringify(item);
				let sele = item;
				this.checkedArr.splice(this.checkedArr.findIndex(item => item === info), 1);
				this.checkedAllArr.splice(this.checkedAllArr.findIndex(item => item === sele), 1);
			},
			// 全选事件
			allChoose(e){
				let chooseItem = e.detail.value;
				// 全选
				if(chooseItem[0]=='all'){
					this.allChecked=true;
					for(let item of this.memberList){
						let itemVal = JSON.stringify(item);
						if(!this.checkedArr.includes(itemVal)){
							var arr = [];
							this.checkedArr.push(itemVal);
							this.checkedArr.forEach((item)=>{
								arr.push(JSON.parse(item))
							})
							this.checkedAllArr = arr;
						}
					}					
				}else{
					// 取消全选
					this.allChecked=false;
					this.checkedArr=[];
					this.checkedAllArr = [];
				}
			},
			// 多选复选框改变事件
			changeCheckbox(e) {
				this.checkedArr = e.detail.value;
				let arr = []
				this.checkedArr.forEach((item)=>{
					arr.push(JSON.parse(item))
				})
				if(this.searchType){
					let temp = this.checkedAllArr;
					temp.push(...arr);
					let obj = {};
					this.checkedAllArr = temp.reduce((cur,next) => {
					    obj[next.uid] ? "" : obj[next.uid] = true && cur.push(next);
					    return cur;
					},[])
				} else{
					this.checkedAllArr = arr;
				}
				
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.memberList.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			submitAdd(){
				let data = {
					courseId: this.courseId,
					memberIds: this.checkedAllArr
				}
				if(this.checkedAllArr.length == 0){
					uni.showToast({
						title:'请选择至少选择一个会员',
						icon:'none',
						duration:2000
					})
					return 
				}
				addMembers(data).then((res)=>{
					console.log('res',res)
					if(res.success){
						uni.showToast({
							title: "添加成功！"
						})
						this.getSellerMembers();
						this.checkedArr = [];
						this.checkedAllArr = [];
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.member-box {
		width: 100%;
		padding-bottom: 350rpx;
		.search-box {
			background: #fff;
			width: 100%;
			padding: 20rpx 30rpx;

			.search-input-box {
				width: 100%;
				height: 70rpx;
				background: #F2F2F2;
				font-size: 28rpx;
				color: #999999;
				border-radius: 25px;
				padding-left: 26rpx;
				input{
					width: 70%;
					height: 100%;
					margin-left: 20rpx;
				}
			}
		}

		.checkAll-box {
			margin-bottom: 20rpx;
		}
		.member-list {
			.member-item {
				position: relative;
				background: #fff;
				padding: 28rpx 20rpx 10rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				.img-box {
					width: 100rpx;
					height: 100rpx;
					margin: 0 20rpx;
					margin-top: -20rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50px;
					}
				}

				.memberInfo-box {
					font-size: 28rpx;
					color: #222;
					margin-top: -20rpx;

					.jifen {
						font-size: 24rpx;
						color: #fff;
						// padding:0 10rpx;
						text-align: center;
						width: 110rpx;
						padding: 0 10rpx;
						margin-top: 10rpx;
						box-sizing: content-box;
						height: 36rpx;
						line-height: 36rpx;
						background: linear-gradient(180deg, #FFCF61 0%, #FCA333 100%);
						box-shadow: 0px 4rpx 8rpx 0rpx rgba(253, 169, 57, 0.19);
						border-radius: 20rpx 20rpx 20rpx 0px;
					}

					.record-box {
						margin-top: 22rpx;
					}

					.course-record {
						color: #666;
						font-size: 28rpx;
						margin-right: 60rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}
					}
				}

				.call-btn {
					position: absolute;
					right: 28rpx;
					top: 28rpx;
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					background: #F4C076;
					border-radius: 30rpx;
				}
			}
		}

		/deep/.uni-collapse-cell__title {
			background: #fff !important;
		}

		.footer-box {
			background: #fff;
			padding: 44rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			.selected-box {
				font-size: 28rpx;
				color: #999;
				.member-name-box{
					position: relative;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
					border: 1px solid #FDBF68;
					color: #FDBF68;
					border-radius: 6rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					.close{
						font-size: 28rpx;
						position: absolute;
						top: -20rpx;
						right: -10rpx;
						width: 30rpx;
						height: 30rpx;
						border-radius: 25px;
						color: #fff;
						background: #FDBF68;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					border-radius: 50px;
				}
			}

			.submit-btn {
				width: 646rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				background: #FDBF68;
				border-radius: 44rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>