zouyanyan 5 months ago
parent 598ea2c158
commit 7f5c4fd704

@ -152,7 +152,7 @@
// }, 0)
// }
if (this.msg.length > 1) {
if (this.msg.length > 0) {
// 0为表情和文字
this.send(this.msg, 'txt');
this.ifmore=true;
@ -161,7 +161,7 @@
},
inputs(e) {
var chatm = e.detail.value;
if (chatm.length > 1) {
if (chatm.length > 0) {
this.ifmore=false;
}
else{
@ -431,12 +431,12 @@
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 14rpx 20rpx;
padding: 14rpx;
image {
width: 56rpx;
height: 56rpx;
margin: 0 10rpx;
width: 60rpx;
height: 60rpx;
margin: 0 8rpx;
flex: auto;
}
.btnt {
@ -464,7 +464,7 @@
.record {
line-height: 44rpx;
text-align: center;
font-size: 20rpx;
font-size: 24rpx;
color: rgba(39, 40, 50, 0.6);
}
}

@ -2,8 +2,8 @@
"name" : "瑜伽汇",
"appid" : "__UNI__B6E0086",
"description" : "瑜伽汇",
"versionName" : "1.0.12",
"versionCode" : 1012,
"versionName" : "1.0.16",
"versionCode" : 1016,
"transformPx" : false,
"app-plus" : {
"flexible" : true,

@ -90,18 +90,26 @@
<text class="uname">{{item.fromname}}</text>
</view>
<view v-if="item.type == 'txt'" class="message">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">未读</view>
<view class="msg-text">
<text selectable>{{item.content}}</text>
</view>
</view>
<view v-if="item.type == 'image'" @tap="previewImg(item.content)" class="message">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">未读</view>
<image :src="item.content" class="msg-img" mode="widthFix"></image>
</view>
<view v-if="item.type == 'video'" class="messagevideo">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">未读</view>
<!-- 视频 -->
<myVideo :videoUrl="item.content"></myVideo>
</view>
<view v-if="item.type == 'audio'" @click="playVoice(item.content,item.ifaudio,index)" class="message">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">未读</view>
<!-- 音频 -->
<view class="msg-text voice" :style="{width: item.time>2? item.time*40+'rpx' :'auto'}">
{{item.time}}″
@ -112,6 +120,8 @@
</view>
</view>
<view v-if="item.type == 'product'" class="message" >
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">未读</view>
<view v-if="item.send" class="msg-product" @click="gotoDetail(item)">
<view v-if="item.send.type==3" class="zx">
<view class="zxname">订单咨询</view>
@ -276,15 +286,13 @@
this.sendinfo=null;
this.$forceUpdate();
}
// 先获取聊天记录缓存
this.getchatstore();
}
},
onShow() {
// 先获取聊天记录缓存
this.getchatstore();
// 跳转到最后一条数据 与前面的:id进行对照
setTimeout(() => {
console.log("onShow")
this.screendo(this.unshiftmsg.length - 1);
}, 100);
@ -292,26 +300,24 @@
if(this.heartbeatInterval){
clearInterval(this.heartbeatInterval); // 停止心跳包发送
}
// socket接收实时消息
this.socketinit();
},
onBackPress(options) {
if (options.from === 'backbutton') {
// 来自顶部菜单的返回按钮
// 在这里处理你的逻辑
console.log('返回按钮被点击');
this.closeWebSocket();
uni.onSocketClose(function (res) {
console.log('WebSocket 已关闭!');
});
// this.closeWebSocket();
// uni.onSocketClose(function (res) {
// console.log('WebSocket 已关闭!');
// });
return false;
}
},
beforeDestroy() {
console.log('界面关闭socket,beforeDestroy');
// 在组件销毁前,确保关闭 WebSocket 连接
this.closeWebSocket();
clearInterval(this.heartbeatInterval); // 停止心跳包发送
// this.closeWebSocket();
// clearInterval(this.heartbeatInterval); // 停止心跳包发送
},
methods: {
gotoDetail(item){
@ -385,11 +391,12 @@
},
// 获取聊天记录
getchatstore(){
console.log("getchatstore");
var that=this;
try{
this.unshiftmsg=[];
// 先获取会话缓存
var data= myCache(this.info.chatId)?myCache(this.info.chatId):[];
console.log("data",data)
data.forEach((cell,i)=>{
cell["ifaudio"]=false;
//时间间隔处理
@ -410,7 +417,6 @@
}
this.unshiftmsg.push(cell);
});
if(this.unshiftmsg.length<=0)
{
if(this.info.from=="yh"){
@ -453,30 +459,41 @@
];
this.$forceUpdate();
}
// 如果是第一次接收消息没有缓存,且有minId则拉取离线消息
if(this.info.minId){
this.readUp(1);
}
}
else{
// 跳转到最后一条数据 与前面的:id进行对照
setTimeout(() => {
that.screendo(that.unshiftmsg.length-1);
}, 100);
// 已经有缓存,则拉取离线消息
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
this.$forceUpdate();
// 请求服务器加载加载拉取离线聊天记录
if(this.info.minId&&this.info.minId>0){
this.readUp(1);
}
}
}
catch(err){
console.log(err);
}
// socket接收实时消息
this.socketinit();
},
// 是否是列表中已经存在了minId
ifpull(){
var ret=true;
this.unshiftmsg.forEach((cell)=>{
if(cell.id&&this.info.minId&&parseInt(cell.id)>=parseInt(this.info.minId)){
ret=false;
}
});
return ret;
},
// 消息是否存在列表中
ifadd(id){
var ret=true;
this.unshiftmsg.forEach((cell)=>{
if(cell.id==id){
ret=false;
}
});
return ret;
},
// 定时心跳包
startHeartbeat() {
@ -497,54 +514,59 @@
// ws接收消息
socketinit(){
var that = this;
if (!this.isConnected) {
this.socketTask=uni.connectSocket({
url: "wss://www.sanduolantoyoga.com/yoga-imserver/",
header: {
// 'content-type': 'application/json',
Authorization: uni.getStorageSync("token"),
},
success: (res) => {
console.log(res, 'socket连接成功success');
},
fail: (res) => {
console.log(res, 'socket连接失败')
this.socketTask=uni.connectSocket({
url: "wss://www.sanduolantoyoga.com/yoga-imserver/",
header: {
// 'content-type': 'application/json',
Authorization: uni.getStorageSync("token"),
},
success: (res) => {
console.log(res, 'socket连接成功success');
// 获取当前聊天中的minId 拉取离线信息
that.getReadedId();
},
fail: (res) => {
console.log(res, 'socket连接失败')
},
complete: (res) => {
console.log(res,'socket连接成功complete');
}
});
uni.onSocketOpen(res => {
console.log('WebSocket连接已打开!');
that.isConnected = true;
// 发送登录心跳包
uni.sendSocketMessage({
data: JSON.stringify({
"cmd": 0,//心跳
"data": {
"accessToken":uni.getStorageSync("token"),
},
}), // 发送心跳包数据 // 发送的消息内容
success(re) {
console.log(re);
console.log('消息发送成功!')
},
complete: (res) => {
console.log(res,'socket连接成功complete');
fail(err) {
console.log(err);
console.log('消息发送失败!')
}
});
uni.onSocketOpen(res => {
console.log('WebSocket连接已打开!');
that.isConnected = true;
// 发送登录心跳包
uni.sendSocketMessage({
data: JSON.stringify({
"cmd": 0,//心跳
"data": {
"accessToken":uni.getStorageSync("token"),
},
}), // 发送心跳包数据 // 发送的消息内容
success(re) {
console.log(re);
console.log('消息发送成功!')
},
fail(err) {
console.log(err);
console.log('消息发送失败!')
}
});
// 发送心跳包
this.startHeartbeat();
});
uni.onSocketMessage(res => {
console.log('收到WebSocket服务器消息:');
if(res.data){
let data=JSON.parse(res.data);
console.log(data);
if(data.data){
data=data.data;
if(data){
// 发送心跳包
this.startHeartbeat();
});
uni.onSocketMessage(res => {
console.log('收到WebSocket服务器消息:');
if(res.data){
let data=JSON.parse(res.data);
console.log(data);
if(data.data){
data=data.data;
if(data){
if(this.ifadd(data.id)){
// 是发送者发送来的消息
if(data.recvId&&data.recvId.toString()==that.userid.toString()&&data.sendId.toString()==this.info.friendId.toString()){
// 加入聊天记录
@ -596,19 +618,24 @@
}
}
}
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
if(data.type==12){
// 已读操作
this.updateRead(data);
}
}
}
});
uni.onSocketClose(res => {
console.log('WebSocket连接已关闭!');
that.isConnected = false;
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
uni.onSocketError(err => {
console.error('WebSocket连接打开失败,请检查:', err);
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
}
}
});
uni.onSocketClose(res => {
console.log('WebSocket连接已关闭!');
that.isConnected = false;
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
uni.onSocketError(err => {
console.error('WebSocket连接打开失败,请检查:', err);
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
},
// 关闭WebSocket连接
closeWebSocket() {
@ -621,7 +648,7 @@
async setMsglist(data){
data.send=data.type==6?await this.getProduct(data.content):(data.type==5?await this.getOrder(data.content):null);
data.type=data.type==0?'txt':(data.type==1?'image':data.type==3?'audio':(data.type==4?'video':(data.type==5?'order':(data.type==6?'product':'')))),
console.log("setMsglist",data)
// console.log("setMsglist",data)
this.unshiftmsg.push(data);
this.$forceUpdate();
setTimeout(() => {
@ -629,6 +656,29 @@
}, 100);
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
// 保存最大拉取Id
this.savaMaxId({id:this.info.chatId,minId:this.info.minId});
},
savaMaxId(info){
// 保存最大拉取Id
var data= myCache("privateMsgMaxId")?myCache("privateMsgMaxId"):[];
console.log("data",data)
var ifhas=0;
data.forEach((cell,i)=>{
if(cell.id==info.id){
ifhas=1;
data[i].minId==info.minId;
}
});
if(ifhas){
// 如果存在信息修改
myCache("privateMsgMaxId",data);
}
else{
// 如果不存在信息添加
data.push(info);
myCache("privateMsgMaxId",data);
}
},
async getProduct(id){
console.log("getProduct",id)
@ -679,89 +729,97 @@
async readed() {
const {data: res} = await uni.$http.put('/api/message/private/readed?friendId='+this.info.friendId);
},
// 已读推送
async readUp(ii) {
const {data: res} = await uni.$http.put('/api/message/private/readed?friendId='+this.info.friendId);
this.getList(ii);
// 获取当前聊天中最大minId
async getReadedId() {
const {data: res} = await uni.$http.get('/api/message/private/maxReadedId',{friendId:this.info.friendId});
if(res.data){
this.info.minId=res.data;
this.$forceUpdate();
// 保存最大拉取Id
this.savaMaxId({id:this.info.chatId,minId:this.info.minId});
this.getList();
}
},
// 加载对话
async getList(ii) {
var that=this;
const {data: res} = await uni.$http.get('/api/message/private/pullOfflineMessage',{minId: this.info.minId});
this.triggered = false;
if(res.data&&res.data.length>0){
const gotonum=res.data.length;
var type=0;
res.data.forEach((cell,i)=>{
type=cell.type;
cell["ifaudio"]=false;
//时间间隔处理
if (i < this.unshiftmsg.length - 1) {
//这里表示头部时间还是显示一下
let t = dateTime.spaceTime(this.oldTime, cell.fromtime);
if (t) {
this.oldTime = t;
// 拉取离线消息
async getList() {
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
// if(this.ifpull()){
var that=this;
const {data: res} = await uni.$http.get('/api/message/private/pullOfflineMessage',{minId: this.info.minId});
this.triggered = false;
if(res.data&&res.data.length>0){
var type=0;
res.data.forEach((cell,i)=>{
type=cell.type;
cell["ifaudio"]=false;
//时间间隔处理
if (i < this.unshiftmsg.length - 1) {
//这里表示头部时间还是显示一下
let t = dateTime.spaceTime(this.oldTime, cell.fromtime);
if (t) {
this.oldTime = t;
}
cell.fromtime = t;
}
cell.fromtime = t;
}
// 获取图片,为下面的预览做准备
if (cell.type == 1) {
this.imgMsg.unshift(cell.content)
}
else if(cell.type==0){
cell.content=decodeURIComponent(cell.content);
}
// // 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 5 订单 6 商品 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
let mdata = {
"fromname": this.userName,
"fromuser": this.userid,
"headimg": cell.headImage?cell.headImage:'/static/image/kfr.png',
"toname": this.info.chatName, // 接收人
"touser": this.info.friendId, // 接收人姓名
"content": cell.content,
"time": cell.type==3?5:0,
"ifaudio":cell.type==3? true:false,
"fromtime": cell.sendTime,
"type": data.type==0?'txt':(data.type==1?'image':data.type==3?'audio':(data.type==4?'video':(data.type==5?'order':(data.type==6?'product':'')))),
"id": cell.id,
"recvId": cell.recvId,
"sendId": cell.sendId,
};
this.unshiftmsg.unshift(mdata);
});
if(ii==2){
// 跳转到加载数据的第一条 与前面的:id进行对照
setTimeout(() => {
that.screendo(gotonum -1);
}, 100);
}
else{
// 获取图片,为下面的预览做准备
if (cell.type == 1) {
this.imgMsg.unshift(cell.content)
}
else if(cell.type==0){
cell.content=decodeURIComponent(cell.content);
}
// // 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 5 订单 6 商品 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
let mdata = {
"fromname": this.userName,
"fromuser": this.userid,
"headimg": cell.headImage?cell.headImage:'/static/image/kfr.png',
"toname": this.info.chatName, // 接收人
"touser": this.info.friendId, // 接收人姓名
"content": cell.content,
"time": cell.type==3?5:0,
"ifaudio":cell.type==3? true:false,
"fromtime": cell.sendTime,
"type": data.type==0?'txt':(data.type==1?'image':data.type==3?'audio':(data.type==4?'video':(data.type==5?'order':(data.type==6?'product':'')))),
"id": cell.id,
"recvId": cell.recvId,
"sendId": cell.sendId,
};
this.unshiftmsg.unshift(mdata);
});
// 跳转到最后一条数据 与前面的:id进行对照
setTimeout(() => {
that.screendo(that.unshiftmsg.length-1);
}, 100);
}
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
this.$forceUpdate();
// 离线加载后更新聊天列表记录
var chatlastinfo={
id: this.info.chatId,
content:this.unshiftmsg[this.unshiftmsg.length-1].content,
type: type,
minId: this.unshiftmsg[this.unshiftmsg.length-1].id,
datetime: this.unshiftmsg[this.unshiftmsg.length-1].sendTime,
name: this.info.chatName,
userid: this.userid,
fromuser: this.info.friendId,
img: this.info.chatAvatar,
sort:"privatechat"
};
this.updateChatList(chatlastinfo);
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
// 保存最大拉取Id
// this.savaMaxId({id:this.info.chatId,minId:this.info.minId});
this.$forceUpdate();
// 离线加载后更新聊天列表记录
var chatlastinfo={
id: this.info.chatId,
content:this.unshiftmsg[this.unshiftmsg.length-1].content,
type: type,
minId: this.unshiftmsg[this.unshiftmsg.length-1].id,
datetime: this.unshiftmsg[this.unshiftmsg.length-1].sendTime,
name: this.info.chatName,
userid: this.userid,
fromuser: this.info.friendId,
img: this.info.chatAvatar,
sort:"privatechat"
};
this.updateChatList(chatlastinfo);
// 已读操作
this.readed();
}
// }
}
},
screendo(scrindex){
this.scrollToView = '';
@ -785,7 +843,7 @@
// 自定义下拉刷新被触发
onRefresh(event){
// 加载聊天记录
this.readUp(2);
this.getList();
},
// 自定义下拉刷新被复位
onRestore() {
@ -1103,6 +1161,10 @@
this.$forceUpdate();
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
this.$forceUpdate();
// 保存最大拉取Id
// this.savaMaxId({id:this.info.chatId,minId:this.info.minId});
// 更新聊天列表记录
var chatlastinfo={
id:this.info.chatId,
@ -1162,6 +1224,19 @@
myCache("chatlist-"+this.userid,chatlist);
}
},
// 更新是否已读
updateRead(item){
console.log("updateRead")
this.unshiftmsg.forEach((cell,index)=>{
// console.log(cell,item.recvId)
if(cell.fromuser==item.recvId){
this.unshiftmsg[index].ifread=true;
this.$forceUpdate();
}
});
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
},
//输入框高度
heights(e) {
this.inputh = e;
@ -1246,19 +1321,23 @@
}
.message {
flex: none;
max-width: 480rpx;
max-width: 540rpx;
display: flex;
flex-direction: row;
}
.messagevideo {
max-width: 480rpx;
max-width: 540rpx;
height: 300rpx;
display: flex;
flex-direction: row;
}
.msg-text {
font-size: 32rpx;
color: rgba(39, 40, 50, 1);
line-height: 44rpx;
padding: 18rpx 24rpx;
word-break: break-all;
}
.msg-img {
max-width: 400rpx;
border-radius: 20rpx;
@ -1337,6 +1416,7 @@
margin-left: 16rpx;
background-color: #fff;
border-radius: 0rpx 20rpx 20rpx 20rpx;
word-break: break-all;
}
.ms-img {
@ -1497,6 +1577,22 @@
.msg-right {
flex-direction: row-reverse;
.read{
font-size: 24rpx;
color: #888;
margin-right: 10rpx;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.noread{
font-size: 24rpx;
color: #00a89b;
margin-right: 10rpx;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.feed-imgy{
display: flex;
flex-direction: column;
@ -1523,6 +1619,7 @@
font-size: 32rpx;
color: #FFFFFF;
line-height: 48rpx;
word-break: break-all;
border-radius: 20rpx 0rpx 20rpx 20rpx;
}

@ -90,19 +90,29 @@
<text class="uname">{{item.fromname}}</text>
</view>
<view v-if="item.type == 'txt'" class="message">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">{{item.readedCount?(2-item.readedCount):2}}未读</view>
<view class="msg-text">
<text selectable>{{item.content}}</text>
</view>
</view>
<view v-if="item.type == 'image'" @tap="previewImg(item.content)" class="message">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">{{item.readedCount?(2-item.readedCount):2}}未读</view>
<image :src="item.content" class="msg-img" mode="widthFix"></image>
</view>
<view v-if="item.type == 'video'" class="messagevideo">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">{{item.readedCount?(2-item.readedCount):2}}未读</view>
<!-- 视频 -->
<myVideo :videoUrl="item.content"></myVideo>
</view>
<view v-if="item.type == 'audio'" @click="playVoice(item.content,item.ifaudio,index)" class="message">
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">{{item.readedCount?(2-item.readedCount):2}}未读</view>
<!-- 音频 -->
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">{{item.readedCount?(2-item.readedCount):2}}未读</view>
<view class="msg-text voice" :style="{width: item.time>2? item.time*40+'rpx' :'auto'}">
{{item.time}}″
<view class="voicel" v-if="item.ifaudio" >
@ -112,6 +122,8 @@
</view>
</view>
<view v-if="item.type == 'product'" class="message" >
<view v-if="item.ifread" class="read">已读</view>
<view v-else class="noread">{{item.readedCount?(2-item.readedCount):2}}未读</view>
<view v-if="item.send" class="msg-product" @click="gotoDetail(item)">
<view v-if="item.send.type==3" class="zx">
<view class="zxname">订单咨询</view>
@ -349,15 +361,15 @@
this.sendinfo=null;
this.$forceUpdate();
}
// 先获取聊天记录缓存
this.getchatstore();
// 获取客服 和 教练 头像和名称
this.getrwinfo();
}
},
onShow() {
// 先获取聊天记录缓存
this.getchatstore();
// 获取客服 和 教练 头像和名称
this.getrwinfo();
// 跳转到最后一条数据 与前面的:id进行对照
setTimeout(() => {
console.log("onShow")
@ -368,18 +380,16 @@
if(this.heartbeatInterval){
clearInterval(this.heartbeatInterval); // 停止心跳包发送
}
// socket接收实时消息
this.socketinit();
},
onBackPress(options) {
if (options.from === 'backbutton') {
// 来自顶部菜单的返回按钮
// 在这里处理你的逻辑
console.log('返回按钮被点击');
this.closeWebSocket();
uni.onSocketClose(function (res) {
console.log('WebSocket 已关闭!');
});
// this.closeWebSocket();
// uni.onSocketClose(function (res) {
// console.log('WebSocket 已关闭!');
// });
return false;
}
},
@ -393,8 +403,8 @@
beforeDestroy() {
console.log('界面关闭socket,beforeDestroy');
// 在组件销毁前,确保关闭 WebSocket 连接
this.closeWebSocket();
clearInterval(this.heartbeatInterval); // 停止心跳包发送
// this.closeWebSocket();
// clearInterval(this.heartbeatInterval); // 停止心跳包发送
},
methods: {
// 获取客服和教练信息
@ -499,9 +509,9 @@
getchatstore(){
var that=this;
try{
this.unshiftmsg=[];
// 先获取会话缓存
var data= myCache(this.info.chatId)?myCache(this.info.chatId):[];
console.log("data",data)
data.forEach((cell,i)=>{
cell["ifaudio"]=false;
//时间间隔处理
@ -565,30 +575,39 @@
];
this.$forceUpdate();
}
// 如果是第一次接收消息没有缓存,且有minId则拉取离线消息
if(this.info.minId){
this.readUp(1);
}
}
else{
// 跳转到最后一条数据 与前面的:id进行对照
setTimeout(() => {
that.screendo(that.unshiftmsg.length-1);
}, 100);
// 已经有缓存,则拉取离线消息
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
this.$forceUpdate();
// 请求服务器加载加载拉取离线聊天记录
if(this.info.minId&&this.info.minId>0){
this.readUp(1);
}
}
}
catch(err){
console.log(err);
}
// socket接收实时消息
this.socketinit();
},
// 是否是列表中已经存在了minId
ifpull(){
var ret=true;
this.unshiftmsg.forEach((cell)=>{
if(cell.id&&this.info.minId&&parseInt(cell.id)>=parseInt(this.info.minId)){
ret=false;
}
});
return ret;
},
ifadd(id){
var ret=true;
this.unshiftmsg.forEach((cell)=>{
if(cell.id==id){
ret=false;
}
});
return ret;
},
// 定时心跳包
startHeartbeat() {
@ -626,6 +645,8 @@
},
success: (res) => {
console.log(res, 'socket连接成功success');
// 获取当前聊天中的minId 拉取离线信息
that.getReadedId();
},
fail: (res) => {
console.log(res, 'socket连接失败')
@ -666,18 +687,29 @@
// 群聊
if(data.data){
data=data.data;
// 是此群聊发送来的消息
if(data.groupId==this.info.groupId){
// 加入聊天记录
// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 5 订单 6 商品 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
this.getMsgSender(data)
if(this.ifadd(data.id)){
// 加入聊天记录
// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 5 订单 6 商品 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
this.getMsgSender(data);
// 已读操作
this.readed();
}
else{
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
}
}
else{
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
if(data.type==12){
// 已读操作
this.updateRead(data);
}
}
}
}
}
});
@ -742,6 +774,8 @@
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
// 保存最大拉取Id
this.savaMaxId({id:this.info.chatId,minId:data.id});
// 接收到socket后更新聊天列表记录
var chatlastinfo={
@ -764,6 +798,27 @@
// 已读操作
this.readed();
},
savaMaxId(info){
// 保存最大拉取Id
var data= myCache("groupMsgMaxId")?myCache("groupMsgMaxId"):[];
console.log("data",data)
var ifhas=0;
data.forEach((cell,i)=>{
if(cell.id==info.id){
ifhas=1;
data[i].minId==info.minId;
}
});
if(ifhas){
// 如果存在信息修改
myCache("groupMsgMaxId",data);
}
else{
// 如果不存在信息添加
data.push(info);
myCache("groupMsgMaxId",data);
}
},
async getProduct(id){
console.log("getProduct",id)
var rets=null;
@ -812,93 +867,102 @@
async readed() {
const {data: res} = await uni.$http.put('/api/message/group/readed?groupId='+this.info.groupId);
},
// 已读推送
async readUp(ii) {
const {data: res} = await uni.$http.put('/api/message/group/readed?groupId='+this.info.groupId);
this.getList(ii);
// 获取当前聊天中最大minId
async getReadedId() {
const {data: res} = await uni.$http.get('/api/message/group/maxReadedId',{groupId:this.info.groupId});
if(res.data){
this.info.minId=res.data;
this.$forceUpdate();
this.getList();
}
},
// 加载对话
async getList(ii) {
var that=this;
const {data: res} = await uni.$http.get('/api/message/group/pullOfflineMessage',{minId: this.info.minId});
this.triggered = false;
if(res.data&&res.data.length>0){
const gotonum=res.data.length;
var type=0;
res.data.forEach((cell,i)=>{
type=cell.type;
cell["ifaudio"]=false;
//时间间隔处理
if (i < this.unshiftmsg.length - 1) {
//这里表示头部时间还是显示一下
let t = dateTime.spaceTime(this.oldTime, cell.fromtime);
if (t) {
this.oldTime = t;
async getList() {
// if(this.ifpull()){
var that=this;
const {data: res} = await uni.$http.get('/api/message/group/pullOfflineMessage',{minId: this.info.minId});
this.triggered = false;
if(res.data&&res.data.length>0){
const gotonum=res.data.length;
var type=0;
res.data.forEach((cell,i)=>{
if(this.ifadd(cell.id)){
type=cell.type;
cell["ifaudio"]=false;
//时间间隔处理
if (i < this.unshiftmsg.length - 1) {
//这里表示头部时间还是显示一下
let t = dateTime.spaceTime(this.oldTime, cell.fromtime);
if (t) {
this.oldTime = t;
}
cell.fromtime = t;
}
// 获取图片,为下面的预览做准备
if (cell.type == 1) {
this.imgMsg.unshift(cell.content)
}
else if(cell.type==0){
cell.content=decodeURIComponent(cell.content);
}
// // 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 5 订单 6 商品 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
let mdata = {
"fromname": this.userName,
"fromuser": this.userid,
"headimg": cell.headImage?cell.headImage:'/static/image/kfr.png',
"toname": cell.sendNickName, // 接收人
"touser": cell.sendId, // 接收人姓名
"content": cell.content,
"readedCount": cell.readedCount,
"time": cell.type==3?5:0,
"ifaudio":cell.type==3? true:false,
"fromtime": cell.sendTime,
"type": data.type==0?'txt':(data.type==1?'image':data.type==3?'audio':(data.type==4?'video':(data.type==5?'order':(data.type==6?'product':'')))),
"id": cell.id,
"sendId": cell.sendId,
"atUserIds": data.atUserIds,
};
this.unshiftmsg.unshift(mdata);
}
cell.fromtime = t;
}
// 获取图片,为下面的预览做准备
if (cell.type == 1) {
this.imgMsg.unshift(cell.content)
}
else if(cell.type==0){
cell.content=decodeURIComponent(cell.content);
}
// // 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 5 订单 6 商品 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
let mdata = {
"fromname": this.userName,
"fromuser": this.userid,
"headimg": cell.headImage?cell.headImage:'/static/image/kfr.png',
"toname": cell.sendNickName, // 接收人
"touser": cell.sendId, // 接收人姓名
"content": cell.content,
"readedCount": cell.readedCount,
"time": cell.type==3?5:0,
"ifaudio":cell.type==3? true:false,
"fromtime": cell.sendTime,
"type": data.type==0?'txt':(data.type==1?'image':data.type==3?'audio':(data.type==4?'video':(data.type==5?'order':(data.type==6?'product':'')))),
"id": cell.id,
"sendId": cell.sendId,
"atUserIds": data.atUserIds,
};
this.unshiftmsg.unshift(mdata);
});
if(ii==2){
// 跳转到加载数据的第一条 与前面的:id进行对照
setTimeout(() => {
that.screendo(gotonum -1);
}, 100);
}
else{
});
// // 跳转到加载数据的第一条 与前面的:id进行对照
// setTimeout(() => {
// that.screendo(gotonum -1);
// }, 100);
// 跳转到最后一条数据 与前面的:id进行对照
setTimeout(() => {
that.screendo(that.unshiftmsg.length-1);
}, 100);
}
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
this.$forceUpdate();
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
this.info.minId=this.unshiftmsg[this.unshiftmsg.length-1].id;
this.$forceUpdate();
// 保存最大拉取Id
this.savaMaxId({id:this.info.chatId,minId:this.info.minId});
// 离线加载后更新聊天列表记录
var chatlastinfo={
id: this.info.chatId,
groupId:this.info.groupId,
content:this.unshiftmsg[this.unshiftmsg.length-1].content,
type: type,
minId: this.unshiftmsg[this.unshiftmsg.length-1].id,
datetime: this.unshiftmsg[this.unshiftmsg.length-1].sendTime,
name: this.info.chatName,
userid: this.userid,
friendId: this.info.friendId, // 客服userid
teacherId: this.info.teacherId? this.info.teacherId:this.info.instructor, // 教练userid
fromuser: this.unshiftmsg[this.unshiftmsg.length-1].touser,
img: this.unshiftmsg[this.unshiftmsg.length-1].headimg,
sort:"groupchat"
};
this.updateChatList(chatlastinfo);
// 离线加载后更新聊天列表记录
var chatlastinfo={
id: this.info.chatId,
groupId:this.info.groupId,
content:this.unshiftmsg[this.unshiftmsg.length-1].content,
type: type,
minId: this.unshiftmsg[this.unshiftmsg.length-1].id,
datetime: this.unshiftmsg[this.unshiftmsg.length-1].sendTime,
name: this.info.chatName,
userid: this.userid,
friendId: this.info.friendId, // 客服userid
teacherId: this.info.teacherId? this.info.teacherId:this.info.instructor, // 教练userid
fromuser: this.unshiftmsg[this.unshiftmsg.length-1].touser,
img: this.unshiftmsg[this.unshiftmsg.length-1].headimg,
sort:"groupchat"
};
this.updateChatList(chatlastinfo);
// 已读操作
this.readed();
}
// }
}
},
screendo(scrindex){
this.scrollToView = '';
@ -922,7 +986,7 @@
// 自定义下拉刷新被触发
onRefresh(event){
// 加载聊天记录
this.readUp(2);
this.getList();
},
// 自定义下拉刷新被复位
onRestore() {
@ -1240,6 +1304,9 @@
this.$forceUpdate();
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
// 保存最大拉取Id
this.savaMaxId({id:this.info.chatId,minId:rrdata.id});
// 更新聊天列表记录
var chatlastinfo={
id:this.info.chatId,
@ -1302,6 +1369,21 @@
myCache("chatlist-"+this.userid,chatlist);
}
},
// 更新是否已读
updateRead(item){
console.log(this.info)
this.unshiftmsg.forEach((cell,index)=>{
if(cell.id==item.id){
this.unshiftmsg[index].readedCount=item.readedCount;
if(item.readedCount>=2){
this.unshiftmsg[index].ifread=true;
}
this.$forceUpdate();
}
});
// 缓存聊天
myCache(this.info.chatId,this.unshiftmsg);
},
//输入框高度
heights(e) {
this.inputh = e;
@ -1386,11 +1468,15 @@
}
.message {
flex: none;
max-width: 480rpx;
max-width: 540rpx;
display: flex;
flex-direction: row;
}
.messagevideo {
max-width: 480rpx;
max-width: 540rpx;
height: 300rpx;
display: flex;
flex-direction: row;
}
.msg-text {
font-size: 32rpx;
@ -1637,6 +1723,23 @@
.msg-right {
flex-direction: row-reverse;
.read{
font-size: 24rpx;
color: #888;
margin-right: 10rpx;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.noread{
font-size: 24rpx;
color: #00a89b;
margin-right: 10rpx;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.feed-imgy{
display: flex;
flex-direction: column;

@ -781,6 +781,13 @@
.thname{
font-size: 30rpx;
color:#000;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 假设你的行高是20px,并且你想要两行显示 */
line-height: 40rpx; /* 每行的行高 */
max-height: 80rpx;
}
.thtext{
margin-top: 10rpx;

@ -12,27 +12,28 @@
<view v-if="grouplist.length==0 && loadStatus=='nomore'" class="nodata">暂无消息~</view>
<view class="listcell">
<u-swipe-action ref="swipeRef" :options="options" v-for="(info, index) in grouplist" :key="index" @click="$u.throttle(actionClick(info,index), 2000)" >
<view class="lcon" @click="gotoGroup(info,index)" :key="index" @longpress="handleLongPress(info,index)">
<view class="limg">
<image class="img" :src="info.img" mode="aspectFill"></image>
<u-swipe-action ref="swipeRef" :options="options" v-for="(info, index) in grouplist" :key="info.id" style="min-width: 600rpx;"
@click="$u.throttle(actionClick(info,index), 2000)">
<view class="lcon" @click="gotoGroup(info,index)" :key="index" @longpress="handleLongPress(info,index)">
<view class="limg">
<image class="img" :src="info.img" mode="aspectFill"></image>
</view>
<view class="lright">
<view class="lrow">
<view class="pname">{{info.name}}</view>
<view class="ptime"> {{ changeTime(info.datetime)}}</view>
</view>
<view class="lright">
<view class="lrow">
<view class="pname">{{info.name}}</view>
<view class="ptime"> {{ changeTime(info.datetime)}}</view>
<view class="lrow">
<view class="pnr">
{{ info.type==0?info.content:(info.type==1?"图片":(info.type==2?"文件":(info.type==3?"语音":(info.type==4?"视频":
(info.type==5?"订单咨询":(info.type==6?"商品咨询":info.content))))))}}
</view>
<view class="lrow">
<view class="pnr">
{{ info.type==0?info.content:(info.type==1?"图片":(info.type==2?"文件":(info.type==3?"语音":(info.type==4?"视频":
(info.type==5?"订单咨询":(info.type==6?"商品咨询":info.content))))))}}
</view>
<view class="lnum" v-if="info.sl>0">
{{ info.sl}}
</view>
<view class="lnum" v-if="info.sl>0">
{{ info.sl}}
</view>
</view>
</view>
</view>
</u-swipe-action>
@ -71,7 +72,7 @@
backgroundColor: '#ed2a28'
}
}
], //u-swipe-action样式
], // u-swipe-action样式
imgurl:uni.$http.baseUrl,
grouplist:[],
socketTask: null,
@ -82,8 +83,6 @@
}
},
onLoad(options) {
// socket接收信息初始化
// this.socketinit();
},
onShow(){
this.openId = myCache('openId');
@ -110,18 +109,18 @@
// 来自顶部菜单的返回按钮
// 在这里处理你的逻辑
console.log('返回按钮被点击');
this.closeWebSocket();
uni.onSocketClose(function (res) {
console.log('WebSocket 已关闭!');
});
// this.closeWebSocket();
// uni.onSocketClose(function (res) {
// console.log('WebSocket 已关闭!');
// });
return false;
}
},
beforeDestroy() {
console.log('界面关闭socket,beforeDestroy');
// 在组件销毁前,确保关闭 WebSocket 连接
this.closeWebSocket();
clearInterval(this.heartbeatInterval); // 停止心跳包发送
// this.closeWebSocket();
// clearInterval(this.heartbeatInterval); // 停止心跳包发送
},
beforeRouteLeave(to, from, next) {
console.log('界面关闭socket,beforeRouteLeave');
@ -130,22 +129,7 @@
methods: {
handleLongPress(info,index) {
console.log(index);
this.$refs.swipeRef[index].open()
// var that=this;
// uni.showModal({
// title: '提示',
// content: "确定要删除此聊天记录吗?",
// cancelText: '取消',
// confirmText: '确定',
// success: ress => {
// if (ress.confirm) {
// // myCache(info.id,"");
// // that.grouplist.splice(index, 1);
// // that.$forceUpdate();
// // myCache("chatlist-"+this.userid,that.grouplist);
// }
// }
// });
this.$refs.swipeRef[index].open();
},
// 删除
actionClick(info,index) {
@ -158,6 +142,7 @@
confirmText: '确定',
success: ress => {
if (ress.confirm) {
that.$refs.swipeRef[index].close();
myCache(info.id,"");
that.grouplist.splice(index, 1);
that.$forceUpdate();
@ -185,182 +170,222 @@
// ws接收消息
socketinit(){
var that = this;
// if (!that.isConnected) {
that.socketTask=uni.connectSocket({
url: "wss://www.sanduolantoyoga.com/yoga-imserver/",
header: {
// 'content-type': 'application/json',
Authorization: uni.getStorageSync("token"),
},
success: (res) => {
console.log(res, 'socket连接成功success');
},
fail: (res) => {
console.log(res, 'socket连接失败')
},
complete: (res) => {
console.log(res,'socket连接成功complete');
}
});
that.socketTask=uni.connectSocket({
url: "wss://www.sanduolantoyoga.com/yoga-imserver/",
header: {
// 'content-type': 'application/json',
Authorization: uni.getStorageSync("token"),
},
success: (res) => {
console.log(res, 'socket连接成功success');
},
fail: (res) => {
console.log(res, 'socket连接失败')
uni.onSocketOpen(resopen => {
console.log('WebSocket连接已打开!');
that.isConnected = true;
that.$forceUpdate();
uni.sendSocketMessage({
data: JSON.stringify({
"cmd": 0,//心跳
"data": {
"accessToken":uni.getStorageSync("token"),
},
}), // 发送心跳包数据 // 发送的消息内容
success(re) {
console.log(re);
console.log('消息发送成功!')
},
complete: (res) => {
console.log(res,'socket连接成功complete');
fail(err) {
console.log(err);
console.log('消息发送失败!')
}
});
uni.onSocketOpen(resopen => {
console.log('WebSocket连接已打开!');
that.isConnected = true;
that.$forceUpdate()
uni.sendSocketMessage({
data: JSON.stringify({
"cmd": 0,//心跳
"data": {
"accessToken":uni.getStorageSync("token"),
},
}), // 发送心跳包数据 // 发送的消息内容
success(re) {
console.log(re);
console.log('消息发送成功!')
},
fail(err) {
console.log(err);
console.log('消息发送失败!')
// 定时发送心跳包
this.startHeartbeat();
// 拉取离线消息
this.grouplist.forEach((cell,i)=>{
if(cell.minId){
// 通过某个会话中已读消息的最大id 获取离线消息
this.pullMessage(i,cell);
}
});
// 已经删除的有最大id的继续拉取是否有消息
var data= myCache("privateMsgMaxId")?myCache("privateMsgMaxId"):[{id:0,minId:0}];
data.forEach((cell)=>{
console.log("privateMsgMaxId")
var ifcz=false;
this.grouplist.forEach((item)=>{
if(cell.id==item.id){
// 已经存在列表了,不用拉取离线信息
ifcz=true;
}
});
if(!ifcz){
// 拉取离线信息
this.getList(cell);
}
});
// 发送心跳包
this.startHeartbeat();
var data= myCache("groupMsgMaxId")?myCache("groupMsgMaxId"):[{id:0,minId:0}];
data.forEach((cell)=>{
var ifcz=false;
this.grouplist.forEach((item)=>{
if(cell.id==item.id){
// 已经存在列表了,不用拉取离线信息
ifcz=true;
}
});
if(!ifcz){
// 拉取离线信息
this.getGroupList(cell);
}
});
uni.onSocketMessage(res => {
console.log('收到WebSocket服务器消息:');
if(res.data){
var rs=JSON.parse(res.data);
console.log(rs);
if(rs.cmd==3){
// 私聊
if(rs.data){
var data=rs.data;
if(data.recvId&&(data.recvId).toString()==(that.userid).toString()){
// 是这个用户的接收的私聊信息
// 加入聊天记录
// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
if(data.type==0){
data.content=decodeURIComponent(data.content);
}
if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
var ifexist=0,idx=null;
that.grouplist.forEach((cell,index)=>{
if(cell.fromuser==data.sendId&&cell.userid==data.recvId&&cell.sort=="privatechat"){
ifexist=1;
idx=index;
that.grouplist[index].sl=(that.grouplist[index].sl?that.grouplist[index].sl+1:1);
that.grouplist[index].content=data.content;
that.grouplist[index].datetime=data.sendTime;
that.grouplist[index].type=data.type;
that.$forceUpdate();
}
});
});
if(ifexist==0){
// 未保存缓存
// 接收到socket后更新聊天列表记录
var chatlastinfo={
id: "privatechat-" + data.recvId +"-" + data.sendId,
content: data.content,
minId: data.id,
sl:1,
datetime: data.sendTime,
type: data.type,
name: "",
userid: data.recvId,
fromuser: data.sendId,
img: "",
sort:"privatechat"
};
that.updateChatList(chatlastinfo,ifexist);
}
else{
that.updateChatList(that.grouplist[idx],ifexist);
uni.onSocketMessage(res => {
console.log('收到WebSocket服务器消息:');
if(res.data){
var rs=JSON.parse(res.data);
console.log(rs);
if(rs.cmd==3){
// 私聊
if(rs.data){
var data=rs.data;
if(data.recvId&&(data.recvId).toString()==(that.userid).toString()){
// 是这个用户的接收的私聊信息
// 加入聊天记录
// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
if(data.type==0){
data.content=decodeURIComponent(data.content);
}
if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
var ifexist=0,chatinfo=null;
that.grouplist.forEach((cell,index)=>{
if(cell.fromuser==data.sendId&&cell.userid==data.recvId&&cell.sort=="privatechat"){
ifexist=1;
that.grouplist[index].sl=(that.grouplist[index].sl?that.grouplist[index].sl+1:1);
that.grouplist[index].content=data.content;
that.grouplist[index].datetime=data.sendTime;
that.grouplist[index].type=data.type;
that.$forceUpdate();
chatinfo= JSON.parse(JSON.stringify(that.grouplist[index])) ;
console.log(chatinfo)
}
});
if(ifexist==0){
// 未保存缓存
// 接收到socket后更新聊天列表记录
var chatlastinfo={
id: "privatechat-" + data.recvId +"-" + data.sendId,
content: data.content,
minId: data.id,
sl:1,
datetime: data.sendTime,
type: data.type,
name: "",
userid: data.recvId,
fromuser: data.sendId,
img: "",
sort:"privatechat"
};
that.updateChatList(chatlastinfo);
}
else{
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
that.updateChatList(chatinfo);
}
}
else{
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
}
}
}
else if(rs.cmd==4){
// 群聊
if(rs.data){
var data=rs.data;
if(data.atUserIds&&data.atUserIds.includes(that.userid)){
// 是这个用户的接收的群聊信息
// 加入聊天记录
// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
if(data.type==0){
data.content=decodeURIComponent(data.content);
}
if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
var ifexist=0,idx=null;
that.grouplist.forEach((cell,index)=>{
if(cell.groupId==data.groupId&&cell.sort=="groupchat"){
ifexist=1;
idx=index;
that.grouplist[index].sl=(that.grouplist[index].sl?that.grouplist[index].sl+1:1);
that.grouplist[index].content=data.content;
that.grouplist[index].datetime=data.sendTime;
that.grouplist[index].fromuser=data.sendId;
that.grouplist[index].type=data.type;
that.$forceUpdate();
}
});
if(ifexist==0){
// 未保存缓存
// 接收到socket后更新聊天列表记录
var chatlastinfo={
id: "groupchat-" + data.groupId,
groupId:data.groupId,
content: data.content,
minId: data.id,
sl:1,
datetime: data.sendTime,
type: data.type,
name: "",
userid: this.userid,
fromuser: data.sendId,
img: "",
sendId: data.sendId,
sendNickName: data.sendNickName,
sort:"groupchat"
};
that.getGroupInfo(chatlastinfo,ifexist);
}
else{
that.getGroupInfo(that.grouplist[idx],ifexist);
}
else if(rs.cmd==4){
// 群聊
if(rs.data){
var data=rs.data;
if(data.atUserIds&&data.atUserIds.includes(that.userid)){
// 是这个用户的接收的群聊信息
// 加入聊天记录
// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
if(data.type==0){
data.content=decodeURIComponent(data.content);
}
if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
var ifexist=0,idx=null;
that.grouplist.forEach((cell,index)=>{
if(cell.groupId==data.groupId&&cell.sort=="groupchat"){
ifexist=1;
idx=index;
that.grouplist[index].sl=(that.grouplist[index].sl?that.grouplist[index].sl+1:1);
that.grouplist[index].content=data.content;
that.grouplist[index].datetime=data.sendTime;
that.grouplist[index].fromuser=data.sendId;
that.grouplist[index].type=data.type;
that.$forceUpdate();
}
});
if(ifexist==0){
// 未保存缓存
// 接收到socket后更新聊天列表记录
var chatlastinfo={
id: "groupchat-" + data.groupId,
groupId:data.groupId,
content: data.content,
minId: data.id,
sl:1,
datetime: data.sendTime,
type: data.type,
name: "",
userid: this.userid,
fromuser: data.sendId,
img: "",
sendId: data.sendId,
sendNickName: data.sendNickName,
sort:"groupchat"
};
that.getGroupInfo(chatlastinfo);
}
else{
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
that.getGroupInfo(that.grouplist[idx]);
}
}
else{
// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"
}
}
}
}
});
}
});
uni.onSocketClose(res => {
console.log('WebSocket连接已关闭!',res);
that.isConnected = false;
that.$forceUpdate();
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
uni.onSocketClose(res => {
console.log('WebSocket连接已关闭!',res);
that.isConnected = false;
that.$forceUpdate();
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
uni.onSocketError(err => {
console.error('WebSocket连接打开失败,请检查:', err);
that.isConnected = false;
that.$forceUpdate();
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
// }
uni.onSocketError(err => {
console.error('WebSocket连接打开失败,请检查:', err);
that.isConnected = false;
that.$forceUpdate();
clearInterval(that.heartbeatInterval); // 停止心跳包发送
});
},
// 关闭WebSocket连接
closeWebSocket() {
@ -368,6 +393,16 @@
this.isConnected = false;
this.$forceUpdate()
},
// 消息是否存在列表中
ifadd(id){
var ret=0;
this.grouplist.forEach((cell,ii)=>{
if(cell.id==id){
ret=ii+1;
}
});
return ret;
},
gotoContacts(){
uni.navigateTo({
url: `/pages/message/contact`
@ -440,21 +475,10 @@
// 获取群聊列表
async getgroupsmembers(){
// 获取聊天群列表
this.grouplist=[];
var chatlist=myCache("chatlist-"+this.userid)?myCache("chatlist-"+this.userid):[];
chatlist.forEach(cell=>{
if(cell.userid==this.userid){
this.grouplist.push(cell);
}
});
this.grouplist.forEach((cell,i)=>{
if(cell.minId){
// 通过某个会话中已读消息的最大id 获取离线消息
this.readUp(i,cell);
}
});
this.grouplist=myCache("chatlist-"+this.userid)?myCache("chatlist-"+this.userid):[];
this.loadStatus="nomore";
this.$forceUpdate();
// 按照时间排序
var that=this;
setTimeout(() => {
that.reorder();
@ -469,68 +493,148 @@
this.grouplist.sort((a, b) => b.datetime - a.datetime);
this.$forceUpdate();
},
// 已读推送
async readUp(i,item) {
// 拉取离线信息
async pullMessage(i,item) {
if(item.sort=="groupchat"){
const {data: res} = await uni.$http.put('/api/message/group/readed?groupId='+item.groupId);
this.getgroupsnums(i,item);
}
else{
const {data: res} = await uni.$http.put('/api/message/private/readed?friendId='+item.fromuser);
this.getgroupsnums(i,item);
}
},
// 拉取离线消息
async getGroupList(item) {
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
var that=this;
const {data: res} = await uni.$http.get('/api/message/group/pullOfflineMessage',{minId: item.minId});
if(res.data&&res.data.length>0){
res.data.forEach((cell,index)=>{
// 获取消息后对消息进行缓存处理
var chatlastinfo={
id: "groupchat-" + cell.groupId,
groupId:cell.groupId,
content: cell.content,
minId: cell.id,
sl: index+1,
datetime: cell.sendTime,
type: cell.type,
name: "",
userid: this.userid,
fromuser: cell.sendId,
img: "",
sendId: cell.sendId,
sendNickName: cell.sendNickName,
sort:"groupchat"
};
this.getGroupInfo(chatlastinfo,index);
});
}
},
// 拉取离线消息
async getList(item) {
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
var that=this;
const {data: res} = await uni.$http.get('/api/message/private/pullOfflineMessage',{minId: item.minId});
if(res.data&&res.data.length>0){
res.data.forEach((cell,index)=>{
// 获取消息后对消息进行缓存处理
var chatlastinfo={
id: "privatechat-" + cell.recvId +"-" + cell.sendId,
content: cell.content,
minId: cell.id,
sl:index+1,
datetime: cell.sendTime,
type: cell.type,
name: "",
userid: cell.recvId,
fromuser: cell.sendId,
img: "",
sort:"privatechat"
};
this.updateChatList(chatlastinfo,index);
});
}
},
ifprivateMsgMaxId(item){
var ret=true;
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
var data= myCache("privateMsgMaxId")?myCache("privateMsgMaxId"):[];
data.forEach((cell)=>{
if(cell.id==item.id&&parseInt(item.minId)>=parseInt(cell.minId)){
ret=false;
}
});
return ret;
},
ifgroupMsgMaxId(item){
console.log("ifgroupMsgMaxId")
var ret=true;
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
var data= myCache("groupMsgMaxId")?myCache("groupMsgMaxId"):[];
data.forEach((cell)=>{
if(cell.id==item.id&&parseInt(item.minId)>=parseInt(cell.minId)){
ret=false;
}
});
return ret;
},
// 获取群聊中离线信息
async getgroupsnums(i,item){
if(item.sort=="groupchat"){
// 群聊
const {data: res} = await uni.$http.get("/api/message/group/pullOfflineMessage",{minId:item.minId});
if(res.data&&res.data.length>0){
// 获取消息后对消息进行缓存处理
var data=res.data;
// 获取离线消息数量返回
this.grouplist[i]["sl"]=res.data.length;
var last=res.data[res.data.length-1];
if(last.type==0){
last.content=decodeURIComponent(last.content);
}
if(last.type==0||last.type==1||last.type==2||last.type==3||last.type==4||data.type==5||data.type==6){
this.grouplist[i].content=last.content;
this.grouplist[i].type=last.type;
this.grouplist[i].datetime=last.datetime;
this.$forceUpdate();
// 重新排序
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
// if(this.ifgroupMsgMaxId(item)){
// 群聊
const {data: res} = await uni.$http.get("/api/message/group/pullOfflineMessage",{minId:item.minId});
if(res.data&&res.data.length>0){
// 获取消息后对消息进行缓存处理
var data=res.data;
// 获取离线消息数量返回
this.grouplist[i]["sl"]=res.data.length;
var last=res.data[res.data.length-1];
if(last.type==0){
last.content=decodeURIComponent(last.content);
}
if(last.type==0||last.type==1||last.type==2||last.type==3||last.type==4||data.type==5||data.type==6){
this.grouplist[i].content=last.content;
this.grouplist[i].type=last.type;
this.grouplist[i].datetime=last.datetime;
this.$forceUpdate();
// 重新排序
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
}
}
}
// }
}
else{
// 私聊
const {data: res} = await uni.$http.get("/api/message/private/pullOfflineMessage",{minId:item.minId});
if(res.data&&res.data.length>0){
// 获取消息后对消息进行缓存处理
var data=res.data;
// 获取离线消息数量返回
this.grouplist[i]["sl"]=res.data.length;
var last=res.data[res.data.length-1];
if(last.type==0){
last.content=decodeURIComponent(last.content);
}
if(last.type==0||last.type==1||last.type==2||last.type==3||last.type==4||data.type==5||data.type==6){
this.grouplist[i].content=last.content;
this.grouplist[i].type=last.type;
this.grouplist[i].datetime=last.datetime;
this.$forceUpdate();
// 重新排序
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
// 判断当前 minId 是不是列表中已经存在了,是不再拉取,不是继续拉取
// if(this.ifprivateMsgMaxId(item)){
// 私聊
const {data: res} = await uni.$http.get("/api/message/private/pullOfflineMessage",{minId:item.minId});
if(res.data&&res.data.length>0){
// 获取消息后对消息进行缓存处理
var data=res.data;
// 获取离线消息数量返回
this.grouplist[i]["sl"]=res.data.length;
var last=res.data[res.data.length-1];
if(last.type==0){
last.content=decodeURIComponent(last.content);
}
if(last.type==0||last.type==1||last.type==2||last.type==3||last.type==4||data.type==5||data.type==6){
this.grouplist[i].content=last.content;
this.grouplist[i].type=last.type;
this.grouplist[i].datetime=last.datetime;
this.$forceUpdate();
// 重新排序
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
}
}
}
// }
}
},
// 获取群信息
async getGroupInfo(info,ifexist) {
async getGroupInfo(info) {
const {data: res} = await uni.$http.get('/api/group/find/'+info.groupId);
if(res.data){
var data = res.data;
@ -545,26 +649,34 @@
info.instructor=data.instructor;
info.productId=data.productId;
info.productName=data.productName;
this.updateChatGroupList(info,ifexist);
this.updateChatGroupList(info);
}
},
async updateChatGroupList(info,ifexist){
async updateChatGroupList(info){
var name=info.name,img=info.img||require("@/static/image/girl.png");
const {data: res} = await uni.$http.get("/api/friend/find/"+info.sendId);
if(res.data){
var data=res.data;
name=data.nickName?data.nickName:"匿名";
img=data.headImage?data.headImage:require("@/static/image/girl.png");
if(ifexist==0){
var idx=this.ifadd(info.id);
if(!idx){
this.grouplist.push(info);
this.$forceUpdate();
}
else{
this.grouplist[idx-1].content=info.content;
this.grouplist[idx-1].datetime=info.datetime;
this.grouplist[idx-1].fromuser=info.fromuser;
this.grouplist[idx-1].type=info.type;
this.$forceUpdate();
}
// 重新排序 保存缓存
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
// 聊天框消息缓存
var msgchat=myCache(info.id);
if(ifexist==0||!msgchat){
if(!msgchat){
// 第一条聊天记录保存缓存
let firstmsg = [{
"fromname": name, // 发送人
@ -610,15 +722,23 @@
else{
name="匿名";
img="../../static/image/girl.png";
if(ifexist==0){
var idx=this.ifadd(info.id);
if(!idx){
this.grouplist.push(info);
this.$forceUpdate();
}
else{
this.grouplist[idx-1].content=info.content;
this.grouplist[idx-1].datetime=info.datetime;
this.grouplist[idx-1].fromuser=info.fromuser;
this.grouplist[idx-1].type=info.type;
this.$forceUpdate();
}
// 重新排序
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
var msgchat=myCache(info.id);
if(ifexist==0||!msgchat){
if(!msgchat){
// 第一条聊天记录保存缓存
let firstmsg = [{
"fromname": name, // 发送人
@ -661,22 +781,31 @@
}
}
},
async updateChatList(info,ifexist){
async updateChatList(info){
const {data: res} = await uni.$http.get("/api/friend/find/"+info.fromuser);
if(res.data){
var data=res.data;
info.name=data.nickName?data.nickName:"匿名";
info.img=data.headImage?data.headImage:require("@/static/image/girl.png");
if(ifexist==0){
var idx=this.ifadd(info.id);
if(!idx){
this.grouplist.push(info);
this.$forceUpdate();
}
else{
// this.grouplist[idx-1].sl=(this.grouplist[idx-1].sl?this.grouplist[idx-1].sl+1:1);
this.grouplist[idx-1].content=info.content;
this.grouplist[idx-1].datetime=info.datetime;
this.grouplist[idx-1].fromuser=info.fromuser;
this.grouplist[idx-1].type=info.type;
this.$forceUpdate();
}
// 重新排序 保存缓存
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
// 聊天框消息缓存
var msgchat=myCache(info.id);
if(ifexist==0||!msgchat){
if(!msgchat){
// 第一条聊天记录保存缓存
let firstmsg = [{
"fromname": info.name, // 发送人
@ -723,15 +852,26 @@
else{
info.name="匿名";
info.img="../../static/image/girl.png";
if(ifexist==0){
var idx=this.ifadd(info.id);
if(!idx){
this.grouplist.push(info);
this.$forceUpdate();
}
else{
// this.grouplist[idx-1].sl=(this.grouplist[idx-1].sl?this.grouplist[idx-1].sl+1:1);
this.grouplist[idx-1].content=info.content;
this.grouplist[idx-1].datetime=info.datetime;
this.grouplist[idx-1].fromuser=info.fromuser;
this.grouplist[idx-1].type=info.type;
this.$forceUpdate();
}
// 重新排序
this.reorder();
myCache("chatlist-"+this.userid,this.grouplist);
var msgchat=myCache(info.id);
if(ifexist==0||!msgchat){
console.log(info.id,msgchat);
if(!msgchat){
// 第一条聊天记录保存缓存
let firstmsg = [{
"fromname": info.name, // 发送人
@ -880,6 +1020,7 @@
background: #fff;
margin: 0;
width: 100%;
min-width: 600rpx;
.lcon{
border-bottom: 1rpx solid #eee;
padding-top: 20rpx;
@ -939,6 +1080,12 @@
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #595959;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 假设你的行高是20px,并且你想要两行显示 */
line-height: 40rpx; /* 每行的行高 */
max-height: 40rpx;
}
.lnum{
background-color: #de0000;

@ -360,11 +360,6 @@
uni.stopPullDownRefresh()
},500);
},
// onTabItemTap(){
// console.log('界面关闭socket,onTabItemTap');
// // 在组件销毁前,确保关闭 WebSocket 连接
// uni.closeSocket();
// },
methods: {
ifview(value){
// 描述:角色ID;顾问:103 ;教练:104 ;店长:105 ;普通用户:107;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Loading…
Cancel
Save