mini-programs/src/user_pages/follow

球友关注功能

功能概述

球友关注功能模块，实现用户之间的关注、粉丝、互关和推荐功能。

功能特性

1. 四个标签页

• 互相关注: 显示互相关注的用户列表
• 关注: 显示我关注的用户列表
• 粉丝: 显示关注我的用户列表（默认页面）
• 推荐: 显示同城推荐用户列表

2. 用户操作

• 关注/取消关注: 支持关注和取消关注操作
• 回关: 对粉丝进行回关操作
• 用户详情: 点击头像或昵称跳转到用户详情页

3. 列表功能

• 下拉刷新: 支持下拉刷新数据
• 分页加载: 支持滑动到底部加载更多
• 实时状态: 操作后实时更新关注状态

API 接口

后端接口列表

• POST /user_follow/mutual_follow_list - 获取互关用户列表
• POST /user_follow/my_fans_list - 获取我的粉丝列表
• POST /user_follow/my_following_list - 获取我的关注列表
• POST /user_follow/recommend_same_city - 获取同城推荐用户
• POST /wch_users/follow - 关注用户
• POST /wch_users/unfollow - 取消关注用户

前端服务

• FollowService - 关注相关API服务封装
• FollowUserCard - 用户卡片组件
• FollowPage - 球友关注主页面

文件结构

src/
├── services/
│   └── followService.ts          # 关注服务API
├── components/
│   └── FollowUserCard/          # 用户卡片组件
│       ├── index.tsx
│       ├── index.module.scss
│       └── index.ts
└── user_pages/
    └── follow/                  # 球友关注页面
        ├── index.tsx
        ├── index.scss
        ├── index.config.ts
        └── README.md

使用方法

1. 页面跳转

// 跳转到球友关注页面
Taro.navigateTo({
  url: '/user_pages/follow/index'
});

2. 服务调用

import { FollowService } from '@/services/followService';

// 获取粉丝列表
const response = await FollowService.get_fans_list(1, 20);

// 关注用户
await FollowService.follow_user(userId);

3. 组件使用

import FollowUserCard from '@/components/FollowUserCard';

<FollowUserCard 
  user={user}
  onFollowChange={handleFollowChange}
/>

设计规范

UI 设计

• 遵循 Figma 设计稿 球友-粉丝 页面设计
• 标签页切换交互
• 用户卡片布局和样式
• 关注按钮状态设计

数据状态

• mutual_follow: 互相关注
• following: 已关注
• follower: 粉丝
• recommend: 推荐

按钮状态

• 回关: 对粉丝和推荐用户显示
• 已关注: 对已关注用户显示
• 互相关注: 对互关用户显示

注意事项

1. 权限控制: 页面需要用户登录，使用 withAuth HOC 包装
2. 错误处理: 所有 API 调用都有错误处理和友好提示
3. 性能优化: 采用分页加载，避免一次性加载过多数据
4. 状态同步: 关注操作后实时更新所有相关列表的状态
5. 网络优化: 推荐页面单独的分页大小（10条），其他页面（20条）

扩展功能

可能的扩展点

1. 搜索功能: 在关注列表中搜索特定用户
2. 筛选功能: 按城市、NTRP等级等条件筛选
3. 批量操作: 批量关注/取消关注
4. 推荐算法: 基于更多维度的智能推荐
5. 社交互动: 查看共同关注、共同参与的球局等