feat: 分包 除了list
This commit is contained in:
184
src/other_pages/message/index.tsx
Normal file
184
src/other_pages/message/index.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
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'
|
||||
|
||||
// 消息类型定义
|
||||
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: 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
|
||||
}
|
||||
]
|
||||
|
||||
// 过滤消息
|
||||
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'>
|
||||
{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)
|
||||
Reference in New Issue
Block a user