feat(消息列表): 替换模拟数据为真实API接口获取

实现消息列表页面与后端API对接，包括初始化数据、加载更多和搜索功能
移除原有的模拟数据生成逻辑，改为从接口获取真实数据
添加错误处理和加载状态管理

@@ -102,6 +102,8 @@ import TabBar from '@/components/TabBar.vue'
 import MessageDetail from '@/components/MessageDetail.vue'
 import { $ } from '@tarojs/extend'
 import Taro from '@tarojs/taro'
+// 导入接口
+import { getMessagesListAPI } from '@/api/chat'
 
 // 默认头像
 const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
@@ -116,8 +118,13 @@ const scrollTop = ref(0)
 
 // 搜索值
 const searchValue = ref('')
-const onBlurSearch = () => {
+const onBlurSearch = async () => {
     console.warn(searchValue.value)
+    // 重置分页状态
+    page.value = 1
+    hasMore.value = true
+    // 重新获取数据
+    await initData()
 }
 // 当前激活的Tab
 const activeTab = ref('all')
@@ -130,7 +137,7 @@ const pageSize = 10
 // 是否还有更多数据
 const hasMore = ref(true)
 
-// 模拟对话数据
+// 对话数据
 const conversations = ref([])
 
 // 消息详情弹框相关
@@ -141,27 +148,63 @@ const selectedConversation = ref(null)
 const mockMessages = ref([])
 
 // 初始化数据
-const initData = () => {
-    const mockData = []
-
-    // 生成更多初始数据确保可以滚动
-    for (let i = 1; i <= 15; i++) {
-        const types = ['chat', 'system']
-        const type = types[i % 2]
-
-        mockData.push({
-            id: i,
-            name: type === 'system' ? '系统通知' : `用户${i}`,
-            avatar: type === 'chat' ? `https://randomuser.me/api/portraits/men/${(i % 50) + 1}.jpg` : '',
-            icon: type === 'system' ? markRaw(Notice) : null,
-            lastMessage: type === 'system' ? '您有新的系统通知' : `这是第${i}条消息内容`,
-            time: i <= 5 ? `${i * 5}分钟前` : i <= 10 ? `${i}小时前` : `${i - 10}天前`,
-            unread: Math.random() > 0.5,
-            type: type
+const initData = async () => {
+    try {
+        loading.value = true
+
+        // 根据当前tab获取对应的消息类型和状态
+        const params = {
+            page: 0,
+            limit: pageSize
+        }
+
+        // 根据activeTab设置过滤参数
+        if (activeTab.value === 'unread') {
+            params.status = 3 // 未读
+        } else if (activeTab.value === 'system') {
+            params.type = 'system' // 系统消息
+        }
+
+        // 如果有搜索关键词
+        if (searchValue.value) {
+            params.keyword = searchValue.value
+        }
+
+        const response = await getMessagesListAPI(params)
+
+        if (response.code && response.data && response.data.list) {
+            // 转换API数据格式为组件需要的格式
+            const transformedData = response.data.list.map(item => ({
+                id: item.id,
+                name: item.type === 'system' ? '系统通知' : (item.partner_nickname || '未知用户'),
+                avatar: item.type === 'chat' ? (item.partner_avatar_url || defaultAvatar) : '',
+                icon: item.type === 'system' ? markRaw(Notice) : null,
+                lastMessage: item.note || '',
+                time: item.created_time_desc || '',
+                unread: item.status === 3, // 3=未读，5=已读
+                type: item.type,
+                create_time: item.create_time
+            }))
+
+            conversations.value = transformedData
+
+            // 判断是否还有更多数据
+            hasMore.value = transformedData.length === pageSize
+        } else {
+            conversations.value = []
+            hasMore.value = false
+        }
+    } catch (error) {
+        console.error('获取消息列表失败:', error)
+        Taro.showToast({
+            title: '获取消息失败',
+            icon: 'error'
         })
+        conversations.value = []
+        hasMore.value = false
+    } finally {
+        loading.value = false
     }
-
-    conversations.value = mockData
 }
 
 // 过滤后的对话列表
@@ -187,7 +230,7 @@ const filteredConversations = computed(() => {
 })
 
 // Tab点击事件
-const setActiveTab = (tabKey) => {
+const setActiveTab = async (tabKey) => {
     if (activeTab.value === tabKey) return;
 
     // 添加淡出效果
@@ -197,7 +240,7 @@ const setActiveTab = (tabKey) => {
         conversationList.style.transform = 'translateY(10rpx)';
     }
 
-    setTimeout(() => {
+    setTimeout(async () => {
         activeTab.value = tabKey;
         // 重置搜索条件
         searchValue.value = '';
@@ -211,8 +254,8 @@ const setActiveTab = (tabKey) => {
         setTimeout(() => {
             scrollTop.value = 0; // 重置到顶部
         }, 50);
-        // 重新初始化数据
-        initData();
+        // 重新获取数据
+        await initData();
 
         // 添加淡入效果
         setTimeout(() => {
@@ -230,45 +273,63 @@ const loadMore = async () => {
         return
     }
 
-    loading.value = true
+    try {
+        loading.value = true
 
-    // 模拟API请求
-    setTimeout(() => {
-        const newData = generateMockData(page.value + 1)
+        // 构建请求参数
+        const params = {
+            page: page.value,
+            limit: pageSize
+        }
+
+        // 根据activeTab设置过滤参数
+        if (activeTab.value === 'unread') {
+            params.status = 3 // 未读
+        } else if (activeTab.value === 'system') {
+            params.type = 'system' // 系统消息
+        }
 
-        if (newData.length > 0) {
-            conversations.value.push(...newData)
-            page.value++
+        // 如果有搜索关键词
+        if (searchValue.value) {
+            params.keyword = searchValue.value
+        }
+
+        const response = await getMessagesListAPI(params)
+
+        if (response.code && response.data && response.data.list) {
+            // 转换API数据格式
+            const transformedData = response.data.list.map(item => ({
+                id: item.id,
+                name: item.type === 'system' ? '系统通知' : (item.partner_nickname || '未知用户'),
+                avatar: item.type === 'chat' ? (item.partner_avatar_url || defaultAvatar) : '',
+                icon: item.type === 'system' ? markRaw(Notice) : null,
+                lastMessage: item.note || '',
+                time: item.created_time_desc || '',
+                unread: item.status === 3, // 3=未读，5=已读
+                type: item.type,
+                create_time: item.create_time
+            }))
+
+            if (transformedData.length > 0) {
+                conversations.value.push(...transformedData)
+                page.value++
+                // 判断是否还有更多数据
+                hasMore.value = transformedData.length === pageSize
+            } else {
+                hasMore.value = false
+            }
         } else {
             hasMore.value = false
         }
+    } catch (error) {
+        console.error('加载更多消息失败:', error)
+        hasMore.value = false
+    } finally {
         loading.value = false
-    }, 1000)
-
-    console.warn('loadMore', page.value, hasMore.value, loading.value);
+    }
 }
 
-// 生成模拟数据
-const generateMockData = (pageNum) => {
-    if (pageNum > 3) return [] // 模拟只有3页数据
-
-    const mockData = []
-    const startId = (pageNum - 1) * pageSize + conversations.value.length + 1
-
-    for (let i = 0; i < pageSize; i++) {
-        mockData.push({
-            id: startId + i,
-            name: `用户${startId + i}`,
-            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
-            lastMessage: `这是第${startId + i}条消息`,
-            time: `${Math.floor(Math.random() * 24)}小时前`,
-            unread: Math.random() > 0.5,
-            type: 'chat'
-        })
-    }
 
-    return mockData
-}
 
 // 点击对话 - 显示消息详情弹框
 const onConversationClick = (conversation) => {
@@ -317,7 +378,7 @@ const handleSendMessage = (data) => {
 }
 
 // 页面加载时初始化数据
-onMounted(() => {
+onMounted(async () => {
     // 设置滚动列表可视高度
     const windowHeight = wx.getWindowInfo().windowHeight;
     setTimeout(async () => {
@@ -327,7 +388,7 @@ onMounted(() => {
             height: windowHeight - headerHeight - navHeight - 70 + 'px'
         }
     }, 500);
-    initData()
+    await initData()
 })
 </script>