464 lines
19 KiB
HTML
464 lines
19 KiB
HTML
<!-- 储值卡页 -->
|
||
<style>
|
||
/* 分段 Tab */
|
||
.pv-tabs { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:16px; }
|
||
.pv-tab { padding:7px 22px; border-radius:6px; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); border:none; background:none; font-weight:500; }
|
||
.pv-tab.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
|
||
|
||
/* 统计卡片 */
|
||
.pv-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
|
||
.pv-stat-card { background:#fff; border-radius:10px; padding:16px 20px; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
|
||
.pv-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.pv-stat-label { font-size:13px; color:#9ca3af; margin-bottom:6px; }
|
||
.pv-stat-value { font-size:24px; font-weight:700; color:#1a1a2e; }
|
||
.pv-stat-value.green { color:var(--g-success); }
|
||
.pv-stat-value.orange { color:var(--g-warning); }
|
||
|
||
/* 方案卡片网格 */
|
||
.pv-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
|
||
.pv-plan-card {
|
||
background:#fff; border-radius:12px; padding:0; overflow:hidden;
|
||
box-shadow:var(--g-shadow-sm); transition:var(--g-transition); position:relative;
|
||
}
|
||
.pv-plan-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.pv-plan-card.disabled { opacity:0.5; }
|
||
|
||
.pv-plan-hd {
|
||
background:linear-gradient(135deg, hsl(212,100%,45%) 0%, hsl(212,80%,55%) 100%);
|
||
padding:24px 20px 18px; color:#fff; position:relative; overflow:hidden;
|
||
}
|
||
.pv-plan-hd::after {
|
||
content:''; position:absolute; right:-20px; top:-20px;
|
||
width:80px; height:80px; border-radius:50%;
|
||
background:rgba(255,255,255,0.08);
|
||
}
|
||
.pv-plan-amount { font-size:28px; font-weight:700; letter-spacing:-0.5px; }
|
||
.pv-plan-amount span { font-size:15px; font-weight:400; opacity:0.8; }
|
||
.pv-plan-gift {
|
||
display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px;
|
||
background:rgba(255,255,255,0.2); font-size:13px; font-weight:600; color:#fff;
|
||
}
|
||
.pv-plan-gift .pv-gift-num { color:#ffd666; }
|
||
.pv-plan-effective {
|
||
margin-top:8px; font-size:13px; opacity:0.85;
|
||
}
|
||
|
||
.pv-plan-bd { padding:14px 20px; }
|
||
.pv-plan-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
|
||
.pv-plan-meta-item { font-size:12px; color:var(--g-text-muted); }
|
||
.pv-plan-meta-item span { font-weight:600; color:var(--g-text-secondary); }
|
||
|
||
.pv-plan-ft { display:flex; align-items:center; justify-content:space-between; padding:0 20px 14px; }
|
||
.pv-plan-actions { display:flex; gap:6px; }
|
||
|
||
/* 工具栏 */
|
||
.pv-toolbar {
|
||
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
|
||
margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px;
|
||
padding:10px 14px; background:#fff;
|
||
}
|
||
.pv-toolbar input[type="text"],
|
||
.pv-toolbar input[type="date"] {
|
||
height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
|
||
font-size:13px; outline:none; transition:var(--g-transition); background:#fff;
|
||
}
|
||
.pv-toolbar input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
|
||
/* 分页 */
|
||
.pv-pagination {
|
||
display:flex; align-items:center; justify-content:flex-end;
|
||
padding:12px 16px; gap:6px; font-size:13px; color:#4b5563;
|
||
background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm);
|
||
}
|
||
|
||
/* 抽屉内赠送比例提示 */
|
||
.pv-ratio-hint {
|
||
display:inline-flex; align-items:center; gap:4px;
|
||
padding:4px 10px; border-radius:6px; font-size:12px; font-weight:500;
|
||
background:color-mix(in srgb, var(--primary) 8%, #fff);
|
||
color:var(--primary); margin-top:6px;
|
||
}
|
||
|
||
.pv-section-hd {
|
||
font-size:15px; font-weight:600; color:var(--g-text);
|
||
padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
|
||
}
|
||
</style>
|
||
|
||
<div class="page-pv">
|
||
<!-- 分段 Tab -->
|
||
<div class="pv-tabs">
|
||
<button class="pv-tab active" onclick="switchPvTab(this, 'plans')">充值方案</button>
|
||
<button class="pv-tab" onclick="switchPvTab(this, 'records')">充值记录</button>
|
||
</div>
|
||
|
||
<!-- ========== TAB 1: 充值方案 ========== -->
|
||
<div id="pvTabPlans">
|
||
<!-- 统计卡片 -->
|
||
<div class="pv-stats">
|
||
<div class="pv-stat-card">
|
||
<div class="pv-stat-label">储值总额</div>
|
||
<div class="pv-stat-value">¥186,500</div>
|
||
</div>
|
||
<div class="pv-stat-card">
|
||
<div class="pv-stat-label">赠金总额</div>
|
||
<div class="pv-stat-value orange">¥18,650</div>
|
||
</div>
|
||
<div class="pv-stat-card">
|
||
<div class="pv-stat-label">本月充值</div>
|
||
<div class="pv-stat-value green">¥12,800</div>
|
||
</div>
|
||
<div class="pv-stat-card">
|
||
<div class="pv-stat-label">储值用户</div>
|
||
<div class="pv-stat-value">326人</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方案卡片 -->
|
||
<div class="pv-section-hd">充值方案</div>
|
||
<div class="pv-plan-grid">
|
||
|
||
<!-- 方案1: 100送10 -->
|
||
<div class="pv-plan-card">
|
||
<div class="pv-plan-hd">
|
||
<div class="pv-plan-amount"><span>充</span> ¥100</div>
|
||
<div class="pv-plan-gift">送 <span class="pv-gift-num">¥10</span></div>
|
||
<div class="pv-plan-effective">到账 ¥110</div>
|
||
</div>
|
||
<div class="pv-plan-bd">
|
||
<div class="pv-plan-meta">
|
||
<span class="pv-plan-meta-item">累计充值 <span>286次</span></span>
|
||
<span class="pv-plan-meta-item">合计 <span>¥28,600</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="pv-plan-ft">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<div class="pv-plan-actions">
|
||
<a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方案2: 200送30 -->
|
||
<div class="pv-plan-card">
|
||
<div class="pv-plan-hd">
|
||
<div class="pv-plan-amount"><span>充</span> ¥200</div>
|
||
<div class="pv-plan-gift">送 <span class="pv-gift-num">¥30</span></div>
|
||
<div class="pv-plan-effective">到账 ¥230</div>
|
||
</div>
|
||
<div class="pv-plan-bd">
|
||
<div class="pv-plan-meta">
|
||
<span class="pv-plan-meta-item">累计充值 <span>198次</span></span>
|
||
<span class="pv-plan-meta-item">合计 <span>¥39,600</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="pv-plan-ft">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<div class="pv-plan-actions">
|
||
<a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方案3: 300送50 -->
|
||
<div class="pv-plan-card">
|
||
<div class="pv-plan-hd">
|
||
<div class="pv-plan-amount"><span>充</span> ¥300</div>
|
||
<div class="pv-plan-gift">送 <span class="pv-gift-num">¥50</span></div>
|
||
<div class="pv-plan-effective">到账 ¥350</div>
|
||
</div>
|
||
<div class="pv-plan-bd">
|
||
<div class="pv-plan-meta">
|
||
<span class="pv-plan-meta-item">累计充值 <span>145次</span></span>
|
||
<span class="pv-plan-meta-item">合计 <span>¥43,500</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="pv-plan-ft">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<div class="pv-plan-actions">
|
||
<a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方案4: 500送100 -->
|
||
<div class="pv-plan-card">
|
||
<div class="pv-plan-hd">
|
||
<div class="pv-plan-amount"><span>充</span> ¥500</div>
|
||
<div class="pv-plan-gift">送 <span class="pv-gift-num">¥100</span></div>
|
||
<div class="pv-plan-effective">到账 ¥600</div>
|
||
</div>
|
||
<div class="pv-plan-bd">
|
||
<div class="pv-plan-meta">
|
||
<span class="pv-plan-meta-item">累计充值 <span>92次</span></span>
|
||
<span class="pv-plan-meta-item">合计 <span>¥46,000</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="pv-plan-ft">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<div class="pv-plan-actions">
|
||
<a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方案5: 1000送250 -->
|
||
<div class="pv-plan-card">
|
||
<div class="pv-plan-hd">
|
||
<div class="pv-plan-amount"><span>充</span> ¥1000</div>
|
||
<div class="pv-plan-gift">送 <span class="pv-gift-num">¥250</span></div>
|
||
<div class="pv-plan-effective">到账 ¥1250</div>
|
||
</div>
|
||
<div class="pv-plan-bd">
|
||
<div class="pv-plan-meta">
|
||
<span class="pv-plan-meta-item">累计充值 <span>38次</span></span>
|
||
<span class="pv-plan-meta-item">合计 <span>¥38,000</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="pv-plan-ft">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<div class="pv-plan-actions">
|
||
<a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方案6: 2000送600 (已停用) -->
|
||
<div class="pv-plan-card disabled">
|
||
<div class="pv-plan-hd" style="background:linear-gradient(135deg, #9ca3af 0%, #b0b8c4 100%);">
|
||
<div class="pv-plan-amount"><span>充</span> ¥2000</div>
|
||
<div class="pv-plan-gift">送 <span class="pv-gift-num" style="color:#ddd;">¥600</span></div>
|
||
<div class="pv-plan-effective">到账 ¥2600</div>
|
||
</div>
|
||
<div class="pv-plan-bd">
|
||
<div class="pv-plan-meta">
|
||
<span class="pv-plan-meta-item">累计充值 <span>5次</span></span>
|
||
<span class="pv-plan-meta-item">合计 <span>¥10,000</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="pv-plan-ft">
|
||
<div class="g-toggle" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<div class="pv-plan-actions">
|
||
<a class="g-action" onclick="openPvDrawer('edit')">编辑</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<button class="g-btn g-btn-primary" onclick="openPvDrawer('create')">
|
||
<i data-lucide="plus" style="width:14px;height:14px;"></i>添加充值方案
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ========== TAB 2: 充值记录 ========== -->
|
||
<div id="pvTabRecords" style="display:none;">
|
||
<!-- 工具栏 -->
|
||
<div class="pv-toolbar">
|
||
<input type="date" value="2026-01-01" />
|
||
<span style="color:var(--g-text-muted); font-size:13px;">至</span>
|
||
<input type="date" value="2026-02-12" />
|
||
<input type="text" placeholder="搜索会员姓名/手机号" style="width:200px;" />
|
||
<div style="flex:1;"></div>
|
||
<button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i>导出</button>
|
||
</div>
|
||
|
||
<!-- 表格 -->
|
||
<div class="g-card" style="padding:0;">
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr>
|
||
<th>充值单号</th>
|
||
<th>会员</th>
|
||
<th>手机号</th>
|
||
<th>充值金额</th>
|
||
<th>赠送金额</th>
|
||
<th>到账金额</th>
|
||
<th>支付方式</th>
|
||
<th>充值时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260212001</td>
|
||
<td>张三</td>
|
||
<td>138****6789</td>
|
||
<td style="font-weight:600;">¥500.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥100.00</td>
|
||
<td style="font-weight:600;">¥600.00</td>
|
||
<td><span class="g-tag g-tag-green">微信支付</span></td>
|
||
<td>2026-02-12 14:32</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260212002</td>
|
||
<td>李四</td>
|
||
<td>139****2345</td>
|
||
<td style="font-weight:600;">¥300.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥50.00</td>
|
||
<td style="font-weight:600;">¥350.00</td>
|
||
<td><span class="g-tag g-tag-green">微信支付</span></td>
|
||
<td>2026-02-12 11:18</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260211003</td>
|
||
<td>王五</td>
|
||
<td>136****8901</td>
|
||
<td style="font-weight:600;">¥1000.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥250.00</td>
|
||
<td style="font-weight:600;">¥1250.00</td>
|
||
<td><span class="g-tag g-tag-blue">支付宝</span></td>
|
||
<td>2026-02-11 19:45</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260211004</td>
|
||
<td>赵六</td>
|
||
<td>158****4567</td>
|
||
<td style="font-weight:600;">¥200.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥30.00</td>
|
||
<td style="font-weight:600;">¥230.00</td>
|
||
<td><span class="g-tag g-tag-green">微信支付</span></td>
|
||
<td>2026-02-11 16:22</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260210005</td>
|
||
<td>孙七</td>
|
||
<td>137****3456</td>
|
||
<td style="font-weight:600;">¥100.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥10.00</td>
|
||
<td style="font-weight:600;">¥110.00</td>
|
||
<td><span class="g-tag g-tag-orange">现金</span></td>
|
||
<td>2026-02-10 12:08</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260210006</td>
|
||
<td>周八</td>
|
||
<td>155****7890</td>
|
||
<td style="font-weight:600;">¥500.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥100.00</td>
|
||
<td style="font-weight:600;">¥600.00</td>
|
||
<td><span class="g-tag g-tag-blue">支付宝</span></td>
|
||
<td>2026-02-10 10:35</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260209007</td>
|
||
<td>吴九</td>
|
||
<td>132****1234</td>
|
||
<td style="font-weight:600;">¥300.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥50.00</td>
|
||
<td style="font-weight:600;">¥350.00</td>
|
||
<td><span class="g-tag g-tag-green">微信支付</span></td>
|
||
<td>2026-02-09 20:15</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace; font-size:12px;">CZ20260209008</td>
|
||
<td>郑十</td>
|
||
<td>186****5678</td>
|
||
<td style="font-weight:600;">¥200.00</td>
|
||
<td style="color:var(--g-warning); font-weight:500;">¥30.00</td>
|
||
<td style="font-weight:600;">¥230.00</td>
|
||
<td><span class="g-tag g-tag-green">微信支付</span></td>
|
||
<td>2026-02-09 09:50</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pv-pagination" style="margin-top:16px;">
|
||
<span>共 86 条</span>
|
||
<button class="g-page-btn"><</button>
|
||
<button class="g-page-btn active">1</button>
|
||
<button class="g-page-btn">2</button>
|
||
<button class="g-page-btn">3</button>
|
||
<button class="g-page-btn">...</button>
|
||
<button class="g-page-btn">11</button>
|
||
<button class="g-page-btn">></button>
|
||
<span style="margin-left:8px;">8 条/页</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑充值方案抽屉 -->
|
||
<div class="g-drawer-mask" id="pvDrawerMask" onclick="closePvDrawer()"></div>
|
||
<div class="g-drawer" id="pvDrawer" style="width:480px">
|
||
<div class="g-drawer-hd">
|
||
<div class="g-drawer-title" id="pvDrawerTitle">添加充值方案</div>
|
||
<button class="g-drawer-close" onclick="closePvDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
||
</div>
|
||
<div class="g-drawer-bd">
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">充值金额</label>
|
||
<input class="g-input" id="pvAmountInput" type="number" placeholder="如：100" oninput="calcPvRatio()" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">赠送金额</label>
|
||
<input class="g-input" id="pvGiftInput" type="number" placeholder="如：10" oninput="calcPvRatio()" />
|
||
<div class="pv-ratio-hint" id="pvRatioHint">
|
||
<i data-lucide="info" style="width:13px;height:13px;"></i>
|
||
<span id="pvRatioText">赠送比例 --</span>
|
||
</div>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">排序</label>
|
||
<input class="g-input" type="number" placeholder="数字越小越靠前，如：1" style="width:160px;" />
|
||
<div class="g-hint">数字越小排序越靠前</div>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">启用状态</label>
|
||
<div style="display:flex; align-items:center; gap:10px;">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
|
||
<span style="font-size:13px; color:var(--g-text-secondary);">启用后会员可选择此方案充值</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft">
|
||
<button class="g-btn" onclick="closePvDrawer()">取消</button>
|
||
<button class="g-btn g-btn-primary" onclick="closePvDrawer()">保存</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* Tab 切换 */
|
||
function switchPvTab(el, tab) {
|
||
document.querySelectorAll('.pv-tab').forEach(function(t) { t.classList.remove('active'); });
|
||
el.classList.add('active');
|
||
document.getElementById('pvTabPlans').style.display = tab === 'plans' ? '' : 'none';
|
||
document.getElementById('pvTabRecords').style.display = tab === 'records' ? '' : 'none';
|
||
}
|
||
|
||
/* 抽屉开关 */
|
||
function openPvDrawer(mode) {
|
||
document.getElementById('pvDrawerMask').classList.add('open');
|
||
document.getElementById('pvDrawer').classList.add('open');
|
||
document.getElementById('pvDrawerTitle').textContent = mode === 'edit' ? '编辑充值方案' : '添加充值方案';
|
||
if (window.lucide) lucide.createIcons();
|
||
}
|
||
function closePvDrawer() {
|
||
document.getElementById('pvDrawerMask').classList.remove('open');
|
||
document.getElementById('pvDrawer').classList.remove('open');
|
||
}
|
||
|
||
/* Toggle 开关 */
|
||
function toggleSwitch(el) {
|
||
el.classList.toggle('on');
|
||
}
|
||
|
||
/* 赠送比例自动计算 */
|
||
function calcPvRatio() {
|
||
var amount = parseFloat(document.getElementById('pvAmountInput').value) || 0;
|
||
var gift = parseFloat(document.getElementById('pvGiftInput').value) || 0;
|
||
var text = '赠送比例 --';
|
||
if (amount > 0 && gift > 0) {
|
||
var ratio = ((gift / amount) * 100).toFixed(1);
|
||
text = '赠送比例 ' + ratio + '%';
|
||
}
|
||
document.getElementById('pvRatioText').textContent = text;
|
||
}
|
||
</script>
|