feat(消息中心): 实现消息列表接口集成和未读消息显示

添加消息相关API接口文件并集成到消息中心页面
在个人中心页面显示未读消息数量
优化消息列表页面样式和空状态提示

+/*
+ * @Date: 2025-06-12 14:11:09
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-06-12 14:12:22
+ * @FilePath: /mlaj/src/api/news.js
+ * @Description: 消息相关接口
+ */
+import { fn, fetch } from './fn'
+
+const Api = {
+  NEWS_LIST: '/srv/?a=website_msg&t=my_list',
+}
+
+/**
+ * @description: 我的消息列表
+ */
+export const getNewsListAPI = (params) => fn(fetch.get(Api.NEWS_LIST, params))

 <!--
 <!--
  * @Date: 2025-03-24 12:56:07
  * @Date: 2025-03-24 12:56:07
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-12 10:53:01
+ * @LastEditTime: 2025-06-12 15:34:41
  * @FilePath: /mlaj/src/views/profile/MessagesPage.vue
  * @FilePath: /mlaj/src/views/profile/MessagesPage.vue
  * @Description: 消息中心页面
  * @Description: 消息中心页面
 -->
 -->
@@ -11,7 +11,7 @@
       <van-list
       <van-list
         v-model:loading="loading"
         v-model:loading="loading"
         :finished="finished"
         :finished="finished"
-        finished-text="没有更多了"
+        :finished-text="finishText"
         @load="onLoad"
         @load="onLoad"
         class="px-4 py-4"
         class="px-4 py-4"
       >
       >
@@ -24,18 +24,38 @@
           <div class="p-4">
           <div class="p-4">
             <div class="flex justify-between items-start mb-2">
             <div class="flex justify-between items-start mb-2">
               <h3 class="text-base font-medium flex items-center">
               <h3 class="text-base font-medium flex items-center">
-                <span
-                  v-if="!message.isRead"
-                  class="w-2 h-2 bg-red-500 rounded-full mr-2"
-                ></span>
-                {{ message.title }}
+                <span v-if="!message.isRead" class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
+                <!-- {{ message.title }} -->
+                消息
               </h3>
               </h3>
-              <span class="text-xs text-gray-500">{{ message.time }}</span>
+              <span class="text-xs text-gray-500">{{ message.created_time }}</span>
             </div>
             </div>
-            <p class="text-sm text-gray-600 line-clamp-2">{{ message.content }}</p>
+            <p class="text-sm text-gray-600 line-clamp-2">{{ message.note }}</p>
           </div>
           </div>
         </FrostedGlass>
         </FrostedGlass>
       </van-list>
       </van-list>
+
+      <!-- 无数据提示 -->
+    <div
+      v-if="!loading && messages.length === 0"
+      class="flex flex-col items-center justify-center py-12"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-16 w-16 text-gray-300"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+        />
+      </svg>
+      <p class="mt-4 text-gray-500">暂无消息</p>
+    </div>
     </div>
     </div>
   </AppLayout>
   </AppLayout>
 </template>
 </template>
@@ -47,6 +67,9 @@ import AppLayout from '@/components/layout/AppLayout.vue';
 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
 import { useTitle } from '@vueuse/core';
 import { useTitle } from '@vueuse/core';
 
 
+// 导入接口
+import { getNewsListAPI } from '@/api/news';
+
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 useTitle($route.meta.title);
 useTitle($route.meta.title);
@@ -55,46 +78,23 @@ const router = useRouter();
 const loading = ref(false);
 const loading = ref(false);
 const finished = ref(false);
 const finished = ref(false);
 const messages = ref([]);
 const messages = ref([]);
+const limit = ref(10);
 const page = ref(0);
 const page = ref(0);
-
-// 模拟消息数据
-const mockMessages = [
-  {
-    id: 1,
-    title: '课程更新通知',
-    content: '您关注的课程《亲子教育入门》已更新最新一期内容，快来查看吧！',
-    time: '2024-01-10 10:30',
-    isRead: false
-  },
-  {
-    id: 2,
-    title: '活动提醒',
-    content: '您报名的「亲子互动工作坊」将于本周六下午2点开始，请准时参加。',
-    time: '2024-01-09 15:20',
-    isRead: true
-  },
-  {
-    id: 3,
-    title: '系统通知',
-    content: '为了给您提供更好的服务，我们的App将于今晚凌晨2点进行系统升级维护。',
-    time: '2024-01-08 18:00',
-    isRead: false
-  }
-];
+const finishText = ref('没有更多了');
 
 
 // 加载更多
 // 加载更多
-const onLoad = () => {
-  // 模拟异步加载数据
-  setTimeout(() => {
-    if (page.value === 0) {
-      messages.value = mockMessages;
-    } else {
-      // 模拟没有更多数据
-      finished.value = true;
-    }
-    loading.value = false;
+const onLoad = async() => {
+  const res = await getNewsListAPI({ page: page.value, limit: limit.value });
+  if (res.code) {
+    messages.value = [...messages.value, ...res.data];
+    finished.value = res.data.length < limit.value;
     page.value++;
     page.value++;
-  }, 1000);
+    loading.value = false;
+  } else {
+    loading.value = false;
+    finished.value = true;
+    finishText.value = '';
+  }
 };
 };
 
 
 // 更新消息已读状态
 // 更新消息已读状态
@@ -107,6 +107,7 @@ const updateMessageReadStatus = (messageId) => {
 
 
 // 处理消息点击
 // 处理消息点击
 const handleMessageClick = (message) => {
 const handleMessageClick = (message) => {
+  return;
   updateMessageReadStatus(message.id);
   updateMessageReadStatus(message.id);
   router.push(`/profile/messages/${message.id}`);
   router.push(`/profile/messages/${message.id}`);
 };
 };

@@ -143,6 +143,12 @@ onMounted(async () => {
   if (code) {
   if (code) {
     profile.value = data.user;
     profile.value = data.user;
     checkIns.value = data.checkin;
     checkIns.value = data.checkin;
+    // 处理消息中心的未读消息数量
+    menuItems3.value.forEach(item => {
+      if (item.path === '/profile/messages') {
+        item.badge = data.unread_msg_count || 0;
+      }
+    });
   }
   }
 })
 })
 
 
@@ -221,7 +227,7 @@ const menuItems1 = [
     icon: "clock",
     icon: "clock",
     title: "学习记录",
     title: "学习记录",
     path: "/profile/learning-records",
     path: "/profile/learning-records",
-    badge: "NEW",
+    badge: "",
   },
   },
   {
   {
     icon: "user",
     icon: "user",
@@ -258,12 +264,12 @@ const menuItems2 = [
   },
   },
 ];
 ];
 
 
-const menuItems3 = [
+const menuItems3 = ref([
   {
   {
     icon: "email",
     icon: "email",
     title: "消息中心",
     title: "消息中心",
     path: "/profile/messages",
     path: "/profile/messages",
-    badge: "3",
+    badge: "",
   },
   },
   {
   {
     icon: "question",
     icon: "question",
@@ -275,7 +281,7 @@ const menuItems3 = [
     title: "设置",
     title: "设置",
     path: "/profile/settings",
     path: "/profile/settings",
   },
   },
-];
+]);
 
 
 const handleCheckin = () => {
 const handleCheckin = () => {
   if (checkinData.value.length) {
   if (checkinData.value.length) {