hookehuyr

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

- 在news.js中添加获取消息详情的API接口
- 修改MessagesPage.vue移除未使用的已读状态更新逻辑
- 重构MessageDetailPage.vue使用真实接口获取消息详情
- 调整消息详情页字段映射以匹配接口返回数据
...@@ -9,9 +9,15 @@ import { fn, fetch } from './fn' ...@@ -9,9 +9,15 @@ import { fn, fetch } from './fn'
9 9
10 const Api = { 10 const Api = {
11 NEWS_LIST: '/srv/?a=website_msg&t=my_list', 11 NEWS_LIST: '/srv/?a=website_msg&t=my_list',
12 + NEWS_INFO: '/srv/?a=website_msg&t=info',
12 } 13 }
13 14
14 /** 15 /**
15 * @description: 我的消息列表 16 * @description: 我的消息列表
16 */ 17 */
17 export const getNewsListAPI = (params) => fn(fetch.get(Api.NEWS_LIST, params)) 18 export const getNewsListAPI = (params) => fn(fetch.get(Api.NEWS_LIST, params))
19 +
20 +/**
21 + * @description: 消息详情
22 + */
23 +export const getNewsInfoAPI = (params) => fn(fetch.get(Api.NEWS_INFO, params))
......
1 <!-- 1 <!--
2 * @Date: 2025-03-24 12:56:24 2 * @Date: 2025-03-24 12:56:24
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-24 13:07:51 4 + * @LastEditTime: 2025-06-13 13:23:52
5 * @FilePath: /mlaj/src/views/profile/MessageDetailPage.vue 5 * @FilePath: /mlaj/src/views/profile/MessageDetailPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
11 <div class="p-4"> 11 <div class="p-4">
12 <FrostedGlass class="p-4 rounded-xl"> 12 <FrostedGlass class="p-4 rounded-xl">
13 <div class="mb-4"> 13 <div class="mb-4">
14 - <h1 class="text-xl font-medium mb-2">{{ message.title }}</h1> 14 + <!-- <h1 class="text-xl font-medium mb-2">{{ message.title }}</h1> -->
15 - <div class="text-xs text-gray-500">{{ message.time }}</div> 15 + <div class="text-xs text-gray-500">{{ message.created_time }}</div>
16 </div> 16 </div>
17 <div class="text-gray-700 leading-relaxed whitespace-pre-wrap"> 17 <div class="text-gray-700 leading-relaxed whitespace-pre-wrap">
18 - {{ message.content }} 18 + {{ message.note }}
19 </div> 19 </div>
20 </FrostedGlass> 20 </FrostedGlass>
21 </div> 21 </div>
...@@ -30,33 +30,27 @@ import AppLayout from '@/components/layout/AppLayout.vue'; ...@@ -30,33 +30,27 @@ import AppLayout from '@/components/layout/AppLayout.vue';
30 import FrostedGlass from '@/components/ui/FrostedGlass.vue'; 30 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
31 import { useTitle } from '@vueuse/core'; 31 import { useTitle } from '@vueuse/core';
32 32
33 +// 导入接口
34 +import { getNewsInfoAPI } from '@/api/news';
35 +
33 const $route = useRoute(); 36 const $route = useRoute();
34 useTitle($route.meta.title); 37 useTitle($route.meta.title);
35 38
36 const route = useRoute(); 39 const route = useRoute();
37 const message = ref({ 40 const message = ref({
38 title: '', 41 title: '',
39 - content: '', 42 + note: '',
40 - time: '', 43 + created_time: '',
41 - isRead: false 44 + status: 'send'
42 }); 45 });
43 46
44 -// 模拟获取消息详情 47 +onMounted(async () => {
45 -const mockMessage = { 48 + // 调用接口获取消息详情
46 - id: 1, 49 + const { code, data } = await getNewsInfoAPI({ id: route.params.id });
47 - title: '课程更新通知', 50 + if (code) {
48 - content: '亲爱的用户:\n\n您关注的课程《亲子教育入门》已更新最新一期内容!\n\n本次更新包含以下内容:\n1. 亲子沟通的技巧与方法\n2. 如何培养孩子的学习兴趣\n3. 处理孩子叛逆期的建议\n\n快来查看最新内容,提升您的育儿技能吧!', 51 + message.value = data;
49 - time: '2024-01-10 10:30',
50 - isRead: false
51 -};
52 -
53 -onMounted(() => {
54 - // 模拟异步获取消息详情
55 - setTimeout(() => {
56 - const messageId = parseInt(route.params.id);
57 - message.value = { ...mockMessage, id: messageId };
58 // 更新消息已读状态 52 // 更新消息已读状态
59 - message.value.isRead = true; 53 + message.value.status = 'read';
60 - }, 500); 54 + }
61 }); 55 });
62 </script> 56 </script>
......
1 <!-- 1 <!--
2 * @Date: 2025-03-24 12:56:07 2 * @Date: 2025-03-24 12:56:07
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-12 16:31:31 4 + * @LastEditTime: 2025-06-13 13:25:11
5 * @FilePath: /mlaj/src/views/profile/MessagesPage.vue 5 * @FilePath: /mlaj/src/views/profile/MessagesPage.vue
6 * @Description: 消息中心页面 6 * @Description: 消息中心页面
7 --> 7 -->
...@@ -100,17 +100,16 @@ const onLoad = async() => { ...@@ -100,17 +100,16 @@ const onLoad = async() => {
100 }; 100 };
101 101
102 // 更新消息已读状态 102 // 更新消息已读状态
103 -const updateMessageReadStatus = (messageId) => { 103 +// const updateMessageReadStatus = (messageId) => {
104 - const index = messages.value.findIndex(msg => msg.id === messageId); 104 +// const index = messages.value.findIndex(msg => msg.id === messageId);
105 - if (index !== -1) { 105 +// if (index !== -1) {
106 - messages.value[index].isRead = true; 106 +// messages.value[index].isRead = true;
107 - } 107 +// }
108 -}; 108 +// };
109 109
110 // 处理消息点击 110 // 处理消息点击
111 const handleMessageClick = (message) => { 111 const handleMessageClick = (message) => {
112 - return; 112 + // updateMessageReadStatus(message.id);
113 - updateMessageReadStatus(message.id);
114 router.push(`/profile/messages/${message.id}`); 113 router.push(`/profile/messages/${message.id}`);
115 }; 114 };
116 </script> 115 </script>
......