1

src/components/FollowUserCard/index.scss

@@ -0,0 +1,99 @@
+// 球友卡片样式  
+.follow_user_card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  background: #ffffff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  .user_info {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 12px;
+    
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+    
+    .user_details {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex: 1;
+      max-width: 200px;
+      
+      .nickname {
+        font-family: PingFang SC;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, 0.8);
+      }
+      
+      .signature {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(60, 60, 67, 0.6);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+      }
+    }
+  }
+  
+  .action_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 16px;
+    border-radius: 20px;
+    min-width: 60px;
+    
+    .button_text {
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+    }
+    
+    &.follow_button {
+      border: 0.5px solid #000000 !important;
+      background: transparent !important;
+      
+      .button_text {
+        color: #000000 !important;
+      }
+    }
+    
+    &.following_button {
+      border: 0.5px solid rgba(120, 120, 128, 0.12) !important;
+      background: transparent !important;
+      
+      .button_text {
+        color: rgba(0, 0, 0, 0.8) !important;
+      }
+    }
+    
+    &.mutual_button {
+      border: 0.5px solid rgba(120, 120, 128, 0.12) !important;
+      background: transparent !important;
+      
+      .button_text {
+        color: rgba(0, 0, 0, 0.8) !important;
+      }
+    }
+    
+    &.processing {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  }
+}

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;

src/components/UserInfo/index.scss

@@ -91,6 +91,31 @@
           letter-spacing: 3.2%;
           color: rgba(0, 0, 0, 0.35);
         }
+
+        // 可点击的统计项样式
+        &.clickable {
+          cursor: pointer;
+          transition: all 0.2s ease;
+          padding: 4px 8px;
+          border-radius: 8px;
+
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+          }
+
+          &:active {
+            background-color: rgba(0, 0, 0, 0.1);
+            transform: scale(0.98);
+          }
+
+          .stat_number {
+            color: rgba(0, 0, 0, 0.9);
+          }
+
+          .stat_label {
+            color: rgba(0, 0, 0, 0.5);
+          }
+        }
       }
     }
 

src/components/UserInfo/index.tsx

@@ -115,6 +115,31 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
     setEditingField("");
   };
 
+  // 处理统计项点击
+  const handle_stats_click = (type: 'following' | 'friends' | 'hosted' | 'participated') => {
+    // 只有当前用户才能查看关注相关页面
+    if (!is_current_user) {
+      Taro.showToast({
+        title: '暂不支持查看他人关注信息',
+        icon: 'none'
+      });
+      return;
+    }
+
+    if (type === 'following') {
+      // 跳转到关注列表页面
+      Taro.navigateTo({
+        url: '/user_pages/follow/index?tab=following'
+      });
+    } else if (type === 'friends') {
+      // 跳转到球友（粉丝）页面，显示粉丝标签
+      Taro.navigateTo({
+        url: '/user_pages/follow/index?tab=follower'
+      });
+    }
+    // 主办和参加暂时不处理，可以后续扩展
+  };
+
   return (
     <View className="user_info_card">
       {/* 头像和基本信息 */}
@@ -139,11 +164,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       {/* 统计数据 */}
       <View className="stats_section">
         <View className="stats_container">
-          <View className="stat_item">
+          <View className="stat_item clickable" onClick={() => handle_stats_click('following')}>
             <Text className="stat_number">{user_info.stats.following}</Text>
             <Text className="stat_label">关注</Text>
           </View>
-          <View className="stat_item">
+          <View className="stat_item clickable" onClick={() => handle_stats_click('friends')}>
             <Text className="stat_number">{user_info.stats.friends}</Text>
             <Text className="stat_label">球友</Text>
           </View>

src/components/index.ts

@@ -17,7 +17,8 @@ import withAuth from "./Auth";
 import { CustomPicker, PopupPicker } from "./Picker";
 import NTRPEvaluatePopup from "./NTRPEvaluatePopup";
 import RefundPopup from "./refundPopup";
-import GameManagePopup from './GameManagePopup'
+import GameManagePopup from './GameManagePopup';
+import FollowUserCard from './FollowUserCard/index';
 
 export {
   ActivityTypeSwitch,
@@ -41,4 +42,5 @@ export {
   NTRPEvaluatePopup,
   RefundPopup,
   GameManagePopup,
+  FollowUserCard,
 };