Neo-ZQYY/docs/h5_ui/interactions/task-list.md

页面名：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）