jiuyiUniapp/jiuyi2/pages/news/chatGroup.vue

<script setup>
	// 群组列表

	import {
		reactive,
		onMounted,
		onUnmounted,
		getCurrentInstance,
	} from 'vue';
	// 工具库
	import util from '@/common/js/util.js'
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app'
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	// 
	import api from '@/api/index.js'
	// 
	const {
		proxy
	} = getCurrentInstance()
	// 数据列表
	const list = reactive([])

	// 右滑菜单
	const rightOption = [
		// {
		// 	text: '退出群聊',
		// 	style: {
		// 		backgroundColor: '#F85050'
		// 	},
		// 	fn: (item) => quitGroup(item)
		// }
	]

	onLoad(() => {
		// 
		getGroupList()
		// 开启监听
		addListener()
	})

	onUnload(() => {
		// 移除监听
		removeListener()
	})

	// 开启监听
	function addListener() {
		let onFriendListUpdated = function(event) {
			console.log('onFriendListUpdated')
			getGroupList()
		}

		uni.$chat.on(TencentCloudChat.EVENT.GROUP_LIST_UPDATED, onFriendListUpdated);
	}

	// 移除监听
	function removeListener() {
		uni.$chat.off(TencentCloudChat.EVENT.GROUP_LIST_UPDATED);
	}

	// 获取群组列表
	function getGroupList() {
		api.news.myGroups().then(rs => {
			if (rs.code == 200) {
				list.length = 0
				list.push(...rs.data)
				console.log('group list', list)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false
			})
		})
	}

	/**
	 * 跳转聊天
	 * @param {Object} item
	 */
	function handleGroupItem(item) {
		console.log('group item', item)
		util.toChat({
			name: `${item.name}`,
			msgId: item.groupId,
			type: 'GROUP',
			num: item.memberCount,
		})
	}

	/**
	 * 菜单
	 * @param {Object} ev 默认事件
	 * @param {Object} item 单项
	 */
	function handleMenu(ev, item) {
		ev.content.fn(item)
		proxy.$refs.swipeAction.closeAll()
	}

	/**
	 * 退出群组
	 * @param {Object} item 详情
	 */
	function quitGroup(item) {
		util.alert({
			content: '确认退出群聊？'
		}).then(rs => {
			if (!rs.confirm) return
			uni.$chat.quitGroup({
				groupID: item.groupID,
			}).then(rs => {
				getGroupList()
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<uni-swipe-action ref="swipeAction">
			<view class="list plr30 pb30">
				<view class="item" v-for="(item, index) in list" :key="index">
					<uni-swipe-action-item :right-options="rightOption" @click="handleMenu($event,item)">
						<view class="item rows ptb30" @click="handleGroupItem(item)">
							<image class="wh120 fs0 avatar br10" :src="item.groupFaceUrl" mode="aspectFill" />

							<view class="f1 oh ml30">
								<view class="name thd f1 c333 f34">{{item.name}}</view>
								<!-- <view class="content thd mt10 c666 f24">{{item.lastMessage.messageForShow || ''}}</view> -->
							</view>
							<!-- <view class="time c999 f22" v-if="item.lastMessage.messageForShow || ''">{{util.formatTime('yyyy-MM-dd HH:mm:ss',item.lastMessage.lastTime)}}</view> -->
						</view>
					</uni-swipe-action-item>
				</view>

				<view class="mtb20 nomore">到底啦~</view>
			</view>
		</uni-swipe-action>
	</view>
</template>

<style lang="scss">
	.list {
		.item + .item {
			border-top: 2rpx solid #eee;
		}
	}
</style>