yhb/pages/information/chat/chat.js

const app = getApp();
const ImageType = 'images';
const TextType = 'text';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollTopVal: 1,    //滚动条
    menu: false, //菜单显示隐藏
    Expression: false,  // 表情显示隐藏
    Sendoutshow: false, // 发送按钮显示隐藏
    menushow: true, //菜单按钮显示隐藏
    _width:500, //input高度
    // uploadImages: ["/image/smyz2.png","/image/smyz1.png"], //相册放大图集
    news:'',//input消息
    KeyboardHeight: 366.66666666666674, //键盘高度
    ExpressionImg:'', //表情
    inputValue:'',  //input 的 value 
    photo:'', //相片

    Receive_news:'', //历史消息
    UserToken:'',  //区分自己
    limit_page:1,

    myheadurl:'', //我的头像
    headUrl:'', //他人头像

    to_id:'',    //他人
    form_id:'',   //自己

    // scrollTop:'' //下拉更多时的位置
    connectemojiO: ['😊','😅','😲', '😭', '😂', '😄', '😩', '😞', '😵', '😒', '😍', '😤', '😜', '😝', '😋', '😘', '😚', '😷', '😳', '😃', '😆', '😁', '😢', '😨', '😠', '😣', '😌', '😖', '😔', '😰', '😱', '😪', '😏', '😓'],

  },


  onLoad: function (options) {
    var that = this;

    that.ArrMsg = [];
    // console.log(that.data.UserToken);
    // console.log(options.headUrl);
    // console.log(options.myheadurl);
    // console.log(getApp().UserId(),'token');

    // console.log(options);
    const friend = options;

    that.setData({
      to_id: friend.to_id,  // 他人
      UserToken: getApp().UserToken(),   //自己
      myheadurl: options.myheadurl, //我的头像
      headUrl: options.headUrl, //他人头像
    })


    this.SocketSend({
        //  to_id: friend.to_id,    // 他人
        //  form_id: getApp().UserId(),   //自己
         type: 'get_history', 
         page: this.data.limit_page
    });
    getApp().Imsocket().onSocketMessageCallback = this.onSocketMessageCallback;



  },


// 点击scroll-view 关闭底部菜单
  resetInputStatus: function() {
    var that = this;
    that.setData({ 
      menu: false, //关闭底部菜单
      Expression: false, //关闭表情
    })
  },


// 底部菜单显示隐藏切换
  chatInputExtraClickEvent:function(){
        var that = this;
    that.setData({
      menu: !that.data.menu,
      Expression: false, //关闭表情
    })
  },



  // 关闭表情显示隐藏切换
ExpressionClickEvent: function () {
    var that = this;
    that.setData({
      Expression: !that.data.Expression,
      menu: false, //关闭底部菜单
    })
  },

  



// 相册点击放大
  enlarge: function (e) {
    var that = this;
    // console.log(that.data.uploadImages)
    // console.log(e.currentTarget.dataset.src,)
    wx.previewImage({
      current: e.currentTarget.dataset.src, // 当前显示图片的http链接
      urls: [e.currentTarget.dataset.src], // 需要预览的图片http链接列表
    })


  },



  //input输入框
  Telephone: function (e) {
    var that = this;
    console.log(e.detail.value);
    that.setData({
      news: e.detail.value,     //获取输入文字
    })
 

    that.Sendoutswitch(e.detail.value); // 发送键切换
  },



  // 上传图片
  chooseImageTap: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(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.SocketSend({type: ImageType,  content: con});

              // that.msgManager.sendMsg({ type: IMOperator.ImageType, content: con })

            } else if (data.code == 301) {
              wx.showModal({
                title: '提示',
                content: data.msg,
                showCancel: false,
              })
            }
          }, fail: function (d) {
          }
        })
        console.log(res.tempFilePaths[0]);
        // tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          photo: res.tempFilePaths[0],
          menu: false, //菜单显示隐藏
        });

      }
    })
  },
  


  // 重发消息
  retransmission:function(){
    wx.showModal({
      content: '重发该消息？',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },



// 发送消息
  SocketSend: function (msg) {
    var that =this;
    msg.form_id = getApp().UserId();
    msg.to_id = that.data.to_id;

    // console.log(that.data.Receive_news);

    // { 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) {   //发送成功

        // 我跟他人说话
        switch(msg.type){
       
          case "alone":     //  发送文本

            console.log(' 发送文本');
            var obj = {     //创建对象，用来合并历史消息对象
              content: that.data.news,     //发送消息内容  
              type: 1,                            //类型 1 : 文字类型     类型 2 : 图片
              time: Date.now(),         //时间
              isMy: true,   //自己
              send: true,   //    发送成功  为true   失败false 
              };
            let _Receive_news =  that.data.Receive_news;
            _Receive_news.push(obj);   //合并历史消息对象

            console.log(_Receive_news,'aaa');
            that.setData({
              Receive_news: _Receive_news,     //前台数据赋值 
            });

            //调用页面滚动条处理
            that.scrollbar(_Receive_news);
  
           break;

           case "images":   //  发送图片
    
            console.log(' 发送图片');

            var obj = {     //创建对象，用来合并历史消息对象
              content: that.data.photo,     //发送消息内容  
              type: 2,                            //类型 1 : 文字类型     类型 2 : 图片
              time: Date.now(),         //时间
              isMy: true,   //自己
              send: true,   //    发送成功  为true   失败false 
            };
            let _Receive_img = that.data.Receive_news;
            _Receive_img.push(obj);   //合并历史消息对象

            console.log(_Receive_img, '发送图片');
            that.setData({
              Receive_news: _Receive_img,     //前台数据赋值 
            });

            //调用页面滚动条处理
            that.scrollbar(_Receive_img);




           break; 
        } 

        console.log(res, '获取历史消息成功');

      }, fail: function (res) {    //发送失败

        console.log('获取历史消息失败')

      }
    })

  },


// 接收消息
  onSocketMessageCallback: function (e) {
    var that = this;
    let data = JSON.parse(e);

    //  console.log(data,'接受消息成功');

    var arrData = data.data;

    switch(data.type){
      // 接收历史消息
      case "get_history":
        // console.log(arrData,111112222);
        for (var index in arrData) {     //二次赋值  
          if (arrData[index].form_id == getApp().UserToken()) {   //判断  如果等于自己 true  ，等于他人  false。
            arrData[index].isMy = true;    //自己
            }else{
            arrData[index].isMy = false;   //他人
            }
          that.ArrMsg.push(arrData[index]);
        }

        // 滚动条处理
        var scrollTopValLength = "";
        if (that.data.limit_page == 1) {
          scrollTopValLength = arrData.length * 999
        } else {
          scrollTopValLength = arrData.length * 100
        }

        console.log(that.ArrMsg, 111112222);
        that.setData({
          Receive_news: that.sortarr(that.ArrMsg),        //前台数据赋值 
          scrollTopVal: scrollTopValLength,    // 滚动条赋值
        });

    
        // that.scrollbar(that.ArrMsg);      //调用页面滚动条处理  这里不对
      break; 


      case "alone":       // 接收他人文本
        console.log(arrData,"aaasd");

        var obj = {     //创建对象，用来合并历史消息对象
          content: arrData.content,   //发送消息内容
          type: 1,          //类型 1 : 文字类型     类型 2 : 图片
          time: Date.now(),    //时间
          isMy: false,   //他人
        };

        let _Receive_news = that.data.Receive_news;
        _Receive_news.push(obj);      //合并历史消息对象
     
        that.setData({
          Receive_news: _Receive_news,     //前台数据赋值 
        });

        //调用页面滚动条处理
        that.scrollbar(_Receive_news);
      break; 

      case "images":   // 接收他人图片
        console.log(arrData, "接收图片");

        var obj = {     //创建对象，用来合并历史消息对象
          content: arrData.content,   //发送消息内容
          type: 2,          //类型 1 : 文字类型     类型 2 : 图片
          time: Date.now(),    //时间
          isMy: false,   //他人
        };

        let _Receive_img = that.data.Receive_news;
        _Receive_img.push(obj);      //合并历史消息对象

        that.setData({
          Receive_news: _Receive_img,     //前台数据赋值 
        });

        //调用页面滚动条处理
        that.scrollbar(_Receive_img);


        break; 



    }



  },

// 处理滚动条
  scrollbar: function (data) {
    var that =this;
    if(data){
      let lengNum = data.length;
      //页面滚动条处理

      that.setData({
        scrollTopVal: lengNum * 999
      })
      console.log(lengNum * 999);
    }

  },

  // 发送消息事件  用来获取input数据
  Sendout: function (e) {
    var that = this;
    // console.log(that.data.news);
    
    let msg = {
      // to_id: that.data.to_id,
      // form_id: getApp().UserId(),
      type: 'alone',
      content: that.data.news
    };

    // console.log(msg);
    this.SocketSend(msg);

      that.setData({
        menu: false,  //隐藏底部菜单
        Expression: false,//隐藏表情栏
        inputValue: '',  //清空 input
        news: '', //清空 input内容
      })


    that.Sendoutswitch(that.data.news)  // 发送键切换

    // console.log(that.data.Receive_news)

  },

//冒泡排序
  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;
     that.setData({
       limit_page: that.data.limit_page * 1 + 1
     })
     console.log(that.data.limit_page * 1 + 1)
     that.SocketSend({type: 'get_history', page: that.data.limit_page })

  
  },


// 点击表情
  Expression:function(e){
    var that = this;

    var _news = that.data.news;
    var _text = _news + e.currentTarget.dataset.id;


    console.log(that.data.news) 
    console.log(_text) 
    that.setData({
      news: _text,
      inputValue: _text,
    })

    that.Sendoutswitch(that.data.news) // 发送键切换
  },


// 点击input
  bindfocusclick: function(e) {
    var that = this;
   that.setData({
     Expression: false,
     menu: false,
     KeyboardHeight: e.detail.height,
   })
    console.log(e.detail.height);
  },

  // 发送键切换
  Sendoutswitch: function (data) {
    var that = this;
    if (data == '') {
      that.setData({
        menushow: true,   //菜单按钮显示隐藏
        Sendoutshow: false,// 发送按钮显示隐藏
        _width: 500,   // input宽度
      })
    } else {
      that.setData({
        menushow: false,   //菜单按钮显示隐藏
        Sendoutshow: true,// 发送按钮显示隐藏
        _width: 447,   // input宽度
      })
    }
  },



})