jiuyiUniapp/jiuyi2/components/news/msgList.vue

<script setup>
	/**
	 * 消息列表
	 */
	import api from '@/api/index.js'
	import {
		ref,
		computed,
		reactive,
		onMounted,
		onUnmounted,
		getCurrentInstance,
	} from 'vue'
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	// 工具库
	import util from '@/common/js/util.js'
	import {
		useStore,
	} from 'vuex'
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	// 右滑菜单
	const rightOption = [{
			text: '删除',
			style: {
				backgroundColor: '#F85050'
			},
			fn: (item) => delMsg(item)
		},
		// {
		// 	text: '设为已读',
		// 	style: {
		// 		backgroundColor: '#00ADEE'
		// 	},
		// }
	]

	// 系统
	const systemRightOption = [{
		text: '删除',
		style: {
			backgroundColor: '#F85050'
		},
	}, {
		text: '设为已读',
		style: {
			backgroundColor: '#00ADEE'
		},
	}, ]

	// 用户列表
	const list = reactive([])

	onMounted(() => {
		getList()
		addListener()
	})

	onUnmounted(() => {
		removeListener()
	})

	// 开启监听消息
	function addListener() {
		let onMessageReceived = function(event) {
			getList()
		}

		uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onMessageReceived);
	}

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

	// 获取朋友列表
	function getList() {
		api.news.getMessageList({
			query: {
				userId: userinfo.value.id,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 点击用户
	function handleUser(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/videoHome', {
				userId: item.userId,
			})
		})
	}

	// 跳转
	function navigateToPage(path) {
		uni.navigateTo({
			url: path
		});
	}

	/**
	 * 去聊天
	 * @param {Object} item
	 */
	function handleChat(item) {
		console.log('item', item)
		let param = {
			type: item.type
		}
		// 单聊
		if (item.type == 'C2C') {
			param.name = `${item.userProfile.nick}`
			param.msgId = `${item.userProfile.userID}`
		}
		// 群聊
		else if (item.type == 'GROUP') {
			param.name = `${item.groupProfile.name}(${item.groupProfile.memberCount})`
			param.msgId = `${item.groupProfile.groupID}`
		}
		// 
		util.toChat(param)
	}

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

	// 删除会话
	function delMsg(item) {
		uni.$chat.deleteConversation({
			conversationIDList: [item.conversationID],
			clearHistoryMessage: false,
		}).then(rs => {
			// 
			getList()
		})
	}
</script>

<template>
	<view class="firendBox pr">
		<scroll-view scroll-y="true" class="scroll">
			<uni-swipe-action ref="swipeAction">
				<view class="list pb30">
					<!-- <uni-swipe-action-item :right-options="systemRightOption">
						<view class="item rows ptb20 plr30">
							<view class="image wh90 pr">
								<image class="cir" src="/static/msg1.png" mode="aspectFill" />
								<view class="dot pa t0 r0 cir" v-if="1"></view>
							</view>

							<view class="col f1 ml20">
								<view class="rows">
									<view class="name f1 thd c333 f32">新的关注</view>
								</view>
								<view class="desc thd mt10 c666 f24">新增一位关注，快看看是谁吧~</view>
							</view>
						</view>
					</uni-swipe-action-item> -->
					<!-- <uni-swipe-action-item :right-options="systemRightOption">
						<view class="item rows ptb20 plr30">
							<view class="image wh90 pr">
								<image class="cir wh90" src="/static/msg1.png" mode="aspectFill" />
								<view class="dot pa t0 r0 cir" v-if="1"></view>
							</view>

							<view class="col f1 ml20">
								<view class="rows">
									<view class="name f1 thd c333 f32">互动消息</view>
								</view>
								<view class="desc thd mt10 c666 f24">快去看看吧~</view>
							</view>
						</view>
					</uni-swipe-action-item> -->

					<!-- <uni-swipe-action-item :right-options="systemRightOption">
						<view class="item rows ptb20 plr30">
							<view class="image wh90 pr">
								<image class="cir" src="/static/msg2.png" mode="aspectFill" />
								<view class="dot pa t0 r0 cir" v-if="0"></view>
							</view>

							<view class="col f1 ml20">
								<view class="rows">
									<view class="name f1 thd c333 f32">系统消息</view>
									<view class="datetime c999 f22">16:06</view>
								</view>
								<view class="desc thd mt10 c666 f24">平台福利上新，快来玩转平台</view>
							</view>
						</view>
					</uni-swipe-action-item> -->
					<uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list" :key="index"
						@click="handleMenu($event,item)">
						<view class="item rows ptb20 plr30" @click="handleChat(item)">
							<view class="image wh90 pr">
								<template v-if="item.type == 'GROUP'">
									<image class="cir wh90" :src="item.groupProfile.avatar" mode="aspectFill" />
								</template>
								<template v-else-if="item.type == 'C2C'">
									<image class="cir wh90" :src="item.userProfile.avatar" mode="aspectFill" />
								</template>
								<!-- <view class="mark pa t0 r0 cfff f22 cir" v-if="item.unreadCount">{{item.unreadCount}}</view> -->
							</view>

							<view class="col f1 ml20">
								<view class="rows">
									<view class="name f1 thd c333 f32">
										<template v-if="item.type == 'GROUP'">
											<text>{{ item.groupProfile.name }}</text>
										</template>
										<template v-else-if="item.type == 'C2C'">
											<text>{{item.userProfile.nick}}</text>
										</template>
									</view>
									<view class="datetime c999 f22">
										{{ util.formatTime('MM-dd HH:mm',item.lastMessage.lastTime) }}</view>
								</view>
								<view class="desc thd mt10 c666 f24">{{item.lastMessage.messageForShow}}</view>
							</view>
						</view>
					</uni-swipe-action-item>
					<view class="mtb20 tac c999 f20">到底啦~</view>
				</view>
			</uni-swipe-action>

		</scroll-view>
	</view>
</template>

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

		.scroll {
			height: 100%;
		}

		// 列表
		.list {

			// 消息提示点
			.mark,
			.dot {
				background-color: #FF6B17;
			}

			.mark {
				width: 30rpx;
				height: 30rpx;
			}

			.dot {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
</style>