Skip to content

Commit d072098

Browse files
author
puhui999
committed
【优化】修复客服消息列表加载 bug
1 parent 1ad5de5 commit d072098

File tree

3 files changed

+63
-54
lines changed

3 files changed

+63
-54
lines changed

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

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,18 @@
4747
class="p-10px"
4848
>
4949
<!-- 文本消息 -->
50-
<MessageItem :content-type="KeFuMessageContentTypeEnum.TEXT" :message="item">
51-
<div
52-
v-dompurify-html="replaceEmoji(item.content)"
53-
class="flex items-center"
54-
></div>
50+
<MessageItem :message="item">
51+
<template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
52+
<div
53+
v-dompurify-html="replaceEmoji(item.content)"
54+
class="flex items-center"
55+
></div>
56+
</template>
5557
</MessageItem>
5658
<!-- 图片消息 -->
57-
<MessageItem :content-type="KeFuMessageContentTypeEnum.IMAGE" :message="item">
59+
<MessageItem :message="item">
5860
<el-image
61+
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
5962
:initial-index="0"
6063
:preview-src-list="[item.content]"
6164
:src="item.content"
@@ -65,8 +68,9 @@
6568
/>
6669
</MessageItem>
6770
<!-- 商品消息 -->
68-
<MessageItem :content-type="KeFuMessageContentTypeEnum.PRODUCT" :message="item">
71+
<MessageItem :message="item">
6972
<ProductItem
73+
v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
7074
:picUrl="getMessageContent(item).picUrl"
7175
:price="getMessageContent(item).price"
7276
:skuText="getMessageContent(item).introduction"
@@ -77,8 +81,12 @@
7781
/>
7882
</MessageItem>
7983
<!-- 订单消息 -->
80-
<MessageItem :content-type="KeFuMessageContentTypeEnum.ORDER" :message="item">
81-
<OrderItem :message="item" class="max-w-70%" />
84+
<MessageItem :message="item">
85+
<OrderItem
86+
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
87+
:message="item"
88+
class="max-w-70%"
89+
/>
8290
</MessageItem>
8391
</div>
8492
<el-avatar
@@ -134,6 +142,7 @@ import { formatDate } from '@/utils/formatTime'
134142
import dayjs from 'dayjs'
135143
import relativeTime from 'dayjs/plugin/relativeTime'
136144
import { debounce } from 'lodash-es'
145+
import { jsonParse } from '@/utils'
137146
138147
dayjs.extend(relativeTime)
139148
@@ -153,7 +162,7 @@ const queryParams = reactive({
153162
const total = ref(0) // 消息总条数
154163
const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
155164
/** 获悉消息内容 */
156-
const getMessageContent = computed(() => (item: any) => JSON.parse(item.content))
165+
const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
157166
/** 获得消息列表 */
158167
const getMessageList = async () => {
159168
const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
@@ -171,9 +180,6 @@ const getMessageList = async () => {
171180
}
172181
/** 添加消息 */
173182
const pushMessage = (message: any) => {
174-
if (message.conversationId !== conversation.value.id) {
175-
return
176-
}
177183
if (messageList.value.some((val) => val.id === message.id)) {
178184
return
179185
}
@@ -193,6 +199,10 @@ const refreshMessageList = async (message?: any) => {
193199
}
194200
195201
if (typeof message !== 'undefined') {
202+
// 当前查询会话与消息所属会话不一致则不做处理
203+
if (message.conversationId !== conversation.value.id) {
204+
return
205+
}
196206
pushMessage(message)
197207
} else {
198208
queryParams.pageNo = 1
@@ -297,7 +307,7 @@ const handleScroll = debounce(({ scrollTop }) => {
297307
return
298308
}
299309
// 触顶自动加载下一页数据
300-
if (scrollTop === 0) {
310+
if (Math.floor(scrollTop) === 0) {
301311
handleOldMessage()
302312
}
303313
const wrap = scrollbarRef.value?.wrapRef

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

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<template>
22
<!-- 消息组件 -->
3-
<template v-if="contentType === message.contentType">
4-
<div
5-
:class="[
6-
message.senderType === UserTypeEnum.MEMBER
7-
? `ml-10px`
8-
: message.senderType === UserTypeEnum.ADMIN
9-
? `mr-10px`
10-
: ''
11-
]"
12-
>
13-
<slot></slot>
14-
</div>
15-
</template>
3+
<div
4+
:class="[
5+
message.senderType === UserTypeEnum.MEMBER
6+
? `ml-10px`
7+
: message.senderType === UserTypeEnum.ADMIN
8+
? `mr-10px`
9+
: ''
10+
]"
11+
>
12+
<slot></slot>
13+
</div>
1614
</template>
1715

1816
<script lang="ts" setup>
@@ -22,6 +20,5 @@ import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
2220
defineOptions({ name: 'MessageItem' })
2321
defineProps<{
2422
message: KeFuMessageRespVO
25-
contentType: number
2623
}>()
2724
</script>

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

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
11
<template>
2-
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
3-
<div class="order-card-header flex items-center justify-between p-x-20px">
4-
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
5-
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
6-
{{ formatOrderStatus(getMessageContent) }}
7-
</div>
8-
</div>
9-
<div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
10-
<ProductItem
11-
:num="item.count"
12-
:picUrl="item.picUrl"
13-
:price="item.price"
14-
:skuText="item.properties.map((property: any) => property.valueName).join(' ')"
15-
:title="item.spuName"
16-
/>
17-
</div>
18-
<div class="pay-box flex justify-end pr-20px">
19-
<div class="flex items-center">
20-
<div class="discounts-title pay-color"
21-
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
2+
<div v-if="isObject(getMessageContent)">
3+
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
4+
<div class="order-card-header flex items-center justify-between p-x-20px">
5+
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
6+
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
7+
{{ formatOrderStatus(getMessageContent) }}
228
</div>
23-
<div class="discounts-money pay-color">
24-
￥{{ fenToYuan(getMessageContent?.payPrice) }}
9+
</div>
10+
<div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
11+
<ProductItem
12+
:num="item.count"
13+
:picUrl="item.picUrl"
14+
:price="item.price"
15+
:skuText="item.properties.map((property: any) => property.valueName).join(' ')"
16+
:title="item.spuName"
17+
/>
18+
</div>
19+
<div class="pay-box flex justify-end pr-20px">
20+
<div class="flex items-center">
21+
<div class="discounts-title pay-color"
22+
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
23+
</div>
24+
<div class="discounts-money pay-color">
25+
￥{{ fenToYuan(getMessageContent?.payPrice) }}
26+
</div>
2527
</div>
2628
</div>
2729
</div>
2830
</div>
2931
</template>
3032

3133
<script lang="ts" setup>
32-
import { fenToYuan } from '@/utils'
33-
import ProductItem from './ProductItem.vue'
34+
import { fenToYuan, jsonParse } from '@/utils'
3435
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
35-
import { isEmpty } from '@/utils/is'
36+
import { isObject } from '@/utils/is'
37+
import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
3638
3739
defineOptions({ name: 'OrderItem' })
3840
const props = defineProps<{
@@ -41,7 +43,7 @@ const props = defineProps<{
4143
}>()
4244
4345
const getMessageContent = computed(() =>
44-
isEmpty(props.order) ? JSON.parse(props!.message!.content) : props.order
46+
typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
4547
)
4648
4749
/**

0 commit comments

Comments
 (0)