小草代账管家_H5/bills.html · 约 2334 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>收费管理 · 小草代账管家</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>收费管理</h1><span class="right"></span></header>
12<div class="bill-sum">
13 <div class="bs-item"><b>¥18.6万</b><span>本月应收</span></div>
14 <div class="bs-item"><b>¥12.4万</b><span>本月已收</span></div>
15 <div class="bs-item"><b>¥6.2万</b><span>待收款</span></div>
16 <div class="bs-item"><b style="color:#fecaca">3 笔</b><span>逾期</span></div>
17</div>
18<div class="client-tabs">
19 <div class="client-tab sel">全部</div>
20 <div class="client-tab">应收未收</div>
21 <div class="client-tab">已逾期</div>
22 <div class="client-tab">已收款</div>
23</div>
24<div class="section-title">账单明细</div>
25<div id="billList"></div>
26
27
28<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class=" active" href="clients.html"><span class="icon">👥</span>客户</a><a class="" href="contracts.html"><span class="icon">📄</span>合同</a><a class="" href="stats.html"><span class="icon">📊</span>报表</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
29<script src="data.js"></script>
30<script>
31 var bl = document.getElementById('billList');
32 var h = '';
33 var stMap = { over: ['已逾期 5 天', 'over'], wait: ['待收款', 'wait'], paid: ['已收款', 'paid'] };
34 window.DATA.bills.forEach(function (b) {
35 var st = stMap[b.status] || ['待收款', 'wait'];
36 h += '<div class="bill-card"><div class="bc-head">' + b.name + ' <span class="st ' + st[1] + '">' + st[0] + '</span></div>'
37 + '<div class="bc-row"><span>' + b.item + '</span><b>¥' + b.amount + '</b></div>'
38 + '<div class="bc-row"><span>应收日期：' + b.due + '</span></div>'
39 + '<div class="bc-foot"><i>开发票</i>' + (b.status === 'paid' ? '<i class="main">查看回款</i>' : '<i class="main" data-toast="收款成功，已入账">确认收款</i>') + '</div></div>';
40 });
41 bl.innerHTML = h;
42</script>
43<script src="app.js"></script>
44</body>
45</html>