聊天中五分钟提示一次时间（需求：参考企业微信）

聊天使用websocket 结合vuex做的 
消息体的类型 单文本 表情 组合  引用  以及发送消息的状态 padding sucess error
后台返回chatlist（聊天记录）里面每条消息都有type（根据type判断消息，头像，名字），还有消息体，以及创建时间（createTIme）
需求参考企业微信（每五分钟提示一次时间戳）
实现思路：聊天记录chatList，处理好的聊天记录newChatList 聊天的第一句话一定会显示时间的也就是为初始时间戳，
然后map依次判断该消息的createtime距时间戳是否大于五分钟，如果大于5分钟了给新的聊天记录加个字段（timemark）并更新时间戳（为了下一条间隔五分钟的消息做时间标记），
最后渲染新的老天记录就ok了（如果聊天数据做分页了就会出现问题，因为第一条数据一定带时间戳的，分页的话就会导致初始时间戳变化，DOM渲染会出现页面闪屏，在解决中。。。）

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>