msumshk/TakeoutSaaS.Prototypes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init project with pages and index

Browse Source
This commit is contained in:
MSuMshk
2026-02-15 22:50:30 +08:00
commit f407288701
79 changed files with 25642 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

463
pages/mbr-prepaid.html Normal file
View File

@@ -0,0 +1,463 @@
<!-- 储值卡页 -->
<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">&lt;</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">&gt;</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>