ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uni-app 152朋友圈动态实时通知功能

2021-12-22 09:34:23  阅读:142  来源: 互联网

标签:152 app list let 朋友圈 message type id user


下图是我测试的截图

在这里插入图片描述

/common/free-lib/chat.js

import $U from "./util.js";
import $H from './request.js';
import $store from '@/store/index.js';
class chat {
	constructor(arg) {
		this.url = arg.url
		this.isOnline = false
		this.socket = null
		// 获取当前用户相关信息
		let user = $U.getStorage('user');
		this.user = user ? JSON.parse(user) : {},
			// 初始化聊天对象
			this.TO = false;
		// 连接和监听
		if (this.user.token) {
			this.connectSocket()
		}
	}
	// 连接socket
	connectSocket() {
		console.log(this.user);
		this.socket = uni.connectSocket({
			url: this.url + '?token=' + this.user.token,
			complete: () => {}
		})
		// 监听连接成功
		this.socket.onOpen(() => this.onOpen())
		// 监听接收信息
		this.socket.onMessage((res) => this.onMessage(res))
		// 监听断开
		this.socket.onClose(() => this.onClose())
		// 监听错误
		this.socket.onError(() => this.onError())
	}
	// 监听打开
	onOpen() {
		// 用户状态上线
		this.isOnline = true;
		console.log('socket连接成功');

		// 获取用户离线消息
		this.getMessage();
	}
	// 获取离线消息
	getMessage() {
		$H.post('/chat/getmessage');
	}
	// 获取聊天记录
	getChatDetail(key = false) {
		key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`
		return this.getStorage(key)
	}
	// 监听关闭
	onClose() {
		// 用户下线
		this.isOnline = false;
		this.socket = null;
		console.log('socket连接关闭');
	}
	// 监听消息
	onMessage(data) {
		console.log('监听消息', data);
		let res = JSON.parse(data.data)
		// 错误
		switch (res.msg) {
			case 'fail':
				return uni.showToast({
					title: res.data,
					icon: 'none'
				});
				break;
			case 'recall': // 撤回消息
				this.handleOnRecall(res.data)
				break;
			case 'updateApplyList': // 新的好友申请
				$store.dispatch('getApply');
				break;
			case 'moment': // 朋友圈更新
				this.handleMoment(res.data)
				break;
			
			default:
				// 处理消息
				this.handleOnMessage(res.data)
				break;
		}
	}
	// 获取本地存储中的朋友圈动态通知
	getNotice(){
		let notice = $U.getStorage('moment_'+this.user.id);
		return notice ? JSON.parse(notice) : {
			avatar:'',
			user_id:0,
			num:0
		}
	}
	// 处理朋友圈通知
	async handleMoment(message){
		let notice = this.getNotice();
	    switch(message.type){
			case 'new':
			   if(message.user_id !== this.user.id){
				  notice.avatar = message.avatar;
				  notice.user_id = message.user_id;
				  uni.showTabBarRedDot({
					  index:notice
				  })
				}
			break;
			default:
			if(message.user_id !== this.user.id){
				notice.avatar = message.avatar
				notice.user_id = message.user_id 
				notice.num += 1
			}
			if(notice.num > 0){
				uni.setTabBarBadge({
					index:2,
					text:notice.num > 99 ? '99+' : notice.num.toString()
				})
			}else{
				uni.removeTabBarBadge({
					index:2
				})
			}
			break;
		}
		uni.$emit('momentNotice',notice);
		$U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
	}
	// 读取朋友圈动态
	async readMoments(){
		let notice = {
			avatar:'',
			user_id:0,
			num:0
		};
		$U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
		uni.hideTabBarRedDot({
			index:2
		})
		uni.removeTabBarBadge({
			index:2
		})
		uni.$emit('momentNotice',notice);
	}
	// 监听撤回消息处理
	async handleOnRecall(message) {
		// 通知聊天页撤回消息
		uni.$emit('onMessage', {
			...message,
			isremove: 1
		})
		// 修改聊天记录
		let id = message.chat_type === 'group' ? message.to_id : message.from_id
		// key值:chatDetail_当前用户id_会话类型_接收人/群id
		let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`
		// 获取原来的聊天记录
		let list = this.getChatDetail(key)
		// 根据k查找对应聊天记录
		let index = list.findIndex(item => item.id === message.id)
		if (index === -1) return;
		list[index].isremove = 1
		// 存储
		this.setStorage(key, list)
		// 当前会话最后一条消息的显示
		this.updateChatItem({
			id,
			chat_type: message.chat_type
		}, (item) => {
			item.data = '对方撤回了一条消息'
			item.update_time = (new Date()).getTime()
			return item
		})
	}
	// 处理消息
	async handleOnMessage(message) {
		// 添加消息记录到本地存储中
		let {
			data
		} = this.addChatDetail(message, false)
		// 更新会话列表
		this.updateChatList(data, false)
		// 全局通知
		uni.$emit('onMessage', data)
		// 消息提示
		// this.messageNotice()
	}

	// 监听连接错误
	onError() {
		// 用户下线
		this.isOnline = false;
		this.socket = null;
		console.log('socket连接错误');
	}
	// 关闭连接
	close() {
		this.socket.close()
	}
	// 创建聊天对象
	createChatObject(detail) {
		this.TO = detail;
		console.log('创建聊天对象', this.TO)
	}
	// 销毁聊天对象
	destoryChatObject() {
		this.TO = false
	}
	// 组织发送信息格式
	formatSendData(params) {
		return {
			id: 0, // 唯一id,后端生成,用于撤回指定消息
			from_avatar: this.user.avatar, // 发送者头像
			from_name: this.user.nickname || this.user.username, // 发送者昵称
			from_id: this.user.id, // 发送者id
			to_id: params.to_id || this.TO.id, // 接收人/群 id
			to_name: params.to_name || this.TO.name, // 接收人/群 名称
			to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像
			chat_type: params.chat_type || this.TO.chat_type, // 接收类型
			type: params.type, // 消息类型
			data: params.data, // 消息内容
			options: params.options ? params.options : {}, // 其他参数
			create_time: (new Date()).getTime(), // 创建时间
			isremove: 0, // 是否撤回
			sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态,success发送成功,fail发送失败,pending发送中
		}
	}
	// 发送信息
	send(message, onProgress = false) {
		return new Promise(async (result, reject) => {
			// 添加消息历史记录
			// this.addChatDetail();
			let {
				k
			} = this.addChatDetail(message);
			// 更新会话列表 
			this.updateChatList(message);
			// 验证是否上线
			if (!this.checkOnLine()) return reject('未上线');
			// 上传文件
			let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !==
				'card' && !message.data.startsWith('http://akyan.oss-cn-beijing.aliyuncs.com/'))

			let uploadResult = ''
			if (isUpload) {
				uploadResult = await $H.upload('/upload', {
					filePath: message.data
				}, onProgress);
			}
			
			// 提交到后端
			let data = isUpload ? uploadResult : message.data;
			$H.post('/chat/send', {
				to_id: this.TO.id,
				type: message.type,
				chat_type: this.TO.chat_type,
				data,
				options: JSON.stringify(message.options)
			}).then(res => {
				// 发送成功
				console.log('chat.js发送成功');
				message.id = res.id
				message.sendStatus = 'success';
				if (message.type === 'video') {
					message.data = res.data;
					message.options = res.options;
				}
				// 更新指定历史记录
				console.log('更新指定历史记录',message);
				this.updateChatDetail(message, k);
				result(res);
			}).catch(err => {
				// 发送失败
				console.log('chat.js发送失败');
				message.sendStatus = 'fail';
				// 更新指定历史记录

				this.updateChatDetail(message, k);
				// 断线重连提示
				result(err);
			});
		})

	}
	// 验证是否上线
	checkOnLine() {
		if (!this.isOnline) {
			// 断线重连提示
			this.reconnectConfirm();
			return false;
		}
		return true;
	}
	// 断线重连提示
	reconnectConfirm() {
		uni.showModal({
			title: '你已经断线,是否重新连接?',
			content: '重新连接',
			success: res => {
				if (res.confirm) {
					this.connectSocket();
				}
			},

		});
	}
	// 添加聊天记录
	addChatDetail(message, isSend = true) {
		console.log('添加到聊天记录');
		// 获取对方id
		let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
		if (!id) {
			return {
				data: {},
				k: 0
			}
		}

		// key值:chatDetail_当前用户id_会话类型_接收人/群id
		let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
		console.log(key);
		// 获取原来的聊天记录
		let list = this.getChatdetail(key)

		console.log('获取原来的聊天记录', list);

		// 标识
		message.k = 'k' + list.length
		list.push(message)
		// 加入存储
		console.log('加入存储', message);
		this.setStorage(key, list);
		// 返回
		return {
			data: message,
			k: message.k
		}
	}
	// 删除指定聊天记录
	async deleteChatDetailItem(message,isSend = true){
		// 获取对方id
		let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
		// key值:chatDetail_当前用户id_会话类型_接收人/群id
		let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
		// 获取原来的聊天记录
		let list = this.getChatdetail(key);
		// 根据k查找对应聊天记录
		let index = list.findIndex(item => item.k === message.k || item.id === message.id);
		if (index === -1) return;
		
		list.splice(index,1);
		// 存储
		this.setStorage(key, list);
	}
	// 更新指定历史记录
	async updateChatDetail(message, k, isSend = true) {
		// 获取对方id
		let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
		// key值:chatDetail_当前用户id_会话类型_接收人/群id
		let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
		// 获取原来的聊天记录
		let list = this.getChatdetail(key);
		// 根据k查找对应聊天记录
		let index = list.findIndex(item => item.k === k);
		if (index === -1) return;

		list[index] = message;
		// 存储
		this.setStorage(key, list);
	}
	// 获取聊天记录
	getChatdetail(key = false) {
		key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`;
		return this.getStorage(key);
	}
	// 格式化会话最后一条消息显示
	formatChatItemData(message, isSend) {
		let data = message.data.length > 18 ? message.data.slice(0, 17) + '...' : message.data;
		switch (message.type) {
			case 'emoticon':
				data = '[表情]'
				break;
			case 'image':
				data = '[图片]'
				break;
			case 'audio':
				data = '[语音]'
				break;
			case 'video':
				data = '[视频]'
				break;
			case 'card':
				data = '[名片]'
				break;
		}
		data = isSend ? data : `${message.from_name}: ${data}`
		return data
	}
	// 更新会话列表
	updateChatList(message, isSend = true) {
		// 获取本地存储会话列表
		let list = this.getChatList()
		// 是否处于当前聊天中
		let isCurrentChat = false
		// 接收人/群 id/头像/昵称
		let id = 0
		let avatar = ''
		let name = ''

		// 判断私聊还是群聊
		if (message.chat_type === 'user') { // 私聊
			// 聊天对象是否存在
			isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :
				false

			id = isSend ? message.to_id : message.from_id
			avatar = isSend ? message.to_avatar : message.from_avatar
			name = isSend ? message.to_name : message.from_name
		} else { // 群聊
			isCurrentChat = this.TO && (this.TO.id === message.to_id)
			id = message.to_id
			avatar = message.to_avatar
			name = message.to_name
		}

		// 会话是否存在
		let index = list.findIndex(item => {
			return item.chat_type === message.chat_type && item.id === id
		})
		// 最后一条消息展现形式
		// let data = isSend ? message.data : `${message.from_name}: ${message.data}`
		let data = this.formatChatItemData(message, isSend)
		// 会话不存在,创建会话
		// 未读数是否 + 1
		let noreadnum = (isSend || isCurrentChat) ? 0 : 1
		if (index === -1) {
			let chatItem = {
				id, // 接收人/群 id
				chat_type: message.chat_type, // 接收类型 user单聊 group群聊
				avatar, // 接收人/群 头像
				name, // 接收人/群 昵称
				update_time: (new Date()).getTime(), // 最后一条消息的时间戳
				data, // 最后一条消息内容
				type: message.type, // 最后一条消息类型
				noreadnum, // 未读数
				istop: false, // 是否置顶
				shownickname: false, // 是否显示昵称
				nowarn: false, // 消息免打扰
				strongwarn: false, // 是否开启强提醒
			}
			// 群聊
			if (message.chat_type === 'group' && message.group) {
				chatItem.shownickname = true
				chatItem.name = message.to_name
				chatItem = {
					...chatItem,
					user_id: message.group.user_id, // 群管理员id
					remark: "", // 群公告
					invite_confirm: 1, // 邀请确认
				}
			}
			list.unshift(chatItem)
		} else { // 存在,更新会话
			// 拿到当前会话
			let item = list[index]
			// 更新该会话最后一条消息时间,内容,类型
			item.update_time = (new Date()).getTime()
			item.name = message.to_name
			item.data = data
			item.type = message.type
			// 未读数更新
			item.noreadnum += noreadnum
			// 置顶会话
			list = this.listToFirst(list, index)
		}
		// 存储
		let key = `chatlist_${this.user.id}`
		this.setStorage(key, list)
		// 更新未读数
		this.updateBadge(list)
		// 通知更新vuex中的聊天会话列表
		uni.$emit('onUpdateChatList', list)
		return list
	}

	// 获取聊天记录
	getChatList() {
		let key = `chatlist_${this.user.id}`
		return this.getStorage(key)
	}
	getChatList_old(message, isSend = true) {
		// 获取本地存储会话列表
		let list = this.getChatList();
		// 是否处在当前聊天中
		let isCurrentChat = false
		// 接收人/群 id/头像/昵称
		let id = 0;
		let avatar = '';
		let name = '';
		// 判断私聊还是群聊
		if (message.chat_type === 'user') {
			// 私聊
			isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false;
			id = isSend ? message.to_id : message.from_id;
			avatar = isSend ? message.to_avatar : message.from_avatar
			name = isSend ? message.to_name : message.from_name
		} else {
			// 群聊
		}

		// 会话是否存在
		let index = list.findIndex(item => {
			return item.chat_type === message.chat_type && item.id === id;
		})
		// 最后一条消息展现形式
		let data = isSend ? message.data : `${message.from_name}:${message.data}`;
		// 未读数是否 +1
		let noreadnum = (isSend || isCurrentChat) ? 0 : 1;
		// 会话不存在 创建会话
		if (index === -1) {
			let chatItem = {
				id, // 接收人/群 id
				chat_type: message.chat_type, // 接收类型 user 单聊 group群聊
				name, // 接收人/群 昵称
				avatar, // 接收人/群 头像
				update_time: (new Date()).getTime(), // 最后发送的时间
				data, // 最后一条消息的内容
				type: message.type,
				noreadnum: 1, // 未读数
				istop: false, // 是否置顶
				shownickname: false, // 是否显示昵称
				nowarn: false, // 是否免打扰
				strongwarn: false, //  是否强提醒
			}
			if (message.chat_type === 'group') {
				chatItem = {
					...chatItem,
					user_id: 0, // 管理员id
					remark: '', // 群公告
					invite_confirm: 0 // 邀请确认
				}
			}
			list.unshift(chatItem)

		} else {
			// 存在,更新会话
			// 拿到当前会话
			let item = list[index]
			// 更新改会话最后一条消息时间,内容,类型
			item.update_time = (new Date()).getTime();
			item.data = data;
			item.type = message.type;
			// 未读数更新
			item.noreadnum += noreadnum
			// 置顶会话
			list = this.listToFirst(list, index);
		}
		// 存储
		let key = `chatlist_${this.user.id}`;
		this.setStorage(key, list);
		// 更新未读数
		this.updateBadge(list);
		// 更新vuex中的聊天会话列表
		uni.$emit('onUpdateChatList', list);
		console.log('获取到的会话列表:', list)
		return list;
		/**
		 * {
			id:1,  // 接收人/群 id
			chat_type:'user', // 接收类型 user 单聊 group群聊
			name:'昵称', // 接收人/群 昵称
			avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像
			type:'',// 最后一条消息类型
			update_time:1628069958, // 最后发送的时间
			data:"你好啊,哈哈哈", // 最后一条消息的内容
			noreadnum:1, // 未读数
			istop:false, // 是否置顶
			shownickname:0, // 是否显示昵称
			nowarn:0, // 是否免打扰
			strongwarn:0, //  是否强提醒
			user_id://管理员id,
			remark:'公告', // 群公告
			invite_confirm:0, // 邀请确认
		 },
		 **/
	}
	// 获取本地存储会话列表
	getChatList() {
		let key = `chatlist_${this.user.id}`;
		return this.getStorage(key);
	}
	// 更新指定会话
	async updateChatItem(where, data) {
		// 获取所有会话列表
		let list = this.getChatList();
		// 找到当前会话
		let index = list.findIndex(item => item.id === where.id && item.chat_type === where.chat_type);
		if (index === -1) return;
		// 更新数据
		if(typeof data === 'function'){
			list[index] = data(list[index])
		}else{
			list[index] = data
		}
		
		let key = `chatlist_${this.user.id}`;
		this.setStorage(key, list);

		// 更新会话列表状态
		uni.$emit('onUpdateChatList', list);
	}
	// 读取指定会话
	async readChatItem(id, chat_type) {
		// 获取所有会话列表
		let list = this.getChatList();
		// 找到当前会话
		let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
		if (index !== -1) {
			list[index].noreadnum = 0;
			let key = `chatlist_${this.user.id}`;
			this.setStorage(key, list);
			// 重新获取未读数
			this.updateBadge();
			// 更新会话列表状态
			uni.$emit('onUpdateChatList', list);
		}
	}
	// 删除指定会话
	async removeChatItem(id, chat_type) {
		// 获取所有会话列表
		let list = this.getChatList();
		// 找到当前会话
		let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
		if (index !== -1) {
			list.splice(index, 1);
			let key = `chatlist_${this.user.id}`;
			this.setStorage(key, list);
			// 重新获取未读数
			this.updateBadge();
			// 更新会话列表状态
			uni.$emit('onUpdateChatList', list);
		}
	}
	// 清空聊天记录
	async clearChatDetail(id, chat_type) {
		let key = `chatDetail_${this.user.id}_${chat_type}_${id}`;
		$U.removeStorage(key);
		// 获取所有会话列表
		let list = this.getChatList();
		// 找到当前会话
		let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
		if (index !== -1) {
			list[index].data = '';
			let key = `chatlist_${this.user.id}`;
			this.setStorage(key, list);

			// 更新会话列表状态
			uni.$emit('onUpdateChatList', list);
		}
	}
	/**
		 {
		 	id:1, // 接收人/群 id
		 	chat_type:'user', // 接收类型 user单聊 group群聊
		 	avatar:'', // 接收人/群 头像
		 	name:'昵称', // 接收人/群 昵称
		 	update_time:(new Date()).getTime(), // 最后一条消息的时间戳
		 	data:"最后一条消息内容", // 最后一条消息内容
		 	type:'text', 		   // 最后一条消息类型
		 	noreadnum:0, // 未读数
		 	istop:false, // 是否置顶
		 	shownickname:0, // 是否显示昵称
		 	nowarn:0, // 消息免打扰
		 	strongwarn:0, // 是否开启强提醒
			
			user_id:0, // 群管理员id
			remark:"公告", // 群公告
			invite_confirm:0, // 邀请确认
		 }
		 * **/
	// 初始化会话
	initChatListItem(message) {
		// 获取本地存储会话列表
		let list = this.getChatList()
		// 会话是否存在
		let index = list.findIndex(item => {
			return item.chat_type === message.chat_type && item.id === message.to_id
		})
		// 最后一条消息展现形式
		let data = this.formatChatItemData(message, true)
		// 会话不存在,创建会话
		if (index === -1) {
			let chatItem = {
				id: message.to_id, // 接收人/群 id
				chat_type: message.chat_type, // 接收类型 user单聊 group群聊
				avatar: message.to_avatar, // 接收人/群 头像
				name: message.to_name, // 接收人/群 昵称
				update_time: (new Date()).getTime(), // 最后一条消息的时间戳
				data: message.data, // 最后一条消息内容
				type: 'system', // 最后一条消息类型
				noreadnum: 0, // 未读数
				istop: false, // 是否置顶
				shownickname: false, // 是否显示昵称
				nowarn: false, // 消息免打扰
				strongwarn: false, // 是否开启强提醒
			}
			// 群聊
			if (message.chat_type === 'group' && message.group) {
				chatItem = {
					...chatItem,
					user_id: message.group.user_id, // 群管理员id
					remark: '', // 群公告
					invite_confirm: message.group.invite_confirm, // 邀请确认
				}
			}
			list.unshift(chatItem)
			// 存储
			let key = `chatlist_${this.user.id}`
			this.setStorage(key, list)
			// 通知更新vuex中的聊天会话列表
			uni.$emit('onUpdateChatList', list)
		}
	}
	// 获取指定会话
	getChatListItem(id, chat_type) {
		// 获取所有会话列表
		let list = this.getChatList()
		// 找到当前会话
		let index = list.findIndex(item => item.id === id && item.chat_type === chat_type)
		if (index !== -1) {
			return list[index]
		}
		return false
	}

	// 更新未读数
	async updateBadge(list = false) {
		// 获取所有会话列表
		list = list ? list : this.getChatList()
		// 统计所有未读数
		let total = 0

		list.forEach(item => {
			total += item.noreadnum
		})
		// 设置底部导航栏角标 
		if (total > 0) {
			uni.setTabBarBadge({
				index: 0,
				text: total <= 99 ? total.toString() : '99+'
			})
		} else {
			uni.removeTabBarBadge({
				index: 0
			})
		}

		uni.$emit('totalNoreadnum', total)
	}
	// 获取存储
	getStorage(key) {
		let list = $U.getStorage(key);
		return list ? JSON.parse(list) : [];
	}
	// 设置存储
	setStorage(key, value) {
		return $U.setStorage(key, JSON.stringify(value));
	}
	// 数组置顶
	listToFirst(arr, index) {
		if (index != 0) {
			arr.unshift(arr.splice(index, 1)[0]);
		}
		return arr;
	}
	// 撤回消息
	recall(message) {
		return new Promise((result, reject) => {
			$H.post('/chat/recall', {
				to_id: message.to_id,
				chat_type: message.chat_type,
				id: message.id,
			}).then(res => {
				// key值:chatDetail_当前用户id_会话类型_接收人/群id
				let key = `chatDetail_${this.user.id}_${message.chat_type}_${message.to_id}`
				// 获取原来的聊天记录
				let list = this.getChatDetail(key)
				// 根据k查找对应聊天记录
				let index = list.findIndex(item => item.id === message.id)
				if (index === -1) return;
				list[index].isremove = 1
				// 存储
				this.setStorage(key, list)
				result(res)
				// 更新会话最后一条消息显示
				this.updateChatItem({
					id: message.to_id,
					chat_type: message.chat_type
				}, (item) => {
					item.data = '你撤回了一条消息'
					item.update_time = (new Date()).getTime()
					return item
				})
			}).catch(err => {
				reject(err)
			})
		})
	}
}
export default chat

/store/modules/user.js

import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import Chat from '@/common/free-lib/chat.js';
import $C from '@/common/free-lib/config.js';
export default {
	state: {
		user: false,
		apply: {
			rows: [],
			count: 0,
		},
		mailList: [],
		chat: null,
		// 会话列表
		chatList: [],
		// 总未读数
		totalNoreadnum: 0,
		notice:{
			avatar:'',
			user_id:0,
			num:0
		}
	},
	mutations:{
		updateUser(state,{k,v}){
			if(state.user){
				state.user[k] = v;
				$U.setStorage('user',JSON.stringify(state.user));
			}
		}
	},
	actions: {
		// 登录后处理
		login({
			state,
			dispatch
		}, user) {
			// 存到状态种
			state.user = user;
			// 存储到本地存储中
			$U.setStorage('token', user.token);
			$U.setStorage('user', JSON.stringify(user));
			$U.setStorage('user_id', user.id);
			// 获取好友申请列表
			dispatch('getApply');
			// 更新角标提示
			dispatch('updateMailBadge');
			// 连接socket
			state.chat = new Chat({
				url: $C.socketUrl
			})
			// 获取会话列表
			dispatch('getChatList');
			// 初始化总未读数角标
			dispatch('updateBadge');
			// 获取朋友圈动态通知
			dispatch('getNotice');
		},
		// 退出登录
		logout({
			state
		}) {
			// 清除登录状态
			state.user = false;
			// 清除本地存储数据
			$U.removeStorage('token');
			$U.removeStorage('user');
			$U.removeStorage('user_id');
			// 关闭socket连接
			state.chat.close();
			state.chat = null;
			// 跳转到登录页
			uni.reLaunch({
				url: '/pages/common/login/login'
			})
			// 注销监听事件
			uni.$off('onUpdateChatList')
			uni.$off('momentNotice')
			uni.$off('totalNoreadnum')
		},
		// 初始化登录状态
		initLogin({
			state,
			dispatch
		}) {
			// 拿到存储的数据
			let user = $U.getStorage('user');
			if (user) {
				// 初始化登录状态
				state.user = JSON.parse(user);
				// 连接socket
				state.chat = new Chat({
					url: $C.socketUrl
				})
				// 获取会话列表
				dispatch('getChatList');
				// 获取离线信息
				// 获取好友申请列表
				dispatch('getApply');
				// 初始化总未读数角标
				dispatch('updateBadge');
			}
		},
		// 获取好友申请列表
		getApply({
			state,
			dispatch
		}, page = 1) {
			$H.get('/apply/' + page).then(res => {
				if (page === 1) {
					state.apply = res
				} else {
					// 下拉刷新
					state.apply.rows = [...state.apply.rows, ...res.rows]
					state.apply.count = res.count
				}

				// 更新通讯录角标提示
				dispatch('updateMailBadge');
			});
		},
		// 更新通讯录角标提示
		updateMailBadge({
			state
		}) {
			let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
			console.log(state.apply.count);
			if (state.apply.count > 0) {
				return uni.setTabBarBadge({
					index: 1,
					text: count
				})
			}

			uni.removeTabBarBadge({
				index: 1
			})

		},
		// 获取通讯录列表
		getMailList({
			state
		}) {
			$H.get('/friend/list').then(res => {
				state.mailList = res.rows.newList ? res.rows.newList : [];
			})
		},
		// 获取会话列表
		getChatList({ state }){
					state.chatList = state.chat.getChatList()
					// 监听会话列表变化
					uni.$on('onUpdateChatList',(list)=>{
						state.chatList = list
					})
		},
		// 获取朋友圈动态通知
		getNotice({ state }){
			state.notice = state.chat.getNotice();
			if(state.notice.num > 0){
				uni.setTabBarBadge({
					index:2,
					text:state.notice.num > 99 ? '99+' : state.notice.num.toString()
				})
			}else{
				uni.setTabBarBadge({
					index:APIBaseContract
				})
			}
			uni.$on('momentNotice',(notice)=>{
				state.notice = notice
			})
		},
		// 初始化总未读数角标
		// 更新未读数
		async updateBadge(list = false) {
			// 获取所有会话列表
			list = list ? list : this.getChatList()
			// 统计所有未读数
			let total = 0
			list.forEach(item => {
				total += item.noreadnum
			})
			// 设置底部导航栏角标
			if (total > 0) {
				uni.setTabBarBadge({
					index: 0,
					text: total <= 99 ? total.toString() : '99+'
				})
			} else {
				uni.removeTabBarBadge({
					index: 0
				})
			}
			uni.$emit('totalNoreadnum', total)
		},
		// 初始化总未读数角标
		updateBadge({
			state
		}){
			
			// 开启监听总未读数变化
			uni.$on('totalNoreadnum', (num) => {
				console.log('totalNoreadnum:',num);
				state.totalNoreadnum = num
			})
			state.chat.updateBadge()
		},
	},
}

感谢大家观看,我们下次见

标签:152,app,list,let,朋友圈,message,type,id,user
来源: https://blog.csdn.net/ab15176142633/article/details/121541772

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有