149 lines
8.8 KiB
Markdown
149 lines
8.8 KiB
Markdown
# 页面名：task-detail 系列（任务详情）
|
||
|
||
> PRD 参考：P6 `docs/prd/specs/P6-miniapp-fe-tasks.md`；`apps/miniprogram/doc/prd.md` 第八节 8.2
|
||
> 已实现：否
|
||
|
||
## 页面说明
|
||
展示客户详细信息、消费习惯、AI 分析（关系分析+任务建议+话术参考+备注评分）、维客线索、备注入口。底部固定操作栏。
|
||
|
||
task-detail 系列共 4 个页面，卡片内容相同（以 task-detail.html 为准），差异仅在：头部 Banner 主题/配色、区域排列顺序、话术样式、部分文案。
|
||
|
||
## Banner 主题映射表
|
||
| 页面 | Banner class | 主题色 | 任务类型 |
|
||
|------|-------------|--------|----------|
|
||
| task-detail.html | `banner-bg theme-red texture-aurora` | 红色 | 高优先召回 |
|
||
| task-detail-priority.html | （同 task-detail，橙色变体） | 橙色 | 优先召回 |
|
||
| task-detail-relationship.html | `banner-bg theme-pink texture-aurora` | 粉色 | 关系构建 |
|
||
| task-detail-callback.html | `banner-bg theme-teal texture-aurora` | 青绿色 | 客户回访 |
|
||
|
||
> ⚠️ Banner 背景使用 CSS 渐变+SVG 纹理（`banner.css` 中的 `texture-aurora`），内含复杂的 SVG 丝带效果。小程序实现时建议将各主题 Banner 背景导出为图片资源，统一放 `/assets/images/banner-{theme}.png`。
|
||
|
||
## 页面区域顺序差异
|
||
| 区域 | task-detail（高优先/优先） | task-detail-relationship（关系构建） | task-detail-callback（客户回访） |
|
||
|------|--------------------------|--------------------------------------|----------------------------------|
|
||
| 1 | 与我的关系 | 维客线索 | 维客线索 |
|
||
| 2 | 任务建议 | 与我的关系（含近期服务记录） | 与我的关系（含近期服务记录） |
|
||
| 3 | 维客线索 | 任务建议 | 任务建议 |
|
||
| 4 | 我给TA的备注 | 我给TA的备注 | 我给TA的备注 |
|
||
| 5 | 近期服务记录 | （嵌入区域2） | （嵌入区域2） |
|
||
|
||
## 话术样式差异
|
||
| 页面 | 话术样式 | 说明 |
|
||
|------|----------|------|
|
||
| task-detail（高优先/优先） | 气泡样式 `.speech-bubble` | 浅蓝背景+边框+圆角+右下角尖角，每条带「复制」按钮 |
|
||
| task-detail-relationship | 竖线样式 `border-l-2` | 左侧 2px 竖线 + 左内边距 |
|
||
| task-detail-callback | 竖线样式 `border-l-2` | 同上 |
|
||
|
||
## 任务建议标题差异
|
||
| 页面 | 标题 | 背景色 |
|
||
|------|------|--------|
|
||
| task-detail | 💡 建议执行 | 蓝色系 |
|
||
| task-detail-relationship | 💝 关系构建重点 | pink→rose |
|
||
| task-detail-callback | 📞 常规回访要点 | teal→cyan |
|
||
|
||
## 状态变量
|
||
| 变量名 | 类型 | 初始值 | 说明 |
|
||
|--------|------|--------|------|
|
||
| taskDetail | object | null | 任务详情数据 |
|
||
| customerInfo | object | null | 客户基本信息 |
|
||
| serviceRecords | array | [] | 近期服务记录 |
|
||
| aiAnalysis | object | null | AI 分析（应用 4：关系分析+任务建议+一句话总结） |
|
||
| retentionClues | array | [] | 维客线索（应用 8 整合线索+人工） |
|
||
| customerAnalysis | object | null | 客户分析（应用 7：运营策略+总结） |
|
||
| talkingPoints | object | null | 话术参考（应用 5 缓存） |
|
||
| noteScore | number | null | 备注分析评分（应用 6：1-10 分） |
|
||
| noteModalVisible | boolean | false | 备注弹窗显示状态 |
|
||
| noteText | string | "" | 备注输入内容 |
|
||
| noteRating | object | {serviceWill: 0, returnChance: 0} | 星星评分（再次服务意愿+再来店可能性，各 1-5 星） |
|
||
| ratingExpanded | boolean | false | 评分区域是否展开（回访任务默认 true） |
|
||
| abandonModalVisible | boolean | false | 放弃客户弹窗显示状态（仅高优先/优先召回有） |
|
||
| abandonReason | string | "" | 放弃原因 |
|
||
| loading | boolean | true | 数据加载中 |
|
||
| error | boolean | false | 加载失败 |
|
||
|
||
## 用户操作 → 响应
|
||
| 操作 | 触发条件 | 响应行为 | 目标状态 |
|
||
|------|----------|----------|----------|
|
||
| 页面加载 | 进入页面 | GET /api/xcx/tasks/{id} | loading→false |
|
||
| 点击"问问助手" | 底部操作栏 | navigateTo chat（带任务+客户上下文引用） | — |
|
||
| 点击"备注" | 底部操作栏 | 打开备注弹窗 | noteModalVisible=true |
|
||
| 点击"展开评价" | noteModalVisible=true, ratingExpanded=false | 展开星星评分区域，隐藏展开按钮 | ratingExpanded=true |
|
||
| 拖动/点击星星 | 评分区域展开 | 更新对应评分值（支持触摸拖动+鼠标拖动+点击） | noteRating 更新 |
|
||
| 备注弹窗-提交 | noteText 非空 | POST /api/xcx/notes（含评分） | Toast "备注已保存"，弹窗关闭 |
|
||
| 点击"复制"（话术气泡） | 气泡样式页面 | 复制话术文本到剪贴板，按钮变"已复制" | — |
|
||
| 点击"放弃" | 顶部导航栏右侧（仅高优先/优先） | 打开放弃确认弹窗 | abandonModalVisible=true |
|
||
| 放弃弹窗-确认 | abandonReason 非空 | POST /api/xcx/tasks/{id}/abandon | Toast "已放弃该客户的维护" |
|
||
| 点击返回 | 顶部导航栏 | navigateBack / history.back() | — |
|
||
| 点击"重试" | error=true | 重新请求数据 | loading=true |
|
||
|
||
## "与我的关系"区域
|
||
- 标题带 section-title pink 样式
|
||
- AI 机器人图标（可爱机器人 SVG：圆角矩形身体+天线+紫蓝色大眼睛+微笑+粉色腮红+小耳朵）
|
||
- 此图标可视为心形 ICON 的扩展，小程序中用 `/assets/icons/icon-ai-relationship.svg`
|
||
- 关系等级色系：💖 非常好(>8.5 粉色渐变) / 🧡 良好(>7) / 💛 一般(>5) / 💙 待发展(<5 蓝色渐变)
|
||
- 备注评分：星级展示（score ÷ 2 = 星数，支持半星，由 `ai-icons.js` 渲染）
|
||
|
||
## AI 应用编号映射（PRD 补充）
|
||
| 应用编号 | 功能 | cache_type | 展示位置 |
|
||
|----------|------|------------|----------|
|
||
| 应用 4 | 关系分析 + 任务建议 + 一句话总结（summary） | `app4_analysis` | 与我的关系 / 任务建议 / 卡片底部 AI 文字 |
|
||
| 应用 5 | 话术参考（5 条话术） | — | 话术区域 |
|
||
| 应用 6 | 备注评分（1-10 分，6 分为标准分） | `app6_note_analysis` | 备注弹窗提交后 |
|
||
| 应用 7 | 客户分析（运营策略 + 总结） | `app7_customer_analysis` | 客户分析区域 |
|
||
| 应用 8 | 维客线索整合（`member_retention_clue` 表） | — | 维客线索区域 |
|
||
|
||
## AI 区域展示规则
|
||
- 维客线索（应用 8）：Emoji 作为二级标签，提供者逗号分隔展示
|
||
- source=ai_consumption → "By:系统"
|
||
- source=ai_note → "By:备注"
|
||
- 客户分析（应用 7）：运营策略数组 + 总结文本
|
||
- 关系分析+任务建议+一句话总结（应用 4）
|
||
- 话术参考（应用 5）：5 条话术，气泡/竖线样式展示
|
||
- 备注评分（应用 6）：1-10 分，6 分为标准分
|
||
|
||
## 备注弹窗规则
|
||
- 底部弹出式弹窗（`.modal-overlay` + `.modal-card`）
|
||
- 包含：多行文本输入 + 星星评分（再次服务意愿 + 再来店可能性）
|
||
- 回访任务（task-detail-callback）：评分区域默认展开
|
||
- 其他任务类型：评分区域默认隐藏，通过"展开评价"按钮手动打开
|
||
- 星星打分交互：支持点击、触摸拖动、鼠标拖动（由 `task-detail-notes.js` 实现）
|
||
|
||
### 备注评分与回访完成判定（PRD 补充）
|
||
- 提交备注后，后端调用应用 6 进行评分（1-10 分，6 分为标准分）
|
||
- 评分细则：综合备注文本质量、服务意愿星级、再来店可能性星级
|
||
- 回访任务完成条件：备注评分 ≥ 5 → 任务标记完成；< 5 → 不算完成
|
||
- 只计第一个备注的评分（后续备注不影响完成判定）
|
||
- 回访任务有效期 2 天：超过 2 天未完成则标签跳变（回到任务列表重新分配）
|
||
|
||
## 放弃客户弹窗（仅高优先/优先召回）
|
||
- 遮罩层 + 居中弹窗
|
||
- 包含：多行文本输入（放弃原因）+ 提交按钮（红色 `.danger`）
|
||
- 空值校验：原因为空时显示错误提示
|
||
- 关系构建和客户回访页面无"放弃"按钮
|
||
|
||
## 底部操作栏
|
||
- 「问问助手」按钮：渐变背景（颜色随主题变化），聊天气泡图标
|
||
- 「备注」按钮：灰色背景，编辑笔图标
|
||
|
||
## 页面状态枚举
|
||
| 状态名 | 视觉表现 | 触发条件 |
|
||
|--------|----------|----------|
|
||
| 加载中 | 区域文案"加载中..." | loading=true |
|
||
| 正常态 | 完整详情展示 | 有数据 |
|
||
| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
|
||
|
||
## 后端 API 依赖
|
||
| API | 方法 | 说明 |
|
||
|-----|------|------|
|
||
| `GET /api/xcx/tasks/{id}` | GET | 获取任务详情（含客户信息+AI 分析） |
|
||
| `POST /api/xcx/notes` | POST | 创建备注（含评分，触发回访完成判定） |
|
||
| `POST /api/xcx/tasks/{id}/abandon` | POST | 放弃任务（仅高优先/优先） |
|
||
|
||
## 页面导航
|
||
- 来源：task-list（点击任务卡片，按 task-type 跳转对应页面）
|
||
- 去向：chat（问问助手）
|
||
|
||
## 全局组件
|
||
- 自定义顶部导航栏（返回按钮 + "任务详情"，高优先/优先召回右侧有"放弃"按钮）
|
||
- AI 悬浮按钮
|