1

src/main_pages/components/MessagePageContent.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect } from "react";
+import { View, Text, Image, ScrollView } from "@tarojs/components";
+import { EmptyState } from "@/components";
+import noticeService from "@/services/noticeService";
+import { formatRelativeTime } from "@/utils/timeUtils";
+import Taro from "@tarojs/taro";
+import { useGlobalState } from "@/store/global";
+import { navigateTo } from "@/utils/navigation";
+import "@/other_pages/message/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 MessagePageContent = () => {
+  const { statusNavbarHeightInfo } = useGlobalState() || {};
+  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
+  
+  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);
+
+  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 as any).showToast({
+        title: "获取列表失败，请重试",
+        icon: "none",
+        duration: 2000,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getNoticeList();
+  }, []);
+
+  const filteredMessages = messageList;
+
+  const handleTabClick = (tab: MessageCategory) => {
+    if (tab === "comment") {
+      navigateTo({
+        url: "/other_pages/comment_reply/index",
+      });
+      return;
+    }
+
+    if (tab === "follow") {
+      navigateTo({
+        url: "/other_pages/new_follow/index",
+      });
+      return;
+    }
+
+    setActiveTab(activeTab === tab ? null : tab);
+  };
+
+  const handleViewDetail = (message: MessageItem) => {
+    if (!message.jump_url) {
+      console.log("暂无跳转链接");
+      return;
+    }
+
+    navigateTo({
+      url: message.jump_url,
+    }).catch(() => {
+      (Taro as any).showToast({
+        title: "页面不存在",
+        icon: "none",
+        duration: 2000,
+      });
+    });
+  };
+
+  const handleScrollToLower = () => {
+    if (!reachedBottom && filteredMessages.length > 0) {
+      setReachedBottom(true);
+      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 as any).showToast({
+        title: "刷新失败",
+        icon: "none",
+        duration: 2000,
+      });
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  return (
+    <View className="message-container" style={{ paddingTop: `${totalHeight}px` }}>
+      <View className="category-tabs">
+        <View
+          className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
+          onClick={() => handleTabClick("comment")}
+        >
+          <Image
+            className="tab-icon"
+            src={require('@/static/message/comment-icon.svg')}
+            mode="aspectFit"
+          />
+          <Text className="tab-text">评论和回复</Text>
+        </View>
+        <View
+          className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
+          onClick={() => handleTabClick("follow")}
+        >
+          <Image
+            className="tab-icon"
+            src={require('@/static/message/follow-icon.svg')}
+            mode="aspectFit"
+          />
+          <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>
+    </View>
+  );
+};
+
+export default MessagePageContent;
+