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'   //未授权  进入授权页
+    //   })
+    // }
 
   
   },

app.json

@@ -1,6 +1,7 @@
 {
   "pages": [
-        "pages/personal_core/vehicle/vehicle",
+    "pages/information/chat/chat",
+"pages/personal_core/vehicle/vehicle",
  "pages/personal_core/remind/remind",
   "pages/Jurisdiction/click_Jurisdiction/click_Jurisdiction",
   "pages/Setup/modify/modify",
@@ -14,7 +15,6 @@
   "pages/Setup/Aboutus/Aboutus",
    "pages/Setup/security/security",
    "pages/Setup/Setuplist/Setuplist",
-    "pages/information/chat/chat",
     "pages/payment/Member/Member",
     "pages/personal_core/Album/Album",
      "pages/personal_core/requirements/requirements",

pages/information/chat/chat.js

@@ -1,5 +1,3 @@
-const webSocket = require('../../../utils/websocket.js');
-
 const app = getApp();
 
 Page({
@@ -10,42 +8,119 @@ Page({
   data: {
     focus: false,
     // scrollTop: 100,
+    menu: false, //菜单显示隐藏
+    uploadImages: ["/image/smyz2.png","/image/smyz1.png"], //相册放大图集
+    news:'',//input消息
+    inputValue: null,  //input 的 value 
+
+    messages:'',//接收消息数据
+    photo:'', //相片
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
+
   onLoad: function (options) {
     var that = this;
-    // that.bottom();
-  // 发送
-  //   webSocket.sendSocketMessage({
-  //     msg: JSON.stringify({
-  //       type: 'ping',
-  //       data: '1111',
-  //     })
-  //   });
-  //   webSocket.onSocketMessageCallback = this.onSocketMessageCallback;
 
   },
 
-  // 接收
-  // onSocketMessageCallback: function (e) {
-  //   console.log('33333' + e);
-  // }
+
+// 点击scroll-view 关闭底部菜单
+  resetInputStatus: function() {
+    var that = this;
+    that.setData({ 
+      menu: false, //关闭底部菜单
+    })
+  },
+
+// 底部菜单显示隐藏切换
+  chatInputExtraClickEvent:function(){
+        var that = this;
+    that.setData({
+      menu: !that.data.menu   
+    })
+  },
+
+
+// 相册点击放大
+  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: that.data.uploadImages, // 需要预览的图片http链接列表
+    })
+
+
+  },
+
+
+
+// 发送消息事件
+  Sendout: function (e) {
+    var that = this;
+    console.log(that.data.news);
+
+    that.setData({
+      menu: false,  //隐藏底部菜单
+      inputValue: '',  //清空 input
+      messages: that.data.news,  //显示信息
+    })
+    console.log('发送');
+    
+  },
+
+  //输入框
+  Telephone: function (e) {
+    var that = this;
+    // console.log(e.detail.value);
+
+    that.setData({
+      news: e.detail.value,     //获取输入文字
+    })
+
+  },
+
+
+  // 上传图片
+  chooseImageTap: function () {
+    var that = this;
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success(res) {
+
+        console.log(res.tempFilePaths[0]);
+        // tempFilePath可以作为img标签的src属性显示图片
+        that.setData({
+          photo: res.tempFilePaths[0],
+        });
+
+      }
+    })
+
+
+  },
+  
+  // 重发消息
+  retransmission:function(){
+    wx.showModal({
+      content: '重发该消息？',
+      success(res) {
+        if (res.confirm) {
+          console.log('用户点击确定')
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+
+  }
 
 
-  // 获取hei的id节点然后屏幕焦点调转到这个节点  
-  // bottom: function () {
-  //   var that = this;
-  //   that.setData({
-  //     scrollTop: 1000000
-  //   })
-  // },
 
 
 
-  // bindTextAreaBlur: function (e) {
-  //   console.log(e.detail.value)
-  // }
+  
 })

pages/information/chat/chat.wxml

@@ -1,65 +1,63 @@
 
 <!-- <view class='HGJKHJKHJK'> -->
-<scroll-view class="history" scroll-y="true" scroll-with-animation  scroll-top="10000">
+<scroll-view class="history" scroll-y="true" scroll-with-animation  scroll-top="10000"   bindtap="resetInputStatus">
  
           <!-- 自己 -->
-          <view class='my_right c'>
-                    <text class='time'>下午 9:25</text>
-                      <!-- 文字-->
-                    <view class='information'>
-                            <text>啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的</text>
-                            <image  class='m_tx' src='/image/personal1.jpg'></image>
-                    </view>
-
-                                        <view class='information'>
-                            <text>啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的</text>
-                            <image  class='m_tx' src='/image/personal1.jpg'></image>
-                    </view>
-
-                                        <view class='information'>
-                            <text>啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的</text>
-                            <image  class='m_tx' src='/image/personal1.jpg'></image>
-                    </view>
-
-                                        <view class='information'>
-                            <text>啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的</text>
-                            <image  class='m_tx' src='/image/personal1.jpg'></image>
-                    </view>
-
-                                        <view class='information'>
-                            <text>啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的</text>
-                            <image  class='m_tx' src='/image/personal1.jpg'></image>
-                    </view>
-
-                                        <view class='information'>
-                            <text>啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的啊实打实的</text>
-                            <image  class='m_tx' src='/image/personal1.jpg'></image>
-                    </view>
-
-                     <!-- 图片 -->
-                    <!-- <view class='m_img'>
-                              <image class='m_picture' src='/image/smyz2.png' mode="widthFix"></image>
-                              <image class='m_tx'  src='/image/personal1.jpg'></image>
-                    </view> -->
-          </view>
+           <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>
+                            <!-- 文字-->
+                          <view class='information' wx:if="{{messages}}">
+                                  <!--  加载 -->
+                                  <view class='m_state'>
+                                         <image class='m_jz' src='/image/jz.png'></image>
+                                  </view>
+                                   <!--  失败 -->
+                                  <view class='m_state' bindtap="retransmission">
+                                           <image  class='m_jz' src='/image/send_fail.png' mode="aspectFill"></image>
+                                  </view>
+
+                                  <text>{{messages}}</text>
+
+
+                                  <image  class='m_tx' src='/image/personal1.jpg' mode="aspectFill"></image>
+                                  
+                                
+                          </view>
+
+                          <!-- 图片 --> 
+                          <view class='m_img' wx:elif="{{photo}}">
+                                  <!--  加载 -->
+                                  <view class='m_state'>
+                                         <image class='m_jz' src='/image/jz.png'></image>
+                                  </view>
+                                  <!--  失败 -->
+                                  <view class='m_state'> 
+                                           <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>
+                          </view>
+                </view>
+          </block>
 
          <!-- 他人 -->
-          <view class='my_left c'>
+          <!-- <view class='my_left c'>
                     <text class='l_time'>下午 9:25</text>
-                      <!-- 文字-->
-                    <!-- <view class='l_information'>
+                  
+                    <view class='l_information'>
                             <image  class='l_tx' src='/image/personal1.jpg'></image>
                             <text>阿萨德，啊实打实的，啊  ASD ASD</text>
 
-                    </view> -->
+                    </view>
 
-                     <!-- 图片 -->
+                    
                   <view class='l_img'>
                               <image class='l_tx'  src='/image/personal1.jpg'></image>
-                              <image class='l_picture' src='/image/smyz2.png' mode="widthFix"></image>
-                             
+                              <image class='l_picture' src='/image/smyz2.png'  data-src='/image/smyz2.png'  mode="widthFix"  bindtap='enlarge'></image>
                     </view> 
-          </view>
+          </view> -->
 
   
           <!-- <view style='height:148rpx'></view> -->
@@ -68,6 +66,7 @@
      <!-- </view> -->
 
 
+<!-- 功能栏 -->
 <view class='my_bottom_box'>
           <view class='my_bottom c'>
                 
@@ -76,11 +75,50 @@
                    
                    <!-- 输入框 -->
                   <view class="textarea-wrp">
-                       <textarea auto-height="true" confirm-type="done" bindfocus="focus" maxlength="-1"/>
+                       <input  
+                       type='text' 
+                       value="{{inputValue}}" 
+                       bindinput="Telephone" 
+                       confirm-type="send" 
+                       cursor-spacing="20" 
+                       adjust-position="true" 
+                       bindconfirm="Sendout"
+                       ></input>
                   </view>
 
                   <!-- 菜单 -->
-                 <image class='r_img' src='/image/jh1.png'></image>
-
+                  <view hover-class="press-style-opacity" catchtap="chatInputExtraClickEvent"  >
+                        <image class='r_img' src='/image/jh1.png'></image>
+                 </view>
           </view>
-</view>
+
+        <block wx:if="{{menu}}">
+
+          <view  class="extra-super c"  >
+
+                  <view class="flex-column" style="width: 25%" bindtap='chooseImageTap' data-index="{{index}}">
+                      <image class="extra-image-size" src="/image/m_chat/extra/choose_picture.png" />
+                      <text class="extra-text-size">图片</text>
+                  </view>
+
+                  <!-- <view class="flex-column" style="width: 25%" bindtap="chatInputExtraItemClickEvent" data-index="{{index}}">
+                      <image class="extra-image-size" src="/image/m_chat/extra/choose_picture.png" />
+                      <text class="extra-text-size">图片</text>
+                  </view>
+
+                  <view class="flex-column" style="width: 25%" bindtap="chatInputExtraItemClickEvent" data-index="{{index}}">
+                      <image class="extra-image-size" src="/image/m_chat/extra/choose_picture.png" />
+                      <text class="extra-text-size">图片</text>
+                  </view>
+
+                  <view class="flex-column" style="width: 25%" bindtap="chatInputExtraItemClickEvent" data-index="{{index}}">
+                      <image class="extra-image-size" src="/image/m_chat/extra/choose_picture.png" />
+                      <text class="extra-text-size">图片</text>
+                  </view> -->
+
+
+          </view> 
+
+       </block>
+</view>
+

pages/information/chat/chat.wxss

@@ -15,12 +15,15 @@ page {background-color: #EDEDED; height: 100%;}
 .my_right .time{text-align:center;display:block;}
 /* 文字 */
 .my_right .information{margin-top:30rpx;float:right;}
-.my_right .information text{max-width:474rpx;display:block;float:left;margin-right:20rpx;background:#FFF;border-radius:10rpx;overflow:hidden;padding:18rpx 18rpx;}
+.my_right .information text{max-width:474rpx;display:block;float:left;margin-right:20rpx;background:#8FCBF7;border-radius:10rpx;overflow:hidden;padding:18rpx 18rpx;}
 .my_right  .m_tx{width:80rpx;height:80rpx;border-radius:6rpx;overflow:hidden;}
 
+.my_right .m_state{width:30rpx;float:left;height:80rpx;margin-right:15rpx;}
+.my_right .m_state  .m_jz{width:30rpx;height:30rpx;position:relative;top:22rpx;}
+
 /* 图片*/
 .my_right .m_img{margin-top:30rpx;float:right;}
-.my_right .m_img .m_picture{width:260rpx;float:left;margin-right:24rpx;border-radius:6rpx;max-height:260rpx;}
+.my_right .m_img .m_picture{max-width:260rpx;float:left;margin-right:24rpx;border-radius:6rpx;max-height:260rpx;}
 
 /* 他人 */
 .my_left{padding:20rpx;}
@@ -38,33 +41,56 @@ page {background-color: #EDEDED; height: 100%;}
 
 /* 底部 */
 .my_bottom_box{width:100%;background:rgba(246, 246, 246, 0.98);position:fixed;bottom:0;left:0;padding:20rpx 0 50rpx 0;}
-.my_bottom{padding:0 20rpx;position:relative;min-height:60rpx;}
-.my_bottom .l_img{width:60rpx;height:60rpx;display:block;position:absolute;bottom:0;}
-.my_bottom .r_img{width:60rpx;height:60rpx;display:block;position:absolute;bottom:0;right:24rpx;}
+.my_bottom{padding:0 20rpx;position:relative;height:80rpx;}
+.my_bottom .l_img{width:60rpx;height:60rpx;display:block;position:absolute;bottom:10rpx;}
+.my_bottom .r_img{width:60rpx;height:60rpx;display:block;position:absolute;bottom:10rpx;right:24rpx;}
 
 
 
-.textarea-wrp{float:left;width:500rpx;background-color: #fff;margin-left:86rpx;min-height: 60rpx;
-padding:0 20rpx;border-radius:6rpx;
+.textarea-wrp{float:left;width:500rpx;background-color: #fff;margin-left:86rpx;height:80rpx;
+    padding:0 20rpx;border-radius:6rpx;
     display: flex;
-    align-items: center;
+    align-items: center; 
     justify-content: space-around;        
     flex-direction: column;
 }
 
+.textarea-wrp input{
+    font-size:30rpx;
+    width:100%; 
+  }
 
-/* .textarea-wrp textarea{font-size:20rpx;} */
-
-textarea{
-font-size:30rpx;
-/* border: 1px  solid; */
 
-  /* margin: auto; */
 
-width:100%; 
-max-height:145rpx;overflow:auto;
+/* 更多功能 */
+.press-style-opacity{
+    opacity: 0.5;
+}
 
+.extra-super{
+    /* display: flex; */
+    margin-top:25rpx;
+    /* height: 234rpx; */
+    width: 100%;
+    background-color: rgba(246, 246, 246, 0.98);
+    border-top:1px solid #EEE;
 
 
+}
+.flex-column {
+      padding-top:30rpx ;
+  float: left;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.extra-image-size{
+    width: 114rpx;
+    height: 114rpx
+}
+.extra-text-size{
+    color: #666666;
+    font-size: 24rpx;
+    margin-top: 10rpx
+}
 
-}