RealtorEasier/im/pages/chat/chat.js

// pages/list/list.js
import IMOperator from "./im-operator";
import UI from "./ui";
import MsgManager from "./msg-manager";
import ImApi from './../../apis/im'
import { API_BASE_URL } from './../../config/config'
import AgentApi from '../../apis/agent'
/**
 * 聊天页面
 */
Page({

    /**
     * 页面的初始数据
     */
    data: {
        textMessage: '',
        chatItems: [],
        latestPlayVoicePath: '',
        chatStatue: 'open',
        extraArr: [{
            picName: 'choose_picture',
            description: '照片'
        }, {
            picName: 'take_photos',
            description: '拍摄'
        },],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // const friend = JSON.parse({});
        this.setData({
            pageHeight: wx.getSystemInfoSync().windowHeight,
            toId: options.toId
        });
        wx.setNavigationBarTitle({
            title: options.toName || '聊天页面'
        })
        
        this.getAgencyDetail(options.toId).then(res => {
            console.log(res)
            this.imOperator = new IMOperator(this, res);
            this.getHistory(options.toId)
            this.UI = new UI(this);
            this.msgManager = new MsgManager(this);
            this.listener = (msg) => {
                console.log(msg, 'msg')
                if (msg.fromId === options.toId) {
                    this.onlyGetHistory(options.toId)
                    this.msgManager.showMsg({msg})
                }
            }
            this.imOperator.onSimulateReceiveMsg(this.listener);
        })
        
    },
    onHide () {
        
    },
    onReady() {
        this.chatInput = this.selectComponent('#chatInput');
    },
    onSendMessageEvent(e) {
        let content = e.detail.value;
        this.msgManager.sendMsg({type: 'TYPE_ONE', msgType: IMOperator.TextType, content,  toId: this.data.toId, fromId: getApp().globalData.userinfo.user_id});
    },
    onVoiceRecordEvent(e) {
        const {detail: {recordStatus, duration, tempFilePath, fileSize,}} = e;
        if (recordStatus === 2) {
            this.msgManager.sendMsg({
                msgType: IMOperator.VoiceType,
                content: tempFilePath,
                duration: Math.floor(duration / 1000),
                toId: this.data.toId
            });
        }
        this.msgManager.stopAllVoice();
    },
    /**
     * 点击extra中的item时触发
     * @param e
     */
    onExtraItemClickEvent(e) {
        let chooseIndex = parseInt(e.detail.index);
        if (chooseIndex === 2) {
            this.myFun();
            return;
        }
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'],
            sourceType: chooseIndex === 0 ? ['album'] : ['camera'],
            success: (res) => {
                this.msgManager.sendMsg({msgType: IMOperator.ImageType, content: res.tempFilePaths[0], toId: this.data.toId})
            }
        });
    },
    /**
     * 点击extra按钮时触发
     * @param e
     */
    onExtraClickEvent(e) {
        console.log(e);
    },
    //模拟上传文件，注意这里的cbOk回调函数传入的参数应该是上传文件成功时返回的文件url，这里因为模拟，我直接用的savedFilePath
    simulateUploadFile({savedFilePath, duration, itemIndex}) {
        return new Promise((resolve, reject) => {
            wx.uploadFile({
              filePath: savedFilePath,
              name: 'file',
              url: `${API_BASE_URL}/im/upload`,
              header: {
                "Content-Type": "multipart/form-data"
                },
              success: (res) => {
                  res = JSON.parse(res.data)
                  
                    resolve({url: `${API_BASE_URL}/im/download/${res.data}`});
              },
              fail: (err) => {
                  console.log(err, 'err')
              }
            })
        });
    },

    /**
     * 自定义事件
     */
    myFun() {
        wx.showModal({
            title: '小贴士',
            content: '演示更新会话状态',
            confirmText: '确认',
            showCancel: true,
            success: (res) => {
                if (res.confirm) {
                    this.msgManager.sendMsg({type: IMOperator.CustomType})
                }
            }
        })
    },

    resetInputStatus() {
        this.chatInput.closeExtraView();
    },

    onUnload() {
        this.msgManager.stopAllVoice();
        this.imOperator.removeSimulateReceiveMsg(this.listener)
    },

    async sendMsg({content, itemIndex}) {
        try {
            const {msg} = await this.imOperator.onSimulateSendMsg({content})
            this.UI.updateViewWhenSendSuccess(msg, itemIndex);
            return {msg};
        } catch (e) {
            console.error(e);
            this.UI.updateViewWhenSendFailed(itemIndex);
        }
    },
    /**
     * 重发消息
     * @param e
     */
    resendMsgEvent(e) {
        const itemIndex = parseInt(e.currentTarget.dataset.resendIndex);
        const item = this.data.chatItems[itemIndex];
        this.UI.updateDataWhenStartSending(item, false, false);
        console.log(item)
        this.msgManager.resend({...item, itemIndex});
    },

    getHistory (friend_id) {
        return ImApi.getMsgHistory(friend_id).then(res => {
            res.data.reverse().forEach(item => {
                if (item.content) {
                    item.isMy = item.fromId === getApp().globalData.userinfo.user_id;
                    this.msgManager.showMsg({msg: this.imOperator.createNormalChatItem(item)})
                }
            })
        })
    },
    onlyGetHistory (friend_id) {
        return ImApi.getMsgHistory(friend_id)
    },
    getAgencyDetail (agency_id) {
        agency_id = getApp().globalData.userinfo.agency_user_id || agency_id
        const isAgency = getApp().globalData.userinfo.agency_user_id ? true : false
        if (agency_id) {
            return AgentApi.fetchAgentDetail(agency_id).then(res => {
                return {
                    friendHeadUrl: isAgency ? 'data:image/svg+xml;base64,PHN2ZyBpZD0iaW1nX215X2F2YXRhcl9kZWZhdWx0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLmNscy0xIHsNCiAgICAgICAgZmlsbDogI2Q5ZmZmZjsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgZmlsbDogIzczOGM5YjsNCiAgICAgIH0NCg0KICAgICAgLmNscy0zIHsNCiAgICAgICAgZmlsbDogI2Y4ZjFlMDsNCiAgICAgIH0NCg0KICAgICAgLmNscy00IHsNCiAgICAgICAgZmlsbDogIzMwMmIyYjsNCiAgICAgIH0NCg0KICAgICAgLmNscy01IHsNCiAgICAgICAgZmlsbDogI2U0ZWVlZjsNCiAgICAgIH0NCg0KICAgICAgLmNscy02IHsNCiAgICAgICAgZmlsbDogI2YxZjVmMzsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxwYXRoIGlkPSLot6/lvoRfMzcwIiBkYXRhLW5hbWU9Iui3r+W+hCAzNzAiIGNsYXNzPSJjbHMtMSIgZD0iTTMwLjcyNiwzMC40N20tMzAsMGEzMCwzMCwwLDEsMCwzMC0zMCwzMCwzMCwwLDAsMC0zMCwzMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjcyNiAtMC40NykiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzEiIGRhdGEtbmFtZT0i6Lev5b6EIDM3MSIgY2xhc3M9ImNscy0yIiBkPSJNMjIxLjA3NCw4MTcuMjIzYTI4Ljg4OCwyOC44ODgsMCwwLDAtNC44ODMtMS4zNjhoMGMtMS4wMjUtLjItMi4xLS4zNy0zLjIzMi0uNWEyNC4zMDksMjQuMzA5LDAsMCwxLTExLjYyMSwwYy0xLjIxNS4xNDEtMi4zNzUuMzI1LTMuNDY5LjU0Ny4xLjAzMy4yLjA2MS4zLjA5MWwuMS4wMzEtLjEtLjAzMWMtLjEtLjAzLS4yLS4wNTgtLjMtLjA5MWEyOC42MzMsMjguNjMzLDAsMCwwLTQuNjI3LDEuMzExLDIyLjE0MSwyMi4xNDEsMCwwLDAtNS4xLDMuNTY2LDI5Ljk5NSwyOS45OTUsMCwwLDAsMzguMDE3LS4wMTVBMjEuOTEyLDIxLjkxMiwwLDAsMCwyMjEuMDc0LDgxNy4yMjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc3LjE1MiAtNzY3LjU2MikiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzIiIGRhdGEtbmFtZT0i6Lev5b6EIDM3MiIgY2xhc3M9ImNscy0zIiBkPSJNMjk2LjI4NywzNDIuNjE0YTEuNDM5LDEuNDM5LDAsMCwwLTEuMjIxLjE1NywxNi42NTMsMTYuNjUzLDAsMCwwLTEuMDU4LTYuNDgxSDI3Mi4yMjJhMTYuODc2LDE2Ljg3NiwwLDAsMC0xLjA1NCw2Ljc3NSwxLjQ0MSwxLjQ0MSwwLDAsMC0xLjIyNS0uMTU5Yy0xLjA4NC40MDktMS40MTksMi4zNTctLjc0OCw0LjM1czIuMDkzLDMuMjc2LDMuMTc2LDIuODY3YTIzLjcsMjMuNywwLDAsMCw0LjA4Niw3LjkzMnEuNDM4LjUzNy44OTQsMS4wMXY1LjMxN2wtLjA0MSwwYTI0LjMxLDI0LjMxLDAsMCwwLDExLjYyMSwwbC0uMDUzLS4wMDZ2LTUuMzE0cS40NTktLjQ3NS45LTEuMDE3YTIzLjY4MSwyMy42ODEsMCwwLDAsNC4wNzktNy45MTMsMy41NDksMy41NDksMCwwLDAsMy4xNzgtMy4xNzNDMjk3LjcwNiwzNDQuOTcxLDI5Ny4zNzEsMzQzLjAyMywyOTYuMjg3LDM0Mi42MTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUzLjEyNSAtMzE2LjU5NCkiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzMiIGRhdGEtbmFtZT0i6Lev5b6EIDM3MyIgY2xhc3M9ImNscy00IiBkPSJNMzE2LjYyNSwxNzkuMTkzYTIyLjM5MSwyMi4zOTEsMCwwLDAsMS4wNTgsNi43NjFzNS4yLTE1LjEtNC41Ny0xNS4xYzAsMC0yNS4yOTEtOC43OTQtMTkuMzI4LDE1LjQwNWE2LjA4Myw2LjA4MywwLDAsMCwuNDY0LDEuMjI0QzI5OC4yNTUsMTgxLjU1NywzMTEuNTI3LDE4My40NzcsMzE2LjYyNSwxNzkuMTkzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3NS43NDEgLTE1OS4zOTUpIi8+DQogIDxwYXRoIGlkPSLot6/lvoRfMzc1IiBkYXRhLW5hbWU9Iui3r+W+hCAzNzUiIGNsYXNzPSJjbHMtNSIgZD0iTTUxMS43NzIsODE2LjA3MWE2LjYyOCw2LjYyOCwwLDAsMCw0LjMzMSwyLjdzMS41OS0yLjExMywxLjQ3Ny0zLjQwOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00ODEuOCAtNzY3LjU3NSkiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzYiIGRhdGEtbmFtZT0i6Lev5b6EIDM3NiIgY2xhc3M9ImNscy01IiBkPSJNNDE4LjQxNCw4MTYuMDg2YTYuNjI4LDYuNjI4LDAsMCwxLTQuMzMxLDIuN3MtMS41OS0yLjExMy0xLjQ3Ny0zLjQwOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zODguNDQ1IC03NjcuNTkpIi8+DQogIDxwYXRoIGlkPSLot6/lvoRfMzc3IiBkYXRhLW5hbWU9Iui3r+W+hCAzNzciIGNsYXNzPSJjbHMtNiIgZD0iTTUwMyw4NDQuOTgybS0uNTQ2LDBhLjU0Ni41NDYsMCwxLDAsLjU0Ni0uNTQ2QS41NDYuNTQ2LDAsMCwwLDUwMi40NTksODQ0Ljk4MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzMuMDMzIC03OTQuOTM5KSIvPg0KICA8cGF0aCBpZD0i6Lev5b6EXzM3OCIgZGF0YS1uYW1lPSLot6/lvoQgMzc4IiBjbGFzcz0iY2xzLTYiIGQ9Ik01MDIuOTU2LDg4MC43MjNtLS41NDYsMGEuNTQ2LjU0NiwwLDEsMCwuNTQ2LS41NDZBLjU0Ni41NDYsMCwwLDAsNTAyLjQxLDg4MC43MjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDcyLjk4NyAtODI4LjU4NCkiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzkiIGRhdGEtbmFtZT0i6Lev5b6EIDM3OSIgY2xhc3M9ImNscy02IiBkPSJNNTAyLjk1Niw5MTcuMW0tLjU0NiwwYS41NDYuNTQ2LDAsMSwwLC41NDYtLjU0NkEuNTQ2LjU0NiwwLDAsMCw1MDIuNDEsOTE3LjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDcyLjk4NyAtODYyLjgyNCkiLz4NCjwvc3ZnPg0K' : res.data.avatar,
                    myHeadUrl: isAgency ? res.data.avatar : 'data:image/svg+xml;base64,PHN2ZyBpZD0iaW1nX215X2F2YXRhcl9kZWZhdWx0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLmNscy0xIHsNCiAgICAgICAgZmlsbDogI2Q5ZmZmZjsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgZmlsbDogIzczOGM5YjsNCiAgICAgIH0NCg0KICAgICAgLmNscy0zIHsNCiAgICAgICAgZmlsbDogI2Y4ZjFlMDsNCiAgICAgIH0NCg0KICAgICAgLmNscy00IHsNCiAgICAgICAgZmlsbDogIzMwMmIyYjsNCiAgICAgIH0NCg0KICAgICAgLmNscy01IHsNCiAgICAgICAgZmlsbDogI2U0ZWVlZjsNCiAgICAgIH0NCg0KICAgICAgLmNscy02IHsNCiAgICAgICAgZmlsbDogI2YxZjVmMzsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxwYXRoIGlkPSLot6/lvoRfMzcwIiBkYXRhLW5hbWU9Iui3r+W+hCAzNzAiIGNsYXNzPSJjbHMtMSIgZD0iTTMwLjcyNiwzMC40N20tMzAsMGEzMCwzMCwwLDEsMCwzMC0zMCwzMCwzMCwwLDAsMC0zMCwzMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjcyNiAtMC40NykiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzEiIGRhdGEtbmFtZT0i6Lev5b6EIDM3MSIgY2xhc3M9ImNscy0yIiBkPSJNMjIxLjA3NCw4MTcuMjIzYTI4Ljg4OCwyOC44ODgsMCwwLDAtNC44ODMtMS4zNjhoMGMtMS4wMjUtLjItMi4xLS4zNy0zLjIzMi0uNWEyNC4zMDksMjQuMzA5LDAsMCwxLTExLjYyMSwwYy0xLjIxNS4xNDEtMi4zNzUuMzI1LTMuNDY5LjU0Ny4xLjAzMy4yLjA2MS4zLjA5MWwuMS4wMzEtLjEtLjAzMWMtLjEtLjAzLS4yLS4wNTgtLjMtLjA5MWEyOC42MzMsMjguNjMzLDAsMCwwLTQuNjI3LDEuMzExLDIyLjE0MSwyMi4xNDEsMCwwLDAtNS4xLDMuNTY2LDI5Ljk5NSwyOS45OTUsMCwwLDAsMzguMDE3LS4wMTVBMjEuOTEyLDIxLjkxMiwwLDAsMCwyMjEuMDc0LDgxNy4yMjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc3LjE1MiAtNzY3LjU2MikiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzIiIGRhdGEtbmFtZT0i6Lev5b6EIDM3MiIgY2xhc3M9ImNscy0zIiBkPSJNMjk2LjI4NywzNDIuNjE0YTEuNDM5LDEuNDM5LDAsMCwwLTEuMjIxLjE1NywxNi42NTMsMTYuNjUzLDAsMCwwLTEuMDU4LTYuNDgxSDI3Mi4yMjJhMTYuODc2LDE2Ljg3NiwwLDAsMC0xLjA1NCw2Ljc3NSwxLjQ0MSwxLjQ0MSwwLDAsMC0xLjIyNS0uMTU5Yy0xLjA4NC40MDktMS40MTksMi4zNTctLjc0OCw0LjM1czIuMDkzLDMuMjc2LDMuMTc2LDIuODY3YTIzLjcsMjMuNywwLDAsMCw0LjA4Niw3LjkzMnEuNDM4LjUzNy44OTQsMS4wMXY1LjMxN2wtLjA0MSwwYTI0LjMxLDI0LjMxLDAsMCwwLDExLjYyMSwwbC0uMDUzLS4wMDZ2LTUuMzE0cS40NTktLjQ3NS45LTEuMDE3YTIzLjY4MSwyMy42ODEsMCwwLDAsNC4wNzktNy45MTMsMy41NDksMy41NDksMCwwLDAsMy4xNzgtMy4xNzNDMjk3LjcwNiwzNDQuOTcxLDI5Ny4zNzEsMzQzLjAyMywyOTYuMjg3LDM0Mi42MTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUzLjEyNSAtMzE2LjU5NCkiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzMiIGRhdGEtbmFtZT0i6Lev5b6EIDM3MyIgY2xhc3M9ImNscy00IiBkPSJNMzE2LjYyNSwxNzkuMTkzYTIyLjM5MSwyMi4zOTEsMCwwLDAsMS4wNTgsNi43NjFzNS4yLTE1LjEtNC41Ny0xNS4xYzAsMC0yNS4yOTEtOC43OTQtMTkuMzI4LDE1LjQwNWE2LjA4Myw2LjA4MywwLDAsMCwuNDY0LDEuMjI0QzI5OC4yNTUsMTgxLjU1NywzMTEuNTI3LDE4My40NzcsMzE2LjYyNSwxNzkuMTkzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3NS43NDEgLTE1OS4zOTUpIi8+DQogIDxwYXRoIGlkPSLot6/lvoRfMzc1IiBkYXRhLW5hbWU9Iui3r+W+hCAzNzUiIGNsYXNzPSJjbHMtNSIgZD0iTTUxMS43NzIsODE2LjA3MWE2LjYyOCw2LjYyOCwwLDAsMCw0LjMzMSwyLjdzMS41OS0yLjExMywxLjQ3Ny0zLjQwOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00ODEuOCAtNzY3LjU3NSkiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzYiIGRhdGEtbmFtZT0i6Lev5b6EIDM3NiIgY2xhc3M9ImNscy01IiBkPSJNNDE4LjQxNCw4MTYuMDg2YTYuNjI4LDYuNjI4LDAsMCwxLTQuMzMxLDIuN3MtMS41OS0yLjExMy0xLjQ3Ny0zLjQwOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zODguNDQ1IC03NjcuNTkpIi8+DQogIDxwYXRoIGlkPSLot6/lvoRfMzc3IiBkYXRhLW5hbWU9Iui3r+W+hCAzNzciIGNsYXNzPSJjbHMtNiIgZD0iTTUwMyw4NDQuOTgybS0uNTQ2LDBhLjU0Ni41NDYsMCwxLDAsLjU0Ni0uNTQ2QS41NDYuNTQ2LDAsMCwwLDUwMi40NTksODQ0Ljk4MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzMuMDMzIC03OTQuOTM5KSIvPg0KICA8cGF0aCBpZD0i6Lev5b6EXzM3OCIgZGF0YS1uYW1lPSLot6/lvoQgMzc4IiBjbGFzcz0iY2xzLTYiIGQ9Ik01MDIuOTU2LDg4MC43MjNtLS41NDYsMGEuNTQ2LjU0NiwwLDEsMCwuNTQ2LS41NDZBLjU0Ni41NDYsMCwwLDAsNTAyLjQxLDg4MC43MjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDcyLjk4NyAtODI4LjU4NCkiLz4NCiAgPHBhdGggaWQ9Iui3r+W+hF8zNzkiIGRhdGEtbmFtZT0i6Lev5b6EIDM3OSIgY2xhc3M9ImNscy02IiBkPSJNNTAyLjk1Niw5MTcuMW0tLjU0NiwwYS41NDYuNTQ2LDAsMSwwLC41NDYtLjU0NkEuNTQ2LjU0NiwwLDAsMCw1MDIuNDEsOTE3LjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDcyLjk4NyAtODYyLjgyNCkiLz4NCjwvc3ZnPg0K'
                }
            })
        }
        return new Promise(resolve => resolve())
    }
});