小程序页面开发任务清单

概述

小程序前端开发，共 18 个页面，分 4 个阶段完成。

设计图参考：

Figma 在线设计图（主要）：https://www.figma.com/design/88edYGASUcyID6afiwILdf/项目?node-id=432-1991
本地设计图：docs/设计图/
切图资源：docs/切图/

所有页面必须严格按照 Figma 设计图样式开发。

任务列表

第一阶段：基础框架（1-2天）

1. 项目基础设施
- 1.1 更新 pages.json 配置
  - 配置所有页面路由
  - 配置 TabBar（首页、团队、我的）
  - 配置全局样式和导航栏
- 1.2 创建全局样式文件
  - 创建 styles/variables.scss（颜色、间距、字体变量）
  - 创建 styles/common.scss（通用样式类）
  - 更新 uni.scss 引入变量
- 1.3 创建 API 接口文件
  - 创建 api/home.js（首页接口）
  - 创建 api/assessment.js（测评接口）
  - 创建 api/order.js（订单接口）
  - 创建 api/planner.js（规划师接口）
  - 创建 api/invite.js（分销接口）
  - 创建 api/system.js（系统接口）
  - 更新 api/index.js 统一导出
- 1.4 创建状态管理
  - 更新 store/user.js（添加 userLevel 字段）
  - 创建 store/app.js（系统信息状态）
  - 更新 store/index.js
- 1.5 创建组合式函数
  - 创建 composables/useAuth.js（登录检查）
  - 创建 composables/usePayment.js（支付流程）
  - 创建 composables/useNavbar.js（导航栏高度）
- 1.6 创建公共组件
  - 创建 components/Navbar/index.vue（自定义导航栏）
  - 更新 components/index.js
- 1.7 创建工具函数
  - 创建 utils/validate.js（表单验证）
2. Checkpoint - 基础框架验证
- 确保项目能正常编译运行
- 确保 TabBar 正常显示切换
- 确保 API 请求封装正常工作

第二阶段：P0 核心页面（3-5天）

3. 登录页
- 3.1 创建 pages/login/index.vue
  - 设计图: docs/设计图/登录页.png、docs/设计图/登录页(1).png
  - 按设计图实现页面布局：Logo、登录按钮、协议勾选
  - 微信登录流程：wx.login + wx.getPhoneNumber
  - 调用后端登录接口 POST /api/login
  - 登录成功后返回原页面
4. 首页
- 4.1 改造 pages/index/index.vue
  - 设计图: docs/设计图/首页.png
  - 按设计图实现自定义导航栏样式
  - Banner 轮播图（调用 GET /api/home/getBannerList）
  - 测评入口列表（调用 GET /api/home/getAssessmentList）
  - 底部宣传长图（调用 GET /api/home/getPromotionList）
  - 点击即将上线测评弹出提示"该测评暂未开放"
  - 下拉刷新
5. 团队页
- 5.1 创建 pages/team/index.vue
  - 设计图: docs/设计图/团队.png
  - 按设计图实现自定义导航栏
  - 团队介绍图片展示（调用 GET /api/team/getInfo）
6. 我的页
- 6.1 改造 pages/mine/index.vue
  - 设计图: docs/设计图/我的-未登录.png、docs/设计图/我的-登录页.png、docs/设计图/我的-退出登录.png
  - 按设计图实现未登录状态样式
  - 按设计图实现已登录状态样式：头像、昵称、UID
  - 功能入口按设计图布局：我的订单、往期测评、联系我们、邀请新用户（合伙人可见）
  - 其他入口：关于、用户协议、隐私政策、退出登录
  - 退出登录二次确认弹窗按设计图样式
7. Checkpoint - TabBar 页面验证
- 确保三个 TabBar 页面与设计图一致
- 确保登录流程正常
- 确保页面数据正确加载
8. 测评-信息填写页
- 8.1 创建 pages/assessment/info/index.vue
  - 设计图: docs/设计图/测评-个人信息填写.png、测评-个人信息填写2.png、测评-个人信息填写3.png、测评-个人信息填写4.png
  - 按设计图实现顶部测评介绍区域
  - 按设计图实现表单样式：姓名、手机号、性别、年龄、学业阶段、省市区
  - 年龄下拉：10-50岁
  - 学业阶段下拉：6个选项
  - 省市区三级联动
  - 表单验证：必填项、手机号格式、区县必选
  - 按设计图实现两个按钮样式：支付测评、邀请码免费测评
  - 未填写完整时按钮灰色不可点击
  - 按设计图实现邀请码弹窗样式
9. 测评-答题页
- 9.1 创建 pages/assessment/questions/index.vue
  - 设计图: docs/设计图/测评-题目.png、测评-提交题目检验空题.png、测评-提交题目检验空题(1).png、测评-提交题目检验空题(2).png
  - 按设计图实现导航栏样式
  - 按设计图实现题目卡片样式
  - 按设计图实现选项样式（每题10个选项，单选）
  - 按设计图实现底部提交按钮
  - 按设计图实现未答题弹窗样式
  - 调用 GET /api/assessment/getQuestionList 获取题目
  - 调用 POST /api/assessment/submitAnswers 提交答案
10. 测评-生成中页
- 10.1 创建 pages/assessment/loading/index.vue
  - 设计图: docs/设计图/测评-等待测评.png、docs/设计图/测评-测评等待.png
  - 按设计图实现加载动画样式
  - 按设计图实现提示文字样式
  - 轮询调用 GET /api/assessment/getResultStatus（3秒间隔）
  - 生成完成自动跳转结果页
11. 测评-结果页
- 11.1 创建 pages/assessment/result/index.vue
  - 设计图: 暂无，参考需求文档第五章第4节
  - 自定义导航栏，顶部"保存到本地"按钮
  - 基本信息展示
  - 八大智能分析展示
  - 个人特质分析展示
  - 40项细分能力展示
  - 其他分析模块展示
  - 调用 GET /api/assessment/getResult 获取报告数据
12. Checkpoint - 测评流程验证
- 确保完整测评流程可走通
- 确保各页面与设计图一致
- 信息填写 → 答题 → 生成中 → 结果

第三阶段：P1 重要页面（2-3天）

13. 个人资料页
- 13.1 创建 pages/mine/profile/index.vue
  - 设计图: docs/设计图/个人资料.png
  - 按设计图实现页面布局
  - 头像展示和修改（选择图片、上传）
  - 昵称展示和修改
  - UID 展示（不可修改）
  - 调用 GET /api/user/getProfile、POST /api/user/updateProfile、POST /api/user/updateAvatar
14. 业务详情页
- 14.1 创建 pages/business/detail/index.vue
  - 设计图: docs/设计图/业务详情页.png
  - 按设计图实现背景长图展示
  - 按设计图实现底部"点击参与"按钮样式
  - 调用 GET /api/business/getDetail
15. 我的订单页
- 15.1 创建 pages/order/list/index.vue
  - 设计图: docs/设计图/我的订单.png、我的订单(1).png、我的订单-空状态.png
  - 按设计图实现订单卡片样式
  - 订单信息：日期、编号、项目、金额、状态
  - 按设计图实现状态操作按钮样式
  - 按设计图实现空状态样式
  - 调用 GET /api/order/getList
  - 下拉刷新、上拉加载
16. 往期测评页
- 16.1 创建 pages/assessment/history/index.vue
  - 设计图: docs/设计图/往期测评-空状态.png
  - 按设计图实现测评记录卡片样式
  - 按设计图实现空状态样式
  - 调用 GET /api/assessment/getHistoryList
  - 下拉刷新、上拉加载
17. Checkpoint - P1 页面验证
- 确保各页面与设计图一致
- 确保个人资料修改正常
- 确保订单列表和操作正常

第四阶段：P2/P3 扩展页面（2-3天）

18. 规划师选择页
- 18.1 创建 pages/planner/list/index.vue
  - 设计图: docs/设计图/学业规划.png
  - 按设计图实现规划师卡片样式
  - 展示：照片、姓名、介绍、价格
  - 调用 GET /api/planner/getList
19. 规划预约页
- 19.1 创建 pages/planner/book/index.vue
  - 设计图: docs/设计图/学业规划2.png、学业规划3.png、学业规划4.png
  - 按设计图实现日期时间选择样式
  - 按设计图实现表单样式
  - 根据年级动态显示成绩字段
  - 按设计图实现预约成功弹窗样式
  - 调用 POST /api/order/create、POST /api/order/pay
20. 邀请新用户页
- 20.1 创建 pages/invite/index.vue
  - 设计图: docs/设计图/邀请新用户.png、邀请新用户-二维码.png、邀请新用户-提现金额.png、邀请新用户-提现记录.png、邀请新用户-提现记录(1).png
  - 权限检查（仅合伙人可见）
  - 按设计图实现邀请规则说明弹窗
  - 按设计图实现邀请二维码弹窗
  - 按设计图实现已提现/待提现金额展示
  - 按设计图实现申请提现弹窗
  - 按设计图实现提现记录弹窗
  - 按设计图实现邀请记录列表
  - 调用分销相关接口
21. 关于页
- 21.1 创建 pages/about/index.vue
  - 设计图: docs/设计图/关于.png
  - 按设计图实现 Logo 展示
  - 按设计图实现版本号展示
  - 调用 GET /api/system/getAbout
22. 用户协议页
- 22.1 创建 pages/agreement/user/index.vue
  - 设计图: docs/设计图/用户／隐私协议.png
  - 按设计图实现协议内容展示样式
  - 调用 GET /api/system/getAgreement
23. 隐私政策页
- 23.1 创建 pages/agreement/privacy/index.vue
  - 设计图: docs/设计图/用户／隐私协议.png
  - 按设计图实现政策内容展示样式
  - 调用 GET /api/system/getPrivacy
24. Final Checkpoint - 全部页面验证
- 确保所有 18 个页面与设计图一致
- 确保所有交互流程正常
- 确保登录态在各页面正确处理
- 真机测试各功能

开发注意事项

1. 设计图还原

必须严格按照设计图样式开发
优先参考 Figma 在线设计图：https://www.figma.com/design/88edYGASUcyID6afiwILdf/项目?node-id=432-1991
从 Figma 获取精确的颜色值、字体大小、间距、圆角等样式
本地设计图 docs/设计图/ 作为离线参考
切图资源在 docs/切图/ 目录

2. 登录态处理

需要登录的页面在 onLoad 时检查登录态
未登录跳转登录页，登录成功后返回

3. 页面跳转

TabBar 页面使用 uni.switchTab
普通页面使用 uni.navigateTo
返回使用 uni.navigateBack

4. 数据加载

使用 Loading 组件显示加载状态
使用 Empty 组件显示空状态
列表页支持下拉刷新和上拉加载

5. 表单验证

必填项验证
格式验证（手机号等）
验证失败显示提示

6. 错误处理

API 请求失败显示错误提示
网络异常友好提示

进度跟踪

阶段	任务	状态	完成日期
第一阶段	基础框架	✅ 已完成	2026-02-10
第二阶段	P0 核心页面	✅ 已完成	2026-02-10
第三阶段	P1 重要页面	✅ 已完成	2026-02-10
第四阶段	P2/P3 扩展页面	✅ 已完成	2026-02-10

状态说明：⬜ 待开发 | 🔄 开发中 | ✅ 已完成

11 KiB Raw Blame History Unescape Escape

小程序页面开发任务清单

概述

任务列表

第一阶段：基础框架（1-2天）

第二阶段：P0 核心页面（3-5天）

第三阶段：P1 重要页面（2-3天）

第四阶段：P2/P3 扩展页面（2-3天）

开发注意事项

1. 设计图还原

2. 登录态处理

3. 页面跳转

4. 数据加载

5. 表单验证

6. 错误处理

进度跟踪

11 KiB

Raw Blame History