添加 消息 页面更新

src/other_pages/new_follow/index.tsx

@@ -0,0 +1,206 @@
+import { useState, useEffect } from "react";
+import { View, Text, ScrollView } from "@tarojs/components";
+import { Avatar } from "@nutui/nutui-react-taro";
+import { withAuth, EmptyState } from "@/components";
+import noticeService from "@/services/noticeService";
+import Taro from "@tarojs/taro";
+import "./index.scss";
+
+// 关注项类型定义
+interface FollowItem {
+  id: string;
+  user_id: string;
+  user_avatar: string;
+  user_nickname: string;
+  user_signature?: string;
+  time: string;
+  is_mutual: boolean; // 是否互相关注
+  is_read: number;
+}
+
+const NewFollow = () => {
+  const [followList, setFollowList] = useState<FollowItem[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    getFollowList();
+  }, []);
+
+  // 获取新增关注列表
+  const getFollowList = async () => {
+    if (loading) return;
+    
+    setLoading(true);
+    try {
+      const res = await noticeService.getNotificationList({
+        notification_type: "follow", // 筛选关注类型
+      });
+      
+      if (res.code === 0) {
+        // 映射数据
+        const mappedList = res.data.list.map((item: any) => ({
+          id: item.id,
+          user_id: item.related_user_id || "",
+          user_avatar: item.related_user_avatar || "",
+          user_nickname: item.related_user_nickname || "匿名用户",
+          user_signature: item.related_user_signature || "",
+          time: item.created_at,
+          is_mutual: item.is_mutual_follow || false,
+          is_read: item.is_read,
+        }));
+        
+        setFollowList(mappedList);
+      }
+    } catch (e) {
+      Taro.showToast({
+        title: "获取列表失败",
+        icon: "none",
+        duration: 2000,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 格式化时间显示
+  const formatTime = (timeStr: string) => {
+    if (!timeStr) return "";
+    
+    const date = new Date(timeStr);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    
+    if (hours < 24) {
+      return `${hours}小时前`;
+    } else if (days === 1) {
+      return "1天前";
+    } else if (days < 7) {
+      return `${days}天前`;
+    } else {
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      return `${month}月${day}日`;
+    }
+  };
+
+  // 处理回关
+  const handleFollowBack = async (item: FollowItem) => {
+    if (item.is_mutual) {
+      // 已经互相关注,无需操作
+      return;
+    }
+    
+    try {
+      // TODO: 调用关注接口
+      // await userService.followUser({ user_id: item.user_id });
+      
+      Taro.showToast({
+        title: "关注成功",
+        icon: "success",
+        duration: 2000,
+      });
+      
+      // 更新列表
+      setFollowList(prevList => 
+        prevList.map(followItem => 
+          followItem.id === item.id 
+            ? { ...followItem, is_mutual: true }
+            : followItem
+        )
+      );
+    } catch (e) {
+      Taro.showToast({
+        title: "关注失败",
+        icon: "none",
+        duration: 2000,
+      });
+    }
+  };
+
+  // 处理返回
+  const handleBack = () => {
+    Taro.navigateBack();
+  };
+
+  // 处理点击用户
+  const handleUserClick = (userId: string) => {
+    Taro.navigateTo({
+      url: `/user_pages/other/index?user_id=${userId}`,
+    });
+  };
+
+  // 渲染关注项
+  const renderFollowItem = (item: FollowItem) => {
+    return (
+      <View className="follow-item" key={item.id}>
+        <View className="follow-left" onClick={() => handleUserClick(item.user_id)}>
+          <Avatar
+            className="user-avatar"
+            src={item.user_avatar || "https://img.yzcdn.cn/vant/cat.jpeg"}
+            size="40px"
+          />
+          
+          <View className="user-info">
+            <Text className="user-nickname">{item.user_nickname}</Text>
+            
+            {item.user_signature ? (
+              <Text className="user-signature">{item.user_signature}</Text>
+            ) : (
+              <View className="action-row">
+                <Text className="action-text">开始关注你了，期待你的回关</Text>
+                <Text className="time-text">{formatTime(item.time)}</Text>
+              </View>
+            )}
+          </View>
+        </View>
+        
+        <View 
+          className={`follow-button ${item.is_mutual ? "mutual" : ""}`}
+          onClick={() => handleFollowBack(item)}
+        >
+          <Text className="button-text">{item.is_mutual ? "互相关注" : "回关"}</Text>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View className="new-follow-container">
+      {/* 顶部导航栏 */}
+      <View className="navbar">
+        <View className="navbar-content">
+          <View className="back-button" onClick={handleBack}>
+            <View className="back-icon"></View>
+          </View>
+          <Text className="navbar-title">新增关注</Text>
+        </View>
+      </View>
+
+      {/* 关注列表 */}
+      <ScrollView
+        scrollY
+        className="follow-scroll"
+        scrollWithAnimation
+        enhanced
+        showScrollbar={false}
+      >
+        {followList.length > 0 ? (
+          <View className="follow-list">
+            {followList.map(renderFollowItem)}
+            
+            {/* 到底了提示 */}
+            <View className="bottom-tip">
+              <Text className="tip-text">到底了</Text>
+            </View>
+          </View>
+        ) : (
+          <EmptyState text="暂无新增关注" />
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default withAuth(NewFollow);