r110/bills.html · 约 7272 字符
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,viewport-fit=cover">
6<meta name="theme-color" content="#0f9d76">
7<title>账单流水 · 家有账家庭记账工具</title>
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="bills">
11
12<div class="navbar"><a class="bk" href="index.html">‹</a><div class="tt">账单流水</div><div class="rt" id="viewBtn">📅 日历</div></div>
13
14<div class="card tight" style="margin-top:12px">
15 <div style="display:flex;align-items:center;gap:10px">
16 <span style="font-size:17px;color:var(--text-mute)" data-tip="演示版：仅提供 2026 年 8 月数据">‹</span>
17 <div>
18 <div style="font-size:16px;font-weight:800">2026 年 8 月</div>
19 <div class="fz11 muted">共 18 笔 · 记账 6 天</div>
20 </div>
21 <span style="font-size:17px;color:#d3ddd9">›</span>
22 <div style="margin-left:auto;text-align:right">
23 <div class="fz11 muted">支出 <b class="pay num">12,387.20</b></div>
24 <div class="fz11 muted" style="margin-top:2px">收入 <b class="inc num">32,442.30</b></div>
25 </div>
26 </div>
27 <div class="divider"></div>
28 <div style="display:flex;align-items:center">
29 <div class="fz12 muted">本月结余</div>
30 <div class="num" style="margin-left:auto;font-size:17px;font-weight:800;color:var(--brand-d)">+20,055.10</div>
31 </div>
32</div>
33
34<div class="chips" id="fltChips" style="margin-top:10px">
35 <span class="on" data-v="all">全部</span><span data-v="pay">支出</span><span data-v="inc">收入</span>
36 <span data-v="m1">我</span><span data-v="m2">老公</span><span data-v="m3">妈妈</span><span data-v="m4">女儿</span>
37 <span data-v="tag">有标签</span>
38</div>
39
40<div id="listView"></div>
41
42<div id="calView" style="display:none">
43 <div class="card">
44 <div class="ttl">📅 8 月消费日历 <span class="rt">颜色越深支出越多</span></div>
45 <div class="cal" id="calBox"></div>
46 <div class="divider"></div>
47 <div style="display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-mute)">
48 <span>少</span>
49 <i style="width:16px;height:11px;border-radius:3px;background:#e3f6ef;display:inline-block"></i>
50 <i style="width:16px;height:11px;border-radius:3px;background:#c4ecdd;display:inline-block"></i>
51 <i style="width:16px;height:11px;border-radius:3px;background:#8fdcc2;display:inline-block"></i>
52 <i style="width:16px;height:11px;border-radius:3px;background:#0f9d76;display:inline-block"></i>
53 <span>多</span>
54 <span style="margin-left:auto">🟠 今天</span>
55 </div>
56 </div>
57 <div class="card">
58 <div class="ttl">📌 本月之最</div>
59 <div class="list">
60 <div class="it"><div class="ico" style="background:#9254de1a">🏠</div><div class="mn"><div class="n">单笔最大支出</div><div class="d">房贷月供 · 8 月 3 日</div></div><div class="amt num pay">-6,820.00</div></div>
61 <div class="it"><div class="ico" style="background:#ff7a451a">🍜</div><div class="mn"><div class="n">笔数最多分类</div><div class="d">餐饮 · 共 7 笔</div></div><div class="amt num pay">-2,186.50</div></div>
62 <div class="it"><div class="ico" style="background:#0f9d761a">💰</div><div class="mn"><div class="n">最大一笔收入</div><div class="d">8 月工资 · 我</div></div><div class="amt num inc">+16,800.00</div></div>
63 </div>
64 </div>
65</div>
66
67<nav class="tabbar">
68<a href="index.html" class=""><span class="ti">🏠</span>首页</a>
69<a href="bills.html" class="on"><span class="ti">📒</span>账单</a>
70<a href="add.html" class="fab"><span class="fi">＋</span><span class="fl">记一笔</span></a>
71<a href="chart.html" class=""><span class="ti">📊</span>图表</a>
72<a href="me.html" class=""><span class="ti">👤</span>我的</a>
73</nav>
74<div class="mask" id="mask"></div>
75<div class="toast" id="toast"></div>
76<script src="data.js"></script>
77<script src="app.js"></script>
78<script>
79
80function group(list) {
81 var map = {}, order = [];
82 list.forEach(function (b) { if (!map[b.date]) { map[b.date] = []; order.push(b.date); } map[b.date].push(b); });
83 order.sort().reverse();
84 return order.map(function (d) { return { d: d, arr: map[d] }; });
85}
86var WK = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
87function dlabel(d) {
88 var p = d.split('-'), dt = new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
89 var s = Number(p[1]) + ' 月 ' + Number(p[2]) + ' 日 ' + WK[dt.getDay()];
90 if (d === '2026-08-06') s = '今天 ' + s;
91 return s;
92}
93function render(f) {
94 var list = allBills().filter(function (b) {
95 if (f === 'all') return true;
96 if (f === 'pay' || f === 'inc') return b.t === f;
97 if (f === 'tag') return b.tags && b.tags.length > 0;
98 return b.mem === f;
99 });
100 if (!list.length) { $('#listView').innerHTML = '<div class="empty"><div class="e">🧾</div><div>该筛选条件下暂无账单</div></div>'; return; }
101 $('#listView').innerHTML = group(list).map(function (g) {
102 var p = 0, i = 0;
103 g.arr.forEach(function (b) { if (b.t === 'pay') p += b.amt; else i += b.amt; });
104 return '<div class="daygrp"><div class="dh"><b>' + dlabel(g.d) + '</b>' +
105 '<span class="r">支出 ' + money(p) + (i ? ' · 收入 ' + money(i) : '') + '</span></div>' +
106 '<div class="list">' + g.arr.map(function (b) {
107 var c = catOf(b.cat), a = accOf(b.acc), m = memOf(b.mem);
108 var tg = (b.tags || []).map(function (t) { return '<span class="tag g" style="margin-left:5px">' + t + '</span>'; }).join('');
109 return '<a class="it" href="detail.html?id=' + b.id + '">' +
110 '<div class="ico" style="background:' + c.c + '1a">' + c.e + '</div>' +
111 '<div class="mn"><div class="n">' + b.n + tg + '</div>' +
112 '<div class="d">' + c.n + ' · ' + a.n + ' · ' + m.n + '</div></div>' +
113 '<div class="amt num ' + (b.t === 'pay' ? 'pay' : 'inc') + '">' + money(b.amt, b.t) +
114 '<small>' + b.time + '</small></div></a>';
115 }).join('') + '</div></div>';
116 }).join('');
117}
118segGroup('#fltChips', function (v) { render(v); });
119render('all');
120
121var cal = ['<div class="w">日</div><div class="w">一</div><div class="w">二</div><div class="w">三</div><div class="w">四</div><div class="w">五</div><div class="w">六</div>'];
122for (var i = 0; i < 6; i++) cal.push('<div class="d em"></div>');
123for (var d = 1; d <= 31; d++) {
124 var v = DAYPAY[d - 1] || 0, lv = v === 0 ? '' : v < 500 ? ' l1' : v < 1500 ? ' l2' : v < 3000 ? ' l3' : ' l4';
125 cal.push('<div class="d' + lv + (d === 6 ? ' today' : '') + '"><b>' + d + '</b>' +
126 (v ? '<span class="m">' + (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v) + '</span>' : '') + '</div>');
127}
128$('#calBox').innerHTML = cal.join('');
129
130var showCal = false;
131$('#viewBtn').addEventListener('click', function () {
132 showCal = !showCal;
133 $('#listView').style.display = showCal ? 'none' : 'block';
134 $('#calView').style.display = showCal ? 'block' : 'none';
135 $('#viewBtn').textContent = showCal ? '📋 列表' : '📅 日历';
136});
137
138</script>
139</body>
140</html>
141