135 lines
6.4 KiB
Markdown
135 lines
6.4 KiB
Markdown
# 页面名：task-list（任务列表 + 业绩概览）
|
||
|
||
> PRD 参考：P6 `docs/prd/specs/P6-miniapp-fe-tasks.md`；`apps/miniprogram/doc/prd.md` 第八节 8.1
|
||
> 已实现：否
|
||
|
||
## 页面说明
|
||
小程序默认首页（Tab 1）。顶部 Banner 展示用户信息和业绩概览，下方为按优先级分组排序的任务列表。支持长按弹出操作菜单（置顶/放弃/问AI/备注）。
|
||
|
||
## Banner 主题
|
||
`banner-bg theme-blue texture-aurora`（蓝色主题 + 极光丝带纹理）
|
||
|
||
## 状态变量
|
||
| 变量名 | 类型 | 初始值 | 说明 |
|
||
|--------|------|--------|------|
|
||
| tasks | array | [] | 任务列表（按优先级分组） |
|
||
| userInfo | object | null | 用户信息（花名、身份、门店） |
|
||
| performanceData | object | null | 业绩概览（当月业绩、档位、工资预估、跳档激励） |
|
||
| contextMenuVisible | boolean | false | 长按菜单显示状态 |
|
||
| contextMenuPosition | object | {x,y} | 菜单弹出坐标 |
|
||
| contextMenuTarget | element | null | 长按的目标卡片 |
|
||
| remarkModalVisible | boolean | false | 备注/放弃弹窗显示状态 |
|
||
| loading | boolean | true | 数据加载中 |
|
||
| error | boolean | false | 加载失败 |
|
||
|
||
## 用户操作 → 响应
|
||
| 操作 | 触发条件 | 响应行为 | 目标状态 |
|
||
|------|----------|----------|----------|
|
||
| 页面加载 | 进入页面 | GET /api/xcx/tasks + 业绩数据 | loading→false |
|
||
| 点击 Banner 业绩区域 | 无 | navigateTo performance 页面 | — |
|
||
| 点击任务卡片 | 无 | 根据 task-type 跳转对应详情页（见跳转映射表） | — |
|
||
| 长按任务卡片（500ms） | 触摸/鼠标按住 | 在按压坐标处弹出黑底浮层+白色菜单 | contextMenuVisible=true |
|
||
| 菜单-「📌 置顶任务」 | 菜单显示 | POST /api/xcx/tasks/{id}/pin | 列表刷新，菜单关闭 |
|
||
| 菜单-「❌ 放弃任务」 | 菜单显示 | 打开备注/放弃弹窗 | remarkModalVisible=true |
|
||
| 菜单-「🤖 问问AI助手」 | 菜单显示 | navigateTo chat（带任务上下文引用） | 菜单关闭 |
|
||
| 菜单-「📝 备注」 | 菜单显示 | 打开备注弹窗 | remarkModalVisible=true |
|
||
| 弹窗-提交 | 文本非空 | POST 对应接口 | Toast 提示，弹窗关闭 |
|
||
| 点击遮罩层 | contextMenuVisible=true | 关闭菜单 | contextMenuVisible=false |
|
||
| 下拉刷新 | 无 | 重新请求任务列表 | loading=true |
|
||
| 点击"重试" | error=true | 重新请求数据 | loading=true |
|
||
|
||
## 任务卡片跳转映射
|
||
| data-task-type | 跳转目标 |
|
||
|----------------|----------|
|
||
| high-priority | task-detail.html（高优先召回） |
|
||
| priority | task-detail-priority.html（优先召回） |
|
||
| relationship | task-detail-relationship.html（关系构建） |
|
||
| callback | task-detail-callback.html（客户回访） |
|
||
|
||
## 任务优先级定义（PRD 补充）
|
||
| 优先级 | 类型 | 触发条件 | 标签颜色 |
|
||
|--------|------|----------|----------|
|
||
| P0 高优先召回 | high-priority | WBI + NCI > 7 | 红色 |
|
||
| P0 优先召回 | priority | WBI + NCI > 5 | 橙色 |
|
||
| P1 客户回访 | callback | 已完成召回但未备注（或备注评分 < 5） | 蓝色 |
|
||
| P2 关系构建 | relationship | RS < 6 | 粉色 |
|
||
|
||
> 列表内按优先级分组 → 组内按指数分数降序排列
|
||
|
||
## 任务完成条件（PRD 补充）
|
||
| 任务类型 | 完成条件 | 说明 |
|
||
|----------|----------|------|
|
||
| 召回（P0） | 客户出现新的服务订单 | 系统自动判定 |
|
||
| 回访（P1） | 备注评分 ≥ 5（应用 6 评分） | 评分 < 5 不算完成；只计第一个备注；2 天有效期 |
|
||
| 关系构建（P2） | RS 指数提升至 ≥ 6 | 系统自动判定 |
|
||
|
||
## 任务卡片结构（忠于原型 HTML）
|
||
- 外层 `.task-card`：左侧 4px 彩色边框（颜色随任务类型变化）
|
||
- 置顶卡片额外 `.pinned` class（微亮边框阴影）
|
||
- 内部结构：
|
||
- 第一行：任务类型标签（渐变背景圆角矩形）+ 客户昵称 + 关系 emoji + 备注指示器（📝，有备注时显示）
|
||
- 第二行：「最近到店：X天前 · 余额：XXX」
|
||
- 第三行：AI 机器人小图标 + AI 一句话智能建议文字（来源：AI 应用 4 的 `summary` 字段，`cache_type=app4_analysis`）
|
||
- 右侧：向右箭头 chevron
|
||
|
||
## 列表分区结构
|
||
1. 📌 置顶区域（amber 背景标签）：用户手动置顶的任务
|
||
2. 一般任务区域（灰色背景标签）：按优先级分组 → 组内按分数降序
|
||
3. ❌ 已放弃区域（灰色背景标签）：
|
||
- 卡片 `.abandoned`：opacity 0.55，左边框变灰，标签背景变灰，客户名变灰
|
||
- 无右侧箭头
|
||
- 显示放弃原因文字
|
||
|
||
## 长按菜单样式
|
||
- 遮罩层 `.context-overlay`（半透明黑色）
|
||
- 白色菜单 `.context-menu`：min-width 192px，圆角 14px，阴影
|
||
- 4 个菜单项，项间 1px 分隔线：
|
||
- 📌 置顶任务（已置顶时显示「取消置顶」）
|
||
- ❌ 放弃任务
|
||
- 🤖 问问AI助手
|
||
- 📝 备注
|
||
|
||
## 业绩 Banner 展示
|
||
- 用户花名 + 身份
|
||
- 当月业绩进度条
|
||
- 预计收入（标记"预估"）
|
||
- 跳档激励：「到达 XXX 即得 YYY」
|
||
- YYY = max(跳档线差值最小值, 实际差值)
|
||
- 各档差值：Tier0→1: 1200元 / Tier1→2: 750元 / Tier2→3: 540元 / Tier3→4: 420元
|
||
|
||
## 跟/弃 icon 规则（PRD 补充）
|
||
- 跟：助教主动跟进中（绿色标记）
|
||
- 弃：助教已放弃该客户（灰色标记）
|
||
- 无标记：未分配助教或无跟进状态
|
||
|
||
## 爱心 icon 规则
|
||
💖(>8.5) / 🧡(>7) / 💛(>5) / 💙(<5)
|
||
|
||
## 喜好标签
|
||
🎱(中式) / 斯(斯诺克) / 🀅(麻将) / 🎤(团建)
|
||
|
||
## 页面状态枚举
|
||
| 状态名 | 视觉表现 | 触发条件 |
|
||
|--------|----------|----------|
|
||
| 加载中 | 区域文案"加载中..." | loading=true |
|
||
| 正常态 | 任务列表 + 业绩 Banner | 有数据 |
|
||
| 空数据态 | "暂无任务" | tasks 为空 |
|
||
| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
|
||
|
||
## 后端 API 依赖
|
||
| API | 方法 | 说明 |
|
||
|-----|------|------|
|
||
| `GET /api/xcx/tasks` | GET | 获取任务列表 |
|
||
| `POST /api/xcx/tasks/{id}/pin` | POST | 置顶/取消置顶 |
|
||
| `POST /api/xcx/tasks/{id}/abandon` | POST | 放弃任务 |
|
||
| `POST /api/xcx/notes` | POST | 创建备注 |
|
||
| `GET /api/performance/summary` | GET | 业绩概览 |
|
||
|
||
## 页面导航
|
||
- 来源：login（approved）/ TabBar 切换
|
||
- 去向：task-detail* / performance / chat
|
||
|
||
## 全局组件
|
||
- 底部 TabBar（任务 active）— 由 `bottom-nav.js` 自动注入
|
||
- AI 悬浮按钮（右下角，渐变动画背景，可爱机器人 SVG 图标，点击 → chat）
|