im/pages/common/contactChoose/chooseGroupMember.vue

<template>
	<view class="contact_choose_container">
		<uni-nav-bar 
			left-icon="back" 
			@clickLeft="uni.$u.route({type:'back'})"
			statusBar
			title="群成员">
			<template v-slot:right>
				<u-button type="primary" size="mini" @click="confirm" :disabled="!isConfirmEnable">确定</u-button>
			</template>
		</uni-nav-bar>

		<view class="search_bar_wrap">
			<u-search shape="square" placeholder="搜索" :showAction="false" v-model="keyword" />
		</view>

		<view class="tab_container">
			<view class="tab_pane">
				<choose-index-list 
					@updateCheck="updateCheckedUser" 
					:indexList="getChooseData.indexList"
					:itemArr="getChooseData.dataList" 
					:checkedIDList="checkedUserIDList"
					:disabledIDList="disabledUserIDList" 
					:showCheck="muitple" />
			</view>
		</view>
	</view>
</template>

<script>
	import {formatChooseData,toastWithCallback} from "@/util/common";
	import IMSDK from "openim-uniapp-polyfill"
	import UserItem from "@/components/UserItem/index.vue";
	import ChooseIndexList from "@/components/ChooseIndexList/index.vue";

	export default {
		components: {
			UserItem,
			ChooseIndexList
		},
		data() {
			return {
				keyword: "",
				groupID: "",
				groupMemberList:[],
				hideUserIDList: [],
				checkedUserIDList: [],
				disabledUserIDList: [],
				comfirmLoading: false,
				muitple:true
			};
		},
		computed: {
			getChooseData() {
				const list = [...this.groupMemberList];
				if (this.keyword) {
					return {
						indexList: ["#"],
						dataList: [
							list.filter(
								(friend) =>{
									if(friend.nickname && friend.nickname.indexOf(this.keyword) !==-1){
										return true;
									}
									if(friend.remark && friend.remark.includes(this.keyword)){
										return true;
									}
									return false;
								}
							),
						],
					};
				}
				return formatChooseData(list);
			},
			getCheckedUserInfo() {
				const tmpUserIDList = [...this.checkedUserIDList];
				const checkedFriends = this.groupMemberList.filter((friend) => {
					const idx = tmpUserIDList.findIndex(
						(userID) => userID === friend.userID
					);
					if (idx > -1) {
						tmpUserIDList.splice(idx, 1);
					}
					return idx > -1;
				});
				return [...checkedFriends];
			},
			isConfirmEnable(){
				if(this.checkedUserIDList.length){
					return true;
				}
				return false;
			}
		},
		async onLoad(options) {
			const {groupID,checkedUserIDList,hideUserIDList,muitple} = options;
			this.groupID = groupID;
			if(muitple){
				this.muitple = muitple;
			}
			this.checkedUserIDList = checkedUserIDList ? JSON.parse(checkedUserIDList) : [];
			this.hideUserIDList = hideUserIDList ? JSON.parse(hideUserIDList) : [];
			const list = await this.getGroupMemberList();
			
			this.groupMemberList = list.filter(
				(friend) =>{
					return false == this.hideUserIDList.includes(friend.userID);
				}
			);
			if (this.checkedUserIDList.length > 0) {
				this.checkDisabledUser();
			}
		},
		methods: {
			async getGroupMemberList() {
				const _this = this;
				return new Promise((resolve,reject)=>{
					if (!_this.groupID) {
						return reject('groupid is null');
					}
					IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
						groupID: _this.groupID,
						filter: 0,
						offset: 0,
						count: 6,
					}).then(({ data }) => {
						return resolve(data)
					}).catch(e=>{
						return reject(e);
					})
				});
			},
			checkDisabledUser() {
				const friendIDList = this.groupMemberList.map((friend) => friend.userID);
				IMSDK.asyncApi("getUsersInGroup", IMSDK.uuid(), {
					groupID: this.groupID,
					userIDList: friendIDList,
				}).then(({data}) => {
					this.disabledUserIDList = data;
				});
			},
			tabChange(idx) {
				this.keyword = "";
				this.activeTab = idx;
			},
			updateCheckedUser({userID}) {
				if(!this.muitple){
					this.checkedUserIDList = [userID];
					this.confirm();
				}else{
					if (this.checkedUserIDList.includes(userID)) {
						const idx = this.checkedUserIDList.findIndex((item) => item === userID);
						const tmpArr = [...this.checkedUserIDList];
						tmpArr.splice(idx, 1);
						this.checkedUserIDList = [...tmpArr];
					} else {
						this.checkedUserIDList = [...this.checkedUserIDList, userID];
					}
				}
			},
			confirm() {
				this.comfirmLoading = true;
				try{
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('onSelectedConfirm', this.getCheckedUserInfo);
				}catch(e){
					console.log(e);
				}
				this.comfirmLoading = false;
				uni.navigateBack({
					delta: 1,
				});
				this.comfirmLoading = false;
			},
		},
		onBackPress() {
			return false;
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep.u-popup {
		flex: none;
	}

	.contact_choose_container {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.search_bar_wrap {
			height: 34px;
			padding: 12px 22px;
		}

		.tab_container {
			@include colBox(false);
			flex: 1;
			overflow: hidden;

			.setting_item {
				padding: 32rpx 36rpx;
			}

			.title {
				height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				// padding: 16rpx 8rpx;
				background: #f8f9fa;
				color: #8e9ab0;
				font-size: 24rpx;
			}

			.tabs_bar {
				@include vCenterBox();
				justify-content: space-evenly;

				.tab_item {
					@include colBox(false);
					align-items: center;

					image {
						width: 50px;
						height: 50px;
					}
				}
			}

			.tab_pane {
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;

				.member_list {
					flex: 1;
					height: 80% !important;

					::v-deepuni-scroll-view {
						max-height: 100% !important;
					}
				}

				.user_list {
					height: 100% !important;
				}

				.member_anchor {
					background-color: #f8f8f8 !important;
					border: none !important;
				}
			}
		}
	}
</style>