Wire consultation page to dialogue API
This commit is contained in:
JiXinHui
parent
217d0bd20f
commit
38154d6306
|
|
@ -13,8 +13,8 @@
|
|||
<!-- 聊天会话列表 -->
|
||||
<view
|
||||
class="chat-item"
|
||||
v-for="(item, index) in chatList"
|
||||
:key="item.id"
|
||||
v-for="(item, index) in displayChatList"
|
||||
:key="item.id || index"
|
||||
@click="openChat(item)"
|
||||
>
|
||||
<view class="chat-avatar-wrapper">
|
||||
|
|
@ -28,10 +28,10 @@
|
|||
<view class="chat-content">
|
||||
<view class="chat-header">
|
||||
<text class="chat-name">{{ item.name }}</text>
|
||||
<text class="chat-time">{{ item.lastMessageTime }}</text>
|
||||
<text class="chat-time">{{ item.displayTime }}</text>
|
||||
</view>
|
||||
<view class="chat-preview">
|
||||
<text class="preview-text">{{ item.lastMessage }}</text>
|
||||
<text class="preview-text">{{ item.displayPreview }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue