联调聊天页面

pages/chat/index.js

@@ -9,13 +9,17 @@ import {
 import {
   store
 } from '~/store/index'
+let interval = null
 const app = getApp()
 Page({
   data: {
     targetUid: '',
     value: '',
     list: [],
-    totalSize: 0,
+    pageNo: 1,
+    totalNo: 1,
+    scrollTop: 0,
+    triggered: false,
     isIos: app.globalData.isIOS,
     uid: wx.getStorageSync('uid')
   },
@@ -36,20 +40,32 @@ Page({
     this.storeBindings.updateStoreBindings()
     this.getMsgDet()
     this.getNewMsgDet()
+    this.interval = setInterval(() => {
+      this.getNewMsgDet()
+    }, 5000)
   },
   async getMsgDet() {
+    let pageNo = this.data.pageNo
+    if (this.data.totalNo < pageNo) {
+      return this.setData({
+        triggered: false,
+      })
+    }
     let data = await getMsgDet({
       senderUid: this.data.targetUid,
-      pageNo: 1,
+      pageNo,
       pageSize: 10
     })
+
     let {
       list,
-      totalSize
+      totalNo
     } = data
     this.setData({
-      list,
-      totalSize
+      list: [...list, ...this.data.list],
+      totalNo,
+      pageNo: totalNo >= pageNo ? ++pageNo : pageNo,
+      triggered: false,
     })
     console.log('就列表', data);
   },
@@ -58,10 +74,10 @@ Page({
       senderUid: this.data.targetUid,
     })
     let newList = [...this.data.list, ...res]
-    console.log(newList);
-    /* this.setData({
-      list: newList
-    }) */
+    this.setData({
+      list: newList,
+      scrollTop: 100000
+    })
   },
   async sendReply() {
     if (!this.data.value) {
@@ -69,19 +85,15 @@ Page({
     }
     await sendMsg({
       content: this.data.value,
+      type: '1',
       receiverUid: this.data.targetUid
     })
     this.setData({
-      value: ''
+      value: '',
+      scrollTop: 3000
     })
     this.getNewMsgDet()
   },
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-    console.log('1');
-  },
   chooseImage() {
     wx.chooseImage({
       count: 1, // 可选择的图片数量
@@ -103,9 +115,9 @@ Page({
         uid: wx.getStorageSync('uid')
       },
       success: async (res) => {
-        console.log(res.data);
         await sendMsg({
           content: JSON.parse(res.data).data,
+          type: '2',
           receiverUid: this.data.targetUid
         })
         this.getNewMsgDet()

pages/chat/index.less

@@ -3,14 +3,16 @@
   background-color: white;
 
   .content {
-    padding: 20rpx 30rpx 150rpx;
+    height: 100vh;
+    padding: 0rpx 30rpx 150rpx;
+    box-sizing: border-box;
 
     .base {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       margin-bottom: 42rpx;
-
+      margin-top: 20rpx;
       .avatar {
         width: 80rpx;
         height: 80rpx;
@@ -28,6 +30,11 @@
         background-color: #F2F6FC;
         word-break: break-all;
       }
+
+      .msgImg {
+        margin-right: 24rpx;
+        max-width: 200rpx;
+      }
     }
 
     .someone {

pages/chat/index.wxml

@@ -1,16 +1,19 @@
 <view class="chat">
-  <view class="content">
+  <scroll-view scroll-y="true" class="content" scroll-top="{{scrollTop}}" enhanced show-scrollbar='{{false}}'
+    refresher-enabled bindrefresherrefresh='getMsgDet' refresher-triggered="{{triggered}}">
     <block wx:for="{{list}}" wx:key="id">
       <view class="base someone" wx:if="{{uid!=item.senderUid}}">
         <image src="{{item.user.avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{item.receiverUid}}' />
-        <view class="message">{{item.content}}</view>
+        <view class="message" wx:if="{{item.type==1}}">{{item.content}}</view>
+        <image src="{{item.content}}" wx:else class="msgImg" mode="widthFix" />
       </view>
       <view class="base self" wx:else>
-        <view class="message">{{item.content}}</view>
+        <view class="message" wx:if="{{item.type==1}}">{{item.content}}</view>
+        <image src="{{item.content}}" wx:else class="msgImg" mode="widthFix" />
         <image src="{{userInfo.avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{item.senderUid}}' />
       </view>
     </block>
-  </view>
+  </scroll-view>
   <view class="inputBox {{isIos?'iosPadding':''}}">
     <input class="input" bindinput="bindKeyInput" value="{{value}}" placeholder="我有话说..." confirm-type='sendReply'
       maxlength="100" />

pages/chat/index.wxss

@@ -3,13 +3,16 @@
   background-color: white;
 }
 .chat .content {
-  padding: 20rpx 30rpx 150rpx;
+  height: 100vh;
+  padding: 0rpx 30rpx 150rpx;
+  box-sizing: border-box;
 }
 .chat .content .base {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 42rpx;
+  margin-top: 20rpx;
 }
 .chat .content .base .avatar {
   width: 80rpx;
@@ -27,6 +30,10 @@
   background-color: #F2F6FC;
   word-break: break-all;
 }
+.chat .content .base .msgImg {
+  margin-right: 24rpx;
+  max-width: 200rpx;
+}
 .chat .content .someone {
   justify-content: flex-start;
 }

pages/message/index.js

@@ -46,7 +46,9 @@ Page({
     })
   },
   loadMore() {
-    this.getData(getMessageRecord)
+    this.getData(getMessageRecord, {
+      pageSize: 20
+    })
   },
   setSearch({
     detail
@@ -137,4 +139,7 @@ Page({
       url: `/pages/chat/index?title=${nickName||eid}&uid=${uid}`,
     })
   },
+  onReachBottom() {
+    this.loadMore()
+  }
 })