【优化】修复客服消息列表加载 bug

src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -47,15 +47,18 @@
                 class="p-10px"
               >
                 <!-- 文本消息 -->
-                <MessageItem :content-type="KeFuMessageContentTypeEnum.TEXT" :message="item">
-                  <div
-                    v-dompurify-html="replaceEmoji(item.content)"
-                    class="flex items-center"
-                  ></div>
+                <MessageItem :message="item">
+                  <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
+                    <div
+                      v-dompurify-html="replaceEmoji(item.content)"
+                      class="flex items-center"
+                    ></div>
+                  </template>
                 </MessageItem>
                 <!-- 图片消息 -->
-                <MessageItem :content-type="KeFuMessageContentTypeEnum.IMAGE" :message="item">
+                <MessageItem :message="item">
                   <el-image
+                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
                     :initial-index="0"
                     :preview-src-list="[item.content]"
                     :src="item.content"
@@ -65,8 +68,9 @@
                   />
                 </MessageItem>
                 <!-- 商品消息 -->
-                <MessageItem :content-type="KeFuMessageContentTypeEnum.PRODUCT" :message="item">
+                <MessageItem :message="item">
                   <ProductItem
+                    v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
                     :picUrl="getMessageContent(item).picUrl"
                     :price="getMessageContent(item).price"
                     :skuText="getMessageContent(item).introduction"
@@ -77,8 +81,12 @@
                   />
                 </MessageItem>
                 <!-- 订单消息 -->
-                <MessageItem :content-type="KeFuMessageContentTypeEnum.ORDER" :message="item">
-                  <OrderItem :message="item" class="max-w-70%" />
+                <MessageItem :message="item">
+                  <OrderItem
+                    v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
+                    :message="item"
+                    class="max-w-70%"
+                  />
                 </MessageItem>
               </div>
               <el-avatar
@@ -134,6 +142,7 @@ import { formatDate } from '@/utils/formatTime'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { debounce } from 'lodash-es'
+import { jsonParse } from '@/utils'
 
 dayjs.extend(relativeTime)
 
@@ -153,7 +162,7 @@ const queryParams = reactive({
 const total = ref(0) // 消息总条数
 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
 /** 获悉消息内容 */
-const getMessageContent = computed(() => (item: any) => JSON.parse(item.content))
+const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
 /** 获得消息列表 */
 const getMessageList = async () => {
   const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
@@ -171,9 +180,6 @@ const getMessageList = async () => {
 }
 /** 添加消息 */
 const pushMessage = (message: any) => {
-  if (message.conversationId !== conversation.value.id) {
-    return
-  }
   if (messageList.value.some((val) => val.id === message.id)) {
     return
   }
@@ -193,6 +199,10 @@ const refreshMessageList = async (message?: any) => {
   }
 
   if (typeof message !== 'undefined') {
+    // 当前查询会话与消息所属会话不一致则不做处理
+    if (message.conversationId !== conversation.value.id) {
+      return
+    }
     pushMessage(message)
   } else {
     queryParams.pageNo = 1
@@ -297,7 +307,7 @@ const handleScroll = debounce(({ scrollTop }) => {
     return
   }
   // 触顶自动加载下一页数据
-  if (scrollTop === 0) {
+  if (Math.floor(scrollTop) === 0) {
     handleOldMessage()
   }
   const wrap = scrollbarRef.value?.wrapRef

src/views/mall/promotion/kefu/components/message/MessageItem.vue

@@ -1,18 +1,16 @@
 <template>
   <!-- 消息组件 -->
-  <template v-if="contentType === message.contentType">
-    <div
-      :class="[
-        message.senderType === UserTypeEnum.MEMBER
-          ? `ml-10px`
-          : message.senderType === UserTypeEnum.ADMIN
-            ? `mr-10px`
-            : ''
-      ]"
-    >
-      <slot></slot>
-    </div>
-  </template>
+  <div
+    :class="[
+      message.senderType === UserTypeEnum.MEMBER
+        ? `ml-10px`
+        : message.senderType === UserTypeEnum.ADMIN
+          ? `mr-10px`
+          : ''
+    ]"
+  >
+    <slot></slot>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,6 +20,5 @@ import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 defineOptions({ name: 'MessageItem' })
 defineProps<{
   message: KeFuMessageRespVO
-  contentType: number
 }>()
 </script>

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -1,27 +1,29 @@
 <template>
-  <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
-    <div class="order-card-header flex items-center justify-between p-x-20px">
-      <div class="order-no">订单号：{{ getMessageContent.no }}</div>
-      <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
-        {{ formatOrderStatus(getMessageContent) }}
-      </div>
-    </div>
-    <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
-      <ProductItem
-        :num="item.count"
-        :picUrl="item.picUrl"
-        :price="item.price"
-        :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
-        :title="item.spuName"
-      />
-    </div>
-    <div class="pay-box flex justify-end pr-20px">
-      <div class="flex items-center">
-        <div class="discounts-title pay-color"
-          >共 {{ getMessageContent?.productCount }} 件商品,总金额:
+  <div v-if="isObject(getMessageContent)">
+    <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
+      <div class="order-card-header flex items-center justify-between p-x-20px">
+        <div class="order-no">订单号：{{ getMessageContent.no }}</div>
+        <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
+          {{ formatOrderStatus(getMessageContent) }}
         </div>
-        <div class="discounts-money pay-color">
-          ￥{{ fenToYuan(getMessageContent?.payPrice) }}
+      </div>
+      <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
+        <ProductItem
+          :num="item.count"
+          :picUrl="item.picUrl"
+          :price="item.price"
+          :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+          :title="item.spuName"
+        />
+      </div>
+      <div class="pay-box flex justify-end pr-20px">
+        <div class="flex items-center">
+          <div class="discounts-title pay-color"
+            >共 {{ getMessageContent?.productCount }} 件商品,总金额:
+          </div>
+          <div class="discounts-money pay-color">
+            ￥{{ fenToYuan(getMessageContent?.payPrice) }}
+          </div>
         </div>
       </div>
     </div>
@@ -29,10 +31,10 @@
 </template>
 
 <script lang="ts" setup>
-import { fenToYuan } from '@/utils'
-import ProductItem from './ProductItem.vue'
+import { fenToYuan, jsonParse } from '@/utils'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
-import { isEmpty } from '@/utils/is'
+import { isObject } from '@/utils/is'
+import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
 
 defineOptions({ name: 'OrderItem' })
 const props = defineProps<{
@@ -41,7 +43,7 @@ const props = defineProps<{
 }>()
 
 const getMessageContent = computed(() =>
-  isEmpty(props.order) ? JSON.parse(props!.message!.content) : props.order
+  typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
 )
 
 /**