# 学员端开发计划 - 前端任务

## 📱 **技术栈和环境**
- **框架**：UniApp + Vue2
- **平台**：微信小程序
- **UI组件**：uni-ui + 自定义组件
- **状态管理**：Vuex
- **网络请求**：uni.request封装

## ⚠️ **重要：分包配置要求**
**背景**：当前UniApp打包微信小程序容量已接近2M上限
**解决方案**：采用分包架构
- **主包**：只包含登录页和学员端落地页（控制在1.5M以内）
- **分包**：所有功能页面都放在student-pages分包中
- **目标**：确保小程序能正常发布和使用

---

## 📋 **前端开发任务清单**

### 🔧 **基础架构任务**

#### 1. **项目配置和环境搭建**
**负责人**：前端开发者
**工期**：1天
**任务内容**：
- [ ] 配置微信小程序开发环境
- [ ] 设置API基础URL和请求拦截器
- [ ] 配置token存储和自动携带
- [ ] 设置页面路由和tabBar配置
- [ ] 配置腾讯云COS上传参数
- [ ] **重要：配置分包结构，控制主包大小**

**分包配置要求**：
```json
// pages.json 分包配置
{
  "pages": [
    "pages/login/login",           // 登录页 - 主包
    "pages/home/home"              // 学员端落地页 - 主包
  ],
  "subPackages": [
    {
      "root": "student-pages",
      "name": "student",
      "pages": [
        "profile/profile",         // 个人信息页
        "physical-test/list",      // 体测数据页
        "physical-test/detail",    // 体测详情页
        "course-schedule/list",    // 课程安排页
        "course-booking/list",     // 课程预约页
        "order/list",              // 订单管理页
        "contract/list",           // 合同管理页
        "knowledge/list",          // 知识库页
        "message/list"             // 消息管理页
      ]
    }
  ]
}
```

**主包内容（控制在1.5M以内）**：
- 登录页面
- 学员端落地页（个人信息概览+功能入口）
- 公共组件（必需的）
- 基础工具类

**分包内容**：
- 所有功能页面
- 页面专用组件
- 页面相关资源

**验收标准**：
- ✅ 小程序可正常启动和预览
- ✅ API请求能正确携带token
- ✅ 路由跳转正常
- ✅ 开发环境配置完整
- ✅ **主包大小控制在1.5M以内**
- ✅ **分包加载正常**

#### 2. **公共组件开发**
**负责人**：前端开发者  
**工期**：2天  
**任务内容**：
- [ ] 学员选择组件（支持多孩子切换）
- [ ] 头像上传组件（支持裁剪和压缩）
- [ ] PDF预览组件（uni.openDocument封装）
- [ ] 图片分享组件（PDF转图片分享）
- [ ] 消息渲染组件（5种消息类型）
- [ ] 趋势图组件（身高体重折线图）

**验收标准**：
- ✅ 所有组件功能完整可复用
- ✅ 组件接口设计合理
- ✅ 支持数据双向绑定
- ✅ 异常情况处理完善

---

### 📄 **页面开发任务**

#### 3. **登录页面**
**负责人**：前端开发者  
**工期**：1天  
**任务内容**：
- [ ] 手机号+密码登录表单
- [ ] 微信一键登录按钮
- [ ] 登录状态验证和跳转
- [ ] 首次登录密码设置提示

**API接口依赖**：
- `POST /api/login/unified` - 统一登录接口
- `POST /api/login/wechat` - 微信登录接口

**验收标准**：
- ✅ 手机号格式验证正确
- ✅ 密码长度验证正确
- ✅ 微信登录流程完整
- ✅ 登录成功后正确跳转
- ✅ 错误提示信息准确

#### 4. **学员端落地页（主包）**
**负责人**：前端开发者
**工期**：1天
**任务内容**：
- [ ] 用户欢迎信息展示（姓名+星期+入会时间）
- [ ] 学员选择卡片（多孩子切换）
- [ ] 功能模块入口导航
- [ ] 快捷信息概览

**页面结构**：
```
[用户信息区域]
- {name} 你好，今天是星期{x}
- 入会时间：{create_year_month}
- 年龄：{age}

[学员选择卡片]
- 学员下拉选择/切换按钮
- 当前选中学员信息

[功能入口区域]
- 个人信息管理 → 跳转分包页面
- 体测数据 → 跳转分包页面
- 课程安排 → 跳转分包页面
- 课程预约 → 跳转分包页面
- 订单管理 → 跳转分包页面
- 合同管理 → 跳转分包页面
- 知识库 → 跳转分包页面
- 消息管理 → 跳转分包页面
```

**API接口依赖**：
- `GET /api/student/list` - 获取学员列表
- `GET /api/student/summary/{id}` - 获取学员概览信息

**验收标准**：
- ✅ 用户信息正确计算和显示
- ✅ 学员切换功能正常
- ✅ 功能入口跳转正常
- ✅ 页面加载速度快
- ✅ **页面大小控制合理**

#### 5. **个人信息管理页面（分包）**
**负责人**：前端开发者
**工期**：1.5天
**任务内容**：
- [ ] 学员详细信息展示
- [ ] 学员基本信息编辑表单
- [ ] 头像上传功能
- [ ] 信息保存和验证

**页面结构**：
```
[学员详细信息]
- 头像显示/上传
- 基本信息表单
- 家庭信息表单
- 保存按钮
```

**API接口依赖**：
- `GET /api/student/info/{id}` - 获取学员详情
- `PUT /api/student/update/{id}` - 更新学员信息
- `POST /api/upload/avatar` - 头像上传

**验收标准**：
- ✅ 学员信息正确显示
- ✅ 头像上传压缩到2M以下
- ✅ 表单验证完整
- ✅ 保存成功提示
- ✅ **分包页面加载正常**

#### 6. **体测数据页面（分包）**
**负责人**：前端开发者  
**工期**：2天  
**任务内容**：
- [ ] 体测记录列表展示
- [ ] 身高体重数据显示
- [ ] 体测报告PDF预览
- [ ] 身高体重趋势图
- [ ] PDF转图片分享功能

**页面结构**：
```
[体测记录列表]
- 测试日期
- 身高/体重数据
- 体测报告图标

[体测详情]
- 身高体重数值
- 趋势折线图
- PDF预览/分享按钮
```

**API接口依赖**：
- `GET /api/physical-test/list/{student_id}` - 获取体测记录
- `GET /api/physical-test/detail/{id}` - 获取体测详情
- `POST /api/physical-test/share/{id}` - PDF转图片分享

**验收标准**：
- ✅ 体测数据正确显示
- ✅ 趋势图渲染正常
- ✅ PDF预览功能正常
- ✅ 分享功能正常
- ✅ 无数据状态处理

#### 6. **课程安排页面**
**负责人**：前端开发者  
**工期**：1.5天  
**任务内容**：
- [ ] 课程安排列表展示
- [ ] 课程状态标识
- [ ] 课程详情查看
- [ ] 日期筛选功能

**页面结构**：
```
[筛选区域]
- 日期选择器
- 状态筛选

[课程列表]
- 课程名称/时间
- 教练/地点信息
- 课程状态标识
```

**API接口依赖**：
- `GET /api/course-schedule/list/{student_id}` - 获取课程安排
- `GET /api/course-schedule/detail/{id}` - 获取课程详情

**验收标准**：
- ✅ 课程列表正确显示
- ✅ 状态标识准确
- ✅ 筛选功能正常
- ✅ 详情页面完整

#### 7. **课程预约页面**
**负责人**：前端开发者  
**工期**：2天  
**任务内容**：
- [ ] 可预约课程列表
- [ ] 预约确认弹窗
- [ ] 预约冲突检测
- [ ] 我的预约列表
- [ ] 取消预约功能

**页面结构**：
```
[可预约课程]
- 课程信息卡片
- 预约按钮
- 剩余名额显示

[我的预约]
- 预约记录列表
- 取消预约按钮
- 取消原因填写
```

**API接口依赖**：
- `GET /api/course-booking/available/{student_id}` - 获取可预约课程
- `POST /api/course-booking/create` - 创建预约
- `GET /api/course-booking/my-list/{student_id}` - 我的预约列表
- `PUT /api/course-booking/cancel/{id}` - 取消预约

**验收标准**：
- ✅ 可预约课程正确显示
- ✅ 预约冲突检测正常
- ✅ 预约确认流程完整
- ✅ 取消预约功能正常
- ✅ 6小时限制检查正确

#### 8. **订单管理页面**
**负责人**：前端开发者  
**工期**：2天  
**任务内容**：
- [ ] 订单列表展示
- [ ] 订单状态标识
- [ ] 支付功能集成
- [ ] 订单筛选功能
- [ ] 订单详情查看

**页面结构**：
```
[筛选区域]
- 课程类型筛选
- 时间范围筛选

[订单列表]
- 订单基本信息
- 支付状态
- 支付按钮
```

**API接口依赖**：
- `GET /api/order/list/{student_id}` - 获取订单列表
- `GET /api/order/detail/{id}` - 获取订单详情
- `POST /api/payment/create` - 创建支付
- `GET /api/payment/status/{order_id}` - 查询支付状态

**验收标准**：
- ✅ 订单列表正确显示
- ✅ 支付流程完整
- ✅ 支付状态更新及时
- ✅ 筛选功能正常
- ✅ 异常处理完善

#### 9. **合同管理页面**
**负责人**：前端开发者
**工期**：2天
**任务内容**：
- [ ] 合同列表展示
- [ ] 合同状态标识
- [ ] 合同详情查看
- [ ] 合同签署流程
- [ ] 合同下载功能

**页面结构**：
```
[合同列表]
- 合同名称
- 签署状态
- 签署时间

[合同签署]
- 合同内容展示
- 表单信息填写
- 签名上传
- 提交确认
```

**API接口依赖**：
- `GET /api/contract/list/{student_id}` - 获取合同列表
- `GET /api/contract/detail/{id}` - 获取合同详情
- `POST /api/contract/sign` - 提交合同签署
- `GET /api/contract/download/{id}` - 下载合同

**验收标准**：
- ✅ 合同列表正确显示
- ✅ 签署流程完整
- ✅ 表单验证正确
- ✅ 签名上传正常
- ✅ 下载功能正常

#### 10. **知识库页面**
**负责人**：前端开发者
**工期**：1.5天
**任务内容**：
- [ ] 知识内容列表
- [ ] 分类筛选功能
- [ ] 富文本内容渲染
- [ ] 权限控制显示

**页面结构**：
```
[分类筛选]
- 课程类型筛选
- 内容类型筛选

[内容列表]
- 标题/封面
- 内容摘要
- 查看详情
```

**API接口依赖**：
- `GET /api/knowledge/list/{student_id}` - 获取知识内容
- `GET /api/knowledge/detail/{id}` - 获取内容详情
- `GET /api/knowledge/categories` - 获取分类列表

**验收标准**：
- ✅ 内容列表正确显示
- ✅ 权限控制正确
- ✅ 富文本渲染正常
- ✅ 分类筛选功能正常

#### 11. **消息管理页面**
**负责人**：前端开发者
**工期**：2天
**任务内容**：
- [ ] 消息列表展示
- [ ] 5种消息类型渲染
- [ ] 已读/未读状态
- [ ] 消息详情查看
- [ ] 消息交互功能

**页面结构**：
```
[消息列表]
- 消息标题/时间
- 未读标识
- 消息类型图标

[消息详情]
- 根据类型渲染内容
- 相关操作按钮
- 已读状态更新
```

**API接口依赖**：
- `GET /api/message/list/{student_id}` - 获取消息列表
- `GET /api/message/detail/{id}` - 获取消息详情
- `PUT /api/message/read/{id}` - 标记已读

**验收标准**：
- ✅ 消息列表正确显示
- ✅ 5种类型渲染正确
- ✅ 已读状态更新正常
- ✅ 交互功能完整
- ✅ 推送消息处理正常

---

## 📊 **前端开发进度计划**

### 第1周（5天）
- 天1：基础架构搭建
- 天2-3：公共组件开发
- 天4：登录页面
- 天5：个人信息页面（第1天）

### 第2周（5天）
- 天1：个人信息页面（第2天）
- 天2-3：体测数据页面
- 天4：课程安排页面
- 天5：课程预约页面（第1天）

### 第3周（5天）
- 天1：课程预约页面（第2天）
- 天2-3：订单管理页面
- 天4-5：合同管理页面

### 第4周（3天）
- 天1：知识库页面
- 天2-3：消息管理页面

**总工期：18天**

---

## 🔍 **质量控制和验收标准**

### 代码质量要求
- [ ] 代码规范符合ESLint配置
- [ ] 组件复用性良好
- [ ] 异常处理完善
- [ ] 性能优化到位

### 功能验收要求
- [ ] 所有页面功能完整可用
- [ ] 数据交互正确无误
- [ ] 用户体验流畅
- [ ] 兼容性测试通过

### 测试要求
- [ ] 单元测试覆盖率>80%
- [ ] 集成测试通过
- [ ] 用户验收测试通过
- [ ] 性能测试达标