982 lines
53 KiB
HTML
982 lines
53 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>
|
|
<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">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#0052d9',
|
|
'primary-light': '#ecf2fe',
|
|
success: '#00a870',
|
|
warning: '#ed7b2f',
|
|
error: '#e34d59',
|
|
'gray-1': '#f3f3f3',
|
|
'gray-2': '#eeeeee',
|
|
'gray-3': '#e7e7e7',
|
|
'gray-4': '#dcdcdc',
|
|
'gray-5': '#c5c5c5',
|
|
'gray-6': '#a6a6a6',
|
|
'gray-7': '#8b8b8b',
|
|
'gray-8': '#777777',
|
|
'gray-9': '#5e5e5e',
|
|
'gray-10': '#4b4b4b',
|
|
'gray-11': '#393939',
|
|
'gray-12': '#2c2c2c',
|
|
'gray-13': '#242424',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Noto Sans SC', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
padding-bottom: 80px;
|
|
}
|
|
.safe-area-top {
|
|
padding-top: env(safe-area-inset-top, 44px);
|
|
}
|
|
.tab-active {
|
|
color: #0052d9;
|
|
position: relative;
|
|
}
|
|
.tab-active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 24px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
|
border-radius: 2px;
|
|
}
|
|
.filter-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
}
|
|
.filter-overlay.show {
|
|
display: block;
|
|
}
|
|
.filter-dropdown {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border-radius: 0 0 16px 16px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
z-index: 1001;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
.filter-dropdown.show {
|
|
display: block;
|
|
}
|
|
/* 二级筛选栏层级与动效 */
|
|
#filterBar {
|
|
overflow: hidden;
|
|
max-height: 120px;
|
|
transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
|
|
will-change: transform, opacity;
|
|
}
|
|
#filterBar.filter-bar-enter {
|
|
transform: translateY(-16px);
|
|
opacity: 0;
|
|
}
|
|
#filterBar.filter-bar-hidden {
|
|
opacity: 0;
|
|
transform: translateY(-110%);
|
|
pointer-events: none;
|
|
}
|
|
@keyframes filterBarDrop {
|
|
from { transform: translateY(-16px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#filterBar { animation: none; transition: none; }
|
|
}
|
|
.customer-card {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.customer-card:active {
|
|
transform: scale(0.98);
|
|
}
|
|
.dim-container { display: none; }
|
|
.dim-container.active { display: block; }
|
|
.assistant-tag { display: inline-flex; align-items: center; gap: 2px; }
|
|
.assistant-assignee { color: #e34d59; font-weight: 700; }
|
|
.assistant-abandoned { color: #c5c5c5; }
|
|
.assistant-normal { color: #2c2c2c; }
|
|
.assistant-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 16px;
|
|
height: 14px;
|
|
padding: 0 5px;
|
|
border-radius: 6px;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
transform: translateY(1.5px);
|
|
}
|
|
.assistant-badge-follow {
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #e34d59 0%, #f26a76 100%);
|
|
border: 1px solid rgba(227, 77, 89, 0.28);
|
|
box-shadow: 0 1px 3px rgba(227, 77, 89, 0.28), inset 0 0.5px 0 rgba(255, 255, 255, 0.42);
|
|
}
|
|
.assistant-badge-drop {
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #d4d4d4 0%, #b6b6b6 100%);
|
|
border: 1px solid rgba(120, 120, 120, 0.18);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 0.5px 0 rgba(255, 255, 255, 0.45);
|
|
}
|
|
.assistant-sep { color: #dcdcdc; margin: 0 6px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-1 min-h-screen">
|
|
<!-- 顶部导航 - 仅Tab -->
|
|
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
|
<div class="flex border-b border-gray-2">
|
|
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
|
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">客户</a>
|
|
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选区域（二级） -->
|
|
<div id="filterBar" class="bg-gray-1 sticky top-[44px] z-10 px-4 py-2 border-b border-gray-2">
|
|
<div class="bg-white rounded-2xl p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
|
<button onclick="toggleFilter('type')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
|
<span id="typeLabel">最应召回</span>
|
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
<button onclick="toggleFilter('project')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
|
<span id="projectLabel">全部</span>
|
|
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 遮罩层 -->
|
|
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
|
|
|
<!-- 类型筛选弹窗 -->
|
|
<div id="typeDropdown" class="filter-dropdown">
|
|
<div class="p-4 space-y-2">
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最应召回')">最应召回（默认）</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最大消费潜力')">最大消费潜力</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高余额')">最高余额</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近充值')">最近充值</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高消费 近60天')">最高消费 近60天</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最频繁 近60天')">最频繁 近60天</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近到店')">最近到店</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最专一')">最专一</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 项目筛选弹窗 -->
|
|
<div id="projectDropdown" class="filter-dropdown">
|
|
<div class="p-4 space-y-2">
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('全部')">全部</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('中🎱')">中🎱</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('斯诺克')">斯诺克</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('麻将')">麻将</div>
|
|
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('团建')">团建</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 客户列表区域 -->
|
|
<div class="px-5 pt-4 pb-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-base font-semibold text-gray-12">客户列表</span>
|
|
<span class="text-sm text-gray-6">· 前100名</span>
|
|
</div>
|
|
<span class="text-sm text-gray-5">共100名客户</span>
|
|
</div>
|
|
|
|
|
|
<!-- ==================== 最应召回（默认） ==================== -->
|
|
|
|
<!-- ==================== 最应召回（默认） ==================== -->
|
|
<div id="dim-recall" class="dim-container active p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">王</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-gray-13">王先生</span>
|
|
<div class="flex items-center gap-1.5 mt-0.5">
|
|
<span class="text-xs text-gray-6">理想 <span class="text-gray-11 font-medium">7天</span></span>
|
|
<span class="text-xs text-gray-6">已过 <span class="text-error font-bold">15天</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="px-2.5 py-1 bg-error/10 text-error text-sm font-bold rounded-lg">超期 8天</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">5次</span></div>
|
|
<div class="text-gray-6">余额 <span class="text-gray-11 font-medium">¥8,000</span></div>
|
|
<div class="text-gray-6">召回指数 <span class="text-primary font-bold">0.92</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">李</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-gray-13">李女士</span>
|
|
<div class="flex items-center gap-1.5 mt-0.5">
|
|
<span class="text-xs text-gray-6">理想 <span class="text-gray-11 font-medium">10天</span></span>
|
|
<span class="text-xs text-gray-6">已过 <span class="text-error font-bold">20天</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="px-2.5 py-1 bg-warning/10 text-warning text-sm font-bold rounded-lg">超期 10天</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">3次</span></div>
|
|
<div class="text-gray-6">余额 <span class="text-gray-11 font-medium">¥12,500</span></div>
|
|
<div class="text-gray-6">召回指数 <span class="text-primary font-bold">0.88</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">张</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-gray-13">张先生</span>
|
|
<div class="flex items-center gap-1.5 mt-0.5">
|
|
<span class="text-xs text-gray-6">理想 <span class="text-gray-11 font-medium">7天</span></span>
|
|
<span class="text-xs text-gray-6">已过 <span class="text-error font-bold">18天</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="px-2.5 py-1 bg-error/10 text-error text-sm font-bold rounded-lg">超期 11天</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">2次</span></div>
|
|
<div class="text-gray-6">余额 <span class="text-gray-11 font-medium">¥3,200</span></div>
|
|
<div class="text-gray-6">召回指数 <span class="text-primary font-bold">0.85</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">泡芙</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最大消费潜力 ==================== -->
|
|
<div id="dim-potential" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">赵</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">赵女士</span>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<div class="text-primary font-bold">0.95</div>
|
|
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2 bg-gradient-to-r from-primary/5 to-blue-50 rounded-lg p-3">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="text-sm font-bold text-primary">🔥 S级潜力</span>
|
|
<span class="text-xs text-gray-6">高频 · 高客单 · 高余额</span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2 text-center">
|
|
<div><p class="text-sm font-bold text-gray-13">¥4,800</p><p class="text-xs text-gray-6">近30天消费</p></div>
|
|
<div><p class="text-sm font-bold text-gray-13">8次</p><p class="text-xs text-gray-6">月均到店</p></div>
|
|
<div><p class="text-sm font-bold text-success">¥15,000</p><p class="text-xs text-gray-6">余额</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">刘</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">刘先生</span>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<div class="text-primary font-bold">0.87</div>
|
|
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2 bg-gradient-to-r from-primary/5 to-blue-50 rounded-lg p-3">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="text-sm font-bold text-primary">⭐ A级潜力</span>
|
|
<span class="text-xs text-gray-6">中频 · 高客单</span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2 text-center">
|
|
<div><p class="text-sm font-bold text-gray-13">¥3,500</p><p class="text-xs text-gray-6">近30天消费</p></div>
|
|
<div><p class="text-sm font-bold text-gray-13">5次</p><p class="text-xs text-gray-6">月均到店</p></div>
|
|
<div><p class="text-sm font-bold text-success">¥6,800</p><p class="text-xs text-gray-6">余额</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-abandoned">泡芙</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最高余额 ==================== -->
|
|
<div id="dim-balance" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">赵</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">赵女士</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2">
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-lg font-bold text-warning">¥25,000</span>
|
|
<span class="text-xs text-gray-6">余额</span>
|
|
<span class="text-xs text-gray-5">·</span>
|
|
<span class="text-sm font-medium text-success">可用约8个月</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-2 text-sm">
|
|
<div class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥6,200</span></div>
|
|
<div class="text-gray-6">月均消耗 <span class="text-gray-11 font-medium">¥3,100</span></div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-1 text-sm">
|
|
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">12天前</span></div>
|
|
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">陈</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">陈先生</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2">
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-lg font-bold text-warning">¥18,500</span>
|
|
<span class="text-xs text-gray-6">余额</span>
|
|
<span class="text-xs text-gray-5">·</span>
|
|
<span class="text-sm font-medium text-success">可用约9.7个月</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-2 text-sm">
|
|
<div class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥3,800</span></div>
|
|
<div class="text-gray-6">月均消耗 <span class="text-gray-11 font-medium">¥1,900</span></div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-1 text-sm">
|
|
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">8天前</span></div>
|
|
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">14天</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最近充值 ==================== -->
|
|
<div id="dim-recharge" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-400 to-blue-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">吴</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="font-semibold text-gray-13">吴先生</span>
|
|
</div>
|
|
<span class="text-[10px] text-gray-6">2天前充值</span>
|
|
</div>
|
|
<div class="ml-11 mb-2 bg-gradient-to-r from-emerald-50 to-green-50 rounded-lg p-2.5 border border-emerald-100/50">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<span class="text-lg font-bold text-success">+¥5,000</span>
|
|
<span class="text-[10px] text-gray-6 ml-1">充值</span>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-gray-6">充后余额</div>
|
|
<div class="text-sm font-bold text-gray-13">¥8,200</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">2天前</span></div>
|
|
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
|
<div class="text-gray-6">近3月充值 <span class="text-success font-medium">3次</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">郑</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="font-semibold text-gray-13">郑女士</span>
|
|
</div>
|
|
<span class="text-[10px] text-gray-6">5天前充值</span>
|
|
</div>
|
|
<div class="ml-11 mb-2 bg-gradient-to-r from-emerald-50 to-green-50 rounded-lg p-2.5 border border-emerald-100/50">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<span class="text-lg font-bold text-success">+¥3,000</span>
|
|
<span class="text-[10px] text-gray-6 ml-1">充值</span>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-gray-6">充后余额</div>
|
|
<div class="text-sm font-bold text-gray-13">¥6,500</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">5天前</span></div>
|
|
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
|
<div class="text-gray-6">近3月充值 <span class="text-success font-medium">2次</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">泡芙</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最高消费 近60天 ==================== -->
|
|
<div id="dim-spend60" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">李</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">李女士</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2">
|
|
<div class="flex items-baseline gap-3">
|
|
<div>
|
|
<span class="text-lg font-bold text-warning">¥12,800</span>
|
|
<span class="text-xs text-gray-6 ml-1">近60天消费</span>
|
|
</div>
|
|
<span class="text-xs text-gray-5">·</span>
|
|
<span class="text-sm text-gray-9">18次到店</span>
|
|
<span class="text-xs text-gray-5">·</span>
|
|
<span class="text-sm text-gray-9">次均¥711</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">王</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">王先生</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2">
|
|
<div class="flex items-baseline gap-3">
|
|
<div>
|
|
<span class="text-lg font-bold text-warning">¥9,500</span>
|
|
<span class="text-xs text-gray-6 ml-1">近60天消费</span>
|
|
</div>
|
|
<span class="text-xs text-gray-5">·</span>
|
|
<span class="text-sm text-gray-9">12次到店</span>
|
|
<span class="text-xs text-gray-5">·</span>
|
|
<span class="text-sm text-gray-9">次均¥792</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最频繁 近60天 ==================== -->
|
|
<div id="dim-freq60" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">张</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="font-semibold text-gray-13">张先生</span>
|
|
<div class="flex items-center gap-3 mt-0.5 text-xs">
|
|
<span class="text-gray-6">平均间隔 <span class="text-primary font-medium">3.3天</span></span>
|
|
<span class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥8,600</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<div class="text-primary font-bold text-lg">18<span class="text-xs font-normal text-gray-6">天</span></div>
|
|
<div class="text-[10px] text-gray-6 -mt-0.5">60天到店</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2">
|
|
<div class="flex items-center justify-between text-[10px] text-gray-5 mb-0.5">
|
|
<span>8周前</span>
|
|
<span>本周 <span class="text-primary font-bold text-xs">3</span></span>
|
|
</div>
|
|
<div class="flex items-end gap-0.5 h-6">
|
|
<div class="flex-1 bg-primary/20 rounded-t" style="height:60%"></div>
|
|
<div class="flex-1 bg-primary/30 rounded-t" style="height:80%"></div>
|
|
<div class="flex-1 bg-primary/40 rounded-t" style="height:50%"></div>
|
|
<div class="flex-1 bg-primary/50 rounded-t" style="height:100%"></div>
|
|
<div class="flex-1 bg-primary/40 rounded-t" style="height:70%"></div>
|
|
<div class="flex-1 bg-primary/60 rounded-t" style="height:90%"></div>
|
|
<div class="flex-1 bg-primary/30 rounded-t" style="height:40%"></div>
|
|
<div class="flex-1 bg-primary/50 rounded-t" style="height:75%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">陈</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="font-semibold text-gray-13">陈先生</span>
|
|
<div class="flex items-center gap-3 mt-0.5 text-xs">
|
|
<span class="text-gray-6">平均间隔 <span class="text-primary font-medium">4天</span></span>
|
|
<span class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥6,200</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<div class="text-primary font-bold text-lg">15<span class="text-xs font-normal text-gray-6">天</span></div>
|
|
<div class="text-[10px] text-gray-6 -mt-0.5">60天到店</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-11 mb-2">
|
|
<div class="flex items-center justify-between text-[10px] text-gray-5 mb-0.5">
|
|
<span>8周前</span>
|
|
<span>本周 <span class="text-primary font-bold text-xs">2</span></span>
|
|
</div>
|
|
<div class="flex items-end gap-0.5 h-6">
|
|
<div class="flex-1 bg-primary/20 rounded-t" style="height:40%"></div>
|
|
<div class="flex-1 bg-primary/30 rounded-t" style="height:60%"></div>
|
|
<div class="flex-1 bg-primary/40 rounded-t" style="height:70%"></div>
|
|
<div class="flex-1 bg-primary/30 rounded-t" style="height:50%"></div>
|
|
<div class="flex-1 bg-primary/50 rounded-t" style="height:80%"></div>
|
|
<div class="flex-1 bg-primary/40 rounded-t" style="height:65%"></div>
|
|
<div class="flex-1 bg-primary/60 rounded-t" style="height:90%"></div>
|
|
<div class="flex-1 bg-primary/50 rounded-t" style="height:70%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">Amy</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最近到店 ==================== -->
|
|
<div id="dim-recent" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">刘</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="font-semibold text-gray-13">刘先生</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-0.5 shrink-0">
|
|
<span class="text-2xl font-bold text-success">1</span>
|
|
<span class="text-xs text-gray-6">天前到店</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
|
<div class="text-gray-6">60天到店 <span class="text-gray-11 font-medium">12天</span></div>
|
|
<div class="text-gray-6">次均消费 <span class="text-gray-11 font-medium">¥450</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">周</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="font-semibold text-gray-13">周先生</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-0.5 shrink-0">
|
|
<span class="text-2xl font-bold text-success">2</span>
|
|
<span class="text-xs text-gray-6">天前到店</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
|
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
|
<div class="text-gray-6">60天到店 <span class="text-gray-11 font-medium">8天</span></div>
|
|
<div class="text-gray-6">次均消费 <span class="text-gray-11 font-medium">¥475</span></div>
|
|
</div>
|
|
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
|
<span class="text-gray-6">助教:</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
|
<span class="assistant-sep">|</span>
|
|
<span class="assistant-tag">❤️ <span class="assistant-abandoned">泡芙</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ==================== 最专一 ==================== -->
|
|
<div id="dim-loyal" class="dim-container p-4 pt-1 space-y-3">
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center gap-2 mb-2.5">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">孙</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">孙先生</span>
|
|
</div>
|
|
<div class="ml-11 mb-1 space-y-1.5">
|
|
<!-- 表头 -->
|
|
<div class="flex items-center text-[10px] text-gray-5 gap-1">
|
|
<span class="w-14"></span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right">次均时长</span>
|
|
<span class="w-12 text-right">60天时长</span>
|
|
<span class="w-10 text-right">服务次</span>
|
|
</div>
|
|
<!-- 小燕 -->
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-error">小燕</span></span>
|
|
<span class="text-[10px] text-gray-5 shrink-0">0.95</span>
|
|
<span class="assistant-badge assistant-badge-follow text-[9px] shrink-0">跟</span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">2.1h</span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">25.2h</span>
|
|
<span class="w-10 text-right text-xs font-medium text-gray-11">12</span>
|
|
</div>
|
|
<!-- 泡芙 -->
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-13">泡芙</span></span>
|
|
<span class="text-[10px] text-gray-5 shrink-0">0.68</span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">1.8h</span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">9.0h</span>
|
|
<span class="w-10 text-right text-xs font-medium text-gray-11">5</span>
|
|
</div>
|
|
<!-- Amy -->
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-5">Amy</span></span>
|
|
<span class="text-[10px] text-gray-5 shrink-0">0.32</span>
|
|
<span class="assistant-badge assistant-badge-drop text-[9px] shrink-0">弃</span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right text-xs text-gray-7">1.2h</span>
|
|
<span class="w-12 text-right text-xs text-gray-7">3.6h</span>
|
|
<span class="w-10 text-right text-xs text-gray-7">3</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
|
<div class="flex items-center gap-2 mb-2.5">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
|
|
<span class="text-white font-semibold text-sm">赵</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-13">赵女士</span>
|
|
</div>
|
|
<div class="ml-11 mb-1 space-y-1.5">
|
|
<div class="flex items-center text-[10px] text-gray-5 gap-1">
|
|
<span class="w-14"></span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right">次均时长</span>
|
|
<span class="w-12 text-right">60天时长</span>
|
|
<span class="w-10 text-right">服务次</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-13">Amy</span></span>
|
|
<span class="text-[10px] text-gray-5 shrink-0">0.88</span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">2.3h</span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">32.2h</span>
|
|
<span class="w-10 text-right text-xs font-medium text-gray-11">14</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-13">泡芙</span></span>
|
|
<span class="text-[10px] text-gray-5 shrink-0">0.72</span>
|
|
<span class="flex-1"></span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">1.5h</span>
|
|
<span class="w-12 text-right text-xs font-medium text-gray-11">12.0h</span>
|
|
<span class="w-10 text-right text-xs font-medium text-gray-11">8</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 悬浮助手按钮 -->
|
|
<script src="../js/ai-float-btn.js"></script>
|
|
|
|
<!-- 通用底部导航 -->
|
|
<script src="../js/bottom-nav.js"></script>
|
|
|
|
<script>
|
|
let currentFilter = null;
|
|
|
|
/* ---- 维度容器 ID 映射 ---- */
|
|
const dimMap = {
|
|
'最应召回': 'dim-recall',
|
|
'最大消费潜力': 'dim-potential',
|
|
'最高余额': 'dim-balance',
|
|
'最近充值': 'dim-recharge',
|
|
'最高消费 近60天': 'dim-spend60',
|
|
'最频繁 近60天': 'dim-freq60',
|
|
'最近到店': 'dim-recent',
|
|
'最专一': 'dim-loyal'
|
|
};
|
|
|
|
function positionDropdown(dropdownEl) {
|
|
const bar = document.getElementById('filterBar');
|
|
if (!bar || !dropdownEl) return;
|
|
const rect = bar.getBoundingClientRect();
|
|
dropdownEl.style.top = `${rect.bottom}px`;
|
|
}
|
|
|
|
function toggleFilter(type) {
|
|
const overlay = document.getElementById('filterOverlay');
|
|
const typeDropdown = document.getElementById('typeDropdown');
|
|
const projectDropdown = document.getElementById('projectDropdown');
|
|
|
|
if (currentFilter === type) {
|
|
closeAllFilters();
|
|
return;
|
|
}
|
|
|
|
closeAllFilters();
|
|
currentFilter = type;
|
|
overlay.classList.add('show');
|
|
|
|
if (type === 'type') {
|
|
positionDropdown(typeDropdown);
|
|
typeDropdown.classList.add('show');
|
|
} else if (type === 'project') {
|
|
positionDropdown(projectDropdown);
|
|
projectDropdown.classList.add('show');
|
|
}
|
|
}
|
|
|
|
function closeAllFilters() {
|
|
currentFilter = null;
|
|
document.getElementById('filterOverlay').classList.remove('show');
|
|
document.getElementById('typeDropdown').classList.remove('show');
|
|
document.getElementById('projectDropdown').classList.remove('show');
|
|
}
|
|
|
|
function selectType(value) {
|
|
document.getElementById('typeLabel').textContent = value;
|
|
// 切换维度容器
|
|
document.querySelectorAll('.dim-container').forEach(el => el.classList.remove('active'));
|
|
const id = dimMap[value];
|
|
if (id) document.getElementById(id).classList.add('active');
|
|
closeAllFilters();
|
|
}
|
|
|
|
function selectProject(value) {
|
|
document.getElementById('projectLabel').textContent = value;
|
|
closeAllFilters();
|
|
}
|
|
|
|
// 滚动时：下滑隐藏筛选栏，上滑显示
|
|
(function initFilterBarScrollBehavior() {
|
|
const bar = document.getElementById('filterBar');
|
|
if (!bar) return;
|
|
|
|
const TRIGGER_DISTANCE_DOWN = 24;
|
|
const TRIGGER_DISTANCE_UP = 12;
|
|
const JITTER_THRESHOLD = 2;
|
|
const HEADER_HEIGHT = 44;
|
|
|
|
let lastY = window.scrollY || 0;
|
|
let lastDir = null;
|
|
let ticking = false;
|
|
let acc = 0;
|
|
let lockedDir = null;
|
|
|
|
function getFilterBarThreshold() {
|
|
return HEADER_HEIGHT;
|
|
}
|
|
|
|
bar.classList.add('filter-bar-enter');
|
|
window.requestAnimationFrame(() => {
|
|
bar.classList.remove('filter-bar-enter');
|
|
});
|
|
|
|
function setVisible(visible) {
|
|
if (visible) {
|
|
bar.classList.remove('filter-bar-hidden');
|
|
} else {
|
|
if (!bar.classList.contains('filter-bar-hidden')) closeAllFilters();
|
|
bar.classList.add('filter-bar-hidden');
|
|
}
|
|
}
|
|
|
|
function resetGesture(y) {
|
|
lastY = y;
|
|
lastDir = null;
|
|
acc = 0;
|
|
lockedDir = null;
|
|
}
|
|
|
|
function onScrollFrame() {
|
|
const y = window.scrollY || 0;
|
|
const filterBarThreshold = getFilterBarThreshold();
|
|
|
|
if (y <= filterBarThreshold) {
|
|
setVisible(true);
|
|
resetGesture(y);
|
|
return;
|
|
}
|
|
|
|
const delta = y - lastY;
|
|
if (Math.abs(delta) <= JITTER_THRESHOLD) {
|
|
lastY = y;
|
|
return;
|
|
}
|
|
|
|
const dir = delta > 0 ? 'down' : 'up';
|
|
if (lastDir === null) {
|
|
lastDir = dir;
|
|
} else if (dir !== lastDir) {
|
|
lastDir = dir;
|
|
lockedDir = null;
|
|
acc = 0;
|
|
}
|
|
|
|
lastY = y;
|
|
|
|
if (lockedDir === dir) return;
|
|
acc += Math.abs(delta);
|
|
const threshold = dir === 'up' ? TRIGGER_DISTANCE_UP : TRIGGER_DISTANCE_DOWN;
|
|
if (acc < threshold) return;
|
|
|
|
setVisible(dir === 'up');
|
|
lockedDir = dir;
|
|
acc = 0;
|
|
}
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (ticking) return;
|
|
ticking = true;
|
|
window.requestAnimationFrame(() => {
|
|
onScrollFrame();
|
|
ticking = false;
|
|
});
|
|
}, { passive: true });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|