feat(消息中心): 添加消息详情接口并完善消息详情页功能

- 在news.js中添加获取消息详情的API接口
- 修改MessagesPage.vue移除未使用的已读状态更新逻辑
- 重构MessageDetailPage.vue使用真实接口获取消息详情
- 调整消息详情页字段映射以匹配接口返回数据

@@ -9,9 +9,15 @@ import { fn, fetch } from './fn'
 
 const Api = {
   NEWS_LIST: '/srv/?a=website_msg&t=my_list',
+  NEWS_INFO: '/srv/?a=website_msg&t=info',
 }
 
 /**
  * @description: 我的消息列表
  */
 export const getNewsListAPI = (params) => fn(fetch.get(Api.NEWS_LIST, params))
+
+/**
+ * @description: 消息详情
+ */
+export const getNewsInfoAPI = (params) => fn(fetch.get(Api.NEWS_INFO, params))

 <!--
  * @Date: 2025-03-24 12:56:24
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 13:07:51
+ * @LastEditTime: 2025-06-13 13:23:52
  * @FilePath: /mlaj/src/views/profile/MessageDetailPage.vue
  * @Description: 文件描述
 -->
@@ -11,11 +11,11 @@
       <div class="p-4">
         <FrostedGlass class="p-4 rounded-xl">
           <div class="mb-4">
-            <h1 class="text-xl font-medium mb-2">{{ message.title }}</h1>
-            <div class="text-xs text-gray-500">{{ message.time }}</div>
+            <!-- <h1 class="text-xl font-medium mb-2">{{ message.title }}</h1> -->
+            <div class="text-xs text-gray-500">{{ message.created_time }}</div>
           </div>
           <div class="text-gray-700 leading-relaxed whitespace-pre-wrap">
-            {{ message.content }}
+            {{ message.note }}
           </div>
         </FrostedGlass>
       </div>
@@ -30,33 +30,27 @@ import AppLayout from '@/components/layout/AppLayout.vue';
 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
 import { useTitle } from '@vueuse/core';
 
+// 导入接口
+import { getNewsInfoAPI } from '@/api/news';
+
 const $route = useRoute();
 useTitle($route.meta.title);
 
 const route = useRoute();
 const message = ref({
   title: '',
-  content: '',
-  time: '',
-  isRead: false
+  note: '',
+  created_time: '',
+  status: 'send'
 });
 
-// 模拟获取消息详情
-const mockMessage = {
-  id: 1,
-  title: '课程更新通知',
-  content: '亲爱的用户：\n\n您关注的课程《亲子教育入门》已更新最新一期内容！\n\n本次更新包含以下内容：\n1. 亲子沟通的技巧与方法\n2. 如何培养孩子的学习兴趣\n3. 处理孩子叛逆期的建议\n\n快来查看最新内容，提升您的育儿技能吧！',
-  time: '2024-01-10 10:30',
-  isRead: false
-};
-
-onMounted(() => {
-  // 模拟异步获取消息详情
-  setTimeout(() => {
-    const messageId = parseInt(route.params.id);
-    message.value = { ...mockMessage, id: messageId };
+onMounted(async () => {
+  // 调用接口获取消息详情
+  const { code, data } = await getNewsInfoAPI({ id: route.params.id });
+  if (code) {
+    message.value = data;
     // 更新消息已读状态
-    message.value.isRead = true;
-  }, 500);
+    message.value.status = 'read';
+  }
 });
 </script>

 <!--
  * @Date: 2025-03-24 12:56:07
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-12 16:31:31
+ * @LastEditTime: 2025-06-13 13:25:11
  * @FilePath: /mlaj/src/views/profile/MessagesPage.vue
  * @Description: 消息中心页面
 -->
@@ -100,17 +100,16 @@ const onLoad = async() => {
 };
 
 // 更新消息已读状态
-const updateMessageReadStatus = (messageId) => {
-  const index = messages.value.findIndex(msg => msg.id === messageId);
-  if (index !== -1) {
-    messages.value[index].isRead = true;
-  }
-};
+// const updateMessageReadStatus = (messageId) => {
+//   const index = messages.value.findIndex(msg => msg.id === messageId);
+//   if (index !== -1) {
+//     messages.value[index].isRead = true;
+//   }
+// };
 
 // 处理消息点击
 const handleMessageClick = (message) => {
-  return;
-  updateMessageReadStatus(message.id);
+  // updateMessageReadStatus(message.id);
   router.push(`/profile/messages/${message.id}`);
 };
 </script>