个人页面功能说明
功能概述
个人页面模块包含三个主要功能页面：
- 个人页面 (
/pages/userInfo/myself/index) - 当前用户的主页 - 他人页面 (
/pages/userInfo/other/index) - 其他用户的主页 - 编辑资料 (
/pages/userInfo/edit/index) - 编辑个人资料
主要功能
个人页面 (myself)
- 显示当前用户的基本信息（头像、昵称、加入时间）
- 显示统计数据（关注、球友、主办、参加）
- 显示个人标签和简介
- 提供编辑和分享功能
- 显示球局订单和收藏快捷入口
- 展示用户主办的球局和参与的球局
他人页面 (other)
- 显示其他用户的基本信息
- 提供关注/取消关注功能
- 提供发送消息功能
- 展示该用户主办的球局和参与的球局
- 支持点击参与者头像查看其他用户主页
编辑资料 (edit)
- 支持更换头像
- 编辑昵称、个人简介、所在地区、职业
- NTRP等级选择
- 表单验证和保存功能
技术特点
组件化设计
UserInfoCard- 用户信息卡片组件GameCard- 球局卡片组件GameTabs- 球局标签页组件
服务层
UserService- 用户相关API服务get_user_info()- 获取用户信息get_user_games()- 获取用户球局记录toggle_follow()- 关注/取消关注save_user_info()- 保存用户信息upload_avatar()- 上传头像
页面导航
- 支持通过
userid参数区分个人页面和他人页面 - 页面间导航逻辑完善
- 参数传递和状态管理
使用方式
访问个人页面
Taro.navigateTo({
url: '/pages/userInfo/myself/index'
});
访问他人页面
Taro.navigateTo({
url: `/pages/userInfo/other/index?userid=${user_id}`
});
访问编辑资料页面
Taro.navigateTo({
url: '/pages/userInfo/edit/index'
});
样式特点
- 使用渐变背景设计
- 卡片式布局
- 响应式交互效果
- 统一的视觉风格
- 符合小程序设计规范
数据流
- 页面加载时从
UserService获取数据 - 用户操作通过回调函数处理
- 状态更新后重新渲染组件
- 支持异步操作和错误处理
扩展性
- 组件可复用性强
- 服务层易于扩展
- 支持更多用户功能扩展
- 便于维护和测试