消息列表

src/other_pages/message/index.tsx

@@ -1,184 +1,136 @@
-import { useState } from 'react'
-import { View, Text, ScrollView, Image } from '@tarojs/components'
-import { Avatar } from '@nutui/nutui-react-taro'
-import GuideBar from '@/components/GuideBar'
-import { withAuth } from '@/components'
-import './index.scss'
+import { useState, useEffect } from "react";
+import { View, Text, ScrollView, Image } from "@tarojs/components";
+import { Avatar } from "@nutui/nutui-react-taro";
+import GuideBar from "@/components/GuideBar";
+import { withAuth } from "@/components";
+import noticeService from "@/services/noticeService";
+import Taro, { useRouter } from "@tarojs/taro";
+import "./index.scss";
 
 // 消息类型定义
 interface MessageItem {
-  id: string
-  type: 'system' | 'user' | 'like' | 'comment' | 'follow'
-  title: string
-  content: string
-  time: string
-  avatar?: string
-  isRead: boolean
-  hasAction?: boolean
-  actionText?: string
+  id: string;
+  type: "system" | "user" | "like" | "comment" | "follow";
+  title: string;
+  content: string;
+  time: string;
+  avatar?: string;
+  isRead: boolean;
+  hasAction?: boolean;
+  actionText?: string;
 }
 
 const Message = () => {
-  const [activeTab] = useState<'all' | 'like' | 'comment' | 'follow'>('all')
+  const [activeTab] = useState<"all" | "like" | "comment" | "follow">("all");
+  const [messageList, setMessageList] = useState<MessageItem[]>([]);
 
-  // 模拟消息数据
-  const messageList: MessageItem[] = [
-    {
-      id: '1',
-      type: 'system',
-      title: '球局报名确认',
-      content: '恭喜，你成功报名"世纪公园混双 · 8月20日"球局！请提前15分钟到达，球场门口等你。',
-      time: '今天 09:12',
-      isRead: false,
-      hasAction: true,
-      actionText: '查看详情'
-    },
-    {
-      id: '2',
-      type: 'system',
-      title: '新球友加入提醒',
-      content: 'Fiona 已加入"徐汇双打 · 今晚7点"的群聊，快去和她打个招呼吧～',
-      time: '昨天 09:12',
-      isRead: false,
-      hasAction: true,
-      actionText: '打个招呼'
-    },
-    {
-      id: '3',
-      type: 'system',
-      title: '场地变更通知',
-      content: '请注意，"张江中午快打"已改至世纪园区 3 号场集合。',
-      time: '2025-08-17 18:30',
-      isRead: true
-    },
-    {
-      id: '4',
-      type: 'system',
-      title: '系统维护提醒',
-      content: '系统将于 2025-08-20 凌晨 00:00–02:00 暂停服务，届时活动发布、消息中心等功能可能无法使用，敬请谅解。',
-      time: '2025-08-17 18:30',
-      isRead: true
-    },
-    {
-      id: '5',
-      type: 'system',
-      title: '活动将近提醒',
-      content: '你的"宝山初学者约球"将在 2 小时后开始。快准备好球拍、毛巾和运动鞋，我们赛场见！',
-      time: '2025-08-17 18:30',
-      isRead: true
-    },
-    {
-      id: '6',
-      type: 'user',
-      title: '王晨',
-      content: '你好，昨天约的球场还在吗',
-      time: '09:34',
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      isRead: false
-    },
-    {
-      id: '7',
-      type: 'user',
-      title: '阿斌',
-      content: '七点到世纪公园东门集合可以吗？',
-      time: '昨天 22:10',
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      isRead: false
-    },
-    {
-      id: '8',
-      type: 'user',
-      title: 'Lili',
-      content: '我刚问了，还有一个小时的空场！',
-      time: '昨天 18:47',
-      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      isRead: true
-    }
-  ]
+  useEffect(() => {
+    const getNoticeList = async () => {
+      try {
+        const res = await noticeService.getNotificationList({});
+        if (res.code === 0) {
+          setMessageList(res.data.list);
+        }
+      } catch (e) {
+        Taro.showToast({
+          title: "获取列表失败，请重试",
+          icon: "none",
+          duration: 2000,
+        });
+      } finally {
+      }
+    };
+    getNoticeList();
+  }, []);
 
   // 过滤消息
-  const filteredMessages = messageList.filter(message => {
-    if (activeTab === 'all') return true
-    return message.type === activeTab
-  })
+  const filteredMessages = messageList.filter((message) => {
+    if (activeTab === "all") return true;
+    return message.type === activeTab;
+  });
 
   // 渲染消息项
   const renderMessageItem = (message: MessageItem) => {
-    if (message.type === 'system') {
+    if (message.type === "system") {
       return (
-        <View className='message-item system-message' key={message.id}>
-          <View className='message-header'>
-            <Text className='message-title'>{message.title}</Text>
-            <Text className='message-time'>{message.time}</Text>
+        <View className="message-item system-message" key={message.id}>
+          <View className="message-header">
+            <Text className="message-title">{message.title}</Text>
+            <Text className="message-time">{message.time}</Text>
           </View>
-          <View className='message-content'>
-            <Text className='message-text'>{message.content}</Text>
+          <View className="message-content">
+            <Text className="message-text">{message.content}</Text>
           </View>
           {message.hasAction && (
-            <View className='message-action'>
-              <View className='action-divider'></View>
-              <View className='action-button'>
-                <Text className='action-text'>{message.actionText}</Text>
-                <Image className='action-arrow' src={require('../../static/message/icon-message-arrow.svg')} />
+            <View className="message-action">
+              <View className="action-divider"></View>
+              <View className="action-button">
+                <Text className="action-text">{message.actionText}</Text>
+                <Image
+                  className="action-arrow"
+                  src={require("../../static/message/icon-message-arrow.svg")}
+                />
               </View>
             </View>
           )}
         </View>
-      )
+      );
     }
 
     return (
-      <View className='message-item user-message' key={message.id}>
-        <View className='message-avatar'>
-          <Avatar src={message.avatar} size='48px' />
+      <View className="message-item user-message" key={message.id}>
+        <View className="message-avatar">
+          <Avatar src={message.avatar} size="48px" />
         </View>
-        <View className='message-info'>
-          <View className='message-header'>
-            <Text className='message-title'>{message.title}</Text>
-            <Text className='message-time'>{message.time}</Text>
+        <View className="message-info">
+          <View className="message-header">
+            <Text className="message-title">{message.title}</Text>
+            <Text className="message-time">{message.time}</Text>
           </View>
-          <View className='message-content'>
-            <Text className='message-text'>{message.content}</Text>
-            {!message.isRead && <View className='unread-indicator'></View>}
+          <View className="message-content">
+            <Text className="message-text">{message.content}</Text>
+            {!message.isRead && <View className="unread-indicator"></View>}
           </View>
         </View>
       </View>
-    )
-  }
+    );
+  };
 
   return (
-    <View className='message-container'>
+    <View className="message-container">
       {/* 导航栏 */}
-      <View className='navbar'>
-        <View className='navbar-content'>
-          <View className='navbar-left'>
-            <Avatar className='navbar-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
-            <Text className='navbar-title'>消息</Text>
+      <View className="navbar">
+        <View className="navbar-content">
+          <View className="navbar-left">
+            <Avatar
+              className="navbar-avatar"
+              src="https://img.yzcdn.cn/vant/cat.jpeg"
+            />
+            <Text className="navbar-title">消息</Text>
           </View>
         </View>
       </View>
 
-
       {/* 消息列表 */}
-      <ScrollView scrollY className='message-list'>
+      <ScrollView scrollY className="message-list">
         {filteredMessages.length > 0 ? (
-          <View className='message-list-content'>
+          <View className="message-list-content">
             {filteredMessages.map(renderMessageItem)}
           </View>
         ) : (
-          <View className='empty-state'>
-            <View className='empty-icon'>
-              <View className='empty-message-icon'></View>
+          <View className="empty-state">
+            <View className="empty-icon">
+              <View className="empty-message-icon"></View>
             </View>
-            <Text className='empty-text'>暂无消息</Text>
+            <Text className="empty-text">暂无消息</Text>
           </View>
         )}
       </ScrollView>
 
       {/* 底部导航 */}
-      <GuideBar currentPage='message' />
+      <GuideBar currentPage="message" />
     </View>
-  )
-}
+  );
+};
 
-export default withAuth(Message)
+export default withAuth(Message);

src/services/noticeService.ts

@@ -0,0 +1,63 @@
+import httpService from "./httpService";
+import type { ApiResponse } from "./httpService";
+
+export enum ReadStatus {
+  UNREAD = 0,
+  READ = 1
+}
+
+export interface NoticeListParams {
+  notification_type?: string;
+  is_read?: ReadStatus;
+}
+
+export interface NoticeListResponse {
+  list: any[];
+  total: number;
+  unread_count: number;
+}
+
+export interface Notice {
+  description: string;
+}
+
+export interface MarkReadParams {
+  notification_ids: number[];
+  mark_all: boolean;
+}
+
+export interface DeleteParams {
+  notification_ids: number[];
+  delete_all: boolean;
+}
+
+export interface UnreadMountResponse {
+  total_unread: number;
+  unread_by_type: {}
+}
+
+
+class NoticeService {
+  // 获取用户消息通知列表
+  async getNotificationList({ notification_type, is_read }: NoticeListParams): Promise<ApiResponse<NoticeListResponse>> {
+    return httpService.post("/notifications/list", { notification_type, is_read }, { showLoading: true });
+  }
+  // 获取消息通知详情
+  async getNotificationDetail(notification_id: number): Promise<ApiResponse<Notice>> {
+    return httpService.post("/notifications/detail", { notification_id }, { showLoading: true });
+  }
+  // 标记消息为已读
+  async markNotificationRead({ notification_ids, mark_all }: MarkReadParams): Promise<ApiResponse<{ marked_count: number }>> {
+    return httpService.post("/notifications/mark_read", { notification_ids, mark_all }, { showLoading: true });
+  }
+  // 删除消息通知
+  async delNotification({ notification_ids, delete_all }: DeleteParams): Promise<ApiResponse<{ deleted_count: number }>> {
+    return httpService.post("/notifications/delete", { notification_ids, delete_all }, { showLoading: true });
+  }
+  // 获取未读消息数量
+  async getNotificationUnreadCount(): Promise<ApiResponse<UnreadMountResponse>> {
+    return httpService.post("/notifications/unread_count", {}, { showLoading: true });
+  }
+}
+
+export default new NoticeService();