udemo-im/uni_modules/vrapile-im/pages/home/chatHome.vue

<template>
	<view class="nine-content-002">
		<view class="chat-search">
			<input class="chat-search-input" v-model="searchVal"/>
			<uni-icons class="chat-search-image" type="search" size="24"></uni-icons>
		</view>
		<view class="chat-list">
			<view class="chat-list-item" v-for="(item,index) in getChatFilterList" :key="index" @click="goToChat(item.key)">
				<view class="chat-list-item-left">
					<image class="chat-list-item-left-image" mode="scaleToFill" v-if="item.fromId != userInfo.userId" :src="getUserAvatar(item.fromId, item.avatar)"></image>
					<image class="chat-list-item-left-image" mode="scaleToFill" v-else :src="userInfo.avatar || defaultAvatar"></image>
					<view v-if="item.messageNum > 0" class="chat-list-item-left-mark">
						{{ item.messageNum < 100 ? item.messageNum : 99 }}
					</view>
				</view>
				<view class="chat-list-item-center">
					<view class="chat-list-item-center-top">
						{{ item.name }}
					</view>
					<view class="chat-list-item-center-bottom">
						{{ item.messageShow || "&nbsp;" }}
					</view>
				</view>
				<view class="chat-list-item-right">
					<view class="chat-list-item-right-top">
						{{ item.messageTime || '\xa0' }}
					</view>
					<view class="chat-list-item-right-bottom">
						<image class="chat-list-item-right-bottom-image" mode="scaleToFill" :src="iconMessage">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import store from '@/uni_modules/vrapile-im/store'
	import { getChatKey } from '@/uni_modules/vrapile-im/utils/tiosocket';
	// 外部需提供store用于获取用户信息，提供websocket接口地址，提供获取token函数并可以获取token，提供根据消息key查询用户历史消息接口
	import storeOut from '@/store'
  import { getToken } from '@/utils/token'
	import { getMessageByChatKey } from '@/api/chat'
	export default {
		data() {
			return {
				userInfo: {},
				
				searchVal: "",
				
				// 用户默认图标
				defaultAvatar: '/uni_modules/vrapile-im/static/image/yy.png',
				// 消息铃铛图标
				iconMessage: "/uni_modules/vrapile-im/static/image/message.png"
			}
		},
		computed: {
			...mapState({
				websocketData: state => store.state.socket.websocketData
			}),
			getChatList() {
				return store.state.chat.chatList;
			},
			getChatFilterList() {
				let list = JSON.parse(JSON.stringify(store.state.chat.chatList))
				list.sort((a, b) => {
					if(a.messageNum > 0 && b.messageNum > 0){
						return b.messageLast.sendTime - a.messageLast.sendTime
					}
					if(a.messageList.length == 0 || b.messageList.length == 0){
						return b.messageList.length - a.messageList.length
					}
					if(a.messageNum == 0 && b.messageNum == 0){
						return b.messageLast.sendTime - a.messageLast.sendTime
					}
					return b.messageNum - a.messageNum
				})
				if(this.searchVal){
					return list.filter(item => {
						if(item.name && item.name.includes(this.searchVal)
							|| item.remarkName && item.remarkName.includes(this.searchVal)
							|| item.userName && item.userName.includes(this.searchVal)){
							return item;
						}
						for(let message of item.messageList){
							if(message.content && message.content.includes(this.searchVal)){
								return item;
							}
						}
					});
				}
				return list;
			},
			getUserAvatar() {
				return  (userId, defaultAvatar) => {
					return store.getters.getUserAvatar(userId, defaultAvatar);
				}
			}
		},
		onLoad(options){
			this.userInfo = storeOut.state.user.userInfo;
		},
		onShow(){
			setTimeout(()=>{
				this.dealUnReadMessage();
				store.commit('COUNT_MESSAGE');
			}, 500)
			setTimeout(()=>{
				this.noListDo();
			}, 3000)
		},
		activated(){
			store.commit('COUNT_MESSAGE');
		},
		// 监听消息
		watch: {
			websocketData: {
				handler(newVal, oldval) {
					for(let i=0;i<this.getChatList.length;i++){
						this.$set(this.getChatList, i, this.getChatList[i])
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {	
			// 处理未读消息
			dealUnReadMessage() {
				for(let i=0;i<this.getChatList.length;i++){
					if(this.getChatList[i]["messageList"].length == 0 && this.getChatList[i]["haveHistory"] == 1){
						this.handleHistoryMessage(i, false);
					}
				}
			},
			// 无任何数据，重写获取聊天列表和连接socket
			noListDo(){
				if(storeOut.state.user.userInfo.userId && (!this.getChatList || this.getChatList.length == 0)){
					store.dispatch('GetChatList', {userId: storeOut.state.user.userInfo.userId}).then(res => {
						store.dispatch('ConnSocket', { url: import.meta.env.VITE_APP_SOCKET_URL, token: getToken() });
					});
				}
			},
			// 获取历史消息
			handleHistoryMessage(i, scrollFlag){
				let limit = this.getChatList[i]["messageList"].length + 10;
				getMessageByChatKey({
					type: this.getChatList[i].type,
					key: this.getChatList[i]["key"],
					groupId: this.getChatList[i].id,
					limit: limit
				}).then(res => {
					if(res.data.length > 0){
						this.getChatList[i]["messageList"] = res.data.reverse();
						let lastMessage = res.data[res.data.length-1];
						this.getChatList[i]["messageLast"] = lastMessage;
						if(lastMessage["sendType"] == 0){
							this.getChatList[i]["messageShow"] = lastMessage["content"];
						}else{
							this.getChatList[i]["messageShow"] = store.getters.getUserName(lastMessage["fromId"], lastMessage["fromName"]) + ": " + lastMessage["content"] 
						}
						this.getChatList[i]["messageTime"] = this.formatDate(lastMessage["sendTime"]);
					}
					if(res.data.length < limit){
						this.getChatList[i]["haveHistory"] = 0;
					}
					
					this.$set(this.getChatList, i, this.getChatList[i])
				});
			},
			// 跳转到聊天页面
			goToChat(key) {
				this.navigateTo("/uni_modules/vrapile-im/pages/chat/chatFriend?data=" + key)
			}
		}
	}
</script>
<style scoped>
	/* 重写外部nine-chat-home-001.scss可实现样式改变 */
	@import '/uni_modules/vrapile-im/static/style/nine-chat-home-001.scss';
	@import '/static/style/nine-chat-home-001.scss';
</style>