101 lines
4.8 KiB
Markdown
101 lines
4.8 KiB
Markdown
# 页面名：coach-detail（助教详情）
|
||
|
||
> PRD 参考：P9 `docs/prd/specs/P9-miniapp-fe-details.md`
|
||
> 已实现：否
|
||
|
||
## 页面说明
|
||
展示助教完整信息：绩效概览、收入明细（本月/上月 Tab）、任务执行（展开/收起）、客户关系 TOP5、近期服务明细、更多信息。支持备注弹窗。
|
||
|
||
## Banner 主题
|
||
`banner-bg theme-coral texture-aurora`（珊瑚粉主题 + 极光丝带纹理）
|
||
|
||
> ⚠️ Banner 背景使用 CSS 渐变+SVG 纹理，小程序实现时建议导出为图片资源 `/assets/images/banner-coral.png`
|
||
|
||
## 页面区域结构（忠于原型 HTML）
|
||
1. Banner（助教信息：花名/等级/技能标签/工龄/客户数）
|
||
- 工龄计算（PRD 补充）：入职时间到当前日期的年数（精确到 0.1 年）
|
||
2. 绩效概览（`st blue`）— 4宫格：本月定档业绩/本月工资预估/客源储值余额/本月任务完成 + 绩效档位进度条
|
||
3. 收入明细（`st green`）— Tab 切换：本月预估 / 上月
|
||
4. 任务执行（`st orange`）— 任务列表 + 展开/收起
|
||
5. 客户关系 TOP5（`st pink`）— 近60天
|
||
6. 近期服务明细（`st purple`）
|
||
7. 更多信息（`st teal`）— 入职日期 + 历史月份表格
|
||
|
||
## 状态变量
|
||
| 变量名 | 类型 | 初始值 | 说明 |
|
||
|--------|------|--------|------|
|
||
| coachInfo | object | null | 助教信息（花名、级别、技能、工龄、客户数） |
|
||
| incomeTab | string | "this" | 收入明细当前 Tab（this=本月/last=上月） |
|
||
| tasksExpanded | boolean | false | 任务列表展开状态 |
|
||
| noteModalVisible | boolean | false | 备注弹窗显示状态 |
|
||
| noteText | string | "" | 备注输入内容 |
|
||
| notesPopupVisible | boolean | false | 备注列表弹窗显示状态 |
|
||
| loading | boolean | true | 数据加载中 |
|
||
| error | boolean | false | 加载失败 |
|
||
|
||
## 用户操作 → 响应
|
||
| 操作 | 触发条件 | 响应行为 | 目标状态 |
|
||
|------|----------|----------|----------|
|
||
| 页面加载 | 进入页面 | GET /api/coaches/:id（含全部区域数据） | loading→false |
|
||
| 切换收入明细 Tab | 点击"本月"/"上月" | 切换对应内容显隐 | incomeTab 更新 |
|
||
| 点击"展开全部 ↓" | tasksExpanded=false | 显示隐藏的任务列表（含已放弃任务） | tasksExpanded=true |
|
||
| 点击"收起 ↑" | tasksExpanded=true | 隐藏多余任务 | tasksExpanded=false |
|
||
| 点击"备注"按钮 | 无 | 打开备注弹窗 | noteModalVisible=true |
|
||
| 备注弹窗-提交 | noteText 非空 | POST /api/xcx/notes | Toast "备注已保存"，弹窗关闭 |
|
||
| 点击客户卡片 | 客户关系 TOP5 区域 | navigateTo customer-detail | — |
|
||
| 点击客户卡片的备注图标 | 无 | 弹出该客户的备注列表弹窗（阻止冒泡，不触发卡片跳转） | notesPopupVisible=true |
|
||
| 点击返回 | 顶部导航栏 | navigateBack / history.back() | — |
|
||
| 点击"重试" | error=true | 重新请求数据 | loading=true |
|
||
|
||
## 收入明细 Tab
|
||
- 本月（`id="incomeTab_this"`）：含「预估」标签，active 状态
|
||
- 上月（`id="incomeTab_last"`）
|
||
- 明细项：基础课时费、激励课时费、充值提成、酒水提成、合计
|
||
- 由 `switchIncomeTab(tab)` 控制切换
|
||
|
||
## 任务执行区域
|
||
- 默认显示前 6 项任务
|
||
- 隐藏区域 `id="hiddenTasks"`：更多任务 + 已放弃任务
|
||
- 已放弃任务样式：opacity 0.55 + 删除线 + 放弃原因文字
|
||
- 展开/收起按钮 `id="toggleTasksBtn"`：文字在「展开全部 ↓」/「收起 ↑」间切换
|
||
- 由 `toggleAllTasks()` 控制
|
||
|
||
## 客户关系 TOP5
|
||
- 标题右侧标注「近60天」
|
||
- 5 个客户卡片，每个含：
|
||
- 头像圆形 + 姓名 + 关系 emoji（❤️/💛）+ 关系分数（彩色）
|
||
- 服务次数 / 储值 / 消费
|
||
- 前 2 名有渐变背景（pink/amber），后 3 名灰色背景
|
||
|
||
## 备注弹窗
|
||
- 底部弹出式弹窗
|
||
- 包含：多行文本输入 + 提交按钮
|
||
- 空值校验：内容为空时 Toast 提示
|
||
- 由 `showNoteModal()` / `hideNoteModal()` / `saveNote()` 控制
|
||
|
||
## 备注列表弹窗
|
||
- 点击客户卡片的备注图标触发
|
||
- 动态渲染该客户的备注列表
|
||
- 由 `showNotesPopup(name, notes)` / `hideNotesPopup()` 控制
|
||
|
||
## 页面状态枚举
|
||
| 状态名 | 视觉表现 | 触发条件 |
|
||
|--------|----------|----------|
|
||
| 加载中 | 区域文案"加载中..." | loading=true |
|
||
| 正常态 | 完整助教详情 | 有数据 |
|
||
| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
|
||
|
||
## 后端 API 依赖
|
||
| API | 方法 | 说明 |
|
||
|-----|------|------|
|
||
| `GET /api/coaches/:id` | GET | 助教详情（含绩效、收入、任务、客户关系） |
|
||
| `POST /api/xcx/notes` | POST | 创建备注 |
|
||
|
||
## 页面导航
|
||
- 来源：board-coach（点击助教卡片）
|
||
- 去向：task-detail*（点击客户卡片）/ chat（通过悬浮按钮）
|
||
|
||
## 全局组件
|
||
- 自定义顶部导航栏（返回按钮 + "助教详情"）
|
||
- AI 悬浮按钮
|