jiuyiUniapp/jiuyi2/pages/news/group-chat/index.vue

<script setup>
	/**
	 * 发起群聊
	 */
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// 头部
	import apex from '@/components/header/apex.vue'
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	// api
	import api from '@/api/index.js'

	const store = useStore()
	// 已选择的用户id
	const ids = ref([])
	// 表单
	const form = reactive({
		name: '',
		groupFaceUrl: '',
		type: 'Public',
	})
	// 列表
	const list = reactive([])
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		// 获取朋友列表
		getFriendList()
	})

	// 获取朋友列表
	function getFriendList() {
		api.news.getFriendList().then(rs => {
			if (rs.code == 200) {
				const result = rs.data
				list.length = 0
				// 
				list.push(...result)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 点击用户
	 * @param {Object} item 当前用户信息
	 */
	function handleUser(item) {
		const find_index = ids.value.findIndex(node => node == item.userId)
		console.log(find_index)
		if (find_index >= 0) ids.value.splice(find_index, 1)
		else ids.value.push(item.userId)
	}

	// 新建群组
	function handleCreateGroup() {
		const data = {
			...form
		}

		if (!data.name) {
			util.alert('群聊名称不能为空')
			return
		}
		if (!data.groupFaceUrl) {
			util.alert('群聊头像不能为空')
			return
		}
		if (ids.length < 2) {
			util.alert('请至少选择两名用户')
			return
		}
		// 群主id
		data.ownerAccount = userinfo.value.id
		// 群成员
		data.groupUsers = [{
				userId: userinfo.value.id
			},
			...ids.value.map(item => {
				return {
					userId: item
				}
			})
		]
		// 群聊id
		data.groupId = Date.now().toString(36) + Math.random().toString(36).substr(2, 5);

		// 创建好友工作群
		api.news.addChatGroup({
			data: data
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('创建成功')
				return

				// 
				setTimeout(() => {
					form.name = ''
					form.groupFaceUrl = ''
					uni.navigateBack()
				}, 2000)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 上传图片
	function uploadImg() {
		util.upload_image({
			type: 1,
			success: (res) => {
				form.groupFaceUrl = res.value
			}
		})
	}
</script>

<template>
	<view class="app">
		<!-- <uni-search-bar placeholder="请输入群聊名称" v-model="name" style="background: #fff;" /> -->

		<view class="jy-chat-box mt30">
			<view class="firendBox pr">
				<view class="list bfff">
					<view class="li" v-for="(item, index) in list" :key="index" @click="handleUser(item)">
						<view class="item rows ptb20 pl30 pr50">
							<image class="wh80 avatar  cir" :src="item.avatar" mode="aspectFill" />
							<view class="name thd f1 ml20 c333 f32">{{item.remark || item.userNickname}}</view>
							<uni-icons type="circle-filled" size="40rpx" color="#20D200"
								v-if="ids.includes(item.userId)" />
							<uni-icons type="circle" size="40rpx" color="#ccc" v-else />
						</view>
					</view>
				</view>

				<view class="mtb20 nomore">到底啦~</view>
			</view>
		</view>

		<view class="fill" style="height: 120rpx;"></view>

		<view class="footer plr30 bfff shadow">
			<view class="btn lg colourful" @click="$refs.groupAlt.open() ">下一步</view>
		</view>
	</view>

	<!-- 群聊表单信息 -->
	<uni-popup ref="groupAlt" type="bottom">
		<view class="groupAlt popBot ptb30 plr30 bfff">
			<view class="header rows">
				<view class="">新建群聊</view>
				<uni-icons type="closeempty" size="40rpx" color="#333" />
			</view>

			<!--  -->
			<view class="main">
				<view class="txtplus inputBox mtb30 ptb20 plr20 br10">
					<input type="text" v-model="form.name" placeholder="群聊名称" />
				</view>

				<view class="imgList">
					<view class="imgs wh200" v-if="form.groupFaceUrl" @click="uploadImg">
						<image class="wh200 br20" :src="form.groupFaceUrl" mode="aspectFill" />
					</view>
					<view class="imgs wh200 fmid bf8f8f8 br20" v-else @click="uploadImg">
						<uni-icons type="plusempty" color="#999" size="50rpx" />
					</view>
				</view>
			</view>

			<view class="btn">
				<view class="btn lg colourful" @click="handleCreateGroup">新建群聊</view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="scss">
	// 朋友列表
	.firendBox {
		height: 100%;

		.scroll {
			height: 100%;
		}

		// 列表项
		.li {
			.letter {
				background-color: #eee;
			}
		}

		// 子集
		.child {
			.item+.item {
				border-top: 2rpx solid #eee;
			}
		}
	}
</style>