From c070ed01f7e259c6ba87df4ab90915829234a2b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E5=BE=88=E5=B7=AE=E5=95=A6?=
 <17633066053@163.com>
Date: Tue, 11 Apr 2023 15:17:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:bug:=20=E9=87=8D=E6=9E=84im?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mine/im/index-app.scss |    5 +-
 pages/mine/im/index.vue      | 1053 ++++++++++++++++------------------
 2 files changed, 499 insertions(+), 559 deletions(-)

diff --git a/pages/mine/im/index-app.scss b/pages/mine/im/index-app.scss
index 10c4d8b..ebec467 100644
--- a/pages/mine/im/index-app.scss
+++ b/pages/mine/im/index-app.scss
@@ -2407,15 +2407,14 @@ button.cuIcon.lg {
  ==================== */
 
 .cu-tag {
-  font-size: 32upx;
   vertical-align: middle;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 0upx 16upx;
-  height: 50upx;
+  padding: 0upx 16rpx;
+  height: 70rpx;
   width: 150rpx;
   font-family: Helvetica Neue, Helvetica, sans-serif;
   white-space: nowrap;
diff --git a/pages/mine/im/index.vue b/pages/mine/im/index.vue
index af920ac..7787276 100644
--- a/pages/mine/im/index.vue
+++ b/pages/mine/im/index.vue
@@ -1,121 +1,208 @@
 <template>
-  <view class="wrapper">
-    <u-navbar class="my-title" title-size="32" :title="toUser.name"></u-navbar>
-    <!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
-    <view :animation="anData" style="height:0;">
-    </view>
-    <!-- 消息体 -->
-    <!-- 用来获取消息体高度 -->
-    <view id="msgList">
-      <!-- 消息 -->
-      <view class="flex-column-start" v-if="msgList.length" v-for="(item, index) in msgList" :key="index">
-        <view class="flex-row-start column-time">
-          <!--  <view v-show="compareTime(index, item.createTime)" class="flex-row-start date-text"
-            v-text="beautifyTime(item.createTime)">
-          </view> -->
-        </view>
-        <!-- 用户消息 头像可选加入-->
-        <view v-if="item.my" class="flex justify-end padding-right one-show  align-start  padding-top">
-          <view class="flex justify-end" style="width: 400rpx;margin-top: 12px;">
-            <view>
-              <view class="user-name">{{ user.nickName }}</view>
-              <view class="margin-left padding-chat bg-user-orang" style="border-radius: 35rpx; ">
-                <text style="word-break: break-all;"
-                  v-if="item.messageType === 'MESSAGE' && !emojistwo.includes(item.text)">{{ item.text }}</text>
-                <view v-if="item.messageType === 'MESSAGE' && emojistwo.includes(item.text)"
-                  v-html="textReplaceEmoji(item.text)"></view>
-                <view v-if="item.messageType == 'GOODS'">
-                  <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
-                    <view class="imagebox" @click="jumpGoodDelic(item)">
-                      <image class="image" :src="JSON.parse(item.text)['thumbnail']" mode="widthFix"></image>
-                    </view>
-                    <view class="goodsdesc" @click="jumpGoodDelic(item)">
-                      <view class="goodsdesc-name">
-                        <text class="goodsCard_goodNmae">{{
-                          JSON.parse(item.text)['goodsName']
-                        }}</text>
-                      </view>
-                      <view class="goodsdesc-rice" >￥{{
-                            JSON.parse(item.text)['price'] | unitPrice
-                          }}
-                      </view>
-                    </view>
-                  </view>
-                </view>
-          
-                <view v-if="item.messageType == 'ORDER'" @click="linkTosOrders(item.text)">
-                  <view class="orderSn">
-                    <div class="wes">订单号：{{ JSON.parse(item.text)['sn'] }}</div>
-                    <div class='order-item flex' v-if="JSON.parse(item.text).orderItems.length"  v-for='(order,orderIndex) in JSON.parse(item.text).orderItems'>
-                      <u-image  mode="widthFix" width='120rpx' height='120rpx' :src="order.image" />
-                       <view class="groupNameOrTime">
-                        <div class="wes-2" >{{
-                        order.name
-                        }}</div>
-                        <div class="main-color goodsdesc-rice">{{
-                          order.goodsPrice | unitPrice("￥")
-                        }}</div>
-                        
-                      </view>
-                    </div>
-                    <view class="oederList">
-                      <view class="orderTime">
-                          <text>{{ JSON.parse(item.text)['paymentTime'] }}</text>
+  <view>
+    <view
+      class="container"
+      :style="{ 'padding-bottom': `${52 + inputBottom}px` }"
+    >
+      <!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
+      <view :animation="anData" style="height: 0"> </view>
+      <u-navbar class="header" title-size="32" :title="toUser.name"></u-navbar>
+      <scroll-view
+        ref="scrollView"
+        class="content"
+        :scroll-y="true"
+        @scrolltoupper="pullDownRefresh()"
+        :scroll-top="scrollTop"
+        @scroll="resizeScroll"
+      >
+        <view>
+          <view
+            class="message"
+            v-if="recordsList.length"
+            v-for="(item, index) in recordsList"
+            :key="index"
+          >
+            <!-- 用户消息 头像可选加入-->
+            <view
+              v-if="item.my"
+              class="flex justify-end padding-right one-show align-start padding-top"
+            >
+              <view
+                class="flex justify-end"
+                style="width: 400rpx; margin-top: 12px"
+              >
+                <view>
+                  <view class="user-name">{{ user.nickName }}</view>
+                  <view
+                    class="margin-left padding-chat bg-user-orang"
+                    style="border-radius: 35rpx"
+                  >
+                    <text
+                      style="word-break: break-all"
+                      v-if="
+                        item.messageType === 'MESSAGE' &&
+                        !emojistwo.includes(item.text)
+                      "
+                      >{{ item.text }}</text
+                    >
+                    <view
+                      v-if="
+                        item.messageType === 'MESSAGE' &&
+                        emojistwo.includes(item.text)
+                      "
+                      v-html="textReplaceEmoji(item.text)"
+                    ></view>
+                    <view v-if="item.messageType == 'GOODS'">
+                      <view
+                        class="goodsCard u-flex u-row-between u-p-b-0"
+                        style="width: 100%; margin: 0 0"
+                      >
+                        <view class="imagebox" @click="jumpGoodDelic(item)">
+                          <image
+                            class="image"
+                            :src="JSON.parse(item.text)['thumbnail']"
+                            mode="widthFix"
+                          ></image>
                         </view>
+                        <view class="goodsdesc" @click="jumpGoodDelic(item)">
+                          <view class="goodsdesc-name">
+                            <text class="goodsCard_goodNmae">{{
+                              JSON.parse(item.text)["goodsName"]
+                            }}</text>
+                          </view>
+                          <view class="goodsdesc-rice"
+                            >￥{{ JSON.parse(item.text)["price"] | unitPrice }}
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+
+                    <view
+                      v-if="item.messageType == 'ORDER'"
+                      @click="linkTosOrders(item.text)"
+                    >
+                      <view class="orderSn">
+                        <div class="wes">
+                          订单号：{{ JSON.parse(item.text)["sn"] }}
+                        </div>
+                        <div
+                          class="order-item flex"
+                          v-if="JSON.parse(item.text).orderItems.length"
+                          v-for="(order, orderIndex) in JSON.parse(item.text)
+                            .orderItems"
+                        >
+                          <u-image
+                            mode="widthFix"
+                            width="120rpx"
+                            height="120rpx"
+                            :src="order.image"
+                          />
+                          <view class="groupNameOrTime">
+                            <div class="wes-2">{{ order.name }}</div>
+                            <div class="main-color goodsdesc-rice">
+                              {{ order.goodsPrice | unitPrice("￥") }}
+                            </div>
+                          </view>
+                        </div>
+                        <view class="order-list">
+                          <view class="orderTime">
+                            <text>{{
+                              JSON.parse(item.text)["paymentTime"]
+                            }}</text>
+                          </view>
+                        </view>
+                      </view>
                     </view>
                   </view>
                 </view>
               </view>
+              <view>
+                <u-avatar
+                  :src="user.face"
+                  :text="user.face ? '' : user.name"
+                  bg-color="#DDDDDD"
+                ></u-avatar>
+              </view>
             </view>
-          </view>
-          <view>
-            <u-avatar :src="user.face" :text="user.face ? '' : user.name" bg-color="#DDDDDD"></u-avatar>
-          </view>
-        </view>
-        <!-- 接收人消息 -->
-        <view v-else class="flex-row-start margin-left margin-top one-show">
-          <view class="chat-img flex-row-center">
-            <u-avatar :src="toUser.face" :text="toUser.face ? '' : toUser.name" bg-color="#DDDDDD">
-            </u-avatar>
-          </view>
-          <view class="flex" style="width: 500rpx;">
-            <view>
-              <view class="other-name">{{ toUser.name }}</view>
-              <view class="margin-left padding-chat flex-column-start bg-to-color" style="border-radius: 35rpx;">
-                <text style="word-break: break-all;"
-                  v-if="item.messageType === 'MESSAGE' && !emojistwo.includes(item.text)">{{ item.text }}</text>
-                <view v-if="item.messageType === 'MESSAGE' && emojistwo.includes(item.text)"
-                  v-html="textReplaceEmoji(item.text)"></view>
-                <view v-if="item.messageType === 'GOODS'">
-                  <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
-                    <view class="imagebox" @click="jumpGoodDelic(item)">
-                      <image class="image" :src="JSON.parse(item.text)['thumbnail']" mode="widthFix"></image>
-                    </view>
-                    <view class="goodsdesc" @click="jumpGoodDelic(item)">
-                      <view class="goodsdesc-name">
-                        <text class="goodsCard_goodNmae">{{
-                          JSON.parse(item.text)['goodsName']
-                        }}</text>
-                      </view>
-                        <view class="goodsdesc-rice" >¥{{
-                            JSON.parse(item.text)['price']
-                          }}
+            <!-- 接收人消息 -->
+            <view v-else class="flex-row-start margin-left margin-top one-show">
+              <view class="chat-img flex-row-center">
+                <u-avatar
+                  :src="toUser.face"
+                  :text="toUser.face ? '' : toUser.name"
+                  bg-color="#DDDDDD"
+                >
+                </u-avatar>
+              </view>
+              <view class="flex" style="width: 500rpx">
+                <view>
+                  <view class="other-name">{{ toUser.name }}</view>
+                  <view
+                    class="margin-left padding-chat flex-column-start bg-to-color"
+                    style="border-radius: 35rpx"
+                  >
+                    <text
+                      style="word-break: break-all"
+                      v-if="
+                        item.messageType === 'MESSAGE' &&
+                        !emojistwo.includes(item.text)
+                      "
+                      >{{ item.text }}</text
+                    >
+                    <view
+                      v-if="
+                        item.messageType === 'MESSAGE' &&
+                        emojistwo.includes(item.text)
+                      "
+                      v-html="textReplaceEmoji(item.text)"
+                    ></view>
+                    <view v-if="item.messageType === 'GOODS'">
+                      <view
+                        class="goodsCard u-flex u-row-between u-p-b-0"
+                        style="width: 100%; margin: 0 0"
+                      >
+                        <view class="imagebox" @click="jumpGoodDelic(item)">
+                          <image
+                            class="image"
+                            :src="JSON.parse(item.text)['thumbnail']"
+                            mode="widthFix"
+                          ></image>
+                        </view>
+                        <view class="goodsdesc" @click="jumpGoodDelic(item)">
+                          <view class="goodsdesc-name">
+                            <text class="goodsCard_goodNmae">{{
+                              JSON.parse(item.text)["goodsName"]
+                            }}</text>
+                          </view>
+                          <view class="goodsdesc-rice"
+                            >¥{{ JSON.parse(item.text)["price"] }}
+                          </view>
+                        </view>
                       </view>
                     </view>
-                  </view>
-                </view>
-                <view v-if="item.messageType === 'ORDER'">
-                  <view class="orderSn">
-                    <text>订单号：{{ JSON.parse(item.text)['sn'] }}</text>
-                    <view class="oederList">
-                      <img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
-                        :src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
-                      <view class="groupNameOrTime">
-                        <text @click="linkTosOrders(item.text)">{{
-                          JSON.parse(item.text)['groupName']
-                        }}</text>
-                        <view class="orderTime">
-                          <text>{{ JSON.parse(item.text)['paymentTime'] }}</text>
+                    <view v-if="item.messageType === 'ORDER'">
+                      <view class="orderSn">
+                        <text>订单号：{{ JSON.parse(item.text)["sn"] }}</text>
+                        <view class="order-list">
+                          <img
+                            style="
+                              height: 120rpx;
+                              width: 120rpx;
+                              margin-top: 15rpx;
+                            "
+                            :src="JSON.parse(item.text)['groupImages']"
+                            mode="widthFix"
+                          />
+                          <view class="groupNameOrTime">
+                            <text @click="linkTosOrders(item.text)">{{
+                              JSON.parse(item.text)["groupName"]
+                            }}</text>
+                            <view class="orderTime">
+                              <text>{{
+                                JSON.parse(item.text)["paymentTime"]
+                              }}</text>
+                            </view>
+                          </view>
                         </view>
                       </view>
                     </view>
@@ -123,236 +210,126 @@
                 </view>
               </view>
             </view>
-
           </view>
         </view>
-      </view>
-      <!-- 防止消息底部被遮 -->
-      <view v-if="showHide && !localImGoodsId && showHideModel" class="flex-row-start margin-left margin-top"
-        style="height: 120rpx;">
-      </view>
-      <!-- 如果没有聊天记录，定位到底部 -->
-      <view
-        :style="{ position:'fixed' , bottom:(inputHeight+66)+'px' , width:  '100%' }">
-        <view class="cartMessage" v-if="showHide && !localImGoodsId && showHideModel">
-          <view class="goodsCard u-flex u-row-between u-p-b-0">
-            <view class="imagebox" @click="jumpGoodDelic(item)">
-              <image class="image" :src="goodListData.thumbnail" mode="widthFix"></image>
+      </scroll-view>
+    </view>
+
+    <view
+      :style="{
+        position: 'fixed',
+        top: '91px',
+        width: '100%',
+      }"
+      v-if="showHide && !localImGoodsId && showHideModel"
+    >
+      <view class="cartMessage">
+        <view class="goodsCard u-flex u-row-between u-p-b-0">
+          <view class="imagebox" @click="jumpGoodDelic(item)">
+            <image
+              class="image"
+              :src="goodListData.thumbnail"
+              mode="widthFix"
+            ></image>
+          </view>
+          <view class="goodsdesc" @click="jumpGoodDelic(item)">
+            <view class="goodsdesc-name">
+              <text class="goodsCard_goodNmae">{{
+                goodListData.goodsName
+              }}</text>
             </view>
-            <view class="goodsdesc" @click="jumpGoodDelic(item)">
-              <view class="goodsdesc-name">
-                <text class="goodsCard_goodNmae">{{
-                  goodListData.goodsName
-                }}</text>
-              </view>
-              <view class="goodsdesc-rice" > ￥{{
-                goodListData.price | unitPrice
-              }}
-              </view>
-            </view>
-            <view class="cancel" @click="cancelModel">X</view>
-            <view class="sendGood" @click="sendGoodsMessage">
-              <view>发送商品</view>
+            <view class="goodsdesc-rice">
+              ￥{{ goodListData.price | unitPrice }}
             </view>
           </view>
-        </view>
-      </view>
-
-      <!-- loading是显示 -->
-      <!-- <view v-show="msgLoad" class=" margin-left margin-top">
-        <view class="chat-img flex-row-center">
-          <image style="height: 75rpx;width: 75rpx;" src="../../static/image/robt.png" mode="aspectFit"></image>
-        </view>
-        <view class="flex" style="width: 500rpx;">
-          <view class="margin-left padding-chat flex-column-start"
-            style="border-radius: 35rpx;background-color: #f9f9f9;">
-            <view class="cuIcon-loading turn-load" style="font-size: 35rpx;color: #3e9982;">
-
-            </view>
+          <view class="cancel" @click="cancelModel">X</view>
+          <view class="sendGood" @click="sendGoodsMessage">
+            <view>发送商品</view>
           </view>
         </view>
-      </view> -->
-      <!-- 防止消息底部被遮 -->
-      <view style="height: 120rpx;">
       </view>
     </view>
-    <!-- 底部导航栏 -->
-    <view :style="{position: 'fixed',bottom:inputHeight+'px'}" class="flex-column-center"  :animation="animationData">
-      <view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
-        <!-- vue无法使用软键盘"发送" -->
-        <input @focus="inputBindFocus" @blur="eventHandle"  :adjust-position="false" v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" @confirm="sendMessage"
-          confirm-type="send" placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题" />
-        <view @click="sendMessage" class="cu-tag bg-main-color send round">
-          发送
-        </view>
-        <!-- <text @click="ckAdd" class="cuIcon-roundaddfill text-brown"></text> -->
+
+    <view class="bottom-textarea" :style="{ bottom: inputBottom + 'px' }">
+      <view class="textarea-container">
+        <Input
+          @focus="focusTextarea"
+          :maxlength="-1"
+          :auto-height="true"
+          :show-confirm-bar="false"
+          :cursor-spacing="10"
+          :fixed="true"
+          :adjust-position="false"
+          @blur="blurTextarea"
+          v-model="msg"
+          @confirm="sendMessage"
+          confirm-type="send"
+          placeholder-class="my-neirong-sm"
+          placeholder="用一句简短的话描述您的问题"
+        />
+      </view>
+      <view @click="sendMessage" class="cu-tag bg-main-color send round">
+        发送
       </view>
     </view>
   </view>
 </template>
 
 <script>
-// rpx和px的比率
-var l
-// 可用窗口高度
-var wh
-// 顶部空盒子的高度
-var mgUpHeight
-import {
-  getTalkMessage,
-  getTalkByUser,
-  jumpObtain
-} from "@/api/im.js";
+import { getTalkMessage, getTalkByUser, jumpObtain } from "@/api/im.js";
 import SocketService from "@/utils/socket_service.js";
 import storage from "@/utils/storage.js";
-import {
-  beautifyTime
-} from "@/utils/filters.js"
-import config from '@/config/config.js'
-import { textReplaceEmoji, emojistwo } from '@/utils/emojis.js';
+import { beautifyTime } from "@/utils/filters.js";
+import config from "@/config/config.js";
+import { textReplaceEmoji, emojistwo } from "@/utils/emojis.js";
 export default {
-  // 页面卸载后清除imGoodId
-  onUnload () {
-    // #ifdef H5
-    uni.setStorageSync("imGoodId", '');
-    // #endif
-
-    if (this.socketOpen == true) {
-      uni.closeSocket();
-    }
-  },
-  onLoad (options) {
-    // 没有goodsid则不显示 发送商品弹窗
-    this.showHideModel = options.goodsid
-    // 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示
-    // #ifdef H5
-    this.localImGoodsId = uni.getStorageSync("imGoodId");
-    // #endif
-    this.resolve = options
-    // 请求商品信息
-    if (this.resolve.goodsid) {
-      this.commodityDetails()
-    }
-    // 如果需要缓存消息缓存msgList即可
-    // 监听键盘拉起
-    // 因为无法控制键盘拉起的速度,所以这里尽量以慢速处理
-    uni.onKeyboardHeightChange(res => {
-      const query = uni.createSelectorQuery()
-      query.select('#msgList').boundingClientRect(data => {
-        // 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体
-        var up = res.height * 2 - data.height - l * 110
-        if (up > 0) {
-          // 动态改变空盒子高度
-          this.messageBoxMove(up, 300)
-          // 记录改变的值,若不收回键盘且发送了消息用来防止消息过多被遮盖
-          mgUpHeight = up
-        }
-        // 收回
-        if (res.height == 0) {
-          this.messageBoxMove(0, 0)
-        }
-      }).exec();
-    })
-    var query = uni.getSystemInfoSync()
-
-    l = query.screenWidth / 750
-    wh = query.windowHeight
-    this.scrollHeight = (query.windowHeight - 44) + "px"
-    this.user = storage.getUserInfo()
-    this.toUser = storage.getTalkToUser()
-
-    if (options.talkId) {
-      this.params.talkId = options.talkId;
-      this.getTalkMessage()
-    } else {
-      this.getTalk(options.userId)
-
-    }
-
-    // this.ws.connect();
-    this.sokcet();
-  },
-  // 页面隐藏
-  onHide () {
-    uni.closeSocket();
-  },
-  onUnload () {
-    uni.closeSocket();
-  },
-  onPullDownRefresh () {
-    this.params.pageNumber = this.params.pageNumber + 1
-    this.getTalkMessage()
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 1000);
-  },
-
-  data () {
+  data() {
     return {
       textReplaceEmoji,
       emojistwo,
-      socketOpen: false, //是否连接
       storage,
-      fixed: 'fixed',
-      bottom: '50px',
-      width: '100%',
+      socketOpen: false, //是否连接
+      itemAverageHeight: 685, //每条数据平均高度，为确保能滚到底部，可以设置大一些
+      scrollTop: 1000,
+      inputBottom: 0,
+      recordsList: [],
+      goodListData: {}, // 商品集合数据
       showHideModel: undefined,
-      localImGoodsId: '',
+      localImGoodsId: "",
       showHide: true,
-      msgLoad: false,
       anData: {},
-      animationData: {},
-      msgList: [],
-      oldHeight: 0,
-      params: { //搜索条件
-        talkId: '',
+      params: {
+        //搜索条件
+        talkId: "",
         pageSize: 10,
         pageNumber: 1,
       },
-      goToIndex: 0, // 前往位置
       msg: "",
       go: 0,
-      newMessageNum: 0,
       user: {},
       toUser: {},
       scrollHeight: 0,
       ws: new SocketService(),
       resolve: {},
-      goodListData: {},
       count: 0, //判断socket断开连接请求次数
-      inputHeight:0,
-    }
+      height: [],
+      windowHeight: 0,
+    };
   },
-  // watch: {
-  //   'ws.callBackMapping': {
-  //     handler: function (val) {
-  //       val = JSON.parse(val)
-  //       if (val.messageResultType == 'MESSAGE') {
-  //         this.msgList.push(val.result)
-  //       }
-  //       this.newMessageNum++;
-  //       //接收到消息后发送已读
-  //       let msg = val
-  //       msg.operation_type = 'READ'
-  //       this.ws.send(JSON.stringify(msg))
-  //     }
-  //   }
-  // },
   methods: {
-    eventHandle(){
-      this.inputHeight = 0
+    beautifyTime,
+    resizeScroll({ detail }) {
+      console.log(detail);
+      this.height.push(detail.scrollHeight);
     },
-    inputBindFocus(e){
-       if (e.detail.height) {
-           this.inputHeight = e.detail.height //这个高度就是软键盘的高度
-       }
-    },
-    sendMessage () {
+
+    // 发送聊天信息
+    sendMessage() {
       if (this.msg == "") {
         return 0;
       }
       if (this.socketOpen == false) {
-        return
+        return;
       }
       let msg = {
         operation_type: "MESSAGE",
@@ -361,21 +338,22 @@ export default {
         message_type: "MESSAGE",
         context: this.msg,
         talk_id: this.params.talkId,
-      }
+      };
       let data = JSON.stringify(msg);
       uni.sendSocketMessage({
         data: data,
       });
-      this.msgList.push({
-        "text": this.msg,
-        "my": true,
-        "messageType": 'MESSAGE'
-      })
-      let type = 'down';
-      this.msgGo(type)
-      this.msg = ""
+      this.recordsList.push({
+        text: this.msg,
+        my: true,
+        messageType: "MESSAGE",
+      });
+      this.scrollTop += 9999; //滚到底部
+      this.msg = "";
     },
-    sendGoodsMessage () {
+
+    // 发送商品信息
+    sendGoodsMessage() {
       let msg = {
         operation_type: "MESSAGE",
         to: this.toUser.userId,
@@ -383,34 +361,29 @@ export default {
         message_type: "GOODS",
         context: this.goodListData,
         talk_id: this.params.talkId,
-      }
+      };
       let data = JSON.stringify(msg);
       uni.sendSocketMessage({
-        data: data
+        data: data,
       });
-      this.msgList.push({
-        "text": JSON.stringify(this.goodListData),
-        "my": true,
-        "messageType": 'GOODS'
-      })
-      this.showHide = false
+      this.recordsList.push({
+        text: JSON.stringify(this.goodListData),
+        my: true,
+        messageType: "GOODS",
+      });
+      this.showHide = false;
       // #ifdef H5
       uni.setStorageSync("imGoodId", 1111111);
       // #endif
-      this.$nextTick(() => {
-        uni.pageScrollTo({
-          scrollTop: 2000000,
-          duration: 300
-        });
-      })
+      this.scrollTop += 9999; //滚到底部
     },
-    sokcet () {
+    socket() {
       var _this = this;
       uni.closeSocket();
       this.socketOpen = false;
       try {
         //WebSocket的地址
-        var url = config.baseWsUrl + '/' + storage.getAccessToken();
+        var url = config.baseWsUrl + "/" + storage.getAccessToken();
         // 连接
         uni.connectSocket({
           url: url,
@@ -430,186 +403,108 @@ export default {
                   uni.connectSocket({
                     url: url,
                   });
-                }, 2000)
+                }, 2000);
               }
             } else {
               uni.closeSocket();
             }
-            this.count++
+            this.count++;
           });
         }
         // 监听收到信息
         uni.onSocketMessage(function (res) {
-          res.data = JSON.parse(res.data)
+          res.data = JSON.parse(res.data);
           console.log(res.data.result);
-          if (res.data.messageResultType == 'MESSAGE') {
-            _this.msgList.push(res.data.result)
-            console.log(_this.msgList)
+          if (res.data.messageResultType == "MESSAGE") {
+            _this.recordsList.push(res.data.result);
+            console.log(_this.recordsList);
           }
-          console.log(res.data)
-          _this.msgGo()
-        })
+          console.log(res.data);
+        });
       } catch (e) {
         uni.closeSocket();
       }
       // 监听是否断线，断线进行重新连接
       uni.onSocketClose((res) => {
         if (res.code != null && res.code != 1000) {
-          this.sokcet()
+          this.socket();
         }
-      })
-    },
-    beautifyTime,
-    //订单详情
-    linkTosOrders (val) {
-      let order = JSON.parse(val)
-      uni.navigateTo({
-        url: '/pages/order/orderDetail?sn=' + order.sn,
       });
+    },
 
+    //订单详情
+    linkTosOrders(val) {
+      let order = JSON.parse(val);
+      uni.navigateTo({
+        url: "/pages/order/orderDetail?sn=" + order.sn,
+      });
     },
     // 跳转商品详情页
-    jumpGoodDelic (item) {
-      let info = JSON.parse(item.text)
+    jumpGoodDelic(item) {
+      let info = JSON.parse(item.text);
       uni.navigateTo({
         url: `/pages/product/goods?id=${info.id}&goodsId=${info.goodsId}`,
       });
     },
 
     //取消发送
-    cancelModel () {
-      this.showHide = false
+    cancelModel() {
+      this.showHide = false;
     },
     // 请求商品详情
-    commodityDetails () {
+    commodityDetails() {
       jumpObtain(this.resolve.skuid, this.resolve.goodsid).then((res) => {
-        this.goodListData = res.data.result.data
-      })
-    },
-    // 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
-    goPag (kh) {
-      this.retractBox(0, 250)
-      if (this.keyHeight != 0) {
-        if (kh - this.keyHeight > 0) {
-          this.retractBox(this.keyHeight - kh, 250)
-        }
-      }
+        this.goodListData = res.data.result.data;
+      });
     },
     // 移动顶部的空盒子
-    messageBoxMove (x, t) {
+    messageBoxMove(x, t) {
       var animation = uni.createAnimation({
         duration: t,
-        timingFunction: 'linear',
-      })
-      this.animation = animation
-      animation.height(x).step()
-      this.anData = animation.export()
+        timingFunction: "linear",
+      });
+      this.animation = animation;
+      animation.height(x).step();
+      this.anData = animation.export();
     },
-    // 保持消息体可见
-    msgGo (type) {
-      const query = uni.createSelectorQuery()
-      // 延时100ms保证是最新的高度
-      setTimeout(() => {
-        // 获取消息体高度
-        query.select('#msgList').boundingClientRect(data => {
-          // 如果超过scorll高度就滚动scorll
-          if (type == 'up') {
-            this.go = data.height - this.oldHeight
-          } else if (type == 'down') {
-            this.go = data.height - wh + 120
-          }
-          // if (this.oldHeight > 0) {
-          // 	this.go = data.height - this.oldHeight
-          // } else {
-          // 	// if (data.height - (wh - 32) > 0) {
-          // 	this.go = data.height - wh + 120
-          // }
-          // 保证键盘第一次拉起时消息体能保持可见
-          var moveY = wh - data.height
-          // 超出页面则缩回空盒子
-          if (moveY - mgUpHeight < 0) {
-            // 小于0则视为0
-            if (moveY < 0) {
-              this.messageBoxMove(0, 200)
-            } else {
-              // 否则缩回盒子对应的高度
-              this.messageBoxMove(moveY, 200)
-            }
-          }
-          uni.pageScrollTo({
-            scrollTop: this.go,
-            duration: 0
-          })
-          this.oldHeight = data.height
-        }).exec();
-      }, 100)
-    },
-    // 回答问题的业务逻辑
-    answer (id) {
-      // 这里应该传入问题的id,模拟就用index代替了
 
-    },
-    // 不建议输入框聚焦时操作此动画
-    ckAdd () {
-      if (!this.showTow) {
-        this.retractBox(-180, 350)
-      } else {
-        this.retractBox(0, 200)
-      }
-      this.showTow = !this.showTow
-    },
-    hideKey () {
-      uni.hideKeyboard()
-    },
-    // 拉起/收回附加栏
-    retractBox (x, t) {
-      var animation = uni.createAnimation({
-        duration: t,
-        timingFunction: 'ease',
-      })
-      this.animation = animation
-      animation.translateY(x).step()
-      this.animationData = animation.export()
-    },
-    async getTalkMessage () {
-      let type = '';
-      await getTalkMessage(this.params).then(res => {
+    // 获取聊天记录
+    async getTalkMessageMethods() {
+      await getTalkMessage(this.params).then((res) => {
         if (res.data.success) {
-          if (this.msgList.length >= 10) {
-            this.msgList.unshift(...res.data.result)
-            type = 'up'
-          } else {
-            this.msgList.unshift(...res.data.result)
-            type = 'down'
-          }
-          this.msgList.forEach(item => {
-            if (item.fromUser === this.user.id) {
-              item.my = true
+          if (this.recordsList.length >= 10) {
+            // 计算每次上拉刷新回到当前屏幕
+            this.recordsList.unshift(...res.data.result);
+            if (res.data.result.length > 0) {
+              this.scrollTop = this.windowHeight;
+              this.scrollTop += this.params.pageNumber;
             }
-          })
+
+            console.log("type", this.scrollTop);
+          } else {
+            this.recordsList.unshift(...res.data.result);
+            this.scrollTop += 9999;
+          }
+          this.recordsList.forEach((item) => {
+            if (item.fromUser === this.user.id) {
+              item.my = true;
+            }
+          });
         }
-      })
-      console.log(this.msgList);
-      this.msgGo(type)
+      });
     },
-    // 上拉加载
-    touchMoreMessage (e) {
-      if (e.target.scrollTop == 0) {
-        this.params.pageNumber = this.params.pageNumber + 1
-        this.getTalkMessage()
-      }
-    },
-    async getTalk (userId) {
-      getTalkByUser(userId).then(res => {
+
+    async getTalk(userId) {
+      getTalkByUser(userId).then((res) => {
         if (res.data.success) {
-          this.toUser = res.data.result
-          this.params.talkId = res.data.result.id
-          this.getTalkMessage()
+          this.toUser = res.data.result;
+          this.params.talkId = res.data.result.id;
+          this.getTalkMessageMethods();
         }
-      })
+      });
     },
     // 处理消息时间是否显示
-    compareTime (index, datetime) {
+    compareTime(index, datetime) {
       if (datetime == undefined) {
         return false;
       }
@@ -617,7 +512,7 @@ export default {
         datetime = this.unixToDate(datetime, "yyyy-MM-dd hh:mm");
       }
 
-      if (this.msgList[index].is_revoke == 1) {
+      if (this.recordsList[index].is_revoke == 1) {
         return false;
       }
       if (datetime) {
@@ -630,12 +525,15 @@ export default {
       // 当前时间5分钟内时间不显示
       if (currTime - time < 300) return false;
       // 判断是否是最后一条消息,最后一条消息默认显示时间
-      if (index == this.msgList.length - 1) {
+      if (index == this.recordsList.length - 1) {
         return true;
       }
-      let nextDate
-      if (this.msgList[index + 1] && this.msgList[index + 1].createTime) {
-        nextDate = this.msgList[index + 1].createTime.replace(/-/g, "/");
+      let nextDate;
+      if (
+        this.recordsList[index + 1] &&
+        this.recordsList[index + 1].createTime
+      ) {
+        nextDate = this.recordsList[index + 1].createTime.replace(/-/g, "/");
         if (nextDate - datetime < 300) return false;
       }
 
@@ -651,7 +549,7 @@ export default {
      * @param format 转换格式
      * @returns {*|string}
      */
-    unixToDate (unix, format) {
+    unixToDate(unix, format) {
       if (!unix) return unix;
       let _format = format || "yyyy-MM-dd hh:mm:ss";
       const d = new Date(unix);
@@ -673,19 +571,134 @@ export default {
         if (new RegExp("(" + k + ")").test(_format))
           _format = _format.replace(
             RegExp.$1,
-            RegExp.$1.length === 1 ?
-              o[k] :
-              ("00" + o[k]).substr(("" + o[k]).length)
+            RegExp.$1.length === 1
+              ? o[k]
+              : ("00" + o[k]).substr(("" + o[k]).length)
           );
       return _format;
     },
-  }
-}
+
+    pullDownRefresh() {
+      this.$nextTick(() => {
+        this.$u.throttle(() => {
+          this.params.pageNumber = this.params.pageNumber + 1;
+          this.getTalkMessageMethods();
+        }, 500);
+      });
+    },
+
+    // 页面隐藏
+    onHide() {
+      uni.closeSocket();
+    },
+    // 页面卸载后清除imGoodId
+    onUnload() {
+      // #ifdef H5
+      uni.setStorageSync("imGoodId", "");
+      // #endif
+
+      if (this.socketOpen == true) {
+        uni.closeSocket();
+      }
+    },
+    focusTextarea(e) {
+      this.inputBottom = e.detail.height;
+      this.scrollTop += 9999; //滚到底部
+    },
+    blurTextarea(e) {
+      this.inputBottom = 0;
+      this.scrollTop += 9999; //滚到底部
+    },
+  },
+  onLoad(options) {
+    // 没有goodsid则不显示 发送商品弹窗
+    this.showHideModel = options.goodsid;
+    // 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示
+    // #ifdef H5
+    this.localImGoodsId = uni.getStorageSync("imGoodId");
+    // #endif
+    this.resolve = options;
+    this.user = storage.getUserInfo();
+    this.toUser = storage.getTalkToUser();
+    // 请求商品信息
+    if (this.resolve.goodsid) {
+      this.commodityDetails();
+    }
+    if (options.talkId) {
+      this.params.talkId = options.talkId;
+      this.getTalkMessageMethods();
+    } else {
+      this.getTalk(options.userId);
+    }
+    let systemInfo = uni.getSystemInfoSync();
+    // 获取状态栏高度
+    let statusBarHeight = systemInfo.statusBarHeight;
+
+    // 获取屏幕高度
+    let screenHeight = systemInfo.screenHeight;
+
+    // 计算窗体高度
+    this.windowHeight = screenHeight - statusBarHeight - 44;
+    console.log(this.windowHeight, "窗体高度");
+    // this.ws.connect();
+    this.socket();
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-.send{
-  font-size: 24rpx !important;
+<style scoped lang="scss">
+$left-right-margin: 40rpx;
+.container {
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+  padding-bottom: 52px;
+  display: flex;
+  flex-direction: column;
+  .header {
+    flex-shrink: 0;
+    padding: 0px $left-right-margin 32rpx $left-right-margin;
+  }
+  .content {
+    flex-grow: 1;
+    overflow: auto;
+    .message {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+.bottom-textarea {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: #f2f2f2;
+  border-top: 2rpx solid rgba(226, 226, 226, 1);
+  padding: 12rpx 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .textarea-container {
+    flex: 1;
+    height: 70rpx;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 8rpx;
+    box-sizing: border-box;
+    padding: 20rpx 16rpx;
+  }
+
+  > button {
+    flex-shrink: 0;
+    height: 80rpx;
+    margin: 0;
+    margin-left: 16rpx;
+  }
+}
+
+.send {
+  margin-left: 10rpx;
+  font-size: 28rpx !important;
 }
 .orderTime {
   margin-top: 15rpx;
@@ -694,11 +707,7 @@ export default {
   overflow: hidden;
 }
 
-.wrapper {
-  height: auto !important;
-}
-
-.oederList {
+.order-list {
   display: flex;
   color: black;
   font-size: 20rpx;
@@ -708,38 +717,29 @@ export default {
 
 .orderSn {
   width: 350rpx;
-
 }
 
 .groupNameOrTime {
   width: 200rpx;
   margin: 15rpx 15rpx;
-
-}
-
-.orderGood {
-  background-color: #ffffff;
 }
 
 .goodsCard {
-  border-radius: 20rpx;
-  margin-top: 15rpx;
   background-color: #ffffff;
   padding-left: 12rpx;
-  width: 95%;
+  width: 100%;
   height: 120rpx;
   display: flex;
   flex-wrap: wrap;
   color: #302c2b;
 
-
-
   .imagebox {
     width: 122rpx;
     height: 122rpx;
 
     .image {
       width: 122rpx;
+      height: 122rpx !important;
       border-radius: 10rpx;
     }
   }
@@ -758,7 +758,6 @@ export default {
       overflow: hidden;
       margin-bottom: 20rpx;
 
-
       .goodsCard_goodNmae {
         color: black;
         text-overflow: ellipsis;
@@ -780,7 +779,7 @@ export default {
     color: #ffffff;
     height: 50rpx;
     width: 130rpx;
-    background-color: #f21c0c;
+    background-color: $main-color;
     font-size: 24rpx;
     border-radius: 17rpx;
     text-align: center;
@@ -797,6 +796,9 @@ export default {
   position: relative;
   bottom: 40rpx;
   left: 12%;
+  height: 40rpx;
+  width: 100rpx;
+  text-align: right;
 }
 
 .cartMessage {
@@ -805,12 +807,6 @@ export default {
   align-items: center;
 }
 
-.bottom-dh-char {
-  background-color: #f9f9f9;
-  width: 750rpx;
-  height: 110rpx;
-}
-
 .user-name {
   text-align: right;
   font-size: 24rpx;
@@ -827,50 +823,6 @@ export default {
   margin-left: 10rpx;
 }
 
-.column-time {
-  justify-content: center;
-}
-
-.center-box {
-  width: 720rpx;
-  padding-left: 25rpx;
-}
-
-.hui-box {
-  width: 750rpx;
-  height: 100%;
-
-}
-
-.date-text {
-  font-size: 12px;
-  color: grey;
-}
-
-.dh-input {
-  width: 500rpx;
-  height: 65rpx;
-  border-radius: 30rpx;
-  padding-left: 15rpx;
-  font-size: 22rpx;
-  background-color: #FFFFFF;
-}
-
-.box-normal {
-  width: 750rpx;
-  height: 180px;
-  background-color: #FFFFFF;
-}
-
-.tb-text view {
-  font-size: 65rpx;
-}
-
-.tb-text text {
-  font-size: 25rpx;
-  color: #737373;
-}
-
 .chat-img {
   border-radius: 50%;
   width: 100rpx;
@@ -882,30 +834,19 @@ export default {
   padding: 17rpx 20rpx;
 }
 
-.tb-nv {
-  width: 50rpx;
-  height: 50rpx;
-}
-.goodsdesc-rice{
+.goodsdesc-rice {
   font-size: 24rpx;
   color: $main-color;
   font-weight: bold;
   margin-top: 10rpx;
 }
-.order-item{
-  margin: 10rpx 0
+.order-item {
+  margin: 10rpx 0;
 }
-
-
-uni-page-head {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 9999;
+.my-neirong-sm {
+  font-size: 24rpx;
 }
 </style>
-
 <style lang="scss" scoped>
 @import "./index-app.scss";
 </style>