diff --git a/pages/consultation/index.vue b/pages/consultation/index.vue index 1231980..b298f6d 100644 --- a/pages/consultation/index.vue +++ b/pages/consultation/index.vue @@ -13,8 +13,8 @@ @@ -28,10 +28,10 @@ {{ item.name }} - {{ item.lastMessageTime }} + {{ item.displayTime }} - {{ item.lastMessage }} + {{ item.displayPreview }} @@ -61,76 +61,38 @@ export default { TabBar, PageHeader, }, + computed: { + // 补充展示字段,模板直接使用 + displayChatList() { + return (this.chatList || []).map((item) => ({ + ...item, + displayTime: item.lastMessageTime || "", + displayPreview: item.lastMessage || "暂无消息", + })); + }, + }, data() { return { - // 聊天会话列表(模拟数据) - chatList: [ - { - id: 1, - userId: 'user_001', - name: '山东考生1', - avatar: '/static/avatar/default-avatar.png', - lastMessage: '你好,在吗', - lastMessageTime: '09:50', - unreadCount: 2, - }, - { - id: 2, - userId: 'user_002', - name: '河北考生2', - avatar: '/static/avatar/default-avatar.png', - lastMessage: '我是保研的是否了解到了后续计划,谁信谁的呢们爱国士...', - lastMessageTime: '09:50', - unreadCount: 0, - }, - { - id: 3, - userId: 'user_003', - name: '山东考生34523', - avatar: '/static/avatar/default-avatar.png', - lastMessage: '请问,学校宿舍几人间?', - lastMessageTime: '09:50', - unreadCount: 1, - }, - { - id: 4, - userId: 'user_004', - name: '招办王老师', - avatar: '/static/avatar/default-avatar.png', - lastMessage: '你好,在吗', - lastMessageTime: '09:50', - unreadCount: 0, - }, - { - id: 5, - userId: 'user_005', - name: '山东考生34523', - avatar: '/static/avatar/default-avatar.png', - lastMessage: '请问,学校宿舍几人间?', - lastMessageTime: '09:50', - unreadCount: 3, - }, - { - id: 6, - userId: 'user_006', - name: '招办王老师', - avatar: '/static/avatar/default-avatar.png', - lastMessage: '你好,在吗', - lastMessageTime: '09:50', - unreadCount: 0, - }, - ], + // 聊天会话列表 + chatList: [], + totalCount: 0, + isLoading: false, + hasLoaded: false, }; }, onLoad() { // 加载聊天列表 - this.loadChatList(); + this.loadChatList().finally(() => { + this.hasLoaded = true; + }); }, onShow() { // 页面显示时刷新列表 - this.refreshChatList(); + if (this.hasLoaded) { + this.refreshChatList(); + } }, methods: { @@ -147,19 +109,87 @@ export default { }, // 加载聊天列表 - loadChatList() { - // TODO: 接入真实API - // this.$u.api.getChatList().then(res => { - // this.chatList = res.data; - // }); - - console.log('[在线咨询] 加载聊天列表'); + async loadChatList() { + if (this.isLoading) return; + this.isLoading = true; + + try { + const res = await this.$u.api.GetDialogueListApi(); + const list = (res && res.data && res.data.item1) || []; + + this.chatList = this.normalizeDialogueList(list); + this.totalCount = res?.data?.item2 || list.length; + } catch (error) { + console.error("[在线咨询] 获取会话列表失败", error); + uni.showToast({ + title: "获取会话列表失败", + icon: "none", + }); + } finally { + this.isLoading = false; + } }, // 刷新聊天列表 refreshChatList() { - console.log('[在线咨询] 刷新聊天列表'); - // TODO: 刷新数据 + this.loadChatList(); + }, + + // 规范化接口返回的会话列表数据 + normalizeDialogueList(list = []) { + // 后续接口字段若变更,仅需调整此处映射 + return list.map((item, index) => { + const unread = + typeof item?.unReadCount === "number" + ? item.unReadCount + : item?.unreadCount || 0; + + return { + id: item?.dialogueManagementId || item?.dialogueId || item?.id || index, + userId: item?.receiverId || item?.friendId || item?.userId || "", + name: + item?.receiverName || + item?.friendName || + item?.userName || + item?.title || + "", + avatar: this.buildAvatarUrl( + item?.receiverHeadSculptureUrl || + item?.avatar || + item?.friendAvatar + ), + lastMessage: item?.title || item?.lastMessage || item?.content || "暂无消息", + lastMessageTime: this.formatTime( + item?.lastMessageTime || item?.lastSendTime || item?.startTime + ), + unreadCount: unread, + }; + }); + }, + + // 拼装头像地址,兼容相对路径 + buildAvatarUrl(url) { + const fallback = "/static/avatar/default-avatar.png"; + if (!url) return fallback; + if (/^https?:\/\//i.test(url)) return url; + const baseUrl = this.$u?.http?.config?.baseUrl || ""; + if (baseUrl) return `${baseUrl}/${url}`; + return url.startsWith("/") ? url : `/${url}`; + }, + + // 格式化时间显示 + formatTime(timeStr) { + if (!timeStr) return ""; + const date = new Date(timeStr); + if (!isNaN(date.getTime())) { + const month = (date.getMonth() + 1).toString().padStart(2, "0"); + const day = date.getDate().toString().padStart(2, "0"); + const hours = date.getHours().toString().padStart(2, "0"); + const minutes = date.getMinutes().toString().padStart(2, "0"); + return `${month}/${day} ${hours}:${minutes}`; + } + // 回退到字符串裁剪 + return String(timeStr).replace("T", " ").slice(5, 16); }, }, }; @@ -234,19 +264,23 @@ export default { /* ===== 聊天列表项 ===== */ .chat-item { display: flex; - padding: 15px; - background: #fff; - border-bottom: 1rpx solid #f0f0f0; + align-items: center; + padding: 14px 16px; + background-color: #fff; + border-bottom: 1rpx solid #f1f1f1; transition: background-color 0.2s; } .chat-item:active { - background-color: #f5f5f5; + background-color: #f8f8f8; } .chat-avatar-wrapper { position: relative; margin-right: 12px; + width: 50px; + height: 50px; + flex-shrink: 0; } .chat-avatar { @@ -290,8 +324,8 @@ export default { .chat-name { font-size: 16px; font-weight: 500; - color: #333; - max-width: 200px; + color: #1f1f1f; + max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -299,7 +333,7 @@ export default { .chat-time { font-size: 12px; - color: #999; + color: #9b9b9b; flex-shrink: 0; } @@ -310,7 +344,7 @@ export default { .preview-text { font-size: 13px; - color: #999; + color: #9b9b9b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -343,4 +377,3 @@ export default { color: #999; } -