bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-09-07 18:22:07 +08:00
parent 98bf0fbe13
commit 45f85a8572
12 changed files with 72 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/pages/userInfo/API_INTEGRATION.md
View File

@@ -1,211 +0,0 @@
# API接口集成说明
## 已集成的接口
### 1. 用户详情接口 `/user/detail`
**请求方式**: POST
**请求参数**:
```json
{
"user_id": "string" // 可选，不传则获取当前用户信息
}
```
**响应格式**:
```json
{
"code": 0,
"message": "string",
"data": {
"openid": "",
"user_code": "",
"unionid": "",
"session_key": "",
"nickname": "张三",
"avatar_url": "https://example.com/avatar.jpg",
"gender": "",
"country": "",
"province": "",
"city": "",
"language": "",
"phone": "13800138000",
"is_subscribed": "0",
"latitude": "0",
"longitude": "0",
"subscribe_time": "2024-06-15 14:00:00",
"last_login_time": "2024-06-15 14:00:00"
}
}
```
### 2. 用户信息更新接口 `/user/update`
**请求方式**: POST
**请求参数**:
```json
{
"nickname": "string",
"avatar_url": "string",
"gender": "string",
"phone": "string",
"latitude": 31.2304,
"longitude": 121.4737,
"city": "string",
"province": "string",
"country": "string"
}
```
**响应格式**:
```json
{
"code": 0,
"message": "string",
"data": {}
}
```
### 3. 头像上传接口 `/gallery/upload`
**请求方式**: POST (multipart/form-data)
**请求参数**:
- `file`: 图片文件
**响应格式**:
```json
{
"code": 0,
"message": "请求成功！",
"data": {
"create_time": "2025-09-06 19:41:18",
"last_modify_time": "2025-09-06 19:41:18",
"duration": "0",
"thumbnail_url": "",
"view_count": "0",
"download_count": "0",
"is_delete": 0,
"id": 67,
"user_id": 1,
"resource_type": "image",
"file_name": "front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"original_name": "微信图片_20250505175522.jpg",
"file_path": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"file_url": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"file_size": 264506,
"mime_type": "image/jpeg",
"description": "用户图像",
"tags": "用户图像",
"is_public": "1",
"width": 0,
"height": 0,
"uploadInfo": {
"success": true,
"name": "front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"path": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"ossPath": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"fileType": "image/jpeg",
"fileSize": 264506,
"originalName": "微信图片_20250505175522.jpg",
"suffix": "jpg",
"storagePath": "front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg"
}
}
}
```
**说明**: 上传成功后，使用 `data.file_url` 字段作为头像URL。
## 使用方式
### 在页面中调用
```typescript
import { UserService } from '@/services/userService';
// 获取用户信息
const userInfo = await UserService.get_user_info('user_id');
// 更新用户信息
await UserService.save_user_info({
nickname: '新昵称',
phone: '13800138000',
gender: '男'
});
// 上传头像
const avatarUrl = await UserService.upload_avatar('/path/to/image.jpg');
```
### API配置
API配置位于 `src/config/api.ts`，可以根据环境自动切换接口地址：
```typescript
export const API_CONFIG = {
BASE_URL: process.env.NODE_ENV === 'development'
? 'http://localhost:3000'
: 'https://api.example.com',
// ...
};
```
## 错误处理
所有API调用都包含完整的错误处理：
1. **网络错误**: 自动捕获并显示友好提示
2. **业务错误**: 根据返回的 `code` 和 `message` 处理
3. **超时处理**: 10秒超时设置
4. **降级处理**: API失败时返回默认数据
## 数据映射
### 用户信息映射
API返回的用户数据会自动映射到前端组件使用的格式：
```typescript
// API数据 -> 前端组件数据
{
user_code -> id,
nickname -> nickname,
avatar_url -> avatar,
subscribe_time -> join_date,
city -> location,
// ...
}
```
## 注意事项
1. **位置信息**: 更新用户信息时会自动获取当前位置
2. **头像处理**: 上传失败时自动使用默认头像
3. **表单验证**: 编辑资料页面包含完整的表单验证
4. **类型安全**: 所有接口都有完整的TypeScript类型定义
## 扩展接口
如需添加新的用户相关接口，可以在 `UserService` 中添加新方法：
```typescript
static async new_api_method(params: any): Promise<any> {
try {
const response = await Taro.request({
url: `${API_CONFIG.BASE_URL}/new/endpoint`,
method: 'POST',
data: params,
...REQUEST_CONFIG
});
if (response.data.code === 0) {
return response.data.data;
} else {
throw new Error(response.data.message);
}
} catch (error) {
console.error('API调用失败:', error);
throw error;
}
}
```

240
src/pages/userInfo/AVATAR_UPLOAD.md
View File

@@ -1,240 +0,0 @@
# 头像上传功能说明
## 接口更新
### 新的上传接口 `/gallery/upload`
**接口地址**: `/gallery/upload`
**请求方式**: POST (multipart/form-data)
**功能**: 上传图片文件到阿里云OSS
### 请求参数
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| file | File | 是 | 图片文件 |
### 响应格式
```json
{
"code": 0,
"message": "请求成功！",
"data": {
"create_time": "2025-09-06 19:41:18",
"last_modify_time": "2025-09-06 19:41:18",
"duration": "0",
"thumbnail_url": "",
"view_count": "0",
"download_count": "0",
"is_delete": 0,
"id": 67,
"user_id": 1,
"resource_type": "image",
"file_name": "front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"original_name": "微信图片_20250505175522.jpg",
"file_path": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"file_url": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"file_size": 264506,
"mime_type": "image/jpeg",
"description": "用户图像",
"tags": "用户图像",
"is_public": "1",
"width": 0,
"height": 0,
"uploadInfo": {
"success": true,
"name": "front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"path": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"ossPath": "http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg",
"fileType": "image/jpeg",
"fileSize": 264506,
"originalName": "微信图片_20250505175522.jpg",
"suffix": "jpg",
"storagePath": "front/ball/images/f1bd8f63-a1e0-4750-9656-1e8405753416.jpg"
}
}
}
```
## 关键字段说明
### 主要字段
- `file_url`: 图片的完整访问URL，用于前端显示
- `file_path`: 与file_url相同，图片的完整访问URL
- `file_size`: 文件大小（字节）
- `mime_type`: 文件MIME类型
- `original_name`: 原始文件名
### 上传信息字段
- `uploadInfo.success`: 上传是否成功
- `uploadInfo.ossPath`: OSS存储路径
- `uploadInfo.fileType`: 文件类型
- `uploadInfo.fileSize`: 文件大小
- `uploadInfo.suffix`: 文件后缀
## 前端实现
### TypeScript接口定义
```typescript
interface UploadResponseData {
create_time: string;
last_modify_time: string;
duration: string;
thumbnail_url: string;
view_count: string;
download_count: string;
is_delete: number;
id: number;
user_id: number;
resource_type: string;
file_name: string;
original_name: string;
file_path: string;
file_url: string;
file_size: number;
mime_type: string;
description: string;
tags: string;
is_public: string;
width: number;
height: number;
uploadInfo: {
success: boolean;
name: string;
path: string;
ossPath: string;
fileType: string;
fileSize: number;
originalName: string;
suffix: string;
storagePath: string;
};
}
```
### 上传方法实现
```typescript
static async upload_avatar(file_path: string): Promise<string> {
try {
const uploadResponse = await Taro.uploadFile({
url: `${API_CONFIG.BASE_URL}${API_CONFIG.UPLOAD.AVATAR}`,
filePath: file_path,
name: 'file'
});
const result = JSON.parse(uploadResponse.data) as ApiResponse<UploadResponseData>;
if (result.code === 0) {
// 使用file_url字段作为头像URL
return result.data.file_url;
} else {
throw new Error(result.message || '头像上传失败');
}
} catch (error) {
console.error('头像上传失败:', error);
// 上传失败时返回默认头像
return require('../../static/userInfo/default_avatar.svg');
}
}
```
## 使用方式
### 在编辑资料页面中使用
```typescript
// 处理头像上传
const handle_avatar_upload = () => {
Taro.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: async (res) => {
const tempFilePath = res.tempFilePaths[0];
try {
const avatar_url = await UserService.upload_avatar(tempFilePath);
setUserInfo(prev => ({ ...prev, avatar: avatar_url }));
Taro.showToast({
title: '头像上传成功',
icon: 'success'
});
} catch (error) {
console.error('头像上传失败:', error);
Taro.showToast({
title: '头像上传失败',
icon: 'none'
});
}
}
});
};
```
## 功能特点
### 1. OSS存储
- 图片直接上传到阿里云OSS
- 支持CDN加速访问
- 自动生成唯一文件名
### 2. 文件信息完整
- 记录文件大小、类型、原始名称
- 支持文件描述和标签
- 记录上传时间和修改时间
### 3. 错误处理
- 上传失败时自动使用默认头像
- 完整的错误日志记录
- 用户友好的错误提示
### 4. 类型安全
- 完整的TypeScript类型定义
- 编译时类型检查
- 智能代码提示
## 注意事项
1. **文件大小限制**: 建议限制上传文件大小，避免过大文件
2. **文件类型验证**: 只允许上传图片格式文件
3. **网络处理**: 上传过程中需要处理网络异常情况
4. **用户体验**: 上传过程中显示加载状态
5. **缓存策略**: 上传成功后更新本地缓存
## 扩展功能
### 图片压缩
```typescript
// 可以在上传前进行图片压缩
const compressImage = (filePath: string) => {
return Taro.compressImage({
src: filePath,
quality: 80
});
};
```
### 进度显示
```typescript
// 显示上传进度
const uploadWithProgress = (filePath: string) => {
return Taro.uploadFile({
url: `${API_CONFIG.BASE_URL}${API_CONFIG.UPLOAD.AVATAR}`,
filePath: filePath,
name: 'file',
success: (res) => {
// 处理成功
},
fail: (err) => {
// 处理失败
}
});
};
```
---
**更新时间**: 2024年12月19日
**接口版本**: v1.0
**存储方式**: 阿里云OSS

160
src/pages/userInfo/INTEGRATION_SUMMARY.md
View File

@@ -1,160 +0,0 @@
# 个人页面API接口集成完成
## ✅ 已完成的工作
### 1. API接口集成
- **用户详情接口** (`/user/detail`) - 获取用户信息
- **用户更新接口** (`/user/update`) - 更新用户详细信息
- **头像上传接口** (`/gallery/upload`) - 上传用户头像到OSS
### 2. 服务层优化
- 创建了 `UserService` 类，统一管理用户相关API调用
- 添加了完整的TypeScript类型定义
- 实现了错误处理和降级机制
- 支持位置信息自动获取
### 3. 配置管理
- 创建了 `API_CONFIG` 配置文件
- 支持开发/生产环境自动切换
- 统一的请求配置和超时设置
### 4. 编辑资料页面增强
- 新增手机号输入字段
- 新增性别选择器（男/女）
- 保留NTRP等级选择器
- 完整的表单验证
### 5. 数据映射
- API数据格式自动映射到前端组件格式
- 支持默认值处理
- 时间格式转换
## 🔧 技术特点
### API调用方式
```typescript
// 获取用户信息
const userInfo = await UserService.get_user_info('user_id');
// 更新用户信息
await UserService.save_user_info({
nickname: '新昵称',
phone: '13800138000',
gender: '男',
location: '上海'
});
// 上传头像
const avatarUrl = await UserService.upload_avatar('/path/to/image.jpg');
```
### 错误处理
- 网络错误自动捕获
- 业务错误友好提示
- API失败时降级到默认数据
- 完整的日志记录
### 类型安全
- 完整的TypeScript接口定义
- API请求/响应类型约束
- 组件属性类型检查
## 📱 功能亮点
### 1. 智能数据获取
- 根据参数自动判断获取当前用户或指定用户信息
- 支持用户ID参数传递
- 自动处理数据格式转换
### 2. 位置服务集成
- 更新用户信息时自动获取当前位置
- 支持经纬度坐标传递
- 城市信息自动填充
### 3. 文件上传优化
- 支持图片压缩上传
- 上传失败时自动使用默认头像
- 进度提示和错误处理
### 4. 表单体验优化
- 实时表单验证
- 字符计数显示
- 选择器交互优化
## 🚀 使用方式
### 页面导航
```typescript
// 访问个人页面
Taro.navigateTo({
url: '/pages/userInfo/myself/index'
});
// 访问他人页面
Taro.navigateTo({
url: `/pages/userInfo/other/index?userid=${user_id}`
});
// 访问编辑资料页面
Taro.navigateTo({
url: '/pages/userInfo/edit/index'
});
```
### API配置
```typescript
// 开发环境
API_CONFIG.BASE_URL = 'http://localhost:3000'
// 生产环境
API_CONFIG.BASE_URL = 'https://api.example.com'
```
## 📋 接口规范
### 请求格式
- 所有接口使用POST方法
- 请求头: `Content-Type: application/json`
- 超时设置: 10秒
### 响应格式
```json
{
"code": 0, // 0表示成功，非0表示失败
"message": "string", // 错误信息
"data": {} // 响应数据
}
```
### 错误码处理
- `code: 0` - 请求成功
- `code: 非0` - 业务错误，显示message
- 网络错误 - 显示"网络连接失败"
## 🔄 数据流
1. **页面加载** → 调用 `UserService.get_user_info()`
2. **用户操作** → 调用相应的API方法
3. **数据更新** → 自动刷新页面状态
4. **错误处理** → 显示友好提示信息
## 📝 注意事项
1. **权限处理**: 需要确保用户已登录才能调用API
2. **缓存策略**: 建议添加用户信息缓存机制
3. **图片处理**: 头像上传需要后端支持文件上传
4. **位置权限**: 需要用户授权位置信息访问
## 🎯 下一步优化
1. 添加用户信息缓存机制
2. 实现离线数据支持
3. 优化图片上传体验
4. 添加更多用户统计信息接口
5. 实现用户关注/粉丝功能
---
**集成完成时间**: 2024年12月19日
**API版本**: v1.0
**兼容性**: 支持所有Taro框架版本

97
src/pages/userInfo/README.md
View File

@@ -1,97 +0,0 @@
# 个人页面功能说明
## 功能概述
个人页面模块包含三个主要功能页面：
1. **个人页面** (`/pages/userInfo/myself/index`) - 当前用户的主页
2. **他人页面** (`/pages/userInfo/other/index`) - 其他用户的主页
3. **编辑资料** (`/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` 参数区分个人页面和他人页面
- 页面间导航逻辑完善
- 参数传递和状态管理
## 使用方式
### 访问个人页面
```javascript
Taro.navigateTo({
url: '/pages/userInfo/myself/index'
});
```
### 访问他人页面
```javascript
Taro.navigateTo({
url: `/pages/userInfo/other/index?userid=${user_id}`
});
```
### 访问编辑资料页面
```javascript
Taro.navigateTo({
url: '/pages/userInfo/edit/index'
});
```
## 样式特点
- 使用渐变背景设计
- 卡片式布局
- 响应式交互效果
- 统一的视觉风格
- 符合小程序设计规范
## 数据流
1. 页面加载时从 `UserService` 获取数据
2. 用户操作通过回调函数处理
3. 状态更新后重新渲染组件
4. 支持异步操作和错误处理
## 扩展性
- 组件可复用性强
- 服务层易于扩展
- 支持更多用户功能扩展
- 便于维护和测试

13
src/pages/userInfo/myself/index.tsx
View File

@@ -12,7 +12,7 @@ import { withAuth } from '@/components';
const MyselfPage: React.FC = () => {
// 获取页面参数
const instance = Taro.getCurrentInstance();
const user_id = instance.router?.params?.userid;
const user_id = instance.router?.params?.userid || '';
// 判断是否为当前用户
const is_current_user = !user_id;
@@ -29,7 +29,6 @@ const MyselfPage: React.FC = () => {
hosted: 0,
participated: 0
},
tags: ['加载中...'],
bio: '加载中...',
location: '加载中...',
occupation: '加载中...',
@@ -58,9 +57,9 @@ const MyselfPage: React.FC = () => {
// 获取球局记录
let games_data;
if (active_tab === 'hosted') {
games_data = await UserService.get_hosted_games(user_id || '1');
games_data = await UserService.get_hosted_games(user_id);
} else {
games_data = await UserService.get_participated_games(user_id || '1');
games_data = await UserService.get_participated_games(user_id);
}
set_game_records(games_data);
@@ -93,9 +92,9 @@ const MyselfPage: React.FC = () => {
try {
let games_data;
if (active_tab === 'hosted') {
games_data = await UserService.get_hosted_games(user_id || '1');
games_data = await UserService.get_hosted_games(user_id);
} else {
games_data = await UserService.get_participated_games(user_id || '1');
games_data = await UserService.get_participated_games(user_id);
}
set_game_records(games_data);
} catch (error) {
@@ -106,7 +105,7 @@ const MyselfPage: React.FC = () => {
// 处理关注/取消关注
const handle_follow = async () => {
try {
const new_following_state = await UserService.toggle_follow(user_id || '1', is_following);
const new_following_state = await UserService.toggle_follow(user_id, is_following);
setIsFollowing(new_following_state);
Taro.showToast({