智慧教务系统

12 KiB

Raw Blame History

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

📱 技术栈和环境

框架：UniApp + Vue2
平台：微信小程序
UI组件：uni-ui + 自定义组件
状态管理：Vuex
网络请求：uni.request封装

⚠️ 重要：分包配置要求

背景：当前UniApp打包微信小程序容量已接近2M上限 解决方案：采用分包架构

主包：只包含登录页和学员端落地页（控制在1.5M以内）
分包：所有功能页面都放在student-pages分包中
目标：确保小程序能正常发布和使用

📋 前端开发任务清单

🔧 基础架构任务

1. 项目配置和环境搭建

负责人：前端开发者工期：1天 任务内容：

配置微信小程序开发环境
设置API基础URL和请求拦截器
配置token存储和自动携带
设置页面路由和tabBar配置
配置腾讯云COS上传参数
重要：配置分包结构，控制主包大小

分包配置要求：

// 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%
集成测试通过
用户验收测试通过
性能测试达标

12 KiB Raw Blame History

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

📱 技术栈和环境

⚠️ 重要：分包配置要求

📋 前端开发任务清单

🔧 基础架构任务

1. 项目配置和环境搭建

2. 公共组件开发

📄 页面开发任务

3. 登录页面

4. 学员端落地页（主包）

5. 个人信息管理页面（分包）

6. 体测数据页面（分包）

6. 课程安排页面

7. 课程预约页面

8. 订单管理页面

9. 合同管理页面

10. 知识库页面

11. 消息管理页面

📊 前端开发进度计划

第1周（5天）

第2周（5天）

第3周（5天）

第4周（3天）

🔍 质量控制和验收标准

代码质量要求

功能验收要求

测试要求

12 KiB

Raw Blame History