1

src/components/FollowUserCard/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { View, Text, Image } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { FollowUser } from '@/services/followService';
+import './index.scss';
+
+interface FollowUserCardProps {
+  user: FollowUser;
+  onFollowChange?: (userId: number, isFollowing: boolean) => void;
+}
+
+const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange }) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  // 防御性检查
+  if (!user || !user.id) {
+    return null;
+  }
+
+  // 处理关注操作
+  const handle_follow_action = async () => {
+    if (isProcessing) return;
+
+    try {
+      setIsProcessing(true);
+      
+      // 根据当前状态决定操作
+      let new_status = false;
+      if (user.follow_status === 'follower' || user.follow_status === 'recommend') {
+        // 粉丝或推荐用户，执行关注操作
+        new_status = true;
+      } else if (user.follow_status === 'following' || user.follow_status === 'mutual_follow') {
+        // 已关注或互相关注，执行取消关注操作
+        new_status = false;
+      }
+
+      onFollowChange?.(user.id, new_status);
+    } catch (error) {
+      console.error('关注操作失败:', error);
+      Taro.showToast({
+        title: '操作失败',
+        icon: 'none'
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  // 处理用户点击
+  const handle_user_click = () => {
+    Taro.navigateTo({
+      url: `/user_pages/other/index?userid=${user.id}`
+    });
+  };
+
+  // 获取按钮文本和样式
+  const get_button_config = () => {
+    switch (user.follow_status) {
+      case 'follower':
+      case 'recommend':
+        return {
+          text: '回关',
+          className: 'follow_button'
+        };
+      case 'following':
+        return {
+          text: '已关注',
+          className: 'following_button'
+        };
+      case 'mutual_follow':
+        return {
+          text: '互相关注',
+          className: 'mutual_button'
+        };
+      default:
+        return {
+          text: '关注',
+          className: 'follow_button'
+        };
+    }
+  };
+
+  const button_config = get_button_config();
+
+  return (
+    <View className="follow_user_card">
+      <View className="user_info" onClick={handle_user_click}>
+        <Image 
+          className="avatar" 
+          src={user.avatar_url || require('@/static/userInfo/default_avatar.svg')}
+        />
+        <View className="user_details">
+          <Text className="nickname">{user.nickname}</Text>
+          <Text className="signature">
+            {user.personal_profile || '签名写在这里'}
+          </Text>
+        </View>
+      </View>
+      
+      <View 
+        className={`action_button ${button_config.className} ${isProcessing ? 'processing' : ''}`}
+        onClick={handle_follow_action}
+      >
+        <Text className="button_text">
+          {isProcessing ? '处理中...' : button_config.text}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default FollowUserCard;