1

app.js

@@ -33,22 +33,22 @@ App({
     // console.log(wx.getStorageSync('access_token'))    //是否注册过
 
 
-    // if (wx.getStorageSync('access_token')) {   //是否注册过
+    if (wx.getStorageSync('access_token')) {   //是否注册过
       
-    //   wx.reLaunch({
-    //     url: '/pages/index/index'        //注册过 进入首页
-    //   })
-
-    // } else if (wx.getStorageSync('wx_id')) {  //是否授权
-    //   // console.log(2);
-    //   wx.reLaunch({
-    //     url: '/pages/Landpage/Land/Land'    //授权过 进入登陆页
-    //   })  
-    // }else {
-    //   wx.reLaunch({
-    //     url: '/pages/Jurisdiction/click_Jurisdiction/click_Jurisdiction'   //未授权  进入授权页
-    //   })
-    // }
+      wx.reLaunch({
+        url: '/pages/index/index'        //注册过 进入首页
+      })
+
+    } else if (wx.getStorageSync('wx_id')) {  //是否授权
+      // console.log(2);
+      wx.reLaunch({
+        url: '/pages/Landpage/Land/Land'    //授权过 进入登陆页
+      })  
+    }else {
+      wx.reLaunch({
+        url: '/pages/Jurisdiction/click_Jurisdiction/click_Jurisdiction'   //未授权  进入授权页
+      })
+    }
 
   
   },

pages/chat/chat.js

@@ -248,6 +248,7 @@ Page({
             data.data[index].showTime = true;
             //自己 
             console.log(getApp().UserToken());
+
             if (data.data[index].form_id == getApp().UserToken()) {
               data.data[index].isMy = true;
               data.data[index].userId = data.data[index].form_id;
@@ -257,6 +258,7 @@ Page({
               data.data[index].isMy = false;
               data.data[index].headUrl = _that.data.headUrl
             }
+            
             _that.ArrMsg.push(data.data[index]);
           }
           // data.data.push(_that.data.chatItems)

pages/information/chat/chat.js

@@ -1,30 +1,71 @@
 const app = getApp();
-
+const ImageType = 'images';
+const TextType = 'text';
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    focus: false,
-    // scrollTop: 100,
+    scrollTopVal: 1,    //滚动条
     menu: false, //菜单显示隐藏
-    uploadImages: ["/image/smyz2.png","/image/smyz1.png"], //相册放大图集
+    Expression: false,  // 表情显示隐藏
+    Sendoutshow: false, // 发送按钮显示隐藏
+    menushow: true, //菜单按钮显示隐藏
+    _width:500, //input高度
+    // uploadImages: ["/image/smyz2.png","/image/smyz1.png"], //相册放大图集
     news:'',//input消息
-    inputValue: null,  //input 的 value 
-
-    messages:'',//接收消息数据
+    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;
-    console.log(options);
+
+    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;
-    this.SocketSend({ to_id: friend.to_id, form_id: getApp().UserId(), type: 'get_history', page: this.data.limit_page });
 
+    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;
+
+
+
   },
 
 
@@ -33,18 +74,35 @@ Page({
     var that = this;
     that.setData({ 
       menu: false, //关闭底部菜单
+      Expression: false, //关闭表情
     })
   },
 
+
 // 底部菜单显示隐藏切换
   chatInputExtraClickEvent:function(){
         var that = this;
     that.setData({
-      menu: !that.data.menu   
+      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;
@@ -52,7 +110,7 @@ Page({
     // console.log(e.currentTarget.dataset.src,)
     wx.previewImage({
       current: e.currentTarget.dataset.src, // 当前显示图片的http链接
-      urls: that.data.uploadImages, // 需要预览的图片http链接列表
+      urls: [e.currentTarget.dataset.src], // 需要预览的图片http链接列表
     })
 
 
@@ -60,32 +118,20 @@ Page({
 
 
 
-// 发送消息事件
-  Sendout: function (e) {
-    var that = this;
-    console.log(that.data.news);
-
-    that.setData({
-      menu: false,  //隐藏底部菜单
-      inputValue: '',  //清空 input
-      messages: that.data.news,  //显示信息
-    })
-    console.log('发送');
-    
-  },
-
-  //输入框
+  //input输入框
   Telephone: function (e) {
     var that = this;
-    // console.log(e.detail.value);
-
+    console.log(e.detail.value);
     that.setData({
       news: e.detail.value,     //获取输入文字
     })
+ 
 
+    that.Sendoutswitch(e.detail.value); // 发送键切换
   },
 
 
+
   // 上传图片
   chooseImageTap: function () {
     var that = this;
@@ -95,18 +141,52 @@ Page({
       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({
@@ -119,30 +199,305 @@ Page({
         }
       }
     })
-
   },
-    SocketSend: function (msg) {
+
+
+
+// 发送消息
+  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) {
+       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) {
+
+      }, fail: function (res) {    //发送失败
+
         console.log('获取历史消息失败')
+
       }
     })
+
   },
+
+
+// 接收消息
   onSocketMessageCallback: function (e) {
+    var that = this;
     let data = JSON.parse(e);
-   
-      console.log(data,'接受消息成功');
+
+    //  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宽度
+      })
+    }
+  },
+
+
+
 })

pages/information/chat/chat.wxml

@@ -1,69 +1,72 @@
 
-<!-- <view class='HGJKHJKHJK'> -->
-<scroll-view class="history" scroll-y="true" scroll-with-animation  scroll-top="10000"   bindtap="resetInputStatus">
- 
+   <!-- scroll-top="{{scrollTopVal}}"
+    bindscrolltoupper="upper"
+    bindscrolltolower="lower"
+    bindscroll="scroll" -->
+    
+<scroll-view class="history"     scroll-top="{{scrollTopVal}}"    scroll-y="true" bindtap="resetInputStatus"  bindscrolltoupper="upper" >
+
           <!-- 自己 -->
-           <block  wx:if="{{messages || photo}}">  <!-- wx:for='{{home}}' wx:key="item" wx:for-index="id" -->
-                <view class='my_right c' >
-                          <text class='time'>下午 9:25</text>
+           <block  wx:for='{{Receive_news}}' wx:key="item">
+                <view class='my_right c' wx:if="{{item.isMy === true}}">
+                          <text class='time' wx:if="{{item.time}}">{{item.time}}</text>
                             <!-- 文字-->
-                          <view class='information' wx:if="{{messages}}">
+                          <view class='information' wx:if="{{item.type == 1}}">   
                                   <!--  加载 -->
-                                  <view class='m_state'>
+                                  <!-- <view class='m_state'>
                                          <image class='m_jz' src='/image/jz.png'></image>
-                                  </view>
+                                  </view> -->
                                    <!--  失败 -->
-                                  <view class='m_state' bindtap="retransmission">
+                                  <view class='m_state' bindtap="retransmission" wx:if="{{item.send == false}}">
                                            <image  class='m_jz' src='/image/send_fail.png' mode="aspectFill"></image>
                                   </view>
 
-                                  <text>{{messages}}</text>
+                                  <text>{{item.content}}</text>
 
-
-                                  <image  class='m_tx' src='/image/personal1.jpg' mode="aspectFill"></image>
+                                  <image  class='m_tx' src='{{myheadurl}}' mode="aspectFill"></image>
                                   
-                                
                           </view>
 
                           <!-- 图片 --> 
-                          <view class='m_img' wx:elif="{{photo}}">
+                          <view class='m_img' wx:if="{{item.type == 2}}">
                                   <!--  加载 -->
-                                  <view class='m_state'>
+                                  <!-- <view class='m_state'>
                                          <image class='m_jz' src='/image/jz.png'></image>
-                                  </view>
+                                  </view> -->
                                   <!--  失败 -->
-                                  <view class='m_state'> 
+                                  <view class='m_state' bindtap="retransmission"  wx:if="{{item.send == false}}"> 
                                            <image  class='m_jz' src='/image/send_fail.png' mode="aspectFill"></image>
                                   </view>
 
-                                    <image class='m_picture' src='{{photo}}' mode="aspectFill" data-src='/image/smyz2.png'  bindtap='enlarge'></image>
-                                    <image class='m_tx'  src='/image/personal1.jpg'></image>
+                                    <image class='m_picture' src='{{item.content}}' mode="aspectFill" data-src='{{item.content}}'  bindtap='enlarge'></image>
+                                    <image class='m_tx'  src='{{myheadurl}}'></image>
                           </view>
                 </view>
-          </block>
 
-         <!-- 他人 -->
-          <!-- <view class='my_left c'>
-                    <text class='l_time'>下午 9:25</text>
-                  
-                    <view class='l_information'>
-                            <image  class='l_tx' src='/image/personal1.jpg'></image>
-                            <text>阿萨德，啊实打实的，啊  ASD ASD</text>
 
-                    </view>
+              <!-- 他人 -->
+                <view class='my_left c' wx:if="{{item.isMy === false}}">
+                          <text class='l_time' wx:if="{{item.time}}">{{item.time}}</text>
+                        
+                          <view class='l_information' wx:if="{{item.type == 1}}">
+                                  <image  class='l_tx' src='{{headUrl}}'></image>
+                                  <text>{{item.content}}</text>
 
-                    
-                  <view class='l_img'>
-                              <image class='l_tx'  src='/image/personal1.jpg'></image>
-                              <image class='l_picture' src='/image/smyz2.png'  data-src='/image/smyz2.png'  mode="widthFix"  bindtap='enlarge'></image>
-                    </view> 
-          </view> -->
+                          </view>
+
+                          
+                        <view class='l_img' wx:if="{{item.type == 2}}">
+                                    <image class='l_tx'  src='{{headUrl}}'></image>
+                                    <image class='l_picture' src='{{item.content}}'  data-src='{{item.content}}'  mode="widthFix"  bindtap='enlarge'></image>
+                          </view> 
+                </view>
 
+        </block>
   
           <!-- <view style='height:148rpx'></view> -->
 
 </scroll-view>
-     <!-- </view> -->
+
 
 
 <!-- 功能栏 -->
@@ -71,25 +74,28 @@
           <view class='my_bottom c'>
                 
                  <!-- 表情 -->
-                 <image class='l_img' src='/image/bq1.png'></image>
+                 <image class='l_img' src='/image/bq1.png' catchtap="ExpressionClickEvent"></image>
                    
                    <!-- 输入框 -->
-                  <view class="textarea-wrp">
+                  <view class="textarea-wrp " style='width:{{_width}}rpx'>
                        <input  
                        type='text' 
                        value="{{inputValue}}" 
                        bindinput="Telephone" 
                        confirm-type="send" 
-                       cursor-spacing="20" 
+                       cursor-spacing="{{KeyboardHeight}}" 
                        adjust-position="true" 
                        bindconfirm="Sendout"
+                       bindfocus="bindfocusclick"
                        ></input>
                   </view>
 
                   <!-- 菜单 -->
-                  <view hover-class="press-style-opacity" catchtap="chatInputExtraClickEvent"  >
+                  <view hover-class="press-style-opacity" catchtap="chatInputExtraClickEvent"  wx:if="{{menushow}}">
                         <image class='r_img' src='/image/jh1.png'></image>
                  </view>
+                  <!-- 发送按钮 -->
+                 <view class='Send_out' wx:if="{{Sendoutshow}}"  bindtap="Sendout">发送</view>
           </view>
 
         <block wx:if="{{menu}}">
@@ -120,5 +126,18 @@
           </view> 
 
        </block>
+
+
+        <block wx:if="{{Expression}}">
+
+          <view  class="Expression_box  c">
+              <block wx:for='{{connectemojiO}}' wx:key="item">
+                  <view class='Expression_img' bindtap='Expression' data-id='{{item}}'>{{item}}</view>
+              </block>
+
+          </view> 
+
+       </block>
+
 </view>
 

pages/information/chat/chat.wxss

@@ -47,7 +47,7 @@ page {background-color: #EDEDED; height: 100%;}
 
 
 
-.textarea-wrp{float:left;width:500rpx;background-color: #fff;margin-left:86rpx;height:80rpx;
+.textarea-wrp{float:left;background-color: #fff;margin-left:86rpx;height:80rpx;
     padding:0 20rpx;border-radius:6rpx;
     display: flex;
     align-items: center; 
@@ -55,6 +55,8 @@ page {background-color: #EDEDED; height: 100%;}
     flex-direction: column;
 }
 
+
+
 .textarea-wrp input{
     font-size:30rpx;
     width:100%; 
@@ -94,3 +96,19 @@ page {background-color: #EDEDED; height: 100%;}
     margin-top: 10rpx
 }
 
+.Expression_box{    
+    margin-top:25rpx;
+    background-color: rgba(246, 246, 246, 0.98);
+    border-top:1px solid #EEE;
+    padding:0 40rpx;
+    }
+.Expression_img{
+float:left;
+margin-top:40rpx;
+margin-right:26rpx;
+
+}
+
+.Expression_box  .Expression_img:nth-child(10n){margin-right:0;}
+
+.Send_out{background:#4fa2f3;float:right;font-size:31rpx;color:#FFF;height:80rpx;width:120rpx;text-align:center;line-height:80rpx;border-radius:10rpx;}