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 {
	proxy
} = getCurrentInstance()
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'
	},
	fn: (item) => setRead(item)
},]

// 系统
const systemRightOption = [{
	text: '删除',
	style: {
		backgroundColor: '#F85050'
	},
}, {
	text: '设为已读',
	style: {
		backgroundColor: '#00ADEE'
	},
},]
// 传入参数
const props = defineProps({
	// 类型
	type: {
		type: Number,
		default: 0,
	},
})

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

onMounted(() => {
	if (props.type == 0) {
		getList()
	} else if(props.type == 1) {
		// 视频消息
	} else if (props.type == 2) {
		// 商城消息
	}

	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) {
			list.data = handleList(rs.data);
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})

	// // 验证sdk是否准备完毕
	// let isReady = uni.$chat.isReady();
	// if (!isReady) {
	// 	setTimeout(function () {
	// 		getList();
	// 	}, 1000);
	// 	return
	// }

	// uni.$chat.getMessageList({})
}

/**
 * 消息列表
 * @param {Object} item
 */
function handleList(list) {
	list.forEach(item => {
		item.callbackJson = JSON.parse(item.callbackJson);

		if (item.groupId != null) {
			item.unreadCount = getGroupNoReadNum(item.groupId)
		}
		if (item.callbackJson.callback_json.length) {
			let msgType = item.callbackJson.callback_json[0].MsgType;
			if (msgType == TencentCloudChat.TYPES.MSG_TEXT) {
				item.chatText = item.callbackJson.callback_json[0].MsgContent.Text
			} else if (msgType == TencentCloudChat.TYPES.MSG_IMAGE) {
				item.chatText = '[图片]'
			} else if (msgType == TencentCloudChat.TYPES.MSG_AUDIO) {
				item.chatText = '[语音]'
			} else if (msgType == TencentCloudChat.TYPES.MSG_VIDEO) {
				item.chatText = '[视频]'
			} else if (msgType == TencentCloudChat.TYPES.MSG_CUSTOM) {
				if (item.callbackJson.callback_json[0].businessType == 'redPacket') {
					item.chatText = `[红包] ${item.callbackJson.blessing}`
				} else if (item.callbackJson.callback_json[0].businessType == '1') {
					// if (item.callbackJson.callback_json[0].call_type == '1') {
					// 	item.chatText = '[语音通话]'
					// } else if (item.callbackJson.callback_json[0].call_type == '2') {
					// 	item.chatText = '[视频通话]'
					// }
				}
			}
		}
	})

	return list
}

// 查询群聊未读数量
function getGroupNoReadNum(groupId) {
	// 验证sdk是否准备完毕
	let isReady = uni.$chat.isReady();
	if (!isReady) {
		setTimeout(function () {
			getGroupNoReadNum(groupId);
		}, 800);
		return
	}

	const unreadCount = uni.$chat.getTotalUnreadMessageCount('GROUP', groupId);

	return unreadCount;
}

// // 点击用户
// 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) {
	let param = {};
	// 单聊
	if (item.groupId == null) {
		param.type = 'C2C'
		param.name = `${item.callbackJson.from_name}`
		param.msgId = `${item.callbackJson.from_id}`
	} else {
		// 群聊
		param.type = 'GROUP'
		param.name = `${item.groupChatDTO.name}`
		param.msgId = `${item.groupId}`
		param.num = `${item.groupChatDTO.memberCount}`
	}

	setRead(item)
	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) {
	// 验证sdk是否准备完毕
	let isReady = uni.$chat.isReady();
	if (!isReady) {
		setTimeout(function () {
			delMsg(item);
		}, 800);
		return
	}

	let conversationId = item.groupId == null ? `C2C${item.fromId}` : `GROUP${item.groupId}`;

	uni.$chat.deleteConversation(conversationId).then(rs => {
		getList()
	})
}

// 标为已读
function setRead(item) {
	// 验证sdk是否准备完毕
	let isReady = uni.$chat.isReady();
	if (!isReady) {
		setTimeout(function () {
			setRead(item);
		}, 800);
		return
	}

	let conversationId = item.groupId == null ? `C2C${item.fromId}` : `GROUP${item.groupId}`;
	uni.$chat.setMessageRead({
		conversationID: conversationId,
	}).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 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 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 wh90" 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.data" :key="index"
						@click="handleMenu($event, item)">
						<view class="item rows ptb20 plr30" @click.stop="handleChat(item)">
							<view class="image wh90 pr">
								<template v-if="item.groupId == null">
									<image class="cir wh90" :src="item.callbackJson.from_url" mode="aspectFill" />
								</template>
								<template v-else>
									<image class="cir wh90" :src="item.groupChatDTO.groupFaceUrl" 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">
									<template v-if="item.groupId == null">
										<view class="name f1 thd c333 f32">{{ item.callbackJson.from_name }}</view>
									</template>
									<template v-else>
										<view class="name f1 thd c333 f32">{{ item.groupChatDTO.name }}</view>
									</template>
									<view class="datetime c999 f22">
										{{ util.formatTime('MM-dd HH:mm', item.createTime) }}</view>
								</view>
								<view class="desc thd mt10 c666 f24">{{ item.chatText }}</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;
			text-align: center;
			line-height: 30rpx;
		}

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

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