diff --git a/src/pages/message/index.scss b/src/pages/message/index.scss
index 092c41b..637ed05 100644
--- a/src/pages/message/index.scss
+++ b/src/pages/message/index.scss
@@ -1,80 +1,277 @@
@use '~@/scss/images.scss' as img;
-$--Backgrounds-Primary: '#fff';
-
.message-container {
width: 100%;
height: 100vh;
- background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
- // padding-top: 100px;
box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
- .custom-navbar {
- height: 56px; /* 通常与原生导航栏高度一致 */
- display: flex;
- align-items: center;
- justify-content: flex-start;
- // background-color: #fff;
- color: #000;
- padding-top: 44px; /* 适配状态栏 */
+ // 导航栏
+ .navbar {
+ height: 100px;
+ background: #FFFFFF;
+ padding-top: 44px;
position: sticky;
top: 0;
z-index: 100;
- .message-navigator {
- position: relative;
- left: 15px;
- top: -2px;
- width: 80px;
- height: 32px;
+ .navbar-content {
+ height: 56px;
display: flex;
align-items: center;
- justify-content: center;
- gap: 10px;
+ justify-content: space-between;
+ padding: 0 15px;
- .message-navigator-avatar {
- width: 32px;
- height: 32px;
- }
+ .navbar-left {
+ display: flex;
+ align-items: center;
+ gap: 8px;
- .message-navigator-title {
- font-size: 16px;
- font-weight: 500;
- color: #000;
+ .navbar-avatar {
+ width: 28px;
+ height: 28px;
+ }
+
+ .navbar-title {
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 1.4;
+ color: #000000;
+ }
}
}
}
- .message-content {
- .message-content-list {
+ // 消息列表
+ .message-list {
+ flex: 1;
+ overflow: hidden;
+ box-sizing: border-box;
+ margin-bottom:100px;
+ background-color: none !important;
+
+ .message-list-content {
display: flex;
flex-direction: column;
- padding: 10px 15px;
+ padding: 0 12px;
+ gap: 8px;
+ }
+
+ // 系统消息样式
+ .system-message {
+ background: #FFFFFF;
+ border: 0.5px solid rgba(0, 0, 0, 0.08);
+ border-radius: 20px;
+ padding: 0 0 12px;
+ box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
- gap: 12px;
- .message-item {
- padding: 10px;
- // border: 1px solid rgba(0, 0, 0, 0.1);
+ .message-header {
display: flex;
- flex-direction: column;
- gap: 10px;
- box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
- background-color: rgba(255, 255, 255, 0.5);
- border-radius: 10px;
+ align-items: center;
+ padding: 12px 15px 0;
+
+ .message-title {
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 1.5;
+ color: #000000;
+ flex: 1;
+ }
+
+ .message-time {
+ font-family: 'PingFang SC';
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 1.5;
+ color: rgba(60, 60, 67, 0.6);
+ }
}
- .message-item-title {
- font-size: 16px;
- font-weight: 500;
- color: #000;
+ .message-content {
+ padding: 8px 15px 0;
+
+ .message-text {
+ font-family: 'PingFang SC';
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 1.43;
+ color: rgba(0, 0, 0, 0.7);
+ }
}
- .message-item-content {
- font-size: 14px;
- color: #666;
+ .message-action {
+ padding: 12px 15px 0;
+
+ .action-divider {
+ height: 0.5px;
+ background: rgba(0, 0, 0, 0.08);
+ margin-bottom: 12px;
+ }
+
+ .action-button {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .action-text {
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 1.43;
+ color: rgba(0, 0, 0, 0.85);
+ }
+
+ .action-arrow {
+ width: 16px;
+ height: 16px;
+ }
+ }
}
}
+
+ // 用户消息样式
+ .user-message {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 15px;
+ background: #FFFFFF;
+ border: 0.5px solid rgba(0, 0, 0, 0.08);
+ border-radius: 20px;
+ box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+ box-sizing: border-box;
+
+ .message-avatar {
+ position: relative;
+ flex-shrink: 0;
+
+ .unread-dot {
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ width: 10px;
+ height: 10px;
+ background: #FF4848;
+ border-radius: 50%;
+ }
+ }
+
+ .message-info {
+ flex: 1;
+ min-width: 0;
+
+ .message-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 4px;
+
+ .message-title {
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 1.5;
+ color: #000000;
+ }
+
+ .message-time {
+ font-family: 'PingFang SC';
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 1.71;
+ color: rgba(0, 0, 0, 0.35);
+ }
+ }
+
+ .message-content {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ min-width: 0;
+
+ .message-text {
+ font-family: 'PingFang SC';
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 1.29;
+ color: rgba(0, 0, 0, 0.35);
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .unread-indicator {
+ width: 10px;
+ height: 10px;
+ background: #FF4848;
+ border-radius: 50%;
+ flex-shrink: 0;
+ }
+ }
+ }
+ }
+ }
+
+ // 空状态
+ .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 124px 16px;
+ height: 746px;
+
+ .empty-icon {
+ width: 300px;
+ height: 225px;
+ margin-bottom: 12px;
+ position: relative;
+
+ .empty-message-icon {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
+ border-radius: 12px;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 60px;
+ height: 60px;
+ background: #d0d0d0;
+ border-radius: 50%;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 30px;
+ height: 30px;
+ background: #a0a0a0;
+ border-radius: 50%;
+ }
+ }
+ }
+
+ .empty-text {
+ font-family: 'PingFang SC';
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 1.71;
+ color: rgba(0, 0, 0, 0.85);
+ }
}
}
\ No newline at end of file
diff --git a/src/pages/message/index.tsx b/src/pages/message/index.tsx
index 5040708..0c8b745 100644
--- a/src/pages/message/index.tsx
+++ b/src/pages/message/index.tsx
@@ -1,41 +1,181 @@
-import React from 'react'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { useState } from 'react'
+import { View, Text, ScrollView, Image } from '@tarojs/components'
import { Avatar } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
import GuideBar from '@/components/GuideBar'
-import { withAuth } from '@/components'
-// import img from '@/config/images'
+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 messageList = Array(10).fill(0).map((_, index) => ({
- id: index + 1,
- title: `消息${index + 1}消息${index + 1}消息${index + 1}消息${index + 1}`,
- content: Array(Math.round(Math.random() * 40)).fill(0).map((_, index) => `消息${index + 1}`).join(''),
- }))
+ 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 (
+
+
+ {message.title}
+ {message.time}
+
+
+ {message.content}
+
+ {message.hasAction && (
+
+
+
+ {message.actionText}
+
+
+
+ )}
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+ {message.title}
+ {message.time}
+
+
+ {message.content}
+ {!message.isRead && }
+
+
+
+ )
+ }
return (
-
-
-
- 消息
+ {/* 导航栏 */}
+
+
+
+
+ 消息
+
-
-
- {messageList.map((item) => (
-
-
- {item.title}
-
-
- {item.content}
-
+
+
+ {/* 消息列表 */}
+
+ {filteredMessages.length > 0 ? (
+
+ {filteredMessages.map(renderMessageItem)}
+
+ ) : (
+
+
+
- ))}
-
+ 暂无消息
+
+ )}
+
+ {/* 底部导航 */}
)
diff --git a/src/static/message/icon-message-arrow.svg b/src/static/message/icon-message-arrow.svg
new file mode 100644
index 0000000..4377f5e
--- /dev/null
+++ b/src/static/message/icon-message-arrow.svg
@@ -0,0 +1,3 @@
+