页面名：customer-service-records（客户服务记录）
PRD 参考：P9 docs/prd/specs/P9-miniapp-fe-details.md
已实现：否
页面说明
展示某客户的服务记录列表，支持月份前后切换。
状态变量
| 变量名 |
类型 |
初始值 |
说明 |
| records |
array |
[] |
服务记录列表 |
| currentMonth |
number |
当前月 |
当前显示月份 |
| loading |
boolean |
true |
数据加载中 |
| error |
boolean |
false |
加载失败 |
用户操作 → 响应
| 操作 |
触发条件 |
响应行为 |
目标状态 |
| 页面加载 |
进入页面 |
GET /api/customers/:id/service-records |
loading→false |
| 点击"←"（上月） |
currentMonth > 最小月 |
切换到上一月，更新月份标签 |
currentMonth-- |
| 点击"→"（下月） |
currentMonth < 最大月 |
切换到下一月，更新月份标签 |
currentMonth++ |
| 点击返回 |
顶部导航栏 |
navigateBack |
— |
| 点击"重试" |
error=true |
重新请求数据 |
loading=true |
月份切换器（忠于原型 HTML）
- 样式：← 2026年X月 →
- 到达边界时对应箭头按钮变灰禁用（opacity 0.3）
- 由
customer-service-records.js 的 switchMonth(direction) 控制
记录展示
页面状态枚举
| 状态名 |
视觉表现 |
触发条件 |
| 加载中 |
区域文案"加载中..." |
loading=true |
| 正常态 |
服务记录列表 |
有数据 |
| 空数据态 |
"暂无数据" |
records 为空 |
| 错误态 |
"加载失败，请点击重试" + 重试按钮 |
error=true |
后端 API 依赖
| API |
方法 |
说明 |
GET /api/customers/:id/service-records |
GET |
客户服务记录（支持月份参数） |
页面导航
- 来源：customer-detail / task-detail
- 去向：无（末端页面）
全局组件
- 自定义顶部导航栏（返回按钮 + "服务记录"）
- AI 悬浮按钮
