uniIM/pages/group/xuanzequanyuan.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view>
		<cu-custom bgImage='/static/bg.png' :isBack='true'>
			<template v-slot:content>
				<text class="text-black">选择成员</text>
			</template>
		</cu-custom>

		<view class='bg-white padding'>
			<view class="contentColumnC">
				<vim-avatar :img="usermsg.avatar" :name="usermsg.name" />
				<text class="text-zblue text-bold user_name">{{ usermsg.name }}</text>
			</view>
			<view class="margin-top" style="height: 10px;background-color:whitesmoke;"></view>
			<view class='contentColumn'>
				<checkbox-group @change="checkboxChange">
					<label v-for='(item,index) in userList' :key='index' >
						<view class='contentInRowL item_center padding-top-sm'>
							<checkbox  :disabled="usermsg.id==item.id" class="margin-right-sm" :value="item.id" :checked="item.isSelect" />
							<vim-avatar :img="item.avatar" :name="item.name" />
							<text v-if="usermsg.id==item.id" class="text-zblue text-bold user_name padding-left-sm">{{ item.name }}</text>
							<text v-if="usermsg.id!=item.id" class="text-black text-bold user_name padding-left-sm">{{ item.name }}</text>
						</view>
					</label>
				</checkbox-group>
			</view>
			<view style="height: 160rpx;"></view>
		</view>
		<view class="bottomfloatV contentColumnC padding">
		  <button class="cu-btn bg-zblue lg margin-top border" style="width: 100%;" @tap="querenchengyuan">确认</button>
		</view>
	</view>
</template>

<script setup lang='ts'>
	import {reactive,ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {useUserStore} from '@/store/userStore'
	import CuCustom from '@/colorui/components/cu-custom.vue'
	import GroupApi from '@/api/GroupApi'
	import {useGroupStore} from '@/store/groupStore'
	import type Group from '@/mode/Group'
	import MessageUtils from '@/utils/MessageUtils'
	import { usePeerStore } from '@/store/peerStore'
	
	import DictUtils from "@/utils/DictUtils";
	import VimAvatar from "@/components/VimAvatar.vue";
	import Auth from "@/api/Auth";
	const fontValue = ref(Auth.getfontSize());
	//@ts-ignore
	
	const groupStore = useGroupStore()
	const store = useUserStore()
	
	let users=[];
	//是否是群主
	const isMaster = ref(false)
	const isCaller = ref(false);
	const showVideo = ref(false);
	const usermsg = ref({})


	//群用户
	const userList = ref([])

	const group = reactive < Group > ({
		id: '',
		master: '',
		name: '',
		avatar: '',
		openInvite: '0',
		inviteCheck: '0',
		prohibition: '0',
		prohibitFriend: '0',
		announcement: ''
	})

	onLoad((opt) => {
		group.id = opt?.id
		
		if(typeof opt?.isCaller === 'string'){
		  isCaller.value = opt?.isCaller === 'true'
		}
		if(typeof opt?.showVideo === 'string'){
		  showVideo.value = opt?.showVideo === 'true'
		}
		
		uni.showLoading()
		GroupApi.get(group.id)
			.then((res) => {
				//console.log('group',res)
				group.id = res.data.id
				group.name = res.data.name
				group.avatar = res.data.avatar
				group.master = res.data.master
				group.openInvite = res.data.openInvite
				group.inviteCheck = res.data.inviteCheck
				group.prohibition = res.data.prohibition
				group.prohibitFriend = res.data.prohibitFriend
				group.announcement = res.data.announcement
				isMaster.value = res.data.master === store.user?.id

				loadUser(group.id)
			})
		groupStore.loadWaitCheckList()
	})

	//加载群用户
	const loadUser = (gId: string) => {
		userList.value = []
		GroupApi.users(gId).then((res) => {
				//是否是群用户
				//console.log('GroupApi',res)
				if (!res.data.some((item: any) => {
						return item.id === useUserStore().getUser() !.id
					})) {
					MessageUtils.message('无权限')
				}
				res.data.forEach((item: any) => {
					if(store.user?.id === item.id){
						usermsg.value={
							name: item.name,
							avatar: item.avatar,
							id: item.id
						}
						userList.value.push({
							id: item.id,
							name: item.name,
							avatar: item.avatar,
							isSelect:true
						})
					}
					else{
						userList.value.push({
							id: item.id,
							name: item.name,
							avatar: item.avatar,
							isSelect:false
						})
					}
					
				})
			})
			.finally(() => {
				uni.hideLoading()
			})
	}

	const selectUser = (id: string | undefined,index:any) => {
		console.log('selectUser',id,index);
		if(usermsg.value.id!=id){
			userList.value[index].isSelect=!userList.value[index].isSelect;
		}
	}

	const checkboxChange = (e) =>{
		console.log(e);
		users=e.detail.value;
		console.log(users);
	}
	const querenchengyuan = () =>{
		
		if(users.length<2){
			MessageUtils.message('请选择成员！')
			return;
		}
		usePeerStore().setUsers(JSON.stringify(users));
		if(isCaller.value){
			uni.redirectTo({
			  url: `/imcall/groupWebRTCCallCtr?friendId=${group.id}&showVideo=${showVideo.value}&isCaller=true`
			})
		}
		else{
			uni.navigateBack();
		}
	}
</script>

<style scoped>
	.grid>view {
		height: 140upx;
		margin-top: 10px;
	}

	.group-btn {
		font-size: 2rem;
		border: 1px solid #ccc;
		width: 100upx;
		height: 100upx;
	}

	.grid>.grid-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logoImg {
		width: 100upx;
		height: 100upx;
		border-radius: 8upx;
	}

	.group-user {
		padding: 5px;
		text-align: center;
	}

	.group-user .text {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: center;
		margin-top: 10upx;
	}

	.announcement {
		text-indent: 2rem;
		word-break: break-all;
		line-height: 1.5;
		padding: 20px !important;
		background: #eee !important;
		;
	}

	.item_center {
		align-items: center;
	}

	.user_name {
		max-width: 154upx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.bottomfloatV{
		position: fixed;
		flex-direction: row;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		height: 180rpx;
	}
</style>