4387b15de0
- 实现未登录/已登录两种状态样式 - 添加常用功能入口：我的订单、往期测评、联系我们、邀请新用户 - 添加其他功能入口：关于、用户协议、隐私政策、退出登录 - 实现退出登录二次确认弹窗 - 修复 uni.scss 中 SCSS 导入路径问题 - 整理 .gitignore 文件，移除 unpackage 构建目录
9.2 KiB
9.2 KiB
小程序页面开发设计
1. 项目结构
uniapp/
├── api/ # API 接口（已有）
│ ├── request.js # 请求封装
│ ├── auth.js # 认证接口
│ ├── user.js # 用户接口
│ ├── home.js # 首页接口（新增）
│ ├── assessment.js # 测评接口（新增）
│ ├── order.js # 订单接口（新增）
│ ├── planner.js # 规划师接口（新增）
│ ├── invite.js # 分销接口（新增）
│ ├── system.js # 系统接口（新增）
│ └── index.js # 统一导出
├── components/ # 公共组件
│ ├── Navbar/ # 自定义导航栏（新增）
│ ├── Loading/ # 加载状态（已有）
│ ├── Empty/ # 空状态（已有）
│ ├── Popup/ # 弹窗（已有）
│ └── index.js
├── composables/ # 组合式函数（新增）
│ ├── useAuth.js # 认证相关
│ ├── usePayment.js # 支付相关
│ └── useNavbar.js # 导航栏相关
├── config/ # 配置（已有）
│ └── index.js
├── pages/ # 页面
│ ├── index/ # 首页（改造）
│ ├── team/ # 团队页（新增）
│ ├── mine/ # 我的页（改造）
│ │ └── profile/ # 个人资料（新增）
│ ├── login/ # 登录页（改造）
│ ├── assessment/ # 测评模块（新增）
│ │ ├── info/ # 信息填写
│ │ ├── questions/ # 答题页
│ │ ├── loading/ # 生成中
│ │ ├── result/ # 结果页
│ │ └── history/ # 往期测评
│ ├── order/ # 订单模块（新增）
│ │ └── list/ # 订单列表
│ ├── business/ # 业务详情（新增）
│ │ └── detail/
│ ├── planner/ # 规划师模块（新增）
│ │ ├── list/ # 规划师列表
│ │ └── book/ # 预约页
│ ├── invite/ # 邀请分销（新增）
│ ├── about/ # 关于页（新增）
│ └── agreement/ # 协议页面（新增）
│ ├── user/ # 用户协议
│ └── privacy/ # 隐私政策
├── store/ # 状态管理（已有）
│ ├── user.js # 用户状态
│ ├── app.js # 应用状态（新增）
│ └── index.js
├── static/ # 静态资源
│ ├── images/ # 图片（新增）
│ └── tabbar/ # TabBar图标（已有）
├── styles/ # 全局样式（新增）
│ ├── variables.scss # 变量
│ └── common.scss # 通用样式
├── utils/ # 工具函数（已有）
│ ├── storage.js
│ ├── format.js
│ └── validate.js # 验证工具（新增）
├── App.vue
├── main.js
├── pages.json # 页面配置（更新）
└── manifest.json
2. 页面配置 (pages.json)
{
"pages": [
{ "path": "pages/index/index" },
{ "path": "pages/team/index" },
{ "path": "pages/mine/index" },
{ "path": "pages/login/index" },
{ "path": "pages/mine/profile/index" },
{ "path": "pages/assessment/info/index" },
{ "path": "pages/assessment/questions/index" },
{ "path": "pages/assessment/loading/index" },
{ "path": "pages/assessment/result/index" },
{ "path": "pages/assessment/history/index" },
{ "path": "pages/order/list/index" },
{ "path": "pages/business/detail/index" },
{ "path": "pages/planner/list/index" },
{ "path": "pages/planner/book/index" },
{ "path": "pages/invite/index" },
{ "path": "pages/about/index" },
{ "path": "pages/agreement/user/index" },
{ "path": "pages/agreement/privacy/index" }
],
"tabBar": {
"list": [
{ "pagePath": "pages/index/index", "text": "首页" },
{ "pagePath": "pages/team/index", "text": "团队" },
{ "pagePath": "pages/mine/index", "text": "我的" }
]
}
}
3. 状态管理设计
3.1 用户状态 (store/user.js)
// 状态
{
token: '',
userInfo: {
userId: 0,
uid: '',
nickname: '',
avatar: '',
phone: '',
userLevel: 1 // 1普通 2合伙人 3渠道合伙人
},
isLoggedIn: false
}
// 方法
- login(data) // 登录
- logout() // 登出
- updateProfile(data) // 更新信息
- restoreFromStorage() // 恢复登录态
3.2 应用状态 (store/app.js)
// 状态
{
statusBarHeight: 20,
navbarHeight: 44,
systemInfo: {}
}
// 方法
- initSystemInfo() // 初始化系统信息
4. 组合式函数设计
4.1 useAuth.js
// 功能
- checkLogin() // 检查登录状态，未登录跳转登录页
- requireLogin() // 需要登录的操作装饰器
4.2 usePayment.js
// 功能
- createOrder(params) // 创建订单
- pay(orderId) // 发起支付
- checkPayResult(orderId) // 查询支付结果
4.3 useNavbar.js
// 功能
- statusBarHeight // 状态栏高度
- navbarHeight // 导航栏总高度
- contentPadding // 内容区域顶部padding
5. 公共组件设计
5.1 Navbar 自定义导航栏
<Navbar
title="页面标题"
:showBack="true"
:transparent="false"
@back="handleBack"
/>
5.2 已有组件复用
- Loading：页面加载、加载更多
- Empty：空状态展示
- Popup：弹窗确认
6. API 模块设计
6.1 新增 API 文件
// api/home.js
export function getBannerList() { ... }
export function getAssessmentList() { ... }
export function getPromotionList() { ... }
// api/assessment.js
export function getIntro(typeId) { ... }
export function getQuestionList(typeId) { ... }
export function submitAnswers(data) { ... }
export function getResultStatus(recordId) { ... }
export function getResult(recordId) { ... }
export function verifyInviteCode(code) { ... }
export function getHistoryList(params) { ... }
// api/order.js
export function getOrderList(params) { ... }
export function getOrderDetail(orderId) { ... }
export function createOrder(data) { ... }
export function pay(orderId) { ... }
export function getPayResult(orderId) { ... }
// api/planner.js
export function getPlannerList() { ... }
// api/invite.js
export function getInviteInfo() { ... }
export function getQrcode() { ... }
export function getRecordList(params) { ... }
export function getCommission() { ... }
export function applyWithdraw(amount) { ... }
export function getWithdrawList(params) { ... }
// api/system.js
export function getAgreement() { ... }
export function getPrivacy() { ... }
export function getAbout() { ... }
7. 页面交互流程
7.1 测评主流程
首页 → 点击测评入口
↓
测评信息填写页
├── 填写基本信息
├── 点击"支付测评" → 创建订单 → 微信支付 → 支付成功
└── 点击"邀请码测评" → 验证邀请码 → 验证成功
↓
测评答题页
├── 展示80道题目
├── 点击提交 → 检测未答题
└── 全部已答 → 提交答案
↓
测评生成中页
├── 轮询查询状态
└── 生成完成 → 自动跳转
↓
测评结果页
├── 展示报告内容
└── 保存PDF（调用后端生成）
7.2 登录流程
点击需要登录的功能
↓
跳转登录页
↓
用户点击登录按钮
├── wx.login() 获取 code
├── wx.getPhoneNumber() 获取手机号
└── 调用后端登录接口
↓
登录成功 → 保存token → 返回原页面
7.3 支付流程
创建订单 → 获取订单ID
↓
调用支付接口 → 获取微信支付参数
↓
wx.requestPayment() → 拉起微信支付
↓
支付回调 → 查询支付结果 → 跳转下一步
8. 样式规范
8.1 颜色变量
// styles/variables.scss
$primary-color: #4A90E2; // 主色
$success-color: #52C41A; // 成功
$warning-color: #FAAD14; // 警告
$error-color: #FF4D4F; // 错误
$text-color: #333333; // 主文字
$text-secondary: #666666; // 次要文字
$text-placeholder: #999999; // 占位文字
$border-color: #E8E8E8; // 边框
$bg-color: #F5F5F5; // 背景
$bg-white: #FFFFFF; // 白色背景
8.2 间距规范
$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 48rpx;
8.3 字体规范
$font-size-xs: 22rpx;
$font-size-sm: 24rpx;
$font-size-md: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;