feat: batch update - gift card breakdown spec, backend APIs, miniprogram pages, ETL finance recharge, docs & migrations

This commit is contained in:
Neo
2026-03-20 01:43:48 +08:00
parent 075caf067f
commit 79f9a0e1da
437 changed files with 118603 additions and 976 deletions

View File

@@ -0,0 +1,692 @@
/* 客户看板页 — 忠于 H5 原型87.5% 缩放 */
/* ===== 三态 ===== */
.page-loading,
.page-empty,
.page-error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 60vh;
}
.retry-btn {
margin-top: 24rpx;
padding: 16rpx 48rpx;
font-size: 28rpx;
line-height: 51rpx; /* 修复text-lg line-height 28px → 51rpx */
color: #0052d9;
border: 2rpx solid #0052d9;
border-radius: 44rpx;
}
/* ===== 看板 Tab对齐 board-coach 规范) ===== */
.board-tabs {
display: flex;
background: #ffffff;
border-bottom: 1px solid #eeeeee; /* P2-13: 发丝线用 px */
position: sticky;
top: 0;
z-index: 20;
}
.board-tab {
flex: 1;
text-align: center;
padding: 22rpx 0;
font-size: 26rpx; /* P1-6: 修正 14px → 26rpx */
line-height: 36rpx;
font-weight: 500;
color: #8b8b8b;
position: relative;
}
.board-tab--active {
color: #0052d9;
font-weight: 600;
}
.board-tab--active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 44rpx; /* 补充修正24px → 44rpx */
height: 6rpx; /* 补充修正3px → 6rpx */
background: linear-gradient(90deg, #0052d9, #5b9cf8);
border-radius: 4rpx; /* 补充修正2px → 4rpx */
}
/* ===== 筛选区域(对齐 board-coach 规范) ===== */
.filter-bar {
background: #f3f3f3;
padding: 14rpx 30rpx; /* P0-3: 修正 16px → 30rpx */
position: sticky;
top: 70rpx;
z-index: 15;
border-bottom: 1px solid #eeeeee; /* P2-13: 发丝线用 px */
transition: transform 220ms ease, opacity 220ms ease;
}
.filter-bar--hidden {
opacity: 0;
transform: translateY(-110%);
pointer-events: none;
}
.filter-bar-inner {
display: flex;
align-items: center;
gap: 14rpx;
background: #ffffff;
border-radius: 30rpx; /* P0-2: 修正 16px → 30rpx */
padding: 12rpx; /* 修正 6px → 12rpx */
border: 1px solid #eeeeee; /* P2-13: 发丝线用 px */
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
.filter-item {
flex: 1;
min-width: 0;
}
.filter-item--wide {
flex: 1;
}
/* ===== 列表头部 ===== */
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 36rpx 14rpx; /* P0-1: 修正 */
}
.list-header-left {
display: flex;
align-items: center;
gap: 14rpx; /* P1-11: 修正 8px → 14rpx */
}
.list-header-title {
font-size: 30rpx; /* P1-7: 修正 16px → 30rpx */
line-height: 44rpx; /* 修正text-base line-height 24px → 44rpx */
font-weight: 600;
color: #242424;
}
.list-header-sub {
font-size: 26rpx; /* P1-8: 修正 14px → 26rpx */
line-height: 36rpx; /* 新增 */
color: #a6a6a6;
}
.list-header-count {
font-size: 26rpx; /* P1-8: 修正 14px → 26rpx */
line-height: 36rpx; /* 新增 */
color: #c5c5c5;
}
/* ===== 客户列表 ===== */
.customer-list {
padding: 0 30rpx 30rpx; /* P0-4: 修正 */
margin-top: 8rpx; /* 修正 4px → 8rpx */
}
/* ===== 客户卡片 ===== */
.customer-card {
background: #ffffff;
border-radius: 30rpx; /* P2-15: 修正 16px → 30rpx */
padding: 29rpx; /* 精确修正16px → 29rpx而非 30rpx*/
margin-bottom: 25rpx; /* 补充修正12px → 22rpx */
box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.1);
}
.customer-card--hover {
opacity: 0.96;
transform: scale(0.98);
}
/* ===== 卡片头部 ===== */
.card-header {
display: flex;
align-items: center;
gap: 14rpx;
}
/* 网格/表格维度头部间距更大 */
.card-header--lg {
margin-bottom: 2rpx; /* H5 mb-3=12px → 22rpx */
}
.card-avatar {
width: 66rpx; /* 补充修正36px → 66rpx */
height: 66rpx; /* 补充修正36px → 66rpx */
border-radius: 22rpx; /* 补充修正12px → 22rpx */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.avatar-text {
color: #ffffff;
font-size: 26rpx;
line-height: 29rpx; /* 修复text-xs line-height 16px → 29rpx原为36rpx差异17.6%*/
font-weight: 600;
}
/* 头像渐变色 */
.avatar--amber { background: linear-gradient(135deg, #fbbf24, #f97316); }
.avatar--pink { background: linear-gradient(135deg, #f472b6, #f43f5e); }
.avatar--blue { background: linear-gradient(135deg, #60a5fa, #6366f1); }
.avatar--green { background: linear-gradient(135deg, #4ade80, #10b981); }
.avatar--purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.avatar--cyan { background: linear-gradient(135deg, #22d3ee, #14b8a6); }
.avatar--rose { background: linear-gradient(135deg, #fb7185, #e11d48); }
.avatar--indigo { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.card-name {
font-size: 32rpx; /* P1-9: 修正 16px → 30rpx */
line-height: 44rpx; /* 高度修正:添加 line-height */
font-weight: 600;
color: #242424;
flex-shrink: 0;
}
/* 最频繁:姓名+小字垂直排列 */
.card-name-group {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.card-name-sub {
display: flex;
align-items: center;
gap: 22rpx; /* H5 gap-3=12px → 12×2×0.875≈22rpx */
margin-top: 2rpx;
white-space: nowrap;
overflow: hidden;
}
.card-header-spacer {
flex: 1;
}
/* 头部右侧指标区 */
.header-metrics {
display: flex;
align-items: center;
gap: 14rpx; /* P1-12: 修正 8px → 14rpx */
flex-shrink: 0;
}
/* 最频繁维度:右上角大字到店次数 */
.header-metrics--freq {
flex-direction: column;
align-items: flex-end;
gap: 0;
}
.freq-big-num {
display: flex;
align-items: baseline;
}
.freq-big-val {
font-size: 32rpx;
font-weight: 700;
color: #0052d9;
line-height: 1; /* 补充:紧凑行高 */
}
.freq-big-unit {
font-size: 22rpx;
line-height: 29rpx; /* 修复text-xs line-height 16px → 29rpx */
font-weight: 400;
color: #a6a6a6;
margin-left: 2rpx;
}
.freq-big-label {
font-size: 18rpx; /* H5 text-[10px]=10px → 18rpx */
line-height: 33rpx; /* 补充:约 1.8 倍 */
color: #a6a6a6;
margin-top: -2rpx;
}
/* 最近到店维度:右上角大字 X天前到店 */
.header-metrics--recent {
gap: 4rpx;
}
.recent-big-num {
display: flex;
align-items: baseline;
gap: 4rpx;
}
.recent-big-val {
font-size: 40rpx;
font-weight: 700;
color: #00a870;
line-height: 1; /* 补充:紧凑行高 */
}
.recent-big-unit {
font-size: 22rpx;
line-height: 29rpx; /* 修复text-xs line-height 16px → 29rpx */
font-weight: 400;
color: #a6a6a6;
}
.metric-gray {
font-size: 22rpx;
line-height: 29rpx; /* 新增 */
color: #a6a6a6;
}
.metric-dark {
color: #393939;
font-weight: 600;
}
.metric-error {
color: #e34d59;
font-weight: 700;
}
/* 超期标签 */
.overdue-tag {
padding: 4rpx 12rpx; /* 补充修正6px → 12rpx */
font-size: 22rpx;
line-height: 29rpx; /* 补充text-xs line-height */
font-weight: 700;
border-radius: 8rpx;
}
.overdue-tag--danger {
background: rgba(227, 77, 89, 0.1);
color: #e34d59;
}
.overdue-tag--warn {
background: rgba(237, 123, 47, 0.1);
color: #ed7b2f;
}
/* 消费潜力标签 */
.potential-tag {
padding: 4rpx 12rpx; /* 补充修正6px → 12rpx */
font-size: 22rpx;
line-height: 29rpx; /* 补充text-xs line-height */
border-radius: 8rpx;
}
.potential-tag--primary {
background: rgba(0, 82, 217, 0.1);
color: #0052d9;
}
.potential-tag--warning {
background: rgba(237, 123, 47, 0.1);
color: #ed7b2f;
}
.potential-tag--success {
background: rgba(0, 168, 112, 0.1);
color: #00a870;
}
.potential-tag--gray {
background: #eeeeee;
color: #777777;
}
/* ===== 卡片中间行flex 布局,左对齐名字位置) ===== */
.card-mid-row {
display: flex;
align-items: center;
padding-left: 80rpx; /* 只保留左侧对齐 */
margin-bottom: 24rpx; /* 添加 mb-2 = 8px → 14rpx */
}
.mid-text {
font-size: 26rpx; /* P1-10: 修正 14px → 26rpx */
line-height: 36rpx; /* 新增 */
color: #a6a6a6;
}
.mid-dark {
color: #393939;
font-weight: 600;
}
.mid-primary {
color: #0052d9;
font-weight: 500;
}
.mid-primary-bold {
color: #0052d9;
font-weight: 700;
}
.mid-ml {
margin-left: 30rpx; /* P0-5: 修正 16px → 30rpx */
}
.mid-ml-right {
margin-left: auto;
}
.mid-right {
margin-left: auto;
}
.mid-error {
color: #e34d59;
font-weight: 700;
}
/* ===== 网格布局 ===== */
.card-grid {
display: grid;
gap: 14rpx; /* 补充修正8px → 14rpx */
padding-left: 80rpx; /* 移除上下 padding只保留左侧对齐 */
}
.card-grid--3 {
grid-template-columns: repeat(3, 1fr);
text-align: center;
padding-bottom: 20rpx;
}
.card-grid--4 {
grid-template-columns: repeat(4, 1fr);
padding-bottom: 22rpx;
text-align: center;
}
.grid-cell {
display: flex;
flex-direction: column;
gap: 4rpx;
}
.grid-label {
font-size: 18rpx;
color: #a6a6a6;
}
.grid-val {
font-size: 26rpx; /* 修正text-sm 14px → 26rpx */
line-height: 36rpx; /* text-sm line-height */
font-weight: 700;
color: #393939;
}
.grid-val--success {
color: #00a870;
}
.grid-val--warning {
color: #ed7b2f;
}
.grid-val--lg {
font-size: 30rpx; /* 修正text-base 16px → 30rpx */
line-height: 44rpx; /* 补充text-base line-height */
font-weight: 700;
color: #242424;
}
/* ===== 迷你柱状图(最频繁维度) ===== */
.mini-chart {
padding: 0rpx 0 20rpx 80rpx; /* H5 mb-2=8px → 8×2×0.875≈14rpx */
}
.mini-chart-header {
display: flex;
justify-content: space-between;
margin-bottom: 4rpx;
}
.mini-chart-label {
font-size: 18rpx;
line-height: 33rpx; /* 新增 */
color: #c5c5c5;
}
.mini-chart-bars {
display: flex;
align-items: flex-end;
gap: 4rpx; /* H5 gap-0.5=2px → 4rpx */
height: 42rpx; /* H5 h-6=24px → 42rpx */
}
.mini-bar-col {
flex: 1;
display: flex;
align-items: flex-end;
height: 100%;
}
.mini-bar {
width: 100%;
background: #0052d9;
border-radius: 8rpx 8rpx 0 0; /* 补充修正4px → 8rpx */
min-height: 4rpx;
}
.mini-chart-nums {
display: flex;
gap: 4rpx; /* H5 gap-0.5=2px → 4rpx */
margin-top: 4rpx;
}
.mini-chart-num {
flex: 1;
text-align: center;
font-size: 16rpx; /* H5 text-[9px]=9px → 16rpx */
line-height: 29rpx; /* 新增 */
color: #c5c5c5;
}
.mini-chart-num--active {
color: #0052d9;
font-weight: 700;
}
/* ===== 助教行 ===== */
.card-assistant-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8rpx;
margin-left: 80rpx;
padding-top: 2rpx; /* 精确修正8px → 15rpx而非 14rpx*/
border-top: 1px solid #f3f3f3; /* P2-13: 发丝线用 px */
}
.assistant-label {
font-size: 22rpx;
line-height: 29rpx; /* 新增 */
color: #a6a6a6;
flex-shrink: 0;
}
.assistant-tag {
display: flex;
align-items: center;
gap: 4rpx;
}
.assistant-heart {
width: 24rpx;
height: 24rpx;
}
.assistant-name {
font-size: 22rpx;
line-height: 29rpx; /* 新增 */
font-weight: 500;
}
.assistant-name.assistant--assignee {
color: #e34d59;
font-weight: 700;
}
.assistant-name.assistant--abandoned {
color: #c5c5c5; /* H5 assistant-abandoned = gray-5 #c5c5c5 */
}
.assistant-name.assistant--normal {
color: #242424;
}
.assistant-sep {
font-size: 20rpx;
line-height: 29rpx; /* 修复text-xs line-height 16px → 29rpx */
color: #c5c5c5;
margin: 0 12rpx; /* 补充修正6px → 12rpx */
}
/* 跟/弃 badge — 忠于 H5 原型:白字 + 渐变背景 + 阴影 */
.assistant-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28rpx;
height: 24rpx;
padding: 0 8rpx;
border-radius: 10rpx;
font-size: 18rpx;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5rpx;
margin-left: 4rpx;
color: #ffffff;
transform: translateY(3rpx); /* H5 原型translateY(1.5px) → 3rpx */
}
.assistant-badge--follow {
background: linear-gradient(135deg, #e34d59 0%, #f26a76 100%);
border: 1px solid rgba(227, 77, 89, 0.28); /* 补充修正:发丝线用 px */
box-shadow: 0 2rpx 6rpx rgba(227, 77, 89, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42); /* 补充修正:添加内阴影 */
}
.assistant-badge--drop {
background: linear-gradient(135deg, #d4d4d4 0%, #b6b6b6 100%);
border: 1px solid rgba(120, 120, 120, 0.18); /* 补充修正:发丝线用 px */
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45); /* 补充修正:添加内阴影 */
}
/* ===== 最专一维度:助教服务明细表 ===== */
.loyal-table {
border-left: 6rpx solid #d6d6d6;
padding-left: 12rpx;
margin-top: 12rpx;
margin-bottom: 8rpx;
margin-left: 22rpx;
}
.loyal-row {
display: flex;
align-items: center;
gap: 8rpx; /* H5 gap-1=4px → 4×2×0.875≈8rpx */
padding: 0; /* 行间距由 space-y 控制 */
}
.loyal-row + .loyal-row {
margin-top: 2rpx; /* H5 space-y-2=8px → 14rpx */
}
.loyal-row--header {
padding-bottom: 10rpx; /* 间距由 margin-top 控制 */
}
.loyal-row--header .loyal-col {
font-size: 22rpx; /* H5 text-xs=12px → 22rpx */
line-height: 29rpx; /* 补充text-xs line-height */
color: #c5c5c5;
}
.loyal-col {
flex: 1;
text-align: right;
font-size: 26rpx; /* 补充text-sm 14px → 26rpx */
line-height: 36rpx; /* 补充text-sm line-height */
}
.loyal-col--name {
width: 168rpx;
flex: none;
text-align: left;
display: flex;
align-items: center;
gap: 8rpx; /* H5 gap-1=4px → 4×2×0.875≈8rpx */
}
.loyal-coach-name {
font-size: 24rpx; /* H5 text-sm=14px → 24rpx数据行继承 */
line-height: 36rpx; /* 新增 */
font-weight: 500;
}
.loyal-coach-name.assistant--assignee {
color: #e34d59;
font-weight: 700;
}
.loyal-coach-name.assistant--abandoned {
color: #a6a6a6;
}
.loyal-coach-name.assistant--normal {
color: #242424;
}
.loyal-val {
font-size: 26rpx; /* 补充:继承 text-sm */
line-height: 36rpx; /* 已有 */
font-weight: 500; /* H5 font-medium=500 */
color: #393939;
}
.loyal-val--primary {
font-weight: 700;
color: #0052d9;
}
.loyal-val--gray {
color: #8b8b8b;
}
/* 最专一头部右侧 */
.header-metrics--loyal {
gap: 8rpx; /* H5 gap-1=4px → 4×2×0.875≈8rpx */
}
.loyal-top-name {
font-size: 26rpx; /* 补充text-sm 14px → 26rpx */
line-height: 36rpx; /* 补充text-sm line-height */
font-weight: 600;
color: #e34d59;
}
.loyal-top-score {
font-size: 26rpx; /* 补充text-sm 14px → 26rpx */
line-height: 36rpx; /* 补充text-sm line-height */
font-weight: 700;
color: #0052d9;
}
/* ===== 底部安全区 ===== */
.safe-bottom {
height: 200rpx;
padding-bottom: env(safe-area-inset-bottom);
}