4.3 KiB
4.3 KiB
页面名：board-coach（助教看板）
PRD 参考：P8
docs/prd/specs/P8-miniapp-fe-boards.md；apps/miniprogram/doc/prd.md第九节 9.3 已实现：否
页面说明
按排序×技能×时间三重筛选查看助教排名列表。不同排序维度下卡片结构和突出数据不同。
状态变量
| 变量名 | 类型 | 初始值 | 说明 |
|---|---|---|---|
| selectedSort | string | "定档业绩最高" | 排序筛选 |
| selectedSkill | string | "不限" | 技能筛选 |
| selectedTime | string | "本月" | 时间筛选 |
| sortDropdownVisible | boolean | false | 排序筛选下拉展开 |
| skillDropdownVisible | boolean | false | 技能筛选下拉展开 |
| timeDropdownVisible | boolean | false | 时间筛选下拉展开 |
| coaches | array | [] | 助教列表 |
| loading | boolean | true | 数据加载中 |
| error | boolean | false | 加载失败 |
用户操作 → 响应
| 操作 | 触发条件 | 响应行为 | 目标状态 |
|---|---|---|---|
| 页面加载 | 进入页面 | GET /api/board/coaches | loading→false |
| 点击排序筛选 | 无 | 展开排序下拉，关闭其他 | sortDropdownVisible=true |
| 选择排序 | 下拉展开 | 切换对应 dim-container 显隐，重新请求数据 | selectedSort 更新 |
| 点击技能筛选 | 无 | 展开技能下拉，关闭其他 | skillDropdownVisible=true |
| 选择技能 | 下拉展开 | 重新请求数据 | selectedSkill 更新 |
| 点击时间筛选 | 无 | 展开时间下拉，关闭其他 | timeDropdownVisible=true |
| 选择时间 | 下拉展开 | 重新请求数据 | selectedTime 更新 |
| 点击助教卡片 | 无 | navigateTo coach-detail | — |
| 切换看板 Tab | 顶部 Tab 栏 | navigateTo board-finance / board-customer | — |
| 滚动页面 | 持续 | 下滑隐藏筛选栏，上滑显示 | — |
| 点击"重试" | error=true | 重新请求数据 | loading=true |
筛选器选项（忠于原型 HTML）
排序筛选（6 个）
- 定档业绩最高
- 定档业绩最低
- 工资最高
- 工资最低
- 客源储值最高
- 任务完成最多
技能筛选
不限 / 🎱 / 斯 / 🀄 / 🎤
时间筛选
本月 / 本季度 / 上月 / 前3个月（不含本月）/ 上季度 / 最近6个月（不含本月，不支持客源储值最高）
排序切换 → 卡片结构映射（忠于原型 HTML）
切换排序时，通过 selectSort(value) 函数切换对应的 dim-container 显隐。每种排序的卡片右侧突出数据不同：
| 排序 | container id | 卡片右侧突出数据 |
|---|---|---|
| 定档业绩最高/最低 | dim-perf |
定档 Xh + 折前 Xh + 距升档 Xh（或 ✅ 已达标） |
| 工资最高/最低 | dim-salary |
预估标签 + ¥金额（大字）+ 定档/折前 |
| 客源储值最高 | dim-sv |
储值 ¥金额（大字）+ 客户 X人 + 消耗 ¥X |
高客源储值定义（PRD 补充）：RS > 2 的客户的会员卡储值合计（RS = 关系强度指数，> 2 表示有一定服务关系的客户） | 任务完成最多 |
dim-task| 召回 X（蓝色大字）+ 回访 X |
所有卡片共有元素
- 助教头像圆形 + 姓名
- 等级标签（星级/高级/中级/初级）— 不同等级不同颜色
- 技能标签（🎱/斯/🀄/🎤）
- 底部 TOP3 客户 emoji 列表
等级标签颜色
| 等级 | 颜色 |
|---|---|
| 星级 | 金色/amber |
| 高级 | 蓝色/primary |
| 中级 | 绿色/success |
| 初级 | 灰色/gray |
筛选栏滚动行为
- 下滑时筛选栏隐藏，上滑时重新显示
- 由
initFilterBarScrollBehavior()实现
页面状态枚举
| 状态名 | 视觉表现 | 触发条件 |
|---|---|---|
| 加载中 | 区域文案"加载中..." | loading=true |
| 正常态 | 助教列表 | 有数据 |
| 空数据态 | "暂无数据" | coaches 为空 |
| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
后端 API 依赖
| API | 方法 | 说明 |
|---|---|---|
GET /api/board/coaches |
GET | 助教看板（排序×技能×时间三重筛选） |
页面导航
- 来源：board-finance / board-customer（看板 Tab 切换）
- 去向：coach-detail / chat
全局组件
- 底部 TabBar（看板 active）
- AI 悬浮按钮（右下角）
- 看板顶部 Tab 栏（财务 / 客户 / 助教 active）