feat(消息中心): 添加消息详情接口并完善消息详情页功能
- 在news.js中添加获取消息详情的API接口 - 修改MessagesPage.vue移除未使用的已读状态更新逻辑 - 重构MessageDetailPage.vue使用真实接口获取消息详情 - 调整消息详情页字段映射以匹配接口返回数据
Showing
3 changed files
with
31 additions
and
32 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment