【代码优化】客服消息日期位置调整

pages/chat/components/messageList.vue

@@ -57,7 +57,7 @@
 
   // 计算聊天窗口高度
   const chatScrollHeight = computed(() => {
-    const baseHeight = 'calc(100vh - 100px - ' + safeAreaInsetsBottom + ')';
+    const baseHeight = 'calc(100vh - 150px - ' + safeAreaInsetsBottom + ')';
     if (keyboardHeight.value > 0) {
       // 键盘弹起状态，减去键盘高度
       return `calc(${baseHeight} - ${keyboardHeight.value}px)`;
@@ -200,6 +200,7 @@
     // #endif
 
     // #ifdef MP-WEIXIN
+    // TODO puhui999: 小程序键盘弹起还有点问题，看看怎么适配
     // 微信小程序环境
     uni.onKeyboardHeightChange((res) => {
       setKeyboardHeight(res.height);
@@ -209,6 +210,10 @@
 
   onMounted(() => {
     queryParams.no = 1; // 确保首次加载是第一页
+    scroll.value = {
+      top: 0,
+      oldTop: 0,
+    }
     getMessageList();
     setupKeyboardListeners();
   });

pages/chat/components/messageListItem.vue

@@ -2,6 +2,26 @@
   <view class="chat-box">
     <!--  消息渲染  -->
     <view class="message-item ss-flex-col scroll-item">
+      <view class="ss-flex ss-row-center ss-col-center">
+        <!-- 系统消息 -->
+        <view
+          v-if="message.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+          class="system-message"
+        >
+          {{ message.content }}
+        </view>
+        <!-- 日期 - 移到消息内容上方显示 -->
+        <view
+          v-if="
+            message.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
+            showTime(message, messageIndex)
+          "
+          class="date-message"
+        >
+          {{ formatDate(message.createTime) }}
+        </view>
+      </view>
+      
       <!-- 消息体渲染管理员消息和用户消息并左右展示  -->
       <view
         v-if="message.contentType !== KeFuMessageContentTypeEnum.SYSTEM"
@@ -75,25 +95,6 @@
         >
         </image>
       </view>
-      <view class="ss-flex ss-row-center ss-col-center">
-        <!-- 日期 -->
-        <view
-          v-if="
-            message.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
-            showTime(message, messageIndex)
-          "
-          class="date-message"
-        >
-          {{ formatDate(message.createTime) }}
-        </view>
-        <!-- 系统消息 -->
-        <view
-          v-if="message.contentType === KeFuMessageContentTypeEnum.SYSTEM"
-          class="system-message"
-        >
-          {{ message.content }}
-        </view>
-      </view>
     </view>
   </view>
 </template>