!124 【功能完善】商城：客服消息改为游标查询，消息 JSON 化

Merge pull request !124 from puhui999/master

pages/chat/components/messageList.vue

@@ -34,10 +34,12 @@
   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 messageList = ref([]); // 消息列表
   const showNewMessageTip = ref(false); // 显示有新消息提示
+  const refreshMessage = ref(false); // 更新消息列表
   const backToTopStyle = reactive({
     'width': '100px',
     'background-color': '#fff',
@@ -48,8 +50,9 @@
     'alignItems': 'center',
   }); // 返回顶部样式
   const queryParams = reactive({
-    pageNo: 1,
-    pageSize: 10,
+    pageNo: 1, // 只用于触底计算
+    pageSize: 20,
+    createTime: undefined,
   });
   const pagingRef = ref(null); // 虚拟列表
   const queryList = async (pageNo, pageSize) => {
@@ -61,21 +64,47 @@
   };
   // 获得消息分页列表
   const getMessageList = async () => {
-    const { data } = await KeFuApi.getKefuMessagePage(queryParams);
-    if (isEmpty(data.list)) {
+    const { data } = await KeFuApi.getKefuMessageList(queryParams);
+    if (isEmpty(data)) {
+      pagingRef.value.completeByNoMore([], true);
       return;
     }
-    pagingRef.value.completeByTotal(data.list, data.total);
+    if (queryParams.pageNo > 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;
+    }
+
+    // 设置最后一次历史查询的最后一条消息的 createTime
+    queryParams.createTime = formatDate(data.at(-1).createTime);
+    pagingRef.value.completeByNoMore(data, false);
   };
   /** 刷新消息列表 */
-  const refreshMessageList = (message = undefined) => {
-    if (message !== undefined) {
-      showNewMessageTip.value = true;
+  const refreshMessageList = async (message = undefined) => {
+    if (typeof message !== 'undefined') {
       // 追加数据
       pagingRef.value.addChatRecordData([message], false);
-      return;
+    } else {
+      queryParams.createTime = undefined;
+      refreshMessage.value = true;
+      await getMessageList();
+    }
+
+    // 若已是第一页则不做处理
+    if (queryParams.pageNo > 1) {
+      showNewMessageTip.value = true;
+    } else {
+      onScrollToUpper();
     }
-    pagingRef.value.reload();
   };
   /** 滚动到最新消息 */
   const onBackToTopClick = (event) => {

pages/chat/components/messageListItem.vue

@@ -46,7 +46,7 @@
         <!-- 内容 -->
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
           <view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
-            <mp-html :content="replaceEmoji(message.content)" />
+            <mp-html :content="replaceEmoji(getMessageContent(message).text || message.content)" />
           </view>
         </template>
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
@@ -58,9 +58,9 @@
             <su-image
               class="message-img"
               isPreview
-              :previewList="[sheep.$url.cdn(message.content)]"
+              :previewList="[sheep.$url.cdn(getMessageContent(message).picUrl || message.content)]"
               :current="0"
-              :src="sheep.$url.cdn(message.content)"
+              :src="sheep.$url.cdn(getMessageContent(message).picUrl || message.content)"
               :height="200"
               :width="200"
               mode="aspectFill"
@@ -101,7 +101,7 @@
   import { KeFuMessageContentTypeEnum, UserTypeEnum } from '@/pages/chat/util/constants';
   import { emojiList } from '@/pages/chat/util/emoji';
   import sheep from '@/sheep';
-  import { formatDate } from '@/sheep/util';
+  import { formatDate, jsonParse } from '@/sheep/util';
   import GoodsItem from '@/pages/chat/components/goods.vue';
   import OrderItem from '@/pages/chat/components/order.vue';
 
@@ -122,7 +122,7 @@
       default: () => [],
     },
   });
-  const getMessageContent = computed(() => (item) => JSON.parse(item.content)); // 解析消息内容
+  const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容
 
   //======================= 工具 =======================
 

pages/chat/index.vue

@@ -34,6 +34,7 @@
   import FileApi from '@/sheep/api/infra/file';
   import KeFuApi from '@/sheep/api/promotion/kefu';
   import { useWebSocket } from '@/sheep/hooks/useWebSocket';
+  import { jsonParse } from '@/sheep/util';
 
   const sys_navBar = sheep.$platform.navbar;
 
@@ -52,7 +53,7 @@
     try {
       const data = {
         contentType: KeFuMessageContentTypeEnum.TEXT,
-        content: chat.msg,
+        content: JSON.stringify({ text: chat.msg }),
       };
       await KeFuApi.sendKefuMessage(data);
       await messageListRef.value.refreshMessageList();
@@ -104,7 +105,7 @@
         const res = await FileApi.uploadFile(data.tempFiles[0].path);
         msg = {
           contentType: KeFuMessageContentTypeEnum.IMAGE,
-          content: res.data,
+          content: JSON.stringify({picUrl: res.data}),
         };
         break;
       case 'goods':
@@ -140,13 +141,13 @@
     onMessage: async (data) => {
       const type = data.type;
       if (!type) {
-        console.error('未知的消息类型：' + data.value);
+        console.error('未知的消息类型：' + data);
         return;
       }
       // 2.2 消息类型：KEFU_MESSAGE_TYPE
       if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
         // 刷新消息列表
-        await messageListRef.value.refreshMessageList(JSON.parse(data.content));
+        await messageListRef.value.refreshMessageList(jsonParse(data.content));
         return;
       }
       // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ

sheep/api/promotion/kefu.js

@@ -15,9 +15,9 @@ const KeFuApi = {
       },
     });
   },
-  getKefuMessagePage: (params) => {
+  getKefuMessageList: (params) => {
     return request({
-      url: '/promotion/kefu-message/page',
+      url: '/promotion/kefu-message/list',
       method: 'GET',
       params,
       custom: {

sheep/util/index.js

@@ -131,3 +131,16 @@ export const copyValueToTarget = (target, source) => {
   // 更新目标对象值
   Object.assign(target, newObj)
 }
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str) {
+  try {
+    return JSON.parse(str)
+  } catch (e) {
+    console.error(`str[${str}] 不是一个 JSON 字符串`)
+    return ''
+  }
+}