在前后端开发联调前 的提交20260223
This commit is contained in:
@@ -7,6 +7,7 @@
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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/coach-detail.css" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
@@ -25,20 +26,6 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; padding-bottom: 20px; }
|
||||
.st { position: relative; padding-left: 12px; }
|
||||
.st::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; }
|
||||
.st.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.st.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.st.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.st.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
.st.purple::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
|
||||
.st.teal::before { background: linear-gradient(180deg, #0d9488, #5eead4); }
|
||||
.pv { font-variant-numeric: tabular-nums; }
|
||||
.progress-sm { height: 6px; border-radius: 3px; background: #e7e7e7; overflow: hidden; }
|
||||
.progress-sm .fill { height: 100%; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- Banner -->
|
||||
@@ -64,7 +51,6 @@
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded">🎯 斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工龄 + 客户数 放右侧 -->
|
||||
<div class="flex-shrink-0 text-right space-y-1.5">
|
||||
<div class="text-white/70 text-xs">工龄 <span class="text-white font-bold text-base">3年</span></div>
|
||||
<div class="text-white/70 text-xs">客户 <span class="text-white font-bold text-base">68人</span></div>
|
||||
@@ -81,27 +67,26 @@
|
||||
<h2 class="st blue text-base font-semibold text-gray-13 mb-4">绩效概览</h2>
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-3 border border-blue-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月定档业绩</p>
|
||||
<p class="text-xs text-gray-6 mb-1">本月定档业绩</p>
|
||||
<p class="text-2xl font-bold text-primary pv">87.5<span class="text-xs font-normal text-gray-6">h</span></p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">折算前 89.0h</p>
|
||||
<p class="text-xs text-gray-5 mt-0.5">折算前 89.0h</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-3 border border-green-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月工资（预估）</p>
|
||||
<p class="text-xs text-gray-6 mb-1">本月工资（预估）</p>
|
||||
<p class="text-2xl font-bold text-success pv">¥6,950</p>
|
||||
<p class="text-[10px] text-warning mt-0.5">含预估部分</p>
|
||||
<p class="text-xs text-warning mt-0.5">含预估部分</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-3 border border-orange-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">客源储值余额</p>
|
||||
<p class="text-xs text-gray-6 mb-1">客源储值余额</p>
|
||||
<p class="text-2xl font-bold text-warning pv">¥86,200</p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">68位客户合计</p>
|
||||
<p class="text-xs text-gray-5 mt-0.5">68位客户合计</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-xl p-3 border border-purple-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月任务完成</p>
|
||||
<p class="text-xs text-gray-6 mb-1">本月任务完成</p>
|
||||
<p class="text-2xl font-bold text-purple-600 pv">38<span class="text-xs font-normal text-gray-6">个</span></p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">覆盖 22 位客户</p>
|
||||
<p class="text-xs text-gray-5 mt-0.5">覆盖 22 位客户</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 档位进度 -->
|
||||
<div class="bg-gray-50 rounded-xl p-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs text-gray-9 font-medium">绩效档位进度</span>
|
||||
@@ -119,34 +104,29 @@
|
||||
|
||||
<!-- 收入明细 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st green text-base font-semibold text-gray-13 mb-4">收入明细</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st green text-base font-semibold text-gray-13">收入明细</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<span id="incomeTab_this" class="income-tab active" onclick="switchIncomeTab('this')">本月<span class="text-[10px] text-warning ml-0.5">预估</span></span>
|
||||
<span id="incomeTab_last" class="income-tab" onclick="switchIncomeTab('last')">上月</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 本月 -->
|
||||
<div id="incomeThisMonth" class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||
<span class="text-base text-gray-9">基础课时费</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-primary"></span><span class="text-base text-gray-9">基础课时费</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥3,500</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||
<span class="text-base text-gray-9">激励课时费</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-success"></span><span class="text-base text-gray-9">激励课时费</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,800</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||
<span class="text-base text-gray-9">充值提成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-warning"></span><span class="text-base text-gray-9">充值提成</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,200</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
|
||||
<span class="text-base text-gray-9">酒水提成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-purple-500"></span><span class="text-base text-gray-9">酒水提成</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥450</span>
|
||||
</div>
|
||||
<div class="border-t border-gray-100 pt-2 flex items-center justify-between">
|
||||
@@ -154,215 +134,189 @@
|
||||
<span class="text-base font-bold text-success pv">¥6,950</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 上月 -->
|
||||
<div id="incomeLastMonth" class="space-y-3 hidden">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-primary"></span><span class="text-base text-gray-9">基础课时费</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥3,800</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-success"></span><span class="text-base text-gray-9">激励课时费</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,900</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-warning"></span><span class="text-base text-gray-9">充值提成</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,100</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-purple-500"></span><span class="text-base text-gray-9">酒水提成</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥400</span>
|
||||
</div>
|
||||
<div class="border-t border-gray-100 pt-2 flex items-center justify-between">
|
||||
<span class="text-base font-semibold text-gray-9">合计</span>
|
||||
<span class="text-base font-bold text-success pv">¥7,200</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务执行 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st orange text-base font-semibold text-gray-13 mb-4">任务执行</h2>
|
||||
<!-- 当前任务概况 -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="bg-red-50 rounded-xl p-3 text-center border border-red-100/50">
|
||||
<p class="text-2xl font-bold text-error pv">3</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">置顶任务</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-xl p-3 text-center border border-blue-100/50">
|
||||
<p class="text-2xl font-bold text-primary pv">9</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">普通待办</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl p-3 text-center border border-gray-200">
|
||||
<p class="text-2xl font-bold text-gray-5 pv">2</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">已放弃</p>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st orange text-base font-semibold text-gray-13">任务执行</h2>
|
||||
<div class="flex items-center gap-3 text-sm text-gray-7">
|
||||
<span class="font-bold text-gray-10">完成</span>
|
||||
<span class="text-primary font-bold">召回<span class="text-base">24</span>个</span>
|
||||
<span class="text-success font-bold">回访<span class="text-base">14</span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 置顶任务 -->
|
||||
<p class="text-xs font-semibold text-error mb-2 flex items-center gap-1">📌 置顶任务</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">回访王先生 — 续卡意向</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月10日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-error/10 text-error rounded font-medium">紧急</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">李女士充值跟进</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月12日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-error/10 text-error rounded font-medium">紧急</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">陈女士激活 — 30天未到店</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月15日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-warning/10 text-warning rounded font-medium">重要</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 普通任务 -->
|
||||
<p class="text-xs font-semibold text-primary mb-2 flex items-center gap-1">📋 普通任务</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">关怀张先生</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月18日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">进行中</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">赵总生日关怀</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月20日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">待开始</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">周女士课程推荐</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月22日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">待开始</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已放弃任务 -->
|
||||
<p class="text-xs font-semibold text-gray-5 mb-2 flex items-center gap-1">🚫 已放弃</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-60">
|
||||
<span class="text-xs">⚪</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-7 line-through">吴先生续卡</span>
|
||||
<span class="text-xs text-gray-5 ml-2">放弃于 2月3日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-5 rounded">客户拒绝</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-60">
|
||||
<span class="text-xs">⚪</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-7 line-through">郑女士团建推荐</span>
|
||||
<span class="text-xs text-gray-5 ml-2">放弃于 1月28日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-5 rounded">超时未响应</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已完成简报 -->
|
||||
<p class="text-xs font-semibold text-success mb-2 flex items-center gap-1">✅ 已完成 <span class="text-primary font-bold">38</span> 个</p>
|
||||
<!-- 前6项任务 -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<span class="text-xs">✅</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">回访王先生</span>
|
||||
<span class="text-xs text-gray-6 ml-2">2月7日</span>
|
||||
</div>
|
||||
<span class="text-xs text-success font-medium">已完成</span>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="task-tag-text high-priority flex-shrink-0">高优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">王先生</span>
|
||||
<button onclick="showNotesPopup('王先生', [{pinned:true,text:'重点客户，每周必须联系',date:'2026-02-06'},{text:'上次来说最近出差多',date:'2026-02-01'}])" class="flex items-center gap-0.5 text-gray-8 flex-shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="text-xs font-medium">2</span></button>
|
||||
<span class="text-sm flex-shrink-0">📌</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<span class="text-xs">✅</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">充值跟进李女士</span>
|
||||
<span class="text-xs text-gray-6 ml-2">2月6日</span>
|
||||
</div>
|
||||
<span class="text-xs text-success font-medium">已完成</span>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="task-tag-text high-priority flex-shrink-0">高优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">李女士</span>
|
||||
<span class="text-sm flex-shrink-0">📌</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="task-tag-text high-priority flex-shrink-0">高优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">陈女士</span>
|
||||
<button onclick="showNotesPopup('陈女士', [{text:'喜欢斯诺克，周末常来',date:'2026-01-28'}])" class="flex items-center gap-0.5 text-gray-8 flex-shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="text-xs font-medium">1</span></button>
|
||||
<span class="text-sm flex-shrink-0">📌</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-orange-50/40 rounded-lg border border-orange-100/40">
|
||||
<span class="task-tag-text priority flex-shrink-0">优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">张先生</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-pink-50/40 rounded-lg border border-pink-100/40">
|
||||
<span class="task-tag-text relationship flex-shrink-0">关系构建</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">赵总</span>
|
||||
<button onclick="showNotesPopup('赵总', [{pinned:true,text:'大客户，注意维护关系',date:'2026-02-03'},{text:'上次带了3个朋友来',date:'2026-01-25'},{text:'喜欢VIP包厢',date:'2026-01-15'}])" class="flex items-center gap-0.5 text-gray-8 flex-shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="text-xs font-medium">3</span></button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-teal-50/40 rounded-lg border border-teal-100/40">
|
||||
<span class="task-tag-text callback flex-shrink-0">客户回访</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">周女士</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 隐藏的更多任务 -->
|
||||
<div id="hiddenTasks" class="space-y-2 mt-2 hidden">
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-orange-50/40 rounded-lg border border-orange-100/40">
|
||||
<span class="task-tag-text priority flex-shrink-0">优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">刘先生</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-teal-50/40 rounded-lg border border-teal-100/40">
|
||||
<span class="task-tag-text callback flex-shrink-0">客户回访</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">孙先生</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-pink-50/40 rounded-lg border border-pink-100/40">
|
||||
<span class="task-tag-text relationship flex-shrink-0">关系构建</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">吴女士</span>
|
||||
</div>
|
||||
<!-- 已放弃 -->
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-55">
|
||||
<span class="text-sm text-gray-5 line-through flex-1 min-w-0 truncate">吴先生</span>
|
||||
<span class="text-[10px] text-gray-5">客户拒绝</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-55">
|
||||
<span class="text-sm text-gray-5 line-through flex-1 min-w-0 truncate">郑女士</span>
|
||||
<span class="text-[10px] text-gray-5">超时未响应</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button class="text-sm text-primary font-medium">查看全部任务 →</button>
|
||||
<button id="toggleTasksBtn" onclick="toggleAllTasks()" class="text-sm text-primary font-medium">展开全部 ↓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户关系 TOP5 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st pink text-base font-semibold text-gray-13 mb-4">客户关系 TOP5</h2>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st pink text-base font-semibold text-gray-13">客户关系 TOP5</h2>
|
||||
<span class="text-xs text-gray-6">近60天</span>
|
||||
</div>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户1 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gradient-to-r from-pink-50/80 to-rose-50/40 rounded-xl border border-pink-100/40">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">王先生</span>
|
||||
<span class="text-sm font-semibold text-gray-13">王先生</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-success font-medium pv">0.95</span>
|
||||
<span class="text-sm text-success font-bold pv">9.5</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 25次</span>
|
||||
<span>储值 ¥8,600</span>
|
||||
<span>消费 ¥12,800</span>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">25</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥8,600</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥12,800</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户2 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gradient-to-r from-amber-50/80 to-yellow-50/40 rounded-xl border border-amber-100/40">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">李</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">李女士</span>
|
||||
<span class="text-sm font-semibold text-gray-13">李女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-success font-medium pv">0.92</span>
|
||||
<span class="text-sm text-success font-bold pv">9.2</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 22次</span>
|
||||
<span>储值 ¥6,200</span>
|
||||
<span>消费 ¥9,500</span>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">22</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥6,200</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥9,500</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户3 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">陈女士</span>
|
||||
<span class="text-sm font-semibold text-gray-13">陈女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-warning font-medium pv">0.85</span>
|
||||
<span class="text-sm text-warning font-bold pv">8.5</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 18次</span>
|
||||
<span>储值 ¥5,000</span>
|
||||
<span>消费 ¥7,200</span>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">18</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥5,000</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥7,200</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户4 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">张先生</span>
|
||||
<span class="text-sm font-semibold text-gray-13">张先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-[10px] text-warning font-medium pv">0.78</span>
|
||||
<span class="text-sm text-warning font-bold pv">7.8</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 12次</span>
|
||||
<span>储值 ¥3,800</span>
|
||||
<span>消费 ¥5,600</span>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">12</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥3,800</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥5,600</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户5 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">赵</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">赵先生</span>
|
||||
<span class="text-sm font-semibold text-gray-13">赵先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-[10px] text-gray-7 font-medium pv">0.68</span>
|
||||
<span class="text-sm text-gray-7 font-bold pv">6.8</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 8次</span>
|
||||
<span>储值 ¥2,000</span>
|
||||
<span>消费 ¥3,200</span>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">8</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥2,000</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥3,200</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -372,78 +326,77 @@
|
||||
<h2 class="st purple text-base font-semibold text-gray-13 mb-4">近期服务明细</h2>
|
||||
<div class="space-y-3">
|
||||
<!-- 服务记录1 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">王先生</span>
|
||||
<span class="text-sm font-medium text-gray-13">王先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-[10px] rounded">基础课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-07 21:30</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">A12号台</span>
|
||||
<span>2.5h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥200</span>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录2 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">李女士</span>
|
||||
<span class="text-sm font-medium text-gray-13">李女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded">激励课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-07 19:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">VIP1号房</span>
|
||||
<span>1.5h</span>
|
||||
<span class="text-orange-500">定档绩效：2h</span>
|
||||
<span>斯诺克</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥150</span>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥150</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录3 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">陈女士</span>
|
||||
<span class="text-sm font-medium text-gray-13">陈女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-[10px] rounded">基础课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-06 20:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">2号台</span>
|
||||
<span>2h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥160</span>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥160</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录4 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">张先生</span>
|
||||
<span class="text-sm font-medium text-gray-13">张先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded">激励课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-05 14:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">5号台</span>
|
||||
<span>1h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥80</span>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥80</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看更多 -->
|
||||
<div class="mt-3 text-center">
|
||||
<button class="text-xs text-primary font-medium">查看更多服务记录 →</button>
|
||||
<button onclick="window.location.href='performance-records.html'" class="text-xs text-primary font-medium">查看更多服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -454,7 +407,6 @@
|
||||
<span class="text-base text-gray-7">入职日期</span>
|
||||
<span class="text-base text-gray-13">2023-03-15</span>
|
||||
</div>
|
||||
<!-- 月度数据表格 -->
|
||||
<div class="overflow-x-auto -mx-1">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
@@ -502,5 +454,74 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4 z-10">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
<!-- 备注列表弹窗 -->
|
||||
<div id="notesPopup" class="fixed inset-0 bg-black/50 z-50 hidden items-end" onclick="if(event.target===this)hideNotesPopup()">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8 max-h-[70vh] overflow-y-auto">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span id="notesPopupTitle" class="text-base font-semibold text-gray-13">备注列表</span>
|
||||
<button onclick="hideNotesPopup()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="notesPopupList" class="space-y-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNotesPopup(name, notes) {
|
||||
document.getElementById('notesPopupTitle').textContent = name + ' 的备注';
|
||||
var list = document.getElementById('notesPopupList');
|
||||
list.innerHTML = '';
|
||||
notes.forEach(function(n) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'p-3.5 bg-gray-50 rounded-xl border border-gray-100';
|
||||
div.innerHTML = '<div class="flex items-center gap-2 mb-1.5">' +
|
||||
(n.pinned ? '<span>📌</span>' : '') +
|
||||
'<span class="text-xs text-gray-6">' + n.date + '</span></div>' +
|
||||
'<p class="text-sm text-gray-9 leading-relaxed">' + n.text + '</p>';
|
||||
list.appendChild(div);
|
||||
});
|
||||
var popup = document.getElementById('notesPopup');
|
||||
popup.classList.remove('hidden');
|
||||
popup.classList.add('flex');
|
||||
}
|
||||
function hideNotesPopup() {
|
||||
var popup = document.getElementById('notesPopup');
|
||||
popup.classList.add('hidden');
|
||||
popup.classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="../js/coach-detail.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user