聊天中 五分钟提示一次时间(需求:参考企业微信)

聊天使用websocket 结合vuex做的 所以做在getter里面  消息体的类型 单文本 表情 组合  引用  以及发送消息的状态 padding sucess error (好多乱七八糟的。。。。)
chatlist里面每条消息都有type(根据type判断消息,头像,名字),还有消息体,以及创建时间(createTIme)
newChatList: state => {
   //第一次对话显示时间 为初始时间戳
let TimeMarker: number = new Date(state.chatList[0].createTime).getTime() / 1000;
//第一次对话timeMarker值为时间戳
state.chatList[0].timeMarker = TimeMarker;
return state.chatList.map(item => {
if (new Date(item.createTime).getTime() / 1000 - TimeMarker >= 5 * 60) {
//时间间隔5分钟 给该消息timeMarker赋值时间戳
item.timeMarker = new Date(item.createTime).getTime() / 1000;
//重置时间戳
TimeMarker = item.timeMarker;
}
return item;
});
},

template
<p class="chat-date" v-if="newChatList[index].timeMarker">
{{ new Date(item.createTime).toLocaleString().replace(/:d{1,2}$/, '') }}
</p>
<div class="chat-room-item">
<p class="user-img">
<el-avatar v-if="item.userType === 1" :src="sessionActive.avatar" />
<el-avatar v-else :src="userInfo.avatar" />
</p>
<p class="user-name">
{{ item.userType === 1 ? sessionActive.nickname : userInfo.nickname }}
<span class="time"
>({{ new Date(item.createTime).toLocaleString().replace(/:d{1,2}$/, '') }})</span
>
</p>
 
原文地址:https://www.cnblogs.com/lhx5213/p/14052425.html