mini-programs/src/other_pages/new_follow/index.tsx

import { useState, useEffect } from "react";
import { View, Text, ScrollView } from "@tarojs/components";
import { Avatar } from "@nutui/nutui-react-taro";
import { withAuth, EmptyState, BackNavbar } from "@/components";
import FollowService from "@/services/followService";
import { formatShortRelativeTime } from "@/utils/timeUtils";
import Taro from "@tarojs/taro";
import "./index.scss";

// 关注项类型定义
interface FollowItem {
  id: number;
  user_id: number;
  user_avatar: string;
  user_nickname: string;
  user_signature?: string;
  city?: string;
  ntrp_level?: string;
  time: string;
  is_mutual: boolean; // 是否互相关注
}

const NewFollow = () => {
  const [followList, setFollowList] = useState<FollowItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  useEffect(() => {
    getFollowList();
  }, []);

  // 获取新增关注列表
  const getFollowList = async () => {
    if (loading) return;
    
    setLoading(true);
    try {
      const res = await FollowService.get_new_fans_list(1, 20);
      
      if (res.list) {
        // 映射数据
        const mappedList = res.list.map((item: any) => ({
          id: item.id,
          user_id: item.id,
          user_avatar: item.avatar_url || "",
          user_nickname: item.nickname || "匿名用户",
          user_signature: item.personal_profile || "",
          city: item.city || "",
          ntrp_level: item.ntrp_level || "",
          time: item.follow_time,
          is_mutual: item.is_mutual || false,
        }));
        
        setFollowList(mappedList);
      }
    } catch (e) {
      Taro.showToast({
        title: "获取列表失败",
        icon: "none",
        duration: 2000,
      });
    } finally {
      setLoading(false);
    }
  };


  // 处理回关/取消关注
  const handleFollowBack = async (item: FollowItem) => {
    try {
      if (item.is_mutual) {
        // 已经互相关注，点击取消关注
        await FollowService.unfollow_user(item.user_id);
        
        Taro.showToast({
          title: "取消关注成功",
          icon: "success",
          duration: 2000,
        });
        
        // 更新列表
        setFollowList(prevList => 
          prevList.map(followItem => 
            followItem.id === item.id 
              ? { ...followItem, is_mutual: false }
              : followItem
          )
        );
      } else {
        // 未互关，点击回关
        await FollowService.follow_back(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: item.is_mutual ? "取消关注失败" : "关注失败",
        icon: "none",
        duration: 2000,
      });
    }
  };

  // 处理返回
  const handleBack = () => {
    Taro.navigateBack();
  };

  // 处理点击用户
  const handleUserClick = (userId: number) => {
    Taro.navigateTo({
      url: `/user_pages/other/index?user_id=${userId}`,
    });
  };

  // 处理下拉刷新
  const handleRefresh = async () => {
    setRefreshing(true);
    try {
      const res = await FollowService.get_new_fans_list(1, 20);
      
      if (res.list) {
        const mappedList = res.list.map((item: any) => ({
          id: item.id,
          user_id: item.id,
          user_avatar: item.avatar_url || "",
          user_nickname: item.nickname || "匿名用户",
          user_signature: item.personal_profile || "",
          city: item.city || "",
          ntrp_level: item.ntrp_level || "",
          time: item.follow_time,
          is_mutual: item.is_mutual || false,
        }));
        
        setFollowList(mappedList);
      }
    } catch (e) {
      Taro.showToast({
        title: "刷新失败",
        icon: "none",
        duration: 2000,
      });
    } finally {
      setRefreshing(false);
    }
  };

  // 渲染关注项
  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">{formatShortRelativeTime(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">
      {/* 顶部导航栏 */}
      <BackNavbar 
        title="新增关注" 
        showBackButton={true}
        showAvatar={false}
        onBack={handleBack}
      />

      {/* 关注列表 */}
      <ScrollView
        scrollY
        className="follow-scroll"
        scrollWithAnimation
        enhanced
        showScrollbar={false}
        refresherEnabled={true}
        refresherTriggered={refreshing}
        onRefresherRefresh={handleRefresh}
      >
        {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);