Skip to content

phsl / admin

Go to a project
Commit d0720980 by puhui999
Options

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

parent 1ad5de57
Showing with 26 additions and 17 deletions
src/views/mall/promotion/kefu/components/KeFuMessageList.vue
...@@ -47,15 +47,18 @@ ...@@ -47,15 +47,18 @@
class="p-10px" class="p-10px"
> >
<!-- 文本消息 --> <!-- 文本消息 -->
<MessageItem :content-type="KeFuMessageContentTypeEnum.TEXT" :message="item"> <MessageItem :message="item">
<template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
<div <div
v-dompurify-html="replaceEmoji(item.content)" v-dompurify-html="replaceEmoji(item.content)"
class="flex items-center" class="flex items-center"
></div> ></div>
</template>
</MessageItem> </MessageItem>
<!-- 图片消息 --> <!-- 图片消息 -->
<MessageItem :content-type="KeFuMessageContentTypeEnum.IMAGE" :message="item"> <MessageItem :message="item">
<el-image <el-image
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
:initial-index="0" :initial-index="0"
:preview-src-list="[item.content]" :preview-src-list="[item.content]"
:src="item.content" :src="item.content"
...@@ -65,8 +68,9 @@ ...@@ -65,8 +68,9 @@
/> />
</MessageItem> </MessageItem>
<!-- 商品消息 --> <!-- 商品消息 -->
<MessageItem :content-type="KeFuMessageContentTypeEnum.PRODUCT" :message="item"> <MessageItem :message="item">
<ProductItem <ProductItem
v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
:picUrl="getMessageContent(item).picUrl" :picUrl="getMessageContent(item).picUrl"
:price="getMessageContent(item).price" :price="getMessageContent(item).price"
:skuText="getMessageContent(item).introduction" :skuText="getMessageContent(item).introduction"
...@@ -77,8 +81,12 @@ ...@@ -77,8 +81,12 @@
/> />
</MessageItem> </MessageItem>
<!-- 订单消息 --> <!-- 订单消息 -->
<MessageItem :content-type="KeFuMessageContentTypeEnum.ORDER" :message="item"> <MessageItem :message="item">
<OrderItem :message="item" class="max-w-70%" /> <OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item"
class="max-w-70%"
/>
</MessageItem> </MessageItem>
</div> </div>
<el-avatar <el-avatar
...@@ -134,6 +142,7 @@ import { formatDate } from '@/utils/formatTime' ...@@ -134,6 +142,7 @@ import { formatDate } from '@/utils/formatTime'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import { jsonParse } from '@/utils'
dayjs.extend(relativeTime) dayjs.extend(relativeTime)
...@@ -153,7 +162,7 @@ const queryParams = reactive({ ...@@ -153,7 +162,7 @@ const queryParams = reactive({
const total = ref(0) // 消息总条数 const total = ref(0) // 消息总条数
const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效 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 getMessageList = async () => {
const res = await KeFuMessageApi.getKeFuMessagePage(queryParams) const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
...@@ -171,9 +180,6 @@ const getMessageList = async () => { ...@@ -171,9 +180,6 @@ const getMessageList = async () => {
} }
/** 添加消息 */ /** 添加消息 */
const pushMessage = (message: any) => { const pushMessage = (message: any) => {
if (message.conversationId !== conversation.value.id) {
return
}
if (messageList.value.some((val) => val.id === message.id)) { if (messageList.value.some((val) => val.id === message.id)) {
return return
} }
...@@ -193,6 +199,10 @@ const refreshMessageList = async (message?: any) => { ...@@ -193,6 +199,10 @@ const refreshMessageList = async (message?: any) => {
} }
if (typeof message !== 'undefined') { if (typeof message !== 'undefined') {
// 当前查询会话与消息所属会话不一致则不做处理
if (message.conversationId !== conversation.value.id) {
return
}
pushMessage(message) pushMessage(message)
} else { } else {
queryParams.pageNo = 1 queryParams.pageNo = 1
...@@ -297,7 +307,7 @@ const handleScroll = debounce(({ scrollTop }) => { ...@@ -297,7 +307,7 @@ const handleScroll = debounce(({ scrollTop }) => {
return return
} }
// 触顶自动加载下一页数据 // 触顶自动加载下一页数据
if (scrollTop === 0) { if (Math.floor(scrollTop) === 0) {
handleOldMessage() handleOldMessage()
} }
const wrap = scrollbarRef.value?.wrapRef const wrap = scrollbarRef.value?.wrapRef
......
src/views/mall/promotion/kefu/components/message/MessageItem.vue
<template> <template>
<!-- 消息组件 --> <!-- 消息组件 -->
<template v-if="contentType === message.contentType">
<div <div
:class="[ :class="[
message.senderType === UserTypeEnum.MEMBER message.senderType === UserTypeEnum.MEMBER
...@@ -12,7 +11,6 @@ ...@@ -12,7 +11,6 @@
> >
<slot></slot> <slot></slot>
</div> </div>
</template>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -22,6 +20,5 @@ import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' ...@@ -22,6 +20,5 @@ import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
defineOptions({ name: 'MessageItem' }) defineOptions({ name: 'MessageItem' })
defineProps<{ defineProps<{
message: KeFuMessageRespVO message: KeFuMessageRespVO
contentType: number
}>() }>()
</script> </script>
src/views/mall/promotion/kefu/components/message/OrderItem.vue
<template> <template>
<div v-if="isObject(getMessageContent)">
<div :key="getMessageContent.id" class="order-list-card-box mt-14px"> <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-card-header flex items-center justify-between p-x-20px">
<div class="order-no">订单号：{{ getMessageContent.no }}</div> <div class="order-no">订单号：{{ getMessageContent.no }}</div>
...@@ -26,13 +27,14 @@ ...@@ -26,13 +27,14 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { fenToYuan } from '@/utils' import { fenToYuan, jsonParse } from '@/utils'
import ProductItem from './ProductItem.vue'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' 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' }) defineOptions({ name: 'OrderItem' })
const props = defineProps<{ const props = defineProps<{
...@@ -41,7 +43,7 @@ const props = defineProps<{ ...@@ -41,7 +43,7 @@ const props = defineProps<{
}>() }>()
const getMessageContent = computed(() => const getMessageContent = computed(() =>
isEmpty(props.order) ? JSON.parse(props!.message!.content) : props.order typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
) )
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment