137 lines
4.2 KiB
TypeScript
137 lines
4.2 KiB
TypeScript
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;
|
|
}
|
|
|
|
const Message = () => {
|
|
const [activeTab] = useState<"all" | "like" | "comment" | "follow">("all");
|
|
const [messageList, setMessageList] = useState<MessageItem[]>([]);
|
|
|
|
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 renderMessageItem = (message: MessageItem) => {
|
|
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>
|
|
<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>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<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>
|
|
<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="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" scrollWithAnimation enhanced showScrollbar={false} >
|
|
{filteredMessages.length > 0 ? (
|
|
<View className="message-list-content">
|
|
{filteredMessages.map(renderMessageItem)}
|
|
</View>
|
|
) : (
|
|
<View className="empty-state">
|
|
<View className="empty-icon">
|
|
<View className="empty-message-icon"></View>
|
|
</View>
|
|
<Text className="empty-text">暂无消息</Text>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
|
|
{/* 底部导航 */}
|
|
<GuideBar currentPage="message" />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default withAuth(Message);
|