Neo-ZQYY/docs/h5_ui/interactions/coach-detail.md

页面名：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 悬浮按钮