feature: 添加聊天界面

remeio · Apr 1, 2021 · 2f206f5 · 2f206f5
1 parent b8304e9
commit 2f206f5
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 7 deletions.
diff --git a/pages/message/message.js b/pages/message/message.js
@@ -1,5 +1,5 @@
 // pages/borrow_progress/borrow_progress.js
-import {getDateStrFormDate} from '../../utils/util'
+import { getDateStrFormDate } from '../../utils/util'
 import Toast from '@vant/weapp/dist/toast/toast';
 var globalData = getApp().globalData;
 Page({
@@ -8,12 +8,46 @@ Page({
    * 页面的初始数据
    */
   data: {
+    // 消息列表
+    messageList: [],
+    borrowUserFullName: '',
+    shareUserFullName: '',
     // 状态
     shareRecordId: 0,
     messageContent: '',
     isBorrow: null,
     loading: false
   },
+  getMessageList() {
+    let me = this;
+    wx.request({
+      url: globalData.serverUrl + '/shareRecord/getMessageList',
+      data: { shareRecordId: me.data.shareRecordId },
+      method: 'POST',
+      header: {
+        "Content-Type": "application/json",
+        'authorization': globalData.token
+      },
+      success: function (res) {
+        let dts = res.data
+        if (!dts.success) {
+          return;
+        }
+        // 清空
+        me.setData({
+          messageList: dts.messageDTOList,
+          borrowUserFullName: dts.borrowUserFullName,
+          shareUserFullName: dts.shareUserFullName,
+        })
+        wx.createSelectorQuery().select('#chat').boundingClientRect(function(rect) {
+          wx.pageScrollTo({
+            scrollTop: rect.height,
+            duration: 100
+          })
+        }).exec()
+      }
+    })
+  },
   sendMessage() {
     let me = this;
     me.setData({ loading: true })
@@ -35,7 +69,8 @@ Page({
         me.setData({
           messageContent: ''
         })
-        // TODO 刷新界面
+        // 刷新界面
+        me.getMessageList()
       },
       fail: function (e) {
         console.log(e)
@@ -54,6 +89,7 @@ Page({
       shareRecordId: options.shareRecordId,
       isBorrow: options.operatorType == "borrow"
     });
+    this.getMessageList()
   },
 
   /**

diff --git a/pages/message/message.wxml b/pages/message/message.wxml
@@ -1,7 +1,12 @@
-<view class="page">
-  <van-row>
-    <van-col span="24">
-    </van-col>
+<view class="page" id="chat">
+  <van-row wx:for="{{messageList}}">
+    <view class="left-message" style="float: left"
+      wx:if="{{ (isBorrow && item.operatorType == 1) || (!isBorrow && item.operatorType == 2)}}">
+      {{item.messageContent}}</view>
+    <view class="right-message" style="float: right"
+      wx:if="{{ (isBorrow && item.operatorType == 2) || (!isBorrow && item.operatorType == 1)}}">
+      {{item.messageContent}}</view>
+    <br style="clear: both" />
   </van-row>
   <van-submit-bar wx:if="{{ !loading }}" button-text="发送" bind:submit="sendMessage" tip="{{ true }}">
     <view>

diff --git a/pages/message/message.wxss b/pages/message/message.wxss
@@ -1 +1,32 @@
-/* pages/message/message.wxss */
+/* pages/message/message.wxss */
+.left-message {
+  border-radius: 0px 12px 12px 12px;
+  padding: 8px;
+  max-width: 60%;
+  background-color: #ffffff;
+  text-align: left;
+  word-break: break-all;
+  /* IE 允许词内换行 */
+  word-wrap: break-word;
+  /* IE 内容将在边界内换行 */
+  overflow: auto;
+  margin: 12px;
+  display: flex;
+justify-content:flex-end;
+}
+.right-message {
+  border-radius: 12px 0px 12px 12px;
+  padding: 8px;
+  max-width: 60%;
+  color: #eee6e6;
+  background-color: #ff8260;
+  text-align: left;
+  word-break: break-all;
+  /* IE 允许词内换行 */
+  word-wrap: break-word;
+  /* IE 内容将在边界内换行 */
+  overflow: auto;
+  margin: 12px;
+  display: flex;
+justify-content:flex-end;
+}