bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

消息列表

Browse Source
This commit is contained in:
Ultrame
2025-09-12 16:12:11 +08:00
parent 0e70bef9db
commit 19701bd246
2 changed files with 151 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/other_pages/message/index.tsx
View File

@@ -1,184 +1,136 @@
import { useState } from 'react' import { useState, useEffect } from "react";
import { View, Text, ScrollView, Image } from '@tarojs/components' import { View, Text, ScrollView, Image } from "@tarojs/components";
import { Avatar } from '@nutui/nutui-react-taro' import { Avatar } from "@nutui/nutui-react-taro";
import GuideBar from '@/components/GuideBar' import GuideBar from "@/components/GuideBar";
import { withAuth } from '@/components' import { withAuth } from "@/components";
import './index.scss' import noticeService from "@/services/noticeService";
import Taro, { useRouter } from "@tarojs/taro";
import "./index.scss";
// 消息类型定义 // 消息类型定义
interface MessageItem { interface MessageItem {
id: string id: string;
type: 'system' | 'user' | 'like' | 'comment' | 'follow' type: "system" | "user" | "like" | "comment" | "follow";
title: string title: string;
content: string content: string;
time: string time: string;
avatar?: string avatar?: string;
isRead: boolean isRead: boolean;
hasAction?: boolean hasAction?: boolean;
actionText?: string actionText?: string;
} }
const Message = () => { const Message = () => {
const [activeTab] = useState<'all' | 'like' | 'comment' | 'follow'>('all') const [activeTab] = useState<"all" | "like" | "comment" | "follow">("all");
const [messageList, setMessageList] = useState<MessageItem[]>([]);
// 模拟消息数据 useEffect(() => {
const messageList: MessageItem[] = [ const getNoticeList = async () => {
{ try {
id: '1', const res = await noticeService.getNotificationList({});
type: 'system', if (res.code === 0) {
title: '球局报名确认', setMessageList(res.data.list);
content: '恭喜，你成功报名"世纪公园混双 · 8月20日"球局！请提前15分钟到达，球场门口等你。', }
time: '今天 09:12', } catch (e) {
isRead: false, Taro.showToast({
hasAction: true, title: "获取列表失败，请重试",
actionText: '查看详情' icon: "none",
}, duration: 2000,
{ });
id: '2', } finally {
type: 'system', }
title: '新球友加入提醒', };
content: 'Fiona 已加入"徐汇双打 · 今晚7点"的群聊，快去和她打个招呼吧～', getNoticeList();
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
}
]
// 过滤消息 // 过滤消息
const filteredMessages = messageList.filter(message => { const filteredMessages = messageList.filter((message) => {
if (activeTab === 'all') return true if (activeTab === "all") return true;
return message.type === activeTab return message.type === activeTab;
}) });
// 渲染消息项 // 渲染消息项
const renderMessageItem = (message: MessageItem) => { const renderMessageItem = (message: MessageItem) => {
if (message.type === 'system') { if (message.type === "system") {
return ( return (
<View className='message-item system-message' key={message.id}> <View className="message-item system-message" key={message.id}>
<View className='message-header'> <View className="message-header">
<Text className='message-title'>{message.title}</Text> <Text className="message-title">{message.title}</Text>
<Text className='message-time'>{message.time}</Text> <Text className="message-time">{message.time}</Text>
</View> </View>
<View className='message-content'> <View className="message-content">
<Text className='message-text'>{message.content}</Text> <Text className="message-text">{message.content}</Text>
</View> </View>
{message.hasAction && ( {message.hasAction && (
<View className='message-action'> <View className="message-action">
<View className='action-divider'></View> <View className="action-divider"></View>
<View className='action-button'> <View className="action-button">
<Text className='action-text'>{message.actionText}</Text> <Text className="action-text">{message.actionText}</Text>
<Image className='action-arrow' src={require('../../static/message/icon-message-arrow.svg')} /> <Image
className="action-arrow"
src={require("../../static/message/icon-message-arrow.svg")}
/>
</View> </View>
</View> </View>
)} )}
</View> </View>
) );
} }
return ( return (
<View className='message-item user-message' key={message.id}> <View className="message-item user-message" key={message.id}>
<View className='message-avatar'> <View className="message-avatar">
<Avatar src={message.avatar} size='48px' /> <Avatar src={message.avatar} size="48px" />
</View> </View>
<View className='message-info'> <View className="message-info">
<View className='message-header'> <View className="message-header">
<Text className='message-title'>{message.title}</Text> <Text className="message-title">{message.title}</Text>
<Text className='message-time'>{message.time}</Text> <Text className="message-time">{message.time}</Text>
</View> </View>
<View className='message-content'> <View className="message-content">
<Text className='message-text'>{message.content}</Text> <Text className="message-text">{message.content}</Text>
{!message.isRead && <View className='unread-indicator'></View>} {!message.isRead && <View className="unread-indicator"></View>}
</View> </View>
</View> </View>
</View> </View>
) );
} };
return ( return (
<View className='message-container'> <View className="message-container">
{/* 导航栏 */} {/* 导航栏 */}
<View className='navbar'> <View className="navbar">
<View className='navbar-content'> <View className="navbar-content">
<View className='navbar-left'> <View className="navbar-left">
<Avatar className='navbar-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" /> <Avatar
<Text className='navbar-title'>消息</Text> className="navbar-avatar"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<Text className="navbar-title">消息</Text>
</View> </View>
</View> </View>
</View> </View>
{/* 消息列表 */} {/* 消息列表 */}
<ScrollView scrollY className='message-list'> <ScrollView scrollY className="message-list">
{filteredMessages.length > 0 ? ( {filteredMessages.length > 0 ? (
<View className='message-list-content'> <View className="message-list-content">
{filteredMessages.map(renderMessageItem)} {filteredMessages.map(renderMessageItem)}
</View> </View>
) : ( ) : (
<View className='empty-state'> <View className="empty-state">
<View className='empty-icon'> <View className="empty-icon">
<View className='empty-message-icon'></View> <View className="empty-message-icon"></View>
</View> </View>
<Text className='empty-text'>暂无消息</Text> <Text className="empty-text">暂无消息</Text>
</View> </View>
)} )}
</ScrollView> </ScrollView>
{/* 底部导航 */} {/* 底部导航 */}
<GuideBar currentPage='message' /> <GuideBar currentPage="message" />
</View> </View>
) );
} };
export default withAuth(Message) export default withAuth(Message);

63
src/services/noticeService.ts Normal file
View File

@@ -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();