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('创建成功')
			createGroup(data)

			setTimeout(() => {
				form.name = ''
				form.groupFaceUrl = ''
				uni.navigateBack()
			}, 2000)

			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}

function createGroup(data) {
	uni.$chat.createGroup({
		type: TencentCloudChat.TYPES.GRP_PUBLIC,
		name: data.name,
		groupID: data.groupId,
		avatar: data.groupFaceUrl
	})
}

// 上传图片
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>