298 lines
13 KiB
HTML
298 lines
13 KiB
HTML
<!-- 到账查询 — fin-settlement.html -->
|
||
<style>
|
||
/* ---- page-private: fst- prefix ---- */
|
||
.fst-stats {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
|
||
}
|
||
.fst-stat-card {
|
||
background: #fff; border-radius: var(--g-radius); padding: 18px 20px;
|
||
border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm);
|
||
transition: box-shadow var(--g-transition);
|
||
}
|
||
.fst-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
|
||
.fst-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
|
||
.fst-stat-label i { width: 16px; height: 16px; }
|
||
.fst-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
|
||
|
||
/* 账户信息条 */
|
||
.fst-account-bar {
|
||
display: flex; align-items: center; gap: 16px; padding: 14px 20px; margin-bottom: 16px;
|
||
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
|
||
box-shadow: var(--g-shadow-sm); font-size: 13px; color: var(--g-text-secondary);
|
||
}
|
||
.fst-account-bar i { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
|
||
.fst-account-bar strong { color: var(--g-text); font-weight: 600; }
|
||
.fst-account-sep { width: 1px; height: 20px; background: var(--g-border); }
|
||
|
||
.fst-toolbar {
|
||
background: #fff; border-radius: var(--g-radius); padding: 14px 18px;
|
||
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
|
||
box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
|
||
}
|
||
.fst-toolbar .g-input,
|
||
.fst-toolbar .g-select { height: 32px; font-size: 13px; }
|
||
.fst-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
|
||
|
||
.fst-table-card {
|
||
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
|
||
overflow: hidden; margin-bottom: 16px;
|
||
}
|
||
.fst-table-card .g-table th { white-space: nowrap; }
|
||
.fst-table-card .g-table td { vertical-align: middle; font-size: 13px; }
|
||
.fst-amount { font-weight: 600; white-space: nowrap; }
|
||
|
||
/* 展开明细行 */
|
||
.fst-detail-row { display: none; }
|
||
.fst-detail-row.open { display: table-row; }
|
||
.fst-detail-row td { padding: 0 !important; background: #f8f9fb; }
|
||
.fst-detail-wrap { padding: 14px 20px 14px 40px; }
|
||
.fst-detail-title { font-size: 13px; font-weight: 600; color: var(--g-text); margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--primary); }
|
||
.fst-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
||
.fst-mini-table th {
|
||
text-align: left; padding: 8px 10px; font-weight: 500;
|
||
color: var(--g-text-muted); background: #fff; border-bottom: 1px solid var(--g-border);
|
||
}
|
||
.fst-mini-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: var(--g-text); }
|
||
.fst-mini-table tr:last-child td { border-bottom: none; }
|
||
|
||
.fst-channel-icon { display: inline-flex; align-items: center; gap: 6px; }
|
||
.fst-channel-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||
</style>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="fst-stats">
|
||
<div class="fst-stat-card">
|
||
<div class="fst-stat-label"><i data-lucide="circle-check"></i>今日到账</div>
|
||
<div class="fst-stat-val" style="color:var(--g-success);">¥4,670</div>
|
||
</div>
|
||
<div class="fst-stat-card">
|
||
<div class="fst-stat-label"><i data-lucide="calendar-minus"></i>昨日到账</div>
|
||
<div class="fst-stat-val">¥4,940</div>
|
||
</div>
|
||
<div class="fst-stat-card">
|
||
<div class="fst-stat-label"><i data-lucide="calendar-check"></i>本月累计到账</div>
|
||
<div class="fst-stat-val">¥42,800</div>
|
||
</div>
|
||
<div class="fst-stat-card">
|
||
<div class="fst-stat-label"><i data-lucide="receipt"></i>本月交易笔数</div>
|
||
<div class="fst-stat-val">1,286</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 结算账户信息 -->
|
||
<div class="fst-account-bar">
|
||
<i data-lucide="landmark"></i>
|
||
<span>结算账户：<strong>招商银行 ****1234</strong></span>
|
||
<span class="fst-account-sep"></span>
|
||
<span>微信商户号：<strong>15xxxxxxxx</strong></span>
|
||
<span class="fst-account-sep"></span>
|
||
<span>支付宝PID：<strong>2088xxxxxxxxxxxx</strong></span>
|
||
<span class="fst-account-sep"></span>
|
||
<span>结算周期：<strong>T+1 自动到账</strong></span>
|
||
</div>
|
||
|
||
<!-- 筛选工具栏 -->
|
||
<div class="fst-toolbar">
|
||
<input type="date" class="g-input" style="width:145px;" value="2026-02-01">
|
||
<span class="fst-date-sep">~</span>
|
||
<input type="date" class="g-input" style="width:145px;" value="2026-02-12">
|
||
<select class="g-select" style="width:130px;">
|
||
<option>全部渠道</option>
|
||
<option>微信支付</option>
|
||
<option>支付宝</option>
|
||
</select>
|
||
<div style="flex:1;"></div>
|
||
<button class="g-btn g-btn-sm"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
|
||
</div>
|
||
|
||
<!-- 到账记录表格 -->
|
||
<div class="fst-table-card">
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:36px;"></th>
|
||
<th>到账日期</th>
|
||
<th>支付渠道</th>
|
||
<th>交易笔数</th>
|
||
<th style="text-align:right;">到账金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 1 -->
|
||
<tr>
|
||
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d1')"></i></td>
|
||
<td>2026-02-12</td>
|
||
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
|
||
<td>86</td>
|
||
<td style="text-align:right;" class="fst-amount">¥3,420.00</td>
|
||
</tr>
|
||
<tr class="fst-detail-row" id="fst-d1">
|
||
<td colspan="5">
|
||
<div class="fst-detail-wrap">
|
||
<div class="fst-detail-title">交易明细（部分）</div>
|
||
<table class="fst-mini-table">
|
||
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>ORD20260212001</td><td>¥58.00</td><td>12:35</td></tr>
|
||
<tr><td>ORD20260212005</td><td>¥126.00</td><td>11:22</td></tr>
|
||
<tr><td>ORD20260212011</td><td>¥42.50</td><td>10:08</td></tr>
|
||
<tr><td>ORD20260212015</td><td>¥89.00</td><td>09:15</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 2 -->
|
||
<tr>
|
||
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d2')"></i></td>
|
||
<td>2026-02-12</td>
|
||
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
|
||
<td>32</td>
|
||
<td style="text-align:right;" class="fst-amount">¥1,250.00</td>
|
||
</tr>
|
||
<tr class="fst-detail-row" id="fst-d2">
|
||
<td colspan="5">
|
||
<div class="fst-detail-wrap">
|
||
<div class="fst-detail-title">交易明细（部分）</div>
|
||
<table class="fst-mini-table">
|
||
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>ORD20260212003</td><td>¥126.00</td><td>11:22</td></tr>
|
||
<tr><td>ORD20260212009</td><td>¥68.00</td><td>10:30</td></tr>
|
||
<tr><td>ORD20260212014</td><td>¥35.50</td><td>09:45</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 3 -->
|
||
<tr>
|
||
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d3')"></i></td>
|
||
<td>2026-02-11</td>
|
||
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
|
||
<td>92</td>
|
||
<td style="text-align:right;" class="fst-amount">¥3,860.00</td>
|
||
</tr>
|
||
<tr class="fst-detail-row" id="fst-d3">
|
||
<td colspan="5">
|
||
<div class="fst-detail-wrap">
|
||
<div class="fst-detail-title">交易明细（部分）</div>
|
||
<table class="fst-mini-table">
|
||
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>ORD20260211042</td><td>¥89.00</td><td>20:15</td></tr>
|
||
<tr><td>ORD20260211038</td><td>¥56.00</td><td>19:30</td></tr>
|
||
<tr><td>ORD20260211035</td><td>¥72.00</td><td>18:45</td></tr>
|
||
<tr><td>ORD20260211031</td><td>¥38.50</td><td>17:20</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 4 -->
|
||
<tr>
|
||
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d4')"></i></td>
|
||
<td>2026-02-11</td>
|
||
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
|
||
<td>28</td>
|
||
<td style="text-align:right;" class="fst-amount">¥1,080.00</td>
|
||
</tr>
|
||
<tr class="fst-detail-row" id="fst-d4">
|
||
<td colspan="5">
|
||
<div class="fst-detail-wrap">
|
||
<div class="fst-detail-title">交易明细（部分）</div>
|
||
<table class="fst-mini-table">
|
||
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>ORD20260211040</td><td>¥45.00</td><td>19:50</td></tr>
|
||
<tr><td>ORD20260211036</td><td>¥62.00</td><td>18:10</td></tr>
|
||
<tr><td>ORD20260211033</td><td>¥33.00</td><td>16:40</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 5 -->
|
||
<tr>
|
||
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d5')"></i></td>
|
||
<td>2026-02-10</td>
|
||
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
|
||
<td>78</td>
|
||
<td style="text-align:right;" class="fst-amount">¥3,150.00</td>
|
||
</tr>
|
||
<tr class="fst-detail-row" id="fst-d5">
|
||
<td colspan="5">
|
||
<div class="fst-detail-wrap">
|
||
<div class="fst-detail-title">交易明细（部分）</div>
|
||
<table class="fst-mini-table">
|
||
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>ORD20260210028</td><td>¥52.00</td><td>20:30</td></tr>
|
||
<tr><td>ORD20260210025</td><td>¥41.50</td><td>19:15</td></tr>
|
||
<tr><td>ORD20260210022</td><td>¥67.00</td><td>18:00</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 6 -->
|
||
<tr>
|
||
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d6')"></i></td>
|
||
<td>2026-02-10</td>
|
||
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
|
||
<td>25</td>
|
||
<td style="text-align:right;" class="fst-amount">¥960.00</td>
|
||
</tr>
|
||
<tr class="fst-detail-row" id="fst-d6">
|
||
<td colspan="5">
|
||
<div class="fst-detail-wrap">
|
||
<div class="fst-detail-title">交易明细（部分）</div>
|
||
<table class="fst-mini-table">
|
||
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>ORD20260210026</td><td>¥48.00</td><td>19:40</td></tr>
|
||
<tr><td>ORD20260210023</td><td>¥55.00</td><td>17:55</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="g-pagination">
|
||
<span>共 68 条</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">></button>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleFstDetail(iconEl, rowId) {
|
||
var row = document.getElementById(rowId);
|
||
var isOpen = row.classList.contains('open');
|
||
row.classList.toggle('open');
|
||
var parentTr = row.previousElementSibling;
|
||
var icon = parentTr.querySelector('td:first-child i');
|
||
if (icon) {
|
||
icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(90deg)';
|
||
}
|
||
}
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|