diff --git a/pages/chat/components/messageList.vue b/pages/chat/components/messageList.vue
index 95a19e9e..e014a068 100644
--- a/pages/chat/components/messageList.vue
+++ b/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) => {
diff --git a/pages/chat/components/messageListItem.vue b/pages/chat/components/messageListItem.vue
index 06a718de..a0120902 100644
--- a/pages/chat/components/messageListItem.vue
+++ b/pages/chat/components/messageListItem.vue
@@ -46,7 +46,7 @@
-
+
@@ -58,9 +58,9 @@
[],
},
});
- const getMessageContent = computed(() => (item) => JSON.parse(item.content)); // 解析消息内容
+ const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容
//======================= 工具 =======================
diff --git a/pages/chat/index.vue b/pages/chat/index.vue
index 5b20a618..756f76e9 100644
--- a/pages/chat/index.vue
+++ b/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
diff --git a/sheep/api/promotion/kefu.js b/sheep/api/promotion/kefu.js
index 86481ab0..6b512f75 100644
--- a/sheep/api/promotion/kefu.js
+++ b/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: {
diff --git a/sheep/util/index.js b/sheep/util/index.js
index e2d8ff7d..fc975e18 100644
--- a/sheep/util/index.js
+++ b/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 ''
+ }
+}