yhb/pages/chat/ui.js

import * as chatInput from "../../modules/chat-input/chat-input";

/**
 * 用户处理消息的收发UI更新
 */
export default class UI {
    constructor(page) {
        this._page = page;
    }

    /**
     * 接收到消息时，更新UI
     * @param msg
     */
    updateViewWhenReceive(msg) {
     
        this._page.data.chatItems.push(msg);
        // .sort(UI.compare('create_at', 'id'))
      console.log(this._page.data.chatItems.length * 999);
        this._page.setData({
          chatItems: this._page.data.chatItems,
            scrollTopVal: this._page.data.chatItems.length * 999,
        });
    }

    /**
     * 发送消息时，渲染消息的发送状态为 发送中
     * @param sendMsg
     * @param cbOk
     */
    showItemForMoment(sendMsg, cbOk) {
      
        if (!sendMsg) return;
        this.updateDataWhenStartSending(sendMsg);
        cbOk && cbOk(this._page.data.chatItems.length - 1);
    }

    /**
     * 设置消息发送状态为 发送中
     * @param sendMsg
     * @param addToArr
     * @param needScroll
     */
    updateDataWhenStartSending(sendMsg, addToArr = true, needScroll = true) {
        chatInput.closeExtraView();
        sendMsg.sendStatus = 'sending';
        addToArr && this._page.data.chatItems.push(sendMsg);
        let obj = {};
        obj['textMessage'] = '';
        obj['chatItems'] = this._page.data.chatItems;
        needScroll && (obj['scrollTopVal'] = this._page.data.chatItems.length * 999);
        this._page.setData(obj);
    }

    /**
     * 设置消息发送状态为 发送成功
     * @param sendMsg
     * @param itemIndex
     */
    updateViewWhenSendSuccess(sendMsg, itemIndex) {
        console.log('发送成功', sendMsg);
        let that = this._page;
        let item = that.data.chatItems[itemIndex];
        item.timestamp = sendMsg.timestamp;
        this.updateSendStatusView('success', itemIndex);
    }

    updateListViewBySort() {
        this._page.setData({
            chatItems: this._page.data.chatItems.sort(UI._sortMsgListByTimestamp)
        })
    }

    /**
     * 设置消息发送状态为 发送失败
     * @param itemIndex
     */
    updateViewWhenSendFailed(itemIndex) {
        this.updateSendStatusView('failed', itemIndex);
    }

    updateSendStatusView(status, itemIndex) {
        let that = this._page;
        that.data.chatItems[itemIndex].sendStatus = status;
        let obj = {};
        obj[`chatItems[${itemIndex}].sendStatus`] = status;
        that.setData(obj);
    }

    updateChatStatus(content, open = true) {
        this._page.setData({
            chatStatue: open ? 'open' : 'close',
            chatStatusContent: content
        })
    }

    static _sortMsgListByTimestamp(item1, item2) {
        return item1.timestamp - item2.timestamp;
    }

   static compare(name1, name2) {
       // 这里的参数 a, b 是比较的第一个元素 a，第二个元素 b
       return function (a, b) {
          let fir1 = a[name1];
           let sec1 = b[name1];
           if (fir1 === sec1) {
               let fir2 = a[name2];
               let sec2 = b[name2];
               if (fir2 === sec2) {
                   return 0; // 表示位置不变
          
        } else {
                   return fir2 > sec2 ? -1 : 1; // 表示从大到小排序 
          
        }
        
      } else {
               return fir1 > sec1 ? 1 : -1; // 表示从小到大排序
        
      }
      
    }
    
  }

}