256 lines
11 KiB
HTML
256 lines
11 KiB
HTML
<!-- 交易流水 — fin-transactions.html -->
|
|
<style>
|
|
/* ---- page-private: ft- prefix ---- */
|
|
.ft-stats {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
|
|
}
|
|
.ft-stat-card {
|
|
background: #fff; border-radius: var(--g-radius); padding: 18px 20px;
|
|
box-shadow: var(--g-shadow-sm); transition: var(--g-transition);
|
|
}
|
|
.ft-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
|
|
.ft-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
|
|
.ft-stat-label i { width: 16px; height: 16px; }
|
|
.ft-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
|
|
.ft-stat-val.green { color: var(--g-success); }
|
|
.ft-stat-val.red { color: var(--g-danger); }
|
|
.ft-stat-val.orange { color: var(--g-warning); }
|
|
|
|
.ft-toolbar {
|
|
background: #fff; border-radius: var(--g-radius); padding: 14px 18px;
|
|
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
|
|
box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border); margin-bottom: 16px;
|
|
}
|
|
.ft-toolbar select,
|
|
.ft-toolbar input {
|
|
height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: var(--g-radius-sm, 6px);
|
|
font-size: 13px; outline: none; transition: var(--g-transition); background: #fff; color: var(--g-text);
|
|
}
|
|
.ft-toolbar select:focus,
|
|
.ft-toolbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.ft-toolbar select { min-width: 110px; }
|
|
.ft-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
|
|
.ft-search-wrap { position: relative; width: 180px; }
|
|
.ft-search-wrap input { padding-left: 30px; width: 100%; }
|
|
.ft-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--g-text-muted); pointer-events: none; }
|
|
.ft-toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
|
|
|
.ft-table-card {
|
|
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
|
|
overflow: hidden;
|
|
}
|
|
.ft-table-card .g-table th { white-space: nowrap; }
|
|
.ft-table-card .g-table td { vertical-align: middle; font-size: 13px; }
|
|
.ft-mono { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 12px; color: var(--g-text-secondary); }
|
|
.ft-amount { font-weight: 600; white-space: nowrap; }
|
|
.ft-amount.income { color: var(--g-success); }
|
|
.ft-amount.expense { color: var(--g-danger); }
|
|
.ft-amount.neutral { color: var(--g-text); }
|
|
.ft-time { font-size: 12px; color: var(--g-text-muted); white-space: nowrap; }
|
|
|
|
/* 快捷日期 */
|
|
.ft-quick-dates { display:flex; gap:4px; }
|
|
.ft-quick-dates button {
|
|
padding:4px 10px; font-size:12px; border:1px solid #e5e7eb; border-radius:4px;
|
|
background:#fff; color:var(--g-text-secondary); cursor:pointer; transition:all var(--g-transition);
|
|
}
|
|
.ft-quick-dates button:hover { border-color:var(--primary); color:var(--primary); }
|
|
.ft-quick-dates button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
|
|
|
|
/* 汇总行 */
|
|
.ft-summary td { background:#f8f9fb; font-weight:600; font-size:13px; color:var(--g-text); border-top:2px solid #e5e7eb; }
|
|
.ft-remark { font-size:12px; color:var(--g-text-muted); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
</style>
|
|
|
|
<!-- 汇总指标 -->
|
|
<div class="ft-stats">
|
|
<div class="ft-stat-card">
|
|
<div class="ft-stat-label"><i data-lucide="trending-up"></i>总收入</div>
|
|
<div class="ft-stat-val green">¥45,680</div>
|
|
</div>
|
|
<div class="ft-stat-card">
|
|
<div class="ft-stat-label"><i data-lucide="undo-2"></i>总退款</div>
|
|
<div class="ft-stat-val red">¥3,200</div>
|
|
</div>
|
|
<div class="ft-stat-card">
|
|
<div class="ft-stat-label"><i data-lucide="receipt"></i>交易笔数</div>
|
|
<div class="ft-stat-val">256</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选工具栏 -->
|
|
<div class="ft-toolbar">
|
|
<input type="date" value="2026-02-01">
|
|
<span class="ft-date-sep">至</span>
|
|
<input type="date" value="2026-02-12">
|
|
<div class="ft-quick-dates">
|
|
<button onclick="ftQuickDate(this,'today')" class="active">今天</button>
|
|
<button onclick="ftQuickDate(this,'yesterday')">昨天</button>
|
|
<button onclick="ftQuickDate(this,'7d')">近7天</button>
|
|
<button onclick="ftQuickDate(this,'30d')">近30天</button>
|
|
<button onclick="ftQuickDate(this,'month')">本月</button>
|
|
</div>
|
|
<select>
|
|
<option>全部类型</option>
|
|
<option>收入</option>
|
|
<option>退款</option>
|
|
<option>储值充值</option>
|
|
<option>积分抵扣</option>
|
|
</select>
|
|
<select>
|
|
<option>全部渠道</option>
|
|
<option>外卖</option>
|
|
<option>自提</option>
|
|
<option>堂食</option>
|
|
</select>
|
|
<select>
|
|
<option>全部支付方式</option>
|
|
<option>微信</option>
|
|
<option>支付宝</option>
|
|
<option>现金</option>
|
|
<option>储值余额</option>
|
|
</select>
|
|
<div class="ft-search-wrap">
|
|
<i data-lucide="search" style="width:14px;height:14px;"></i>
|
|
<input type="text" placeholder="搜索流水号/订单号">
|
|
</div>
|
|
<div class="ft-toolbar-right">
|
|
<button class="g-btn g-btn-sm" onclick="this.textContent='导出中…';setTimeout(()=>{this.innerHTML='<i data-lucide=\'download\' style=\'width:14px;height:14px;margin-right:4px;vertical-align:-2px;\'></i>已导出';lucide.createIcons();setTimeout(()=>{this.innerHTML='<i data-lucide=\'download\' style=\'width:14px;height:14px;margin-right:4px;vertical-align:-2px;\'></i>导出';lucide.createIcons();},1500);},800)"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易流水表格 -->
|
|
<div class="ft-table-card">
|
|
<table class="g-table">
|
|
<thead>
|
|
<tr>
|
|
<th>流水号</th>
|
|
<th>关联订单</th>
|
|
<th>类型</th>
|
|
<th>渠道</th>
|
|
<th>支付方式</th>
|
|
<th style="text-align:right;">金额</th>
|
|
<th>交易时间</th>
|
|
<th>备注</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212001</td>
|
|
<td><a class="g-action ft-mono">#ORD20260212001</a></td>
|
|
<td><span class="g-tag g-tag-green">收入</span></td>
|
|
<td>外卖</td>
|
|
<td>微信</td>
|
|
<td style="text-align:right;" class="ft-amount income">+¥58.00</td>
|
|
<td class="ft-time">2026-02-12 12:35:00</td>
|
|
<td class="ft-remark" title="外卖平台订单">外卖平台订单</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212002</td>
|
|
<td><a class="g-action ft-mono">#ORD20260212003</a></td>
|
|
<td><span class="g-tag g-tag-red">退款</span></td>
|
|
<td>外卖</td>
|
|
<td>微信</td>
|
|
<td style="text-align:right;" class="ft-amount expense">-¥32.00</td>
|
|
<td class="ft-time">2026-02-12 11:50:22</td>
|
|
<td class="ft-remark" title="顾客申请退款-菜品不符">顾客申请退款-菜品不符</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212003</td>
|
|
<td><a class="g-action ft-mono">#ORD20260212005</a></td>
|
|
<td><span class="g-tag g-tag-green">收入</span></td>
|
|
<td>堂食</td>
|
|
<td>支付宝</td>
|
|
<td style="text-align:right;" class="ft-amount income">+¥126.00</td>
|
|
<td class="ft-time">2026-02-12 11:22:10</td>
|
|
<td class="ft-remark">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212004</td>
|
|
<td class="ft-mono">—</td>
|
|
<td><span class="g-tag g-tag-blue">储值充值</span></td>
|
|
<td>—</td>
|
|
<td>微信</td>
|
|
<td style="text-align:right;" class="ft-amount income">+¥500.00</td>
|
|
<td class="ft-time">2026-02-12 10:45:33</td>
|
|
<td class="ft-remark" title="会员张女士充值">会员张女士充值</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212005</td>
|
|
<td><a class="g-action ft-mono">#ORD20260212008</a></td>
|
|
<td><span class="g-tag g-tag-orange">积分抵扣</span></td>
|
|
<td>自提</td>
|
|
<td>储值余额</td>
|
|
<td style="text-align:right;" class="ft-amount income">+¥45.00</td>
|
|
<td class="ft-time">2026-02-12 10:12:05</td>
|
|
<td class="ft-remark" title="抵扣200积分">抵扣200积分</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212006</td>
|
|
<td><a class="g-action ft-mono">#ORD20260212010</a></td>
|
|
<td><span class="g-tag g-tag-green">收入</span></td>
|
|
<td>自提</td>
|
|
<td>现金</td>
|
|
<td style="text-align:right;" class="ft-amount income">+¥28.00</td>
|
|
<td class="ft-time">2026-02-12 09:38:17</td>
|
|
<td class="ft-remark">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ft-mono">TXN20260212007</td>
|
|
<td><a class="g-action ft-mono">#ORD20260211042</a></td>
|
|
<td><span class="g-tag g-tag-green">收入</span></td>
|
|
<td>堂食</td>
|
|
<td>微信</td>
|
|
<td style="text-align:right;" class="ft-amount income">+¥89.00</td>
|
|
<td class="ft-time">2026-02-11 20:15:44</td>
|
|
<td class="ft-remark">—</td>
|
|
</tr>
|
|
<!-- 汇总行 -->
|
|
<tr class="ft-summary">
|
|
<td colspan="5" style="text-align:right;">本页合计</td>
|
|
<td style="text-align:right;">收入 ¥846.00 / 退款 ¥32.00</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="g-pagination">
|
|
<span>共 256 条</span>
|
|
<select style="height:28px;padding:0 6px;border:1px solid #e5e7eb;border-radius:4px;font-size:12px;margin-right:4px;">
|
|
<option>20条/页</option>
|
|
<option>50条/页</option>
|
|
<option>100条/页</option>
|
|
</select>
|
|
<button class="g-page-btn" disabled><</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">4</button>
|
|
<button class="g-page-btn">5</button>
|
|
<button class="g-page-btn">></button>
|
|
</div>
|
|
|
|
<script>
|
|
/* 快捷日期切换 */
|
|
function ftQuickDate(btn, range) {
|
|
btn.closest('.ft-quick-dates').querySelectorAll('button').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
var today = new Date('2026-02-12');
|
|
var inputs = document.querySelectorAll('.ft-toolbar input[type="date"]');
|
|
var fmt = d => d.toISOString().slice(0,10);
|
|
var start = today, end = today;
|
|
if (range === 'today') { start = end = today; }
|
|
else if (range === 'yesterday') { start = end = new Date(today - 86400000); }
|
|
else if (range === '7d') { start = new Date(today - 6 * 86400000); }
|
|
else if (range === '30d') { start = new Date(today - 29 * 86400000); }
|
|
else if (range === 'month') { start = new Date('2026-02-01'); }
|
|
inputs[0].value = fmt(start);
|
|
inputs[1].value = fmt(end);
|
|
}
|
|
|
|
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
|
</script>
|