Wire consultation page to dialogue API

pages/consultation/index.vue

@@ -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>
-