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


    聊天使用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>
     
  • 相关阅读:
    CF754A
    快速幂模板
    循环-21. 求交错序列前N项和(15)
    循环-20. 猜数字游戏(15)
    循环-19. 币值转换
    循环-18. 龟兔赛跑(20)
    循环-17. 简单计算器(20)
    循环-11. 水仙花数(20)
    IO 分支 循环
    check list
  • 原文地址:https://www.cnblogs.com/lhx5213/p/14052425.html
Copyright © 2020-2023  润新知