yhb/pages/chat/chat.js

// pages/list/list.js
import * as chatInput from "../../modules/chat-input/chat-input";
import IMOperator from "./im-operator";
import UI from "./ui";
import MsgManager from "./msg-manager";

/**
 * 聊天页面
 */
Page({
    /**
     * 页面的初始数据
     */
    data: {
        textMessage: '',
        chatItems: [],
        latestPlayVoicePath: '',
        isAndroid: true,
        chatStatue: 'open',
        limit_page:1,
        charItem_message:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.ArrMsg = [];
      // to_id
      // nickname
      // headUrl
      // wx.startPullDownRefresh
    //请空未读消息条数
      console.log(options,'chat');
      const friend = options;
      this.SocketSend({ to_id: friend.to_id, form_id: getApp().UserId(), type: 'get_history', page: this.data.limit_page});

      getApp().Imsocket().onSocketMessageCallback = this.onSocketMessageCallback;
      // const friend = JSON.parse(options.friend);//获取传递进来的信息
      this.setData({
        friendId: friend.to_id,
        myheadurl: friend.myheadurl,
        headUrl: friend.headUrl
      })
      // console.log(friend);
      // return false;
        this.initData();
        //设置bar内容
        wx.setNavigationBarTitle({
          title: friend.nickName || ''
        });
        this.imOperator = new IMOperator(this, friend);

        this.UI = new UI(this);
        this.msgManager = new MsgManager(this);

        // this.imOperator.onSimulateReceiveMsg((msg) => {
        //   console.log(msg);
        //     this.msgManager.showMsg({msg})
        // });
      // this.UI.updateChatStatus('正在聊天中：' + friend.nickname);
    },
  onShow: function (e) {
    //获取历史消息getget
    this.onLoad();

  },
    initData() {
        let that = this;
        let systemInfo = wx.getSystemInfoSync();
        chatInput.init(this, {
            systemInfo: systemInfo,
            minVoiceTime: 1,
            maxVoiceTime: 60,
            startTimeDown: 56,
            format: 'mp3',//aac/mp3
            sendButtonBgColor: 'mediumseagreen',
            sendButtonTextColor: 'white',
            extraArr: [{
                picName: 'choose_picture',
                description: '照片'
            }
            // , {
            //     picName: 'take_photos',
            //     description: '拍摄'
            // }, {
            //     picName: 'close_chat',
            //     description: '自定义功能'
            // }
            ],
            // tabbarHeigth: 48
        });

        that.setData({
            pageHeight: systemInfo.windowHeight,
            isAndroid: systemInfo.system.indexOf("Android") !== -1,
        });
        wx.setNavigationBarTitle({
            title: '好友'
        });
        that.textButton();
        that.extraButton();
        that.voiceButton();
    },
    textButton() {
        let _that = this;
        chatInput.setTextMessageListener((e) => {
            console.log(e,'发送的消息');
            let content = e.detail.value;
            this.msgManager.sendMsg({type: IMOperator.TextType, content});
        });
    },
    voiceButton() {
        console.log(1);
        // chatInput.recordVoiceListener((res, duration) => {
        //     let tempFilePath = res.tempFilePath;
        //     this.msgManager.sendMsg({type: IMOperator.VoiceType, content: tempFilePath, duration});
        // });
        // chatInput.setVoiceRecordStatusListener((status) => {
        //     this.msgManager.stopAllVoice();
        // })
    },

    //模拟上传文件，注意这里的cbOk回调函数传入的参数应该是上传文件成功时返回的文件url，这里因为模拟，我直接用的savedFilePath
    simulateUploadFile({savedFilePath, duration, itemIndex, success, fail}) {
        setTimeout(() => {
            let urlFromServerWhenUploadSuccess = savedFilePath;
            success && success(urlFromServerWhenUploadSuccess);
        }, 1000);
    },
    extraButton() {
      let that = this;
        chatInput.clickExtraListener((e) => {

          console.log('图片上传111111111111');
            let chooseIndex = parseInt(e.currentTarget.dataset.index);
            if (chooseIndex === 2) {
                that.myFun();
                return;
            }
            wx.chooseImage({
                count: 5, // 默认9
                sizeType: ['compressed'],
                sourceType: chooseIndex === 0 ? ['album'] : ['camera'],
                success: (res) => {
                      let ImgRes = res;
                    //发送上传图片
                  //上传图片
                  wx.uploadFile({
                    url: getApp().globalData.url + 'imsocket/images/chatimg',
                    filePath: res.tempFilePaths[0],
                    name: 'photo',
                    formData: {
                      key: wx.getStorageSync('access_key'),
                      token: wx.getStorageSync('access_token')
                    },
                    success: function (res) {
                      var data = JSON.parse(res.data);
                      console.log(data,'图片上传成功');
                      if (data.code == 201) {
                        let con = data.data;
                        //显示图片
                        console.log(con,1);
                        console.log(ImgRes.tempFilePaths[0], 1222222);
                      
                        that.msgManager.sendMsg({ type: IMOperator.ImageType, content: con })
                      } else if (data.code == 301) {
                        wx.showModal({
                          title: '提示',
                          content: data.msg,
                          showCancel: false,
                        })
                      }
                    }, fail: function (d) {
                    }
                  })
                  // that.msgManager.sendMsg({ type: IMOperator.ImageType, content: res.tempFilePaths[0] })
                }
            });

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

    resetInputStatus() {
        chatInput.closeExtraView();
    },
    sendMsg({content, itemIndex, success}) {
      //发送消息
        this.imOperator.onSimulateSendMsg({
            content,
            success: (msg) => {
                this.UI.updateViewWhenSendSuccess(msg, itemIndex);
                success && success(msg);
            },
            fail: () => {
                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);
        this.msgManager.resend({...item, itemIndex});
    },
  onSocketMessageCallback:function(e){
    let data = JSON.parse(e);
    console.log(data,11222);
    let _that = this;
    if(data.type){
      switch (data.type) {
        case 'get_history':
       
          console.log(data, '分页消息');
          for (var index in data.data) {
            switch(data.data[index].type){
                case 1:
                data.data[index].type = 'text';
                break;
                case 2:
                data.data[index].type = 'image';
                break
            }
            data.data[index].timestamp = data.data[index].create_at;
            // data.data[index].time = data.data[index].create_at;
            data.data[index].showTime = true;
            //自己 
            if (data.data[index].form_id == getApp().UserId()) {
              data.data[index].isMy = true;
              data.data[index].userId = data.data[index].form_id;
              data.data[index].headUrl = _that.data.myheadurl
            } else {
              //别人
              data.data[index].isMy = false;
              data.data[index].headUrl = _that.data.headUrl
            }
            _that.ArrMsg.push(data.data[index]);
          }
          // data.data.push(_that.data.chatItems)
          // let content = data.data;
          // _that.msgManager.showMsg({ type: IMOperator.TextType, content});
            // console.log(CharItemMessage);
          _that.scrollTopValLength = data.data.length
          if (_that.data.limit_page == 1){
            _that.scrollTopValLength = data.data.length * 999
          }else{
            _that.scrollTopValLength = data.data.length * 100
          }
          _that.setData({
            chatItems: _that.sortarr(_that.ArrMsg),
            scrollTopVal: _that.scrollTopValLength
          })
          break;
        case 'alone':
          let content = data.data.content;
          let msg = _that.imOperator.createNormalChatItem({
            type: 'text',
            content: content,
            isMy: false
          })
          _that.msgManager = new MsgManager(_that);
          _that.msgManager.showMsg({ msg});
          break;

      }
    }

 
  

    // let msg = data.data
    // this.msgManager.showMsg({ msg})
        // console.log(e,'接受到历史消息');
  },

  onUnload:function(e){
    console.log('销毁页面');
  },
  SocketSend:function(msg){
    // { to_id: friend.to_id, form_id: getApp().UserId(), type: 'get_history' }
    // msg.type = 'get_history';
    getApp().Imsocket().sendSocketMessage({
      msg: JSON.stringify(msg),
      success: function (res) {
        console.log(res, '获取历史消息成功');
      }, fail: function (res) {
        console.log('获取历史消息失败')
      }
    })
  },
  sortarr: function (arr) {//冒泡排序
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j].create_at > arr[j + 1].create_at) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    return arr;
  },
  upper:function(e){
    console.log(e);
    let _that = this;
    this.setData({
      limit_page: this.data.limit_page * 1 + 1
    })
   
    this.SocketSend({ to_id: _that.data.friendId, form_id: getApp().UserId(), type: 'get_history', page: _that.data.limit_page})
  },
  emojis:function(){
      console.log(1111);
  }
});