666 lines
34 KiB
HTML
666 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>任务列表 - 球房运营助手</title>
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<link href="../css/banner.css" rel="stylesheet">
|
||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
padding-bottom: 70px;
|
||
}
|
||
/* 任务卡片边框颜色 */
|
||
.task-card {
|
||
position: relative;
|
||
border-left: 4px solid transparent;
|
||
}
|
||
.task-card.high-priority {
|
||
border-left-color: #f43f5e;
|
||
}
|
||
.task-card.priority {
|
||
border-left-color: #f97316;
|
||
}
|
||
.task-card.relationship {
|
||
border-left-color: #ec4899;
|
||
}
|
||
.task-card.callback {
|
||
border-left-color: #14b8a6;
|
||
}
|
||
/* 标签颜色 - 圆角矩形 */
|
||
.tag-high-priority {
|
||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||
border-radius: 4px;
|
||
}
|
||
.tag-priority {
|
||
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
|
||
border-radius: 4px;
|
||
}
|
||
.tag-relationship {
|
||
background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
|
||
border-radius: 4px;
|
||
}
|
||
.tag-callback {
|
||
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
|
||
border-radius: 4px;
|
||
}
|
||
/* 进度条动画 */
|
||
.progress-bar {
|
||
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
|
||
transition: width 0.6s ease-out;
|
||
}
|
||
/* 6段档位进度条 */
|
||
.tier-progress {
|
||
display: flex;
|
||
gap: 2px;
|
||
height: 8px;
|
||
}
|
||
.tier-segment {
|
||
border-radius: 2px;
|
||
background: rgba(255,255,255,0.25);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.tier-segment.completed {
|
||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||
}
|
||
.tier-segment.current {
|
||
background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 100%);
|
||
overflow: hidden;
|
||
}
|
||
.tier-segment.current .tier-fill {
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||
border-radius: 2px;
|
||
}
|
||
/* 红戳样式 - 透明印章风格 */
|
||
.red-stamp {
|
||
position: relative;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.stamp-badge {
|
||
position: absolute;
|
||
top: -2px;
|
||
right: -28px;
|
||
transform: rotate(-12deg) scale(0);
|
||
width: 52px;
|
||
height: 52px;
|
||
border: 3px solid rgb(239, 68, 68);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
box-shadow:
|
||
inset 0 0 0 2px rgba(255, 255, 255, 0.95),
|
||
inset 0 0 10px 2px rgba(255, 255, 255, 0.7),
|
||
inset 0 0 20px 4px rgba(255, 255, 255, 0.4);
|
||
}
|
||
/* 盖戳动画 */
|
||
@keyframes stampDown {
|
||
0% {
|
||
transform: rotate(-12deg) scale(3);
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: rotate(-12deg) scale(0.9);
|
||
opacity: 0.9;
|
||
}
|
||
70% {
|
||
transform: rotate(-12deg) scale(1.05);
|
||
opacity: 0.85;
|
||
}
|
||
100% {
|
||
transform: rotate(-12deg) scale(1);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
.stamp-badge.stamp-animate {
|
||
animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||
}
|
||
.stamp-badge .thumb {
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
}
|
||
.stamp-badge .stamp-text {
|
||
font-size: 11px;
|
||
color: rgb(220, 38, 38);
|
||
font-weight: bold;
|
||
margin-top: 1px;
|
||
text-shadow:
|
||
0 0 2px rgba(255,255,255,1),
|
||
0 0 4px rgba(255,255,255,0.9),
|
||
1px 1px 0 rgba(255,255,255,0.9),
|
||
-1px -1px 0 rgba(255,255,255,0.9),
|
||
1px -1px 0 rgba(255,255,255,0.9),
|
||
-1px 1px 0 rgba(255,255,255,0.9);
|
||
}
|
||
/* 进度条按比例宽度：0-100(45.45%), 100-130(13.64%), 130-160(13.64%), 160-190(13.64%), 190-220(13.64%) */
|
||
.tier-segment-0 { flex: 100; }
|
||
.tier-segment-1 { flex: 30; }
|
||
.tier-segment-2 { flex: 30; }
|
||
.tier-segment-3 { flex: 30; }
|
||
.tier-segment-4 { flex: 30; }
|
||
/* 下降趋势样式 */
|
||
.trend-down {
|
||
color: rgba(255,255,255,0.5);
|
||
font-size: 12px;
|
||
}
|
||
/* 业绩卡片文字样式 */
|
||
.stat-value {
|
||
color: #ffffff;
|
||
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
|
||
}
|
||
.stat-highlight {
|
||
color: #6ee7b7;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
.stat-label {
|
||
color: rgba(255,255,255,0.9);
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||
}
|
||
.stat-secondary {
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
.stat-accent {
|
||
color: #fcd34d;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
/* 奖金金额突出样式 */
|
||
.bonus-amount {
|
||
text-shadow:
|
||
0 2px 4px rgba(0, 0, 0, 0.35),
|
||
0 0 12px rgba(251, 191, 36, 0.5);
|
||
}
|
||
/* === 任务分区 === */
|
||
.section-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
padding: 3px 10px;
|
||
border-radius: 4px;
|
||
}
|
||
/* 置顶卡片微亮边框 */
|
||
.task-card.pinned {
|
||
box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.08);
|
||
}
|
||
/* 放弃任务 */
|
||
.task-card.abandoned {
|
||
border-left-color: #d1d5db !important;
|
||
opacity: 0.55;
|
||
}
|
||
.task-card.abandoned .task-name {
|
||
color: #9ca3af;
|
||
}
|
||
.task-card.abandoned .task-desc {
|
||
color: #c5c5c5;
|
||
}
|
||
.task-card.abandoned .task-tag-wrap > span:first-child {
|
||
background: #d1d5db !important;
|
||
}
|
||
/* 备注指示器 */
|
||
.note-indicator {
|
||
font-size: 12px;
|
||
margin-left: 2px;
|
||
}
|
||
/* === 长按上下文菜单 === */
|
||
.context-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
z-index: 100;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.context-overlay.active {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
.context-menu {
|
||
position: fixed;
|
||
z-index: 101;
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||
min-width: 192px;
|
||
padding: 6px 0;
|
||
opacity: 0;
|
||
transform: scale(0.88);
|
||
pointer-events: none;
|
||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||
transform-origin: top left;
|
||
}
|
||
.context-menu.active {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
pointer-events: all;
|
||
}
|
||
.ctx-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 13px 18px;
|
||
font-size: 14px;
|
||
color: #393939;
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
user-select: none;
|
||
}
|
||
.ctx-item:active {
|
||
background: #f3f3f3;
|
||
}
|
||
.ctx-item + .ctx-item {
|
||
border-top: 1px solid #f3f3f3;
|
||
}
|
||
/* === 备注 / 放弃弹窗 === */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 200;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding-top: 18vh;
|
||
padding-bottom: 40vh;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.modal-overlay.active {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
.modal-card {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
width: 88%;
|
||
max-width: 360px;
|
||
padding: 24px 20px 20px;
|
||
transform: translateY(24px);
|
||
transition: transform 0.25s ease;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.modal-overlay.active .modal-card {
|
||
transform: translateY(0);
|
||
}
|
||
.modal-card textarea {
|
||
width: 100%;
|
||
border: 1.5px solid #e7e7e7;
|
||
border-radius: 10px;
|
||
padding: 12px 14px;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
resize: none;
|
||
outline: none;
|
||
font-family: inherit;
|
||
color: #2c2c2c;
|
||
transition: border-color 0.2s;
|
||
box-sizing: border-box;
|
||
}
|
||
.modal-card textarea:focus {
|
||
border-color: #0052d9;
|
||
}
|
||
.modal-card textarea.error-border {
|
||
border-color: #e34d59;
|
||
}
|
||
.modal-error {
|
||
color: #e34d59;
|
||
font-size: 12px;
|
||
margin-top: 6px;
|
||
display: none;
|
||
}
|
||
.modal-error.show {
|
||
display: block;
|
||
}
|
||
.modal-submit-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
margin-top: 14px;
|
||
transition: background 0.2s, opacity 0.2s;
|
||
font-family: inherit;
|
||
}
|
||
.modal-submit-btn.primary {
|
||
background: #0052d9;
|
||
color: #fff;
|
||
}
|
||
.modal-submit-btn.primary:active {
|
||
background: #003eb3;
|
||
}
|
||
.modal-submit-btn.danger {
|
||
background: #e34d59;
|
||
color: #fff;
|
||
}
|
||
.modal-submit-btn.danger:active {
|
||
background: #c9363f;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-1 min-h-screen">
|
||
<!-- 顶部区域 - 用户信息和业绩卡片 -->
|
||
<div class="banner-bg theme-blue texture-aurora text-white pb-4">
|
||
<!-- 用户信息 -->
|
||
<div class="px-5 pt-10 pb-3">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<span class="text-xl font-semibold">小燕</span>
|
||
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||
</div>
|
||
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 业绩进度卡片 -->
|
||
<div class="mx-4">
|
||
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-3 border border-white/20">
|
||
<!-- 第一层：标题行 -->
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="flex items-baseline gap-2">
|
||
<span class="stat-label text-sm font-medium">距离100小时仅剩</span>
|
||
<span class="stat-accent text-xl font-bold">12.5小时</span>
|
||
</div>
|
||
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
|
||
查看详情
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 第二层：5段档位进度条 + 边界小时数（按比例宽度） -->
|
||
<div class="relative mb-6">
|
||
<div class="tier-progress">
|
||
<div class="tier-segment tier-segment-0 completed" title="0档 <100h"></div>
|
||
<div class="tier-segment tier-segment-1 current" title="1档 100-130h">
|
||
<div class="tier-fill" style="width: 58%"></div>
|
||
</div>
|
||
<div class="tier-segment tier-segment-2" title="2档 130-160h"></div>
|
||
<div class="tier-segment tier-segment-3" title="3档 160-190h"></div>
|
||
<div class="tier-segment tier-segment-4" title="4档 190-220h"></div>
|
||
</div>
|
||
<!-- 档位边界小时数（按比例定位：0, 100/220≈45.45%, 130/220≈59.09%, 160/220≈72.73%, 190/220≈86.36%, 220/220=100%） -->
|
||
<div class="absolute w-full top-full mt-1.5 flex text-[9px]" style="left: 0;">
|
||
<span class="text-white/60" style="position:absolute; left:0; transform:translateX(0);">0</span>
|
||
<span class="text-white/60" style="position:absolute; left:45.45%; transform:translateX(-50%);">100</span>
|
||
<span class="text-white/80 font-medium" style="position:absolute; left:59.09%; transform:translateX(-50%);">130</span>
|
||
<span class="text-white/60" style="position:absolute; left:72.73%; transform:translateX(-50%);">160</span>
|
||
<span class="text-white/60" style="position:absolute; left:86.36%; transform:translateX(-50%);">190</span>
|
||
<span class="text-white/60" style="position:absolute; right:0; transform:translateX(0);">220</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三层：核心数据 - 两列布局（左宽右窄） -->
|
||
<div class="flex items-stretch mb-2.5">
|
||
<!-- 左侧：课时数据 + 红戳（占60%） -->
|
||
<div class="pr-4 border-r border-white/25 flex justify-center items-center" style="flex: 3;">
|
||
<!-- 自动宽度容器：包含课时数据和红戳，居中显示 -->
|
||
<div class="red-stamp inline-block relative" style="padding-right: 35px;">
|
||
<div class="text-center">
|
||
<div class="flex items-baseline justify-center gap-1.5">
|
||
<span class="stat-highlight text-xl font-bold">77.5</span>
|
||
<span class="stat-secondary text-sm">|</span>
|
||
<span class="stat-accent text-xl font-bold">12</span>
|
||
<span class="stat-secondary text-sm">|</span>
|
||
<span class="stat-value text-xl font-bold">87.5</span>
|
||
</div>
|
||
<p class="stat-label text-xs mt-1.5">基础课 | 激励课 | 全部</p>
|
||
</div>
|
||
<!-- 红戳徽章 -->
|
||
<div class="stamp-badge" style="right: -5px; top: 5px;">
|
||
<span class="thumb">👍</span>
|
||
<span class="stamp-text">已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧：奖金激励（占40%） -->
|
||
<div class="pl-3 text-center flex flex-col justify-center" style="flex: 2;">
|
||
<div class="bonus-amount">
|
||
<span class="text-3xl font-bold text-amber-300">800</span>
|
||
<span class="text-base text-amber-300/80">元</span>
|
||
</div>
|
||
<p class="stat-label text-xs mt-1.5">达100h即得</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四层：预计收入 -->
|
||
<div class="flex items-center justify-between pt-2 border-t border-white/25">
|
||
<span class="stat-label text-xs">2月预计收入 | 比1月同期</span>
|
||
<a href="performance.html" class="flex items-center gap-1.5 group">
|
||
<span class="stat-value text-lg font-bold">¥6,206</span>
|
||
<span class="trend-down">↓368</span>
|
||
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 待办任务列表 -->
|
||
<div class="px-4 py-5">
|
||
<!-- 标题 -->
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-base font-semibold text-gray-13">今日 客户维护</h2>
|
||
<span class="text-sm text-gray-6">共 7 项</span>
|
||
</div>
|
||
|
||
<!-- 📌 置顶区域 -->
|
||
<div class="mb-5">
|
||
<div class="flex items-center gap-1.5 mb-2.5">
|
||
<span class="section-label text-amber-700 bg-amber-50">📌 置顶</span>
|
||
<span class="text-sm text-gray-6">2项</span>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<!-- 置顶: 王先生 -->
|
||
<div class="task-card high-priority pinned block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="1" data-task-name="王先生" data-task-type="high-priority">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">王先生</span>
|
||
<span class="text-sm">💖</span>
|
||
<span class="note-indicator" title="有备注">📝</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：15天前 · 余额：非常多</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 置顶: 李女士 -->
|
||
<div class="task-card high-priority pinned block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="2" data-task-name="李女士" data-task-type="high-priority">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">李女士</span>
|
||
<span class="text-sm">🧡</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：20天前 · 余额：非常多</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>VIP客户，储值余额较多</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一般任务区域 -->
|
||
<div class="mb-5">
|
||
<div class="flex items-center gap-1.5 mb-2.5">
|
||
<span class="section-label text-gray-9 bg-gray-2">一般任务</span>
|
||
<span class="text-sm text-gray-6">3项</span>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<!-- 张先生 -->
|
||
<div class="task-card priority block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="3" data-task-name="张先生" data-task-type="priority">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">张先生</span>
|
||
<span class="text-sm">💛</span>
|
||
<span class="note-indicator" title="有备注">📝</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：10天前 · 余额：一般</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>消费频率下降，需关注</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 刘先生 -->
|
||
<div class="task-card priority block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="4" data-task-name="刘先生" data-task-type="priority">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">刘先生</span>
|
||
<span class="text-sm">💙</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：8天前 · 余额：一般</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>偏好晚间时段，可推荐夜场套餐</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 陈先生 -->
|
||
<div class="task-card relationship block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="5" data-task-name="陈先生" data-task-type="relationship">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-relationship px-2 py-0.5 text-white text-xs font-medium">关系构建</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">陈先生</span>
|
||
<span class="text-sm">💙</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：5天前 · 余额：无</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>潜力客户，建议加强互动</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ❌ 放弃的任务区域 -->
|
||
<div class="mb-2">
|
||
<div class="flex items-center gap-1.5 mb-2.5">
|
||
<span class="section-label text-gray-6 bg-gray-2">已放弃</span>
|
||
<span class="text-sm text-gray-6">2项</span>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<!-- 放弃: 赵女士 -->
|
||
<div class="task-card callback abandoned block bg-white rounded-xl p-4 shadow-sm" data-task-id="6" data-task-name="赵女士" data-task-type="callback">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">赵女士</span>
|
||
<span class="text-sm">🧡</span>
|
||
<span class="note-indicator" title="有备注">📝</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：3天前 · 余额：非常多</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc">放弃原因：客户已转会至其他球房</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 放弃: 周先生 -->
|
||
<div class="task-card callback abandoned block bg-white rounded-xl p-4 shadow-sm" data-task-id="7" data-task-name="周先生" data-task-type="callback">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||
<span class="text-base font-semibold text-gray-13 task-name">周先生</span>
|
||
<span class="text-sm">💛</span>
|
||
<span class="note-indicator" title="有备注">📝</span>
|
||
</div>
|
||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：5天前 · 余额：一般</p>
|
||
<p class="text-sm text-gray-6 leading-relaxed task-desc">放弃原因：联系方式失效，无法触达</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 长按上下文菜单 -->
|
||
<div class="context-overlay" id="contextOverlay"></div>
|
||
<div class="context-menu" id="contextMenu">
|
||
<div class="ctx-item" data-action="pin">
|
||
<span>📌</span><span>置顶任务</span>
|
||
</div>
|
||
<div class="ctx-item" data-action="abandon">
|
||
<span>❌</span><span>放弃任务</span>
|
||
</div>
|
||
<div class="ctx-item" data-action="ai">
|
||
<span>🤖</span><span>问问AI助手</span>
|
||
</div>
|
||
<div class="ctx-item" data-action="remark">
|
||
<span>📝</span><span>备注</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备注 / 放弃 弹窗（可复用组件） -->
|
||
<div class="modal-overlay" id="remarkModal">
|
||
<div class="modal-card">
|
||
<h3 class="text-base font-semibold text-gray-13 mb-1" id="modalTitle">添加备注</h3>
|
||
<p class="text-xs text-gray-6 mb-3" id="modalSubtitle">为该客户的维护任务添加备注</p>
|
||
<textarea id="remarkInput" rows="4" placeholder="请输入备注内容..."></textarea>
|
||
<div class="modal-error" id="remarkError">请填写放弃原因，不能为空</div>
|
||
<button class="modal-submit-btn primary" id="modalSubmitBtn">保存备注</button>
|
||
<button class="mt-2 w-full text-center text-sm text-gray-6 py-2 bg-transparent border-0 cursor-pointer" id="modalCancelBtn">取消</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 标识配色 -->
|
||
|
||
|
||
<!-- 悬浮助手按钮 -->
|
||
|
||
|
||
<!-- 通用底部导航 -->
|
||
|
||
|
||
<!-- 盖戳动画 -->
|
||
|
||
|
||
<!-- 长按菜单 + 备注弹窗 交互 -->
|
||
|
||
</body>
|