- 实现未登录/已登录两种状态样式 - 添加常用功能入口:我的订单、往期测评、联系我们、邀请新用户 - 添加其他功能入口:关于、用户协议、隐私政策、退出登录 - 实现退出登录二次确认弹窗 - 修复 uni.scss 中 SCSS 导入路径问题 - 整理 .gitignore 文件,移除 unpackage 构建目录
4.7 KiB
4.7 KiB
小程序页面开发需求
概述
基于 UniApp + Vue 3 开发微信小程序前端,共 18 个页面,API 接口已全部完成。 所有页面必须严格按照设计图样式开发。
技术栈
- UniApp 3.x + Vue 3 (Composition API)
- Pinia 状态管理
- SCSS 样式
- JavaScript(非 TypeScript)
设计资源
- Figma 设计图(主要参考):https://www.figma.com/design/88edYGASUcyID6afiwILdf/项目?node-id=432-1991
- 本地设计图目录:
docs/设计图/ - 本地切图资源:
docs/切图/
注意:开发时优先参考 Figma 在线设计图,可获取精确的颜色值、字体大小、间距等样式信息。本地设计图作为离线备份参考。
页面清单与设计图对照
P0 核心页面(8个)
| 序号 | 页面 | 路由 | 设计图 |
|---|---|---|---|
| 1 | 首页 | /pages/index/index | 首页.png |
| 2 | 团队页 | /pages/team/index | 团队.png |
| 3 | 我的页 | /pages/mine/index | 我的-未登录.png、我的-登录页.png、我的-退出登录.png |
| 4 | 登录页 | /pages/login/index | 登录页.png、登录页(1).png |
| 5 | 测评-信息填写 | /pages/assessment/info/index | 测评-个人信息填写.png、测评-个人信息填写2.png、测评-个人信息填写3.png、测评-个人信息填写4.png |
| 6 | 测评-答题页 | /pages/assessment/questions/index | 测评-题目.png、测评-提交题目检验空题.png、测评-提交题目检验空题(1).png、测评-提交题目检验空题(2).png |
| 7 | 测评-生成中 | /pages/assessment/loading/index | 测评-等待测评.png、测评-测评等待.png |
| 8 | 测评-结果页 | /pages/assessment/result/index | 暂无设计图(根据需求文档实现) |
P1 重要页面(4个)
| 序号 | 页面 | 路由 | 设计图 |
|---|---|---|---|
| 9 | 个人资料 | /pages/mine/profile/index | 个人资料.png |
| 10 | 业务详情 | /pages/business/detail/index | 业务详情页.png |
| 11 | 我的订单 | /pages/order/list/index | 我的订单.png、我的订单(1).png、我的订单-空状态.png |
| 12 | 往期测评 | /pages/assessment/history/index | 往期测评-空状态.png |
P2 扩展页面(3个)
| 序号 | 页面 | 路由 | 设计图 |
|---|---|---|---|
| 13 | 规划师选择 | /pages/planner/list/index | 学业规划.png |
| 14 | 规划预约 | /pages/planner/book/index | 学业规划2.png、学业规划3.png、学业规划4.png |
| 15 | 邀请新用户 | /pages/invite/index | 邀请新用户.png、邀请新用户-二维码.png、邀请新用户-提现金额.png、邀请新用户-提现记录.png、邀请新用户-提现记录(1).png |
P3 辅助页面(3个)
| 序号 | 页面 | 路由 | 设计图 |
|---|---|---|---|
| 16 | 关于页 | /pages/about/index | 关于.png |
| 17 | 用户协议 | /pages/agreement/user/index | 用户/隐私协议.png |
| 18 | 隐私政策 | /pages/agreement/privacy/index | 用户/隐私协议.png |
API 接口(已完成)
首页模块
- GET /api/home/getBannerList - Banner列表
- GET /api/home/getAssessmentList - 测评入口列表
- GET /api/home/getPromotionList - 宣传图列表
用户模块
- POST /api/login - 微信登录
- GET /api/user/getProfile - 获取用户信息
- POST /api/user/updateProfile - 更新用户信息
- POST /api/user/updateAvatar - 更新头像
测评模块
- GET /api/assessment/getIntro - 测评介绍
- GET /api/assessment/getQuestionList - 题目列表
- POST /api/assessment/submitAnswers - 提交答案
- GET /api/assessment/getResultStatus - 报告状态
- GET /api/assessment/getResult - 测评结果
- POST /api/assessment/verifyInviteCode - 验证邀请码
- GET /api/assessment/getHistoryList - 往期测评
订单模块
- GET /api/order/getList - 订单列表
- GET /api/order/getDetail - 订单详情
- POST /api/order/create - 创建订单
- POST /api/order/pay - 发起支付
- GET /api/order/getPayResult - 支付结果
其他模块
- GET /api/business/getDetail - 业务详情
- GET /api/planner/getList - 规划师列表
- GET /api/team/getInfo - 团队介绍
- GET /api/invite/getInfo - 邀请信息
- GET /api/invite/getQrcode - 邀请二维码
- GET /api/invite/getRecordList - 邀请记录
- GET /api/invite/getCommission - 佣金信息
- POST /api/invite/applyWithdraw - 申请提现
- GET /api/invite/getWithdrawList - 提现记录
- GET /api/system/getAgreement - 用户协议
- GET /api/system/getPrivacy - 隐私政策
- GET /api/system/getAbout - 关于我们
设计资源
- 设计图目录:docs/设计图/
- 切图资源:docs/切图/
开发规范
参考:.kiro/steering/development-standards.md