添加红点修复
This commit is contained in:
张成
@@ -1,5 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '消息',
|
||||
// navigationBarBackgroundColor: '#FAFAFA',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -1,299 +0,0 @@
|
||||
@use "~@/scss/images.scss" as img;
|
||||
|
||||
.message-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FAFAFA;
|
||||
|
||||
|
||||
// 分类标签区
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 6px 24px;
|
||||
box-sizing: border-box;
|
||||
height: 124px;
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 161px;
|
||||
|
||||
.tab-icon-wrapper {
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
.tab-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 56px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4.5px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
background: #FF2541;
|
||||
border-radius: 10px;
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 56px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-icon {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.tab-icon {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 消息列表
|
||||
// .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: 12px 12px 112px;
|
||||
// gap: 8px;
|
||||
// padding: 12px 15px;
|
||||
// flex: 1;
|
||||
// cursor: pointer;
|
||||
// transition: all 0.2s;
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// 消息滚动区域
|
||||
.message-scroll {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.message-cards {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
// 系统消息卡片
|
||||
.message-card {
|
||||
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);
|
||||
padding: 0 0 12px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
padding: 12px 15px 0;
|
||||
|
||||
.card-title {
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.card-time-row {
|
||||
padding: 4px 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
.card-time {
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: rgba(60, 60, 67, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.card-content-row {
|
||||
padding: 8px 15px 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 2px;
|
||||
|
||||
.card-content {
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 12px 15px 0;
|
||||
|
||||
.footer-divider {
|
||||
height: 0.5px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-action {
|
||||
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 {
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: -9px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 到底了提示
|
||||
.bottom-tip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 0 12px;
|
||||
|
||||
.tip-text {
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 悬浮新建消息按钮
|
||||
.floating-button {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: 132px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 27% 8%,
|
||||
rgba(189, 255, 74, 1) 17%,
|
||||
rgba(149, 242, 62, 1) 54%,
|
||||
rgba(50, 216, 56, 1) 100%);
|
||||
border: 2px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
|
||||
// 加号图标 - 竖线
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// 加号图标 - 横线
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 25px;
|
||||
height: 4px;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,245 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { View, Text, Image, ScrollView } from "@tarojs/components";
|
||||
import GuideBar from "@/components/GuideBar";
|
||||
import { withAuth, EmptyState, GeneralNavbar } from "@/components";
|
||||
import noticeService from "@/services/noticeService";
|
||||
import { formatRelativeTime } from "@/utils/timeUtils";
|
||||
import Taro, { useDidShow } from "@tarojs/taro";
|
||||
import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
|
||||
import "./index.scss";
|
||||
|
||||
// 消息类型定义
|
||||
interface MessageItem {
|
||||
id: string;
|
||||
notification_type: string;
|
||||
title: string;
|
||||
content: string;
|
||||
create_time: string;
|
||||
is_read: number;
|
||||
related_user_avatar?: string;
|
||||
related_user_nickname?: string;
|
||||
activity_image?: string;
|
||||
jump_url?: string;
|
||||
}
|
||||
|
||||
// 消息分类类型
|
||||
type MessageCategory = "comment" | "follow";
|
||||
|
||||
const Message = () => {
|
||||
const [activeTab, setActiveTab] = useState<MessageCategory | null>(null);
|
||||
const [messageList, setMessageList] = useState<MessageItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [reachedBottom, setReachedBottom] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
// 从 store 获取红点信息
|
||||
const reddotInfo = useReddotInfo();
|
||||
const fetchReddotInfo = useFetchReddotInfo();
|
||||
|
||||
// 获取消息列表
|
||||
const getNoticeList = async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await noticeService.getNotificationList({});
|
||||
if (res.code === 0) {
|
||||
setMessageList(res.data.list || []);
|
||||
}
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: "获取列表失败，请重试",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getNoticeList();
|
||||
fetchReddotInfo();
|
||||
}, []);
|
||||
|
||||
// 每次页面显示时刷新红点信息
|
||||
useDidShow(() => {
|
||||
fetchReddotInfo();
|
||||
});
|
||||
|
||||
// 过滤系统消息
|
||||
const filteredMessages = messageList;
|
||||
|
||||
// 处理分类标签点击
|
||||
const handleTabClick = (tab: MessageCategory) => {
|
||||
// 点击评论标签跳转到评论和回复页面
|
||||
if (tab === "comment") {
|
||||
Taro.navigateTo({
|
||||
url: "/other_pages/comment_reply/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 点击关注标签跳转到新增关注页面
|
||||
if (tab === "follow") {
|
||||
Taro.navigateTo({
|
||||
url: "/other_pages/new_follow/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveTab(activeTab === tab ? null : tab);
|
||||
};
|
||||
|
||||
// 处理查看详情
|
||||
const handleViewDetail = (message: MessageItem) => {
|
||||
|
||||
if (!message.jump_url) {
|
||||
console.log("暂无跳转链接");
|
||||
return;
|
||||
}
|
||||
|
||||
Taro.navigateTo({
|
||||
url: message.jump_url,
|
||||
}).catch(() => {
|
||||
Taro.showToast({
|
||||
title: "页面不存在",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 处理滚动到底部
|
||||
const handleScrollToLower = () => {
|
||||
if (!reachedBottom && filteredMessages.length > 0) {
|
||||
setReachedBottom(true);
|
||||
// 2秒后隐藏提示
|
||||
setTimeout(() => {
|
||||
setReachedBottom(false);
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const res = await noticeService.getNotificationList({});
|
||||
if (res.code === 0) {
|
||||
setMessageList(res.data.list || []);
|
||||
}
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: "刷新失败",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<View className="message-container">
|
||||
{/* 顶部导航栏 */}
|
||||
<GeneralNavbar title="消息" showBack={false} showAvatar={true} />
|
||||
|
||||
{/* 分类标签 */}
|
||||
<View className="category-tabs">
|
||||
<View
|
||||
className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
|
||||
onClick={() => handleTabClick("comment")}
|
||||
>
|
||||
<View className="tab-icon-wrapper">
|
||||
<Image
|
||||
className="tab-icon"
|
||||
src={require('@/static/message/comment-icon.svg')}
|
||||
mode="aspectFit"
|
||||
/>
|
||||
{(reddotInfo?.comment_unread_count || 0) > 0 && (
|
||||
<View className="badge">
|
||||
{(reddotInfo?.comment_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.comment_unread_count || 0}`}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text className="tab-text">评论和回复</Text>
|
||||
</View>
|
||||
<View
|
||||
className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
|
||||
onClick={() => handleTabClick("follow")}
|
||||
>
|
||||
<View className="tab-icon-wrapper">
|
||||
<Image
|
||||
className="tab-icon"
|
||||
src={require('@/static/message/follow-icon.svg')}
|
||||
mode="aspectFit"
|
||||
/>
|
||||
{(reddotInfo?.follow_unread_count || 0) > 0 && (
|
||||
<View className="badge">
|
||||
{(reddotInfo?.follow_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.follow_unread_count || 0}`}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text className="tab-text">新增关注</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 系统消息卡片列表 */}
|
||||
<ScrollView
|
||||
scrollY
|
||||
className="message-scroll"
|
||||
scrollWithAnimation
|
||||
enhanced
|
||||
showScrollbar={false}
|
||||
lowerThreshold={50}
|
||||
onScrollToLower={handleScrollToLower}
|
||||
refresherEnabled={true}
|
||||
refresherTriggered={refreshing}
|
||||
onRefresherRefresh={handleRefresh}
|
||||
>
|
||||
{filteredMessages.length > 0 ? (
|
||||
<View className="message-cards">
|
||||
{filteredMessages.map((message) => (
|
||||
<View className="message-card" key={message.id} onClick={() => handleViewDetail(message)}>
|
||||
<View className="card-title-row">
|
||||
<Text className="card-title">{message.title}</Text>
|
||||
</View>
|
||||
<View className="card-time-row">
|
||||
<Text className="card-time">{formatRelativeTime(message.create_time)}</Text>
|
||||
</View>
|
||||
<View className="card-content-row">
|
||||
<Text className="card-content">{message.content}</Text>
|
||||
</View>
|
||||
<View className="card-footer">
|
||||
<View className="footer-divider"></View>
|
||||
<View className="footer-action">
|
||||
<Text className="action-text">查看详情</Text>
|
||||
<View className="action-arrow">
|
||||
|
||||
<Image className="img" src={require('@/static/message/ar-right.svg')} ></Image>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
{/* 到底了提示 */}
|
||||
{filteredMessages.length > 0 && (
|
||||
<View className="bottom-tip">
|
||||
<Text className="tip-text">到底了</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<EmptyState text="暂无消息" />
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部导航 */}
|
||||
<GuideBar currentPage="message" />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default withAuth(Message);
|
||||
Reference in New Issue
Block a user