【代码优化】客服聊天

pages/chat/components/messageInput.vue

@@ -7,7 +7,11 @@
         :clearable="false"
         v-model="message"
         placeholder="请输入你要咨询的问题"
+        :maxlength="maxLength"
+        :focus="autoFocus"
+        @focus="handleFocus"
       ></uni-easyinput>
+      <text v-if="showCharCount" class="char-count">{{ message.length }}/{{ maxLength }}</text>
     </view>
     <text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
     <text
@@ -16,14 +20,21 @@
       :class="{ 'is-active': toolsMode === 'tools' }"
       @tap.stop="onTools('tools')"
     ></text>
-    <button v-if="message" class="ss-reset-button send-btn" @tap="sendMessage">
-      发送
+    <button
+      v-if="message"
+      class="ss-reset-button send-btn"
+      @tap="sendMessage"
+      :disabled="isDisabled || sending"
+      :class="{ 'disabled': isDisabled || sending }"
+    >
+      <text v-if="sending">发送中</text>
+      <text v-else>发送</text>
     </button>
   </view>
 </template>
 
 <script setup>
-  import { computed } from 'vue';
+  import { computed, ref, onUnmounted } from 'vue';
   /**
    * 消息发送组件
    */
@@ -38,8 +49,25 @@
       type: String,
       default: '',
     },
+    // 是否自动获取焦点
+    autoFocus: {
+      type: Boolean,
+      default: false
+    },
+    // 最大字数限制
+    maxLength: {
+      type: Number,
+      default: 500
+    },
+    // 是否显示字数统计
+    showCharCount: {
+      type: Boolean,
+      default: true
+    }
   });
+
   const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
+
   const message = computed({
     get() {
       return props.modelValue;
@@ -49,16 +77,55 @@
     }
   });
 
+  // 控制发送状态
+  const sending = ref(false);
+
+  // 是否禁用发送按钮
+  const isDisabled = computed(() => {
+    return !message.value.trim() || message.value.length > props.maxLength;
+  });
+
+  // 输入框获取焦点
+  const handleFocus = () => {
+    // 输入框获取焦点时关闭工具栏
+    if (props.toolsMode !== '') {
+      onTools('');
+    }
+  };
 
   // 打开工具菜单
   function onTools(mode) {
     emits('onTools', mode);
   }
 
+  // 防抖处理
+  let sendTimer = null;
+
   // 发送消息
   function sendMessage() {
-    emits('sendMessage');
+    // 如果正在发送中，或者内容为空，则不处理
+    if (sending.value || isDisabled.value) return;
+
+    // 清除可能存在的定时器
+    if (sendTimer) clearTimeout(sendTimer);
+
+    // 设置发送状态
+    sending.value = true;
+
+    // 执行发送，并添加防抖
+    sendTimer = setTimeout(() => {
+      emits('sendMessage');
+      // 发送完成后重置状态
+      setTimeout(() => {
+        sending.value = false;
+      }, 300);
+    }, 300);
   }
+
+  // 组件卸载时清除定时器
+  onUnmounted(() => {
+    if (sendTimer) clearTimeout(sendTimer);
+  });
 </script>
 
 <style scoped lang="scss">
@@ -70,6 +137,16 @@
       height: 64rpx;
       border-radius: 32rpx;
       background: var(--ui-BG-1);
+      position: relative;
+
+      .char-count {
+        position: absolute;
+        right: 15rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 22rpx;
+        color: #999;
+      }
     }
 
     .bq {
@@ -97,6 +174,12 @@
       font-size: 26rpx;
       color: #fff;
       margin-left: 11rpx;
+      transition: all 0.3s;
+
+      &.disabled {
+        opacity: 0.6;
+        background: #cccccc;
+      }
     }
   }
 </style>

pages/chat/components/messageList.vue

@@ -1,240 +1,169 @@
 <template>
-  <!--  聊天列表使用scroll-view原生组件  -->
-  <scroll-view
-    ref="scrollRef"
-    class="chat-scroll-view"
-    scroll-y
-    :scroll-top="scrollTop"
-    :refresher-enabled="true"
-    :refresher-triggered="isTriggered"
-    @scrolltolower="onScrollToLower"
-    @refresherrefresh="onRefresh"
-    @scroll="onScroll"
-  >
-    <!-- 撑一下顶部导航 -->
-    <view :style="{ height: sys_navBar + 'px' }"></view>
-
-    <!-- 消息列表 -->
-    <view class="message-list" :style="{ transform: 'scaleY(-1)' }">
-      <view v-for="(item, index) in messageList" :key="item.id" style="transform: scaleY(-1)">
-        <!--  消息渲染  -->
-        <MessageListItem
-          :message="item"
-          :message-index="index"
-          :message-list="messageList"
-        ></MessageListItem>
+  <!--  聊天列表使用scroll-view原生组件，整体倒置  -->
+  <scroll-view ref="scrollRef" class="chat-scroll-view" scroll-y :refresher-enabled="false"
+               @scroll="onScroll" style="transform: scaleY(-1);">
+    <!-- 消息列表容器 -->
+    <view class="message-container">
+      <!-- 消息列表 -->
+      <view class="message-list">
+        <view v-for="(item, index) in messageList" :key="item.id" class="message-item"
+              style="transform: scaleY(-1);">
+          <!--  消息渲染  -->
+          <MessageListItem :message="item" :message-index="index"
+                           :message-list="messageList"></MessageListItem>
+        </view>
       </view>
-
-      <!-- 加载更多提示 -->
-      <view v-if="loadingMore" class="loading-more">加载更多...</view>
-    </view>
-
-    <!-- 底部聊天输入框 -->
-    <su-fixed bottom>
-      <slot name="bottom"></slot>
-    </su-fixed>
-    <!-- 查看最新消息提示 -->
-    <view v-if="showNewMessageTip" class="new-message-tip" @click="scrollToBottom">
-      <text>有新消息</text>
     </view>
   </scroll-view>
+
+  <!-- 底部聊天输入框 -->
+  <su-fixed bottom>
+    <view v-if="showNewMessageTip" :style="backToTopStyle">
+      <text>有新消息</text>
+    </view>
+    <slot name="bottom"></slot>
+  </su-fixed>
 </template>
 
 <script setup>
   import MessageListItem from '@/pages/chat/components/messageListItem.vue';
-  import { reactive, ref, nextTick, watch } from 'vue';
+  import { onMounted, reactive, ref } from 'vue';
   import KeFuApi from '@/sheep/api/promotion/kefu';
   import { isEmpty } from '@/sheep/helper/utils';
-  import sheep from '@/sheep';
   import { formatDate } from '@/sheep/util';
 
-  const sys_navBar = sheep.$platform.navbar;
-  const scrollRef = ref(null); // 添加对scroll-view的引用
   const messageList = ref([]); // 消息列表
   const showNewMessageTip = ref(false); // 显示有新消息提示
-  const isRefreshing = ref(false); // 是否正在刷新
-  const isTriggered = ref(false); // 下拉刷新状态
-  const loadingMore = ref(false); // 是否正在加载更多
-  const scrollTop = ref(0); // 滚动位置
-  const lastScrollTop = ref(0); // 上次滚动位置
-  const hasReachedBottom = ref(true); // 是否滚动到底部
-  const forceUpdate = ref(0); // 强制更新计数器
-
+  const refreshMessage = ref(false); // 更新消息列表
   const queryParams = reactive({
     no: 1, // 查询次数，只用于触底计算
     limit: 20,
     createTime: undefined,
   });
-
-  // 监听消息列表变化，自动滚动到底部
-  watch(messageList, (newVal, oldVal) => {
-    // 如果是添加了新消息 且 (在底部 或 列表初始加载)
-    if (newVal.length > oldVal.length && (hasReachedBottom.value || oldVal.length === 0)) {
-      nextTick(() => {
-        scrollToBottom(true);
-      });
-    }
-  });
-
-  // 获取消息分页列表
-  const getMessageList = async (isRefresh = false) => {
-    if (isRefresh) {
-      queryParams.createTime = undefined;
-      queryParams.no = 1;
-    }
-
-    loadingMore.value = true;
-    try {
-      const { data } = await KeFuApi.getKefuMessageList(queryParams);
-      if (isEmpty(data)) {
-        loadingMore.value = false;
-        return;
-      }
-
-      if (isRefresh) {
-        messageList.value = data;
-      } else {
-        messageList.value = [...messageList.value, ...data];
-      }
-
-      if (data.slice(-1).length > 0) {
-        // 设置最后一次历史查询的最后一条消息的 createTime
-        queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
-      }
-
-      // 刷新完成后滚动到底部
-      if (isRefresh) {
-        setTimeout(() => {
-          scrollToBottom(true);
-        }, 300);
-      }
-    } catch (error) {
-      console.error('获取消息列表失败:', error);
-    } finally {
-      loadingMore.value = false;
-      isTriggered.value = false;
-    }
-  };
-
-  // 下拉刷新
-  const onRefresh = async () => {
-    isTriggered.value = true;
-    isRefreshing.value = true;
-    await getMessageList(true);
-    isRefreshing.value = false;
-    setTimeout(() => {
-      isTriggered.value = false;
-    }, 500);
-  };
-
-  // 上拉加载更多
-  const onScrollToLower = async () => {
-    if (loadingMore.value) return;
-    queryParams.no++;
+  const backToTopStyle = reactive({
+    height: '30px',
+    width: '100px',
+    'background-color': '#fff',
+    'border-radius': '30px',
+    'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  }); // 返回顶部样式
+  // const pagingRef = ref(null); // 虚拟列表
+  const queryList = async (no, limit) => {
+    // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
+    queryParams.no = no;
+    queryParams.limit = limit;
     await getMessageList();
   };
 
-  // 监听滚动事件
-  const onScroll = (e) => {
-    lastScrollTop.value = e.detail.scrollTop;
-
-    // 判断是否滚动到底部 - 修正计算方法
-    const scrollHeight = e.detail.scrollHeight;
-    const scrollTop = e.detail.scrollTop;
-    const clientHeight = e.detail.scrollHeight - scrollHeight; // 近似计算可见区域高度
-
-    // 如果滚动位置到顶部（反转后是底部）的距离很小，则认为已到底部
-    hasReachedBottom.value = scrollTop <= 10;
-
-    // 如果不在底部且有未读消息，显示新消息提示
-    if (!hasReachedBottom.value) {
-      showNewMessageTip.value = true;
-    } else {
-      showNewMessageTip.value = false;
+  // 获得消息分页列表
+  const getMessageList = async () => {
+    const { data } = await KeFuApi.getKefuMessageList(queryParams);
+    if (isEmpty(data)) {
+      // pagingRef.value.completeByNoMore([], true);
+      return;
     }
+    if (queryParams.no > 1 && refreshMessage.value) {
+      const newMessageList = [];
+      for (const message of data) {
+        if (messageList.value.some((val) => val.id === message.id)) {
+          continue;
+        }
+        newMessageList.push(message);
+      }
+      // 新消息追加到开头
+      messageList.value = [...newMessageList, ...messageList.value];
+      // pagingRef.value.updateCache(); // 更新缓存
+      refreshMessage.value = false; // 更新好后重置状态
+      return;
+    }
+    if (data.slice(-1).length > 0) {
+      // 设置最后一次历史查询的最后一条消息的 createTime
+      queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
+    }
+    messageList.value = data;
+    // pagingRef.value.completeByNoMore(data, false);
   };
 
-  // 滚动到底部
-  const scrollToBottom = (force = false) => {
-    // 因为列表是倒置的，所以滚动到顶部就是滚动到最新消息
-    if (force) {
-      // 在某些情况下，直接设置scrollTop可能不会触发更新
-      // 使用一个计数器强制视图更新
-      forceUpdate.value++;
-      setTimeout(() => {
-        scrollTop.value = 0;
-      }, 50);
-    } else {
-      scrollTop.value = 0;
-    }
-
-    showNewMessageTip.value = false;
-    hasReachedBottom.value = true;
-  };
-
-  // 刷新消息列表 - 优化处理新消息
+  /** 刷新消息列表 */
   const refreshMessageList = async (message = undefined) => {
     if (typeof message !== 'undefined') {
-      // 追加新消息
-      messageList.value = [message, ...messageList.value];
-
-      // 如果当前在底部，滚动到新消息
-      if (hasReachedBottom.value) {
-        // 等待DOM更新后滚动
-        nextTick(() => {
-          scrollToBottom(true);
-        });
-      } else {
-        showNewMessageTip.value = true;
-      }
+      // 追加数据
+      messageList.value.map(message);
+      // pagingRef.value.addChatRecordData([message], false);
     } else {
-      // 全量刷新
-      await getMessageList(true);
+      queryParams.createTime = undefined;
+      refreshMessage.value = true;
+      await getMessageList();
+    }
+
+    // 若已是第一页则不做处理
+    if (queryParams.no > 1) {
+      showNewMessageTip.value = true;
+    } else {
+      onScrollToUpper();
     }
   };
 
-  // 初始化加载数据
-  getMessageList(true);
+  /** 滚动到最新消息 */
+  const onBackToTopClick = (event) => {
+    event(false); // 禁用默认操作
+    // pagingRef.value.scrollToBottom();
+  };
 
-  // 暴露方法给父组件
-  defineExpose({
-    getMessageList,
-    refreshMessageList
+  /** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
+  const onScrollToUpper = () => {
+    // 若已是第一页则不做处理
+    if (queryParams.no === 1) {
+      return;
+    }
+    showNewMessageTip.value = false;
+  };
+  defineExpose({ getMessageList, refreshMessageList });
+
+  /** 监听消息列表滚动 */
+  const onScroll = (e) => {
+    const { scrollTop } = e.detail;
+    console.log('scrollTop', scrollTop);
+  };
+
+  onMounted(() => {
+    getMessageList();
   });
 </script>
 
 <style>
   .chat-scroll-view {
-    height: calc(100vh - 100px); /* 减去底部输入框的高度 */
+    height: calc(100vh - 100px);
+    /* 减去底部输入框的高度 */
     width: 100%;
     position: relative;
     background-color: #f8f8f8;
+    z-index: 1;
+    /* 确保层级正确 */
+  }
+
+  .message-container {
+    width: 100%;
+    min-height: 100vh;
+    /* 确保容器至少有一屏高度 */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    /* 默认内容放到底部 */
   }
 
   .message-list {
-    transform: scaleY(-1); /* 聊天列表倒置，让最新消息在底部 */
     width: 100%;
-    padding-bottom: 20rpx;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+    /* 底部留出一些空间 */
   }
 
-  .loading-more {
-    text-align: center;
-    color: #999;
-    font-size: 24rpx;
-    padding: 20rpx 0;
-  }
-
-  .new-message-tip {
-    position: fixed;
-    bottom: 140rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #fff;
-    padding: 10rpx 30rpx;
-    border-radius: 30rpx;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 100;
-    font-size: 24rpx;
-    color: #333;
+  .message-item {
+    margin-bottom: 10px;
   }
 </style>

pages/chat/components/messageListItem.vue

@@ -42,11 +42,12 @@
             sheep.$url.static('/static/img/shop/chat/default.png')
           "
           mode="aspectFill"
+          lazy-load
         ></image>
         <!-- 内容 -->
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
           <view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
-            <mp-html :content="replaceEmoji(getMessageContent(message).text || message.content)" />
+            <mp-html :content="processedContent" :domain="sheep.$url.cdn('')" lazy-load />
           </view>
         </template>
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
@@ -138,7 +139,16 @@
     return false;
   });
 
-  // 处理表情
+  // 缓存表情映射
+  const emojiMap = computed(() => {
+    const map = new Map();
+    emojiList.forEach(emoji => {
+      map.set(emoji.name, emoji.file);
+    });
+    return map;
+  });
+
+  // 处理表情 - 进行缓存优化
   function replaceEmoji(data) {
     let newData = data;
     if (typeof newData !== 'object') {
@@ -146,27 +156,28 @@
       let zhEmojiName = newData.match(reg);
       if (zhEmojiName) {
         zhEmojiName.forEach((item) => {
-          let emojiFile = selEmojiFile(item);
-          newData = newData.replace(
-            item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
-              '/static/img/chat/emoji/' + emojiFile,
-            )}"/>`,
-          );
+          const emojiFile = emojiMap.value.get(item) || '';
+          if (emojiFile) {
+            newData = newData.replace(
+              item,
+              `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
+                '/static/img/chat/emoji/' + emojiFile,
+              )}"/>`,
+            );
+          }
         });
       }
     }
     return newData;
   }
 
-  function selEmojiFile(name) {
-    for (let index in emojiList) {
-      if (emojiList[index].name === name) {
-        return emojiList[index].file;
-      }
+  // 预处理内容，避免重复计算
+  const processedContent = computed(() => {
+    if (props.message.contentType === KeFuMessageContentTypeEnum.TEXT) {
+      return replaceEmoji(getMessageContent.value(props.message).text || props.message.content);
     }
-    return false;
-  }
+    return props.message.content;
+  });
 </script>
 
 <style scoped lang="scss">

pages/chat/index.vue

@@ -13,6 +13,9 @@
           v-model="chat.msg"
           @on-tools="onTools"
           @send-message="onSendMessage"
+          :auto-focus="false"
+          :show-char-count="true"
+          :max-length="500"
         ></message-input>
       </template>
     </MessageList>
@@ -29,6 +32,9 @@
         v-model="chat.msg"
         @on-tools="onTools"
         @send-message="onSendMessage"
+        :auto-focus="false"
+        :show-char-count="true"
+        :max-length="500"
       ></message-input>
     </tools-popup>
     <!--  商品订单选择  -->
@@ -181,6 +187,8 @@
       // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
       if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
         console.log('管理员已读消息');
+        // 更新消息已读状态
+        sheep.$helper.toast('客服已读您的消息');
       }
     },
   });