uni-app 110清空聊天记录功能

chat.js

import $U from "./util.js";
import $H from './request.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');
	}
	// 监听关闭
	onClose() {
		// 用户下线
		this.isOnline = false;
		this.socket = null;
		console.log('socket连接关闭');
	}
	// 监听消息
	onMessage(data) {
		console.log('监听消息', data);
		let res = JSON.parse(data.data)
		// console.log('监听接收消息',res)
		// 错误
		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;
		}
	}
	// 处理消息
	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((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://tangzhe123-com'))

			let uploadResult = ''
			if (isUpload) {
				uploadResult = $H.upload('/upload', {
					filePath: message.data
				}, onProgress)

				if (!uploadResult) {
					// 发送失败
					message.sendStatus = 'fail'
					// 更新指定历史记录
					this.updateChatDetail(message, k)
					// 断线重连提示
					return reject(err)
				}
			}

			$H.post('/chat/send', {
				to_id: this.TO.id,
				type: message.type,
				chat_type: this.TO.chat_type,
				data: message.data,
			}).then(res => {
				// 发送成功
				console.log('chat.js发送成功');
				message.id = res.id
				message.sendStatus = 'success';
				// 更新指定历史记录
				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 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;
		// 更新数据
		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;
	}
}
export default chat

chat.vue

<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
			<free-icon-button slot="right"><text class="iconfont font-md" @click="openChat">&#xe6fd;</text>
			</free-icon-button>
		</free-nav-bar>
		<!-- 聊天内容区域 -->
		<scroll-view scroll-y="true" class="bg-light position-fixed left-0 right-0" style="box-sizing:border-box;bottom:105rpx;"
			:style="chatBodyBottom" :scroll-into-view="scrollIntoView" :show-scrollbar="false"
			:scroll-with-animation="true">

			<!-- 聊天信息列表组件 -->
			<view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index">
				<free-chat-item :item="item" :index="index" ref="chatItem"
					:pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" :shownickname="currentChatItem.shownickname"
					@preview="previewImage" >
				</free-chat-item>
			</view>
		</scroll-view>

		<!-- 扩展菜单 -->
		<free-popup ref="action" bottom transformOrigin="center bottom" @hide="keyBoardHeight = 0" :mask="false">
			<view style="height: 580rpx;" class="border-top border-light-secondary">
				<swiper :indicator-dots="emoticonOrActionList.length>1" style="height:510rpx;">
					<swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index">
						<view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;"
							v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
							<image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image>
							<text class="font-sm text-muted mt-2">{{item2.name}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</free-popup>
		<!-- 弹出层 -->
		<free-popup ref="extend" maskColor bottom :bodyWidth="240" :bodyHeight="geMenusHeight" :tabbarHeight="105">
			<view class="flex flex-column" style="width:240rpx;" :style="getMenusStyle">
				<view v-for="(item,index) in menusList" :key="index" class="flex-1 flex align-center"
					hover-class="bg-light" @click="clickEvent(item.event)">
					<text class="font-md pl-3">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
		<!-- #ifdef APP-PLUS-NVUE -->
		<div class="position-fixed top-0 right-0 left-0 bottom-0" v-if="mode==='action' || mode==='emoticon'"
			@click="clickPage" :style="'bottom:'+maskBottom+'px;'"></div>
		<!-- #endif -->

		<!-- 底部输入框 -->
		<view class="position-fixed left-0 right-0 border-top flex align-center"
			style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+keyBoardHeight+'px;'">
			<free-icon-button @click="changeVoiceOrText">
				<block v-if="mode === 'audio'">
					<text class="iconfont font-lg">&#xe607;</text>
				</block>
				<block v-else>
					<text class="iconfont font-lg">&#xe606;</text>
				</block>
			</free-icon-button>
			<view class="flex-1">
				<view v-if="mode==='audio'" class="rounded flex align-center justify-center" style="height: 80rpx;"
					:class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart"
					@touchend="voiceTouchEnd" @touchmove="voiceTouchMove" @touchcancel="voiceTouchCancel">
					<text class="font">{{isRecording ? '松开 结束' : '按住 说话'}}</text>
				</view>
				<!-- 底部输入框 -->
				<textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;"
					:adjust-position="false" v-model="text" @focus="mode = 'text'" />
				<!-- @click="onInputClick" -->
				<!-- <textarea v-else class="bg-white rounded p-1 font-md" style="height: 50rpx;max-width: 500rpx;"
					:adjust-position="false" v-model="text" @focus="mode = 'text'"  /> -->
			</view>

			<template v-if="text.length === 0">
				<!-- 表情 -->
				<free-icon-button><text class="iconfont font-lg"
						@click="openActionOrEmoticon('emoticon')">&#xe605;</text></free-icon-button>
				<!-- 扩展菜单 -->
				<free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg">&#xe603;</text>
				</free-icon-button>
			</template>
			<view v-else class="flex-shrink">
				<!-- 发送按钮 -->
				<!-- <view class="main-bg-color rounded flex align-center justify-center mr-2 px-2 pt-4" style="height: 70rpx;" @click="send('text')"> 发送
				</view> -->
				<free-main-button name="发送" @click="send('text')"></free-main-button>
			</view>
		</view>

		<!-- 录音提示 -->
		<view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center"
			style="bottom: 105rpx;">
			<view class="rounded flex flex-column align-center justify-center"
				style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);">
				<image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
				<text class="font text-white mt-3">{{unRecord?'松开手指,取消发送':'手指上滑,取消发送'}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef APP-NVUE
	const domModule = weex.requireModule('dom');
	// #endif
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	import freeChatItem from '@/components/free-ui/free-chat-item.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import auth from '@/common/mixin/auth.js';
	export default {
		mixins: [auth],
		components: {
			freeNavBar,
			freeIconButton,
			freeChatItem,
			freePopup,
			freeMainButton
		},
		watch: {
			mode(newValue, oldValue) {

				if (newValue !== 'action' && newValue !== 'emoticon') {
					this.$refs.action.hide();
				}

				if (newValue !== 'text') {
					uni.hideKeyboard()
				}
			}
		},
		// 生命周期
		mounted() {
			this.statusBarHeight = 0;
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
			// 监听键盘高度变化
			uni.onKeyboardHeightChange((res) => {
				if (this.mode !== 'action' && this.mode !== 'emoticon') {
					this.keyBoardHeight = res.height;
				}
				if (this.keyBoardHeight > 0) {
					this.pageToBottom()
				}
			})
			// 注册发送音频事件
			this.regSendVoiceEvent((url) => {
				if (!this.unRecord) {
					// 发送
					this.send('audio', url, {
						time: this.RecordTime
					})
				}
			});
		},
		onLoad(e) {
			if (!e.params) {
				return this.backToast();
			}
			// 初始化
			this.__init();
			this.detail = JSON.parse(e.params)

			// 创建聊天对象
			this.chat.createChatObject(this.detail)

			// 获取历史记录
			this.list = this.chat.getChatdetail()
			// 监听接收聊天信息
			uni.$on('onMessage', (message) => {
				if ((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type ===
						'group' && this.detail.id)) {
					this.list.push(message);
					// 置于顶部
					this.pageToBottom();
				}
			})

			// uni.$on('updateHistory', this.updateHistory)
			// this.pageToBottom()
			uni.$on('clearHistory',()=>{
				this.list = [];
			})
		},
		destroyed() {
			// 销毁聊天对象
			this.chat.destoryChatObject();
			// 销毁监听接收聊天消息
			uni.$off('onMessage', () => {})
			uni.$off('clearHistory', () => {})
		},
		computed: {
			...mapState({
				chatList:state=>state.user.chatList,
				RECORD: state => state.audio.RECORD,
				RecordTime: state => state.audio.RecordTime,
				chat: state => state.user.chat,
				totalNoreadnum: state => state.user.totalNoreadnum
			}),
			// 当前会话配置信息
			currentChatItem(){
				let index = this.chatList.findIndex(item=>item.id === this.detail.id && item.chat_type === this.detail.chat_type);
				if(index !== -1){
					return this.chatList[index]
				}
				return {};
			},
			// 所有信息的图片地址
			imageList() {
				var arr = [];
				this.list.forEach((item) => {
					if (item.type === 'emoticon' || item.type === 'image') {
						arr.push(item.data)
					}
				})
				return arr;
			},
			// 获取蒙版的位置
			maskBottom() {
				return this.keyBoardHeight + uni.upx2px(105)
			},
			// 动态获取菜单高度
			geMenusHeight() {
				let H = 100;
				return this.menus.length * H;
			},
			// 获取菜单的样式
			getMenusStyle() {
				return `height:${this.geMenusHeight}rpx;`;
			},
			// 是否是本人
			isdoSelf() {
				// 获取本人id(假设拿到了)
				let id = 1
				let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
				return user_id === id
			},
			// 获取操作菜单
			menusList() {
				return this.menus.filter(v => {
					if (v.name === '撤回' && this.isDoSelf) {
						return false;
					} else {
						return true;
					}
				})
			},
			// 聊天区域bottom
			chatBodyBottom() {
				return `bottom:${uni.upx2px(105) + this.keyBoardHeight}px;top:${this.navBarHeight}px`;
			},
			// 获取操作或者表情列表
			emoticonOrActionList() {
				if (this.mode === 'emoticon' || this.mode === 'action') {
					return this[this.mode + 'List'];
				} else {
					return [];
				}
			}
		},
		data() {
			return {
				// 模式 text输入文字 emoticon表情 action操作 audio音频
				mode: 'text',
				scrollIntoView: "",
				// 扩展菜单列表
				actionList: [
					[{
							name: "相册",
							icon: "/static/images/extends/pic.png",
							event: "uploadImage"
						},
						{
							name: "拍摄",
							icon: "/static/images/extends/video.png",
							event: "uploadVideo"
						},
						{
							name: "收藏",
							icon: "/static/images/extends/shoucan.png",
							event: ""
						},
						{
							name: "名片",
							icon: "/static/images/extends/man.png",
							event: ""
						},
						{
							name: "语音通话",
							icon: "/static/images/extends/phone.png",
							event: ""
						},
						{
							name: "位置",
							icon: "/static/images/extends/path.png",
							event: ""
						}
					]
				],
				// 表情包
				emoticonList: [
					[{
							name: "沮丧",
							icon: "/static/images/emoticon/5497/0.gif",
							event: ""
						},
						{
							name: "沮丧",
							icon: "/static/images/emoticon/5497/0.gif",
							event: ""
						}
					]
				],
				// 输入文字
				text: "",
				// 音频录制中
				isRecording: false,
				// 取消录音
				unRecord: false,
				// 当前气泡索引
				keyBoardHeight: 0,
				propIndex: 1,
				navBarHeight: 0,
				list: [],
				RecordingStartY: 0,
				detail: {
					id: 0,
					name: '',
					avatar: '',
					chat_type: 'user'
				},
				menus: [{
						name: '复制',
						event: ""
					},
					{
						name: '发送给朋友',
						event: ""
					},
					{
						name: '收藏',
						event: ""
					},
					{
						name: '删除',
						event: ""
					},
					{
						name: '多选',
						event: ""
					},
					{
						name: '撤回',
						event: "removeChatItem"
					}
				],

			}
		},
		methods: {
			...mapMutations(['regSendVoiceEvent']),
			__init() {
				var total = 24;
				var page = Math.ceil(total / 8);
				var arr = [];
				for (var i = 0; i < page; i++) {
					var start = i * 8;
					arr[i] = [];
					for (var j = 0; j <= 8; j++) {
						arr[i].push({
							name: '表情' + (start + j),
							icon: '/static/images/emoticon/5497/' + (start + j) + '.gif',
							event: 'sendEmoticon'
						})
					}
				}
				this.emoticonList = arr;
			},
			// 点击区域
			clickPage() {
				// 隐藏操作菜单
				this.$refs.action.hide();
				this.mode = 'text';
			},
			// 事件分发
			actionEvent(e) {
				switch (e.event) {
					case 'uploadImage':
						uni.chooseImage({
							count: 9, //默认9
							success: (res) => {
								res.tempFilePaths.forEach((item) => {
									// 发送到服务器

									// 渲染到页面
									this.send('image', item);
								})
							}
						});
						break;
					case 'sendEmoticon': // 发送表情包
						this.send('emoticon', e.icon);
						break;
					case 'uploadVideo': // 发送短视频
						uni.chooseVideo({
							maxDuration: 10,
							success: (res) => {
								// 渲染页面
								this.send('video', res.tempFilePath);
								// 发送到服务端(获取视频封面,返回url)
								// 修改本地发送状态
							}
						})
						break;
				}
			},
			// 打开扩展菜单或者表情包
			openActionOrEmoticon(model = 'action') {
				this.mode = model;
				this.$refs.action.show();
				uni.hideKeyboard();
				this.keyBoardHeight = uni.upx2px(580);
			},

			// 发送
			send(type, data = '', options = {}) {
				// 组织数据格式
				switch (type) {
					case 'text':
						data = data || this.text
						break;
				}
				let message = this.chat.formatSendData({
					type,
					data,
					options
				})
				// 渲染到页面
				console.log('this.list:', this.list)
				let index = this.list.length
				this.list.push(message)
				// 监听上传进度
				let onProgress = false
				if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data
					.startsWith('http')) {
					onProgress = (progress) => {
						console.log('上传进度:', progress);
					}
				}
				// 发送到服务端
				this.chat.send(message, onProgress).then(res => {
					console.log(res);
					// 发送成功
					this.list[index].id = res.id
					this.list[index].sendStatus = 'success'
				}).catch(err => {
					// 发送失败
					this.list[index].sendStatus = 'fail'
					console.log(err);
				})
				// 发送文字成功,清空输入框
				if (type === 'text') {
					this.text = ''
				}
				// 置于底部
				this.pageToBottom()
			},
			// 长按消息气泡
			long(e) {
				this.propIndex = e.index;
				this.$refs.extend.show(e.x, e.y);
			},
			// 回到底部
			pageToBottom() {
				// #ifdef APP-PLUS-NVUE
				let chatItem = this.$refs.chatItem
				let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0
				if (chatItem[lastIndex]) {
					dom.scrollToElement(chatItem[lastIndex], {})
				}
				// #endif
				// #ifndef APP-NVUE
				setTimeout(() => {
					let lastIndex = this.list.length - 1
					this.scrollIntoView = 'chatItem_' + lastIndex
				}, 300)
				// #endif
			},
			// 操作菜单方法分发
			clickEvent(event) {
				switch (event) {
					case 'removeChatItem': // 撤回消息
						// 拿到当前被操作的信息
						this.list[this.propIndex].isremove = true;
						break;
					default:
						break;
				}
				// 关闭菜单
				this.$refs.extend.hide();
			},
			// 预览图片
			previewImage(url) {
				// 预览图片
				uni.previewImage({
					current: url,
					urls: this.imageList,
					indicator: "default",
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 切换音频录制喝文本输入
			changeVoiceOrText() {
				this.mode = this.mode !== 'audio' ? 'audio' : 'text';
			},
			// 录音相关 
			// 录音开始
			voiceTouchStart(e) {
				this.isRecording = true;
				this.RecordingStartY = e.changedTouches[0].screenY;
				this.unRecord = false;
				// 开始录音
				this.RECORD.start({
					format: 'mp3'
				})
			},
			// 录音结束
			voiceTouchEnd() {
				this.isRecording = false;
				// 停止录音
				this.RECORD.stop();
			},
			// 录音打断
			voiceTouchCancel() {
				this.isRecording = false;
				this.unRecord = true;
				// 停止录音
				this.RECORD.stop();
			},
			voiceTouchMove(e) {
				var Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY);
				this.unRecord = (Y >= 80);
			},
			// 打开聊天信息
			openChat() {
				uni.navigateTo({
					url: '/pages/chat/chat-set/chat-set?params=' + JSON.stringify({
						id: this.detail.id,
						chat_type: this.detail.chat_type
					}),
				});
			}
		}
	}
</script>

<style>

</style>

chat-set.vue

<template>
	<view style="background-color: #EDEDED;">
		<!-- 导航栏 -->
		<free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
		<view class="flex flex-wrap py-3 bg-white">
			<!-- 私聊 -->
			<view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
				<free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
				<text class="font text-muted mt-1" >{{detail.name}}</text>
			</view>
			<!-- 群聊 -->
			<view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'>
				<free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
				<text class="font text-muted mt-1" >{{item.name}}</text>
			</view>
			
			<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;"  @click="openMail">
				<view class="flex align-center justify-center border"  hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
					<text class="text-light-muted" style="font-size: 100rpx;" >+</text>
				</view>
			</view>
		</view>
		
		<free-divider></free-divider>
		<view v-if="detail.chat_type==='group'">
			<free-list-item title="群聊名称" showRight :showLeftIcon="false" @click="updateName()">
				<text slot="right" class="font text-muted">{{detail.name}}</text>
			</free-list-item>
			<free-list-item title="群二维码" showRight :showLeftIcon="false" @click="openCode">
				<text slot="right" class="iconfont font-md text-light-muted">&#xe647;</text>
			</free-list-item>
			<free-list-item title="群公告" showRight :showLeftIcon="false" @click="openGroupRemark"></free-list-item>
		</view>
		
		<free-divider></free-divider>
		<free-list-item title="查找聊天记录" showRight :showLeftIcon="false"></free-list-item>
		<free-divider></free-divider>
		<free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
			<switch slot="right" :checked="detail.nowarn" @change="updateChatItem($event,'nowarn')" color="#08C060" />
		</free-list-item>
		<free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
			<switch slot="right" :checked="detail.istop" @change="updateChatItem($event,'istop')" color="#08C060"/>
		</free-list-item>
		<free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
			<switch slot="right" :checked="detail.strongwarn" @change="updateChatItem($event,'strongwarn')" color="#08C060"/>
		</free-list-item>
		<free-divider></free-divider>
		<free-list-item title="清空聊天记录" showRight :showLeftIcon="false" @click="clear"></free-list-item>
		<free-divider></free-divider>
		
		<view v-if="detail.chat_type==='group'">
			<free-divider></free-divider>
			<free-list-item title="我在本群的昵称" showRight :showLeftIcon="false" @click="updatenickName">
				<text slot="right" class="font text-muted">{{nickname}}</text>
			</free-list-item>
			<free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
				<switch slot="right" :checked="detail.shownickname" @change="updateChatItem($event,'shownickname')" color="#08C060"/>
			</free-list-item>
	    </view>
		
		
		
		<free-divider></free-divider>
		<free-list-item title="投诉" showRight :showLeftIcon="false"></free-list-item>
		
		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="quit">
			<text class="font-md text-danger">删除并退出</text>
		</view>
		
		<free-confirm :title="'修改'+confirmTitle" ref="confirm">
				<input type="text" class="border-bottom font-md" :placeholder="confirmTitle" v-model="confirmText"/>
		</free-confirm>
		
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	import freeDivider from '@/components/free-ui/free-divider.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeConfirm from '@/components/free-ui/free-confirm.vue';
	import { mapState } from 'vuex';
	import $H from '@/common/free-lib/request.js';
	export default {
		components:{
			freeNavBar,
			freeAvatar,
			freeDivider,
			freeListItem,
			freeConfirm
		},
		computed:{
			...mapState({
				chat:state=>state.user.chat,
				user:state=>state.user.user
			}),
			confirmTitle(){
				return this.confirmType === 'name' ? '群名称' : '昵称';
			}
		},
		data() {
			return {
				list:[],
				confirmText:'',
				nickname:'',
				detail:{
							id:0,  // 接收人/群 id
							chat_type:'user', // 接收类型 user 单聊 group群聊
							name:'', // 接收人/群 昵称
							avatar:"", // 接收人/群 头像
							type:'',// 最后一条消息类型
							istop:false, // 是否置顶
							shownickname:false, // 是否显示昵称
							nowarn:false, // 是否免打扰
							strongwarn:false, //  是否强提醒
							user_id:0,//管理员id,
							remark:'', // 群公告
							invite_confirm:0, // 邀请确认
				}
			}
		},
		methods: {
			clear(){
				uni.showModal({
					content:'是否要清空聊天记录?',
					success:(res)=>{
						if(res.confirm){
							this.chat.clearChatDetail(this.detail.id,this.detail.chat_type);
							uni.showToast({
								title:'清除成功',
								icon:'none'
							})
							uni.$emit('clearHistory');
						} 
					}
				})
			},
			openCode(){
				uni.navigateTo({
					url:'../../my/code/code?params='+encodeURIComponent(JSON.stringify({
						id:this.detail.id,
						name:this.detail.name,
						avatar:this.detail.avatar
					}))+'&type=group',
				})
			},
			updateChatItem(e,k){
				console.log(e.detail.value,k);
				this.detail[k] = e.detail.value;
				this.chat.updateChatItem({
					id:this.detail.id,
					chat_type:this.detail.chat_type
				},this.detail);
			},
			quit(){
				uni.showModal({
					content:'是否要删除或退出群聊?',
					success: (res) => {
						if(res.cancel) return;
						$H.post('/group/quit',{
							id:this.detail.id
						}).then(res=>{
							uni.showToast({
								title: '操作成功',
								icon:'none'
							});
							uni.navigateBack({
								delta:1
							})
						})
					}
				})
			},
			updatenickName(){
				this.confirmType = 'nickname';
				this.confirmText = this.nickname
					this.$refs.confirm.show((close)=>{
						if(this.confirmText == ''){
							return uni.showToast({
								title:'昵称不能为空',
								icon:'none'
							})
						}
						$H.post('/group/nickname',{
							id:this.detail.id,
							nickname:this.confirmText
						}).then(res=>{
							uni.showToast({
								title:'修改成功',
								icon:'none'
							});
							this.nickname = this.confirmText;
							close();
						})
					});
			},
			openGroupRemark(){
				uni.navigateTo({
					url: '../group-remark/group-remark?params='+encodeURIComponent(JSON.stringify({
						id:this.detail.id,
						remark:this.detail.remark
					}))
				});
			},
			openMail(){
				uni.navigateTo({
					url:'/pages/mail/mail/mail?type=createGroup'
				})
			},
			updateName(){
				this.confirmText = this.detail.name
				this.$refs.confirm.show((close)=>{
					if(this.confirmText == ''){
						return uni.showToast({
							title:'群名称不能为空',
							icon:'none'
						})
					}
					$H.post('/group/rename',{
						id:this.detail.id,
						name:this.confirmText
					}).then(res=>{
						uni.showToast({
							title:'修改成功',
							icon:'none'
						});
						this.detail.name = this.confirmText;
						close();
					})
				});
			}
		},
		onLoad(e) {
			if(!e.params){
				return this.backToast();
			}
			let detail = JSON.parse(e.params);
			// 获取当前会话的详细资料
			detail = this.chat.getChatListItem(detail.id,detail.chat_type);
			if(!detail){
				return this.backToast()
			}
			this.detail = detail;
			if(this.detail.chat_type === 'group'){
				$H.get('/group_info/'+this.detail.id).then(res=>{
					this.detail.remark = res.remark;
					this.list = res.group_users.map(item=>{
						if(item.user_id === this.user.id){
							this.nickname = item.nickname;
						}
						return {
							id:item.user_id,
							name:item.nickname || item.user.nickname || item.user.username,
							avatar:item.user.avatar
						}
					})
					
				})
			}
		}
	}
</script>

<style>

</style>

下图是我测试的截图

uni-app 110清空聊天记录功能
感谢大家观看,我们下次见

上一篇:输出如下图n行n列数阵


下一篇:Kafka 配置外网访问