r110/family.html · 约 8218 字符
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="family">
11
12<div class="navbar grn"><a class="bk" href="index.html">‹</a><div class="tt">家庭账本</div><div class="rt" data-sheet="#shInv">邀请成员</div></div>
13
14<div class="sec"><h2>我的账本<small>4 本</small></h2><span class="more" data-tip="演示版：新建账本开发中">＋ 新建</span></div>
15<div class="card" id="bookBox"></div>
16
17<div class="card">
18 <div class="ttl">👨👩👧👦 家庭成员 <span class="rt">4 人 · 本月共记 174 笔</span></div>
19 <div class="list" id="memList"></div>
20</div>
21
22<div class="card">
23 <div class="ttl">🏅 本月消费排行</div>
24 <div id="rankBox"></div>
25 <div class="divider"></div>
26 <div class="grid3">
27 <div style="text-align:center"><div class="fz11 muted">家庭总支出</div><div class="num pay" style="font-weight:800">¥10,372</div></div>
28 <div style="text-align:center"><div class="fz11 muted">人均支出</div><div class="num" style="font-weight:800">¥2,593</div></div>
29 <div style="text-align:center"><div class="fz11 muted">记账最勤</div><div style="font-weight:800">🙋 我 68 笔</div></div>
30 </div>
31</div>
32
33<div class="card">
34 <div class="ttl">🕘 家庭动态 <span class="rt">实时同步</span></div>
35 <div id="feedBox"></div>
36</div>
37
38<div class="card">
39 <div class="ttl">🧮 AA 分摊 <span class="rt">本月 2 笔待结</span></div>
40 <div class="list">
41 <div class="it"><div class="ico" style="background:#ff7a451a">🍜</div>
42 <div class="mn"><div class="n">海底捞家庭聚餐</div><div class="d">老公垫付 · 4 人均摊 ¥121.50</div></div>
43 <button class="btn sm pri" data-tip="演示版：已提醒成员结算">去结算</button></div>
44 <div class="it"><div class="ico" style="background:#4096ff1a">✈️</div>
45 <div class="mn"><div class="n">端午周边游住宿</div><div class="d">我垫付 · 2 人均摊 ¥640.00</div></div>
46 <button class="btn sm" data-tip="演示版：分摊明细开发中">看明细</button></div>
47 </div>
48</div>
49
50<div class="card">
51 <div class="ttl">🔐 权限与隐私</div>
52 <div class="frm">
53 <div class="fi"><div class="lb">账本可见</div><div class="vl">仅家庭成员</div><span class="ar" data-tip="演示版：可见范围可调">›</span></div>
54 <div class="fi"><div class="lb">金额脱敏</div><div class="vl">对「仅记账」成员隐藏总额</div><span class="ar" data-tip="演示版：脱敏规则可配置">›</span></div>
55 <div class="fi"><div class="lb">删除权限</div><div class="vl">仅管理员可删除他人账单</div><span class="ar" data-tip="演示版：权限矩阵开发中">›</span></div>
56 <div class="fi"><div class="lb">数据同步</div><div class="vl">实时同步 · 上次 19:41</div><span class="ar" data-tip="演示版：本地演示无云端">›</span></div>
57 </div>
58</div>
59<div style="height:8px"></div>
60
61<div class="sheet" id="shInv">
62 <div class="sh"><h3>邀请家人加入</h3><span class="x" data-close>✕</span></div>
63 <div style="text-align:center;padding:6px 0 12px">
64 <div style="width:132px;height:132px;margin:0 auto;border-radius:16px;background:linear-gradient(135deg,#e3f6ef,#c4ecdd);display:flex;align-items:center;justify-content:center;font-size:56px">📱</div>
65 <div class="fz12 muted" style="margin-top:9px">让家人扫码，或使用下方邀请码加入</div>
66 <div style="font-size:26px;font-weight:800;letter-spacing:6px;color:var(--brand-d);margin-top:7px" class="num">JYZ-8842</div>
67 </div>
68 <div class="frm">
69 <div class="fi"><div class="lb">加入身份</div><div class="vl">成员（记账 + 查看）</div></div>
70 <div class="fi"><div class="lb">有效期</div><div class="vl">7 天内有效</div></div>
71 </div>
72 <div style="display:flex;gap:9px;margin-top:13px">
73 <button class="btn" style="flex:1" data-tip="演示版：邀请码已复制">复制邀请码</button>
74 <button class="btn pri" style="flex:1" data-tip="演示版：分享需真机微信环境">分享给家人</button>
75 </div>
76</div>
77
78
79<div class="mask" id="mask"></div>
80<div class="toast" id="toast"></div>
81<script src="data.js"></script>
82<script src="app.js"></script>
83<script>
84
85$('#bookBox').innerHTML = BOOKS.map(function (b) {
86 return '<div style="display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)" data-b="' + b.id + '">' +
87 '<div class="ico" style="background:' + (b.on ? 'var(--brand-l)' : 'var(--surface2)') + '">' + b.e + '</div>' +
88 '<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">' + b.n +
89 (b.on ? ' <span class="tag g">当前</span>' : '') + '</div>' +
90 '<div class="fz11 muted" style="margin-top:2px">' + b.desc + '</div></div>' +
91 '<span class="tag' + (b.on ? ' g' : '') + '">' + (b.on ? '使用中' : '切换') + '</span></div>';
92}).join('');
93$$('#bookBox [data-b]').forEach(function (el) {
94 el.addEventListener('click', function () {
95 var id = el.getAttribute('data-b');
96 BOOKS.forEach(function (b) { b.on = (b.id === id); });
97 toast('已切换到「' + BOOKS.filter(function (b) { return b.on; })[0].n + '」');
98 setTimeout(function () { location.reload(); }, 700);
99 });
100});
101
102$('#memList').innerHTML = MEMBERS.map(function (m) {
103 return '<div class="it"><div class="avt" style="background:' + m.c + '">' + m.e + '</div>' +
104 '<div class="mn"><div class="n">' + m.n +
105 (m.role === '管理员' ? ' <span class="tag a">管理员</span>' : '') + '</div>' +
106 '<div class="d">' + m.perm + ' · 本月 ' + m.cnt + ' 笔</div></div>' +
107 '<div class="amt num pay" style="font-size:14px">' + money(m.month) + '</div></div>';
108}).join('');
109
110var mx = Math.max.apply(null, MEMBERS.map(function (m) { return m.month; }));
111var sorted = MEMBERS.slice().sort(function (a, b) { return b.month - a.month; });
112$('#rankBox').innerHTML = sorted.map(function (m, i) {
113 var medal = ['🥇', '🥈', '🥉', '4'][i];
114 return '<div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">' +
115 '<div style="width:18px;text-align:center;font-size:13px">' + medal + '</div>' +
116 '<div class="avt" style="width:28px;height:28px;font-size:14px;background:' + m.c + '">' + m.e + '</div>' +
117 '<div style="flex:1;min-width:0">' +
118 '<div style="display:flex;font-size:13px;font-weight:700"><span>' + m.n + '</span>' +
119 '<span class="num" style="margin-left:auto">¥' + money0(m.month) + '</span></div>' +
120 '<div class="bar thin" style="margin-top:5px"><i style="width:' + (m.month / mx * 100).toFixed(0) + '%;background:' + m.c + '"></i></div>' +
121 '</div></div>';
122}).join('');
123
124$('#feedBox').innerHTML = FEEDS.map(function (f, i) {
125 var m = memOf(f.mem), last = i === FEEDS.length - 1;
126 return '<div style="display:flex;gap:11px">' +
127 '<div style="display:flex;flex-direction:column;align-items:center;flex:none">' +
128 '<div class="avt" style="width:28px;height:28px;font-size:14px;background:' + m.c + '">' + m.e + '</div>' +
129 (last ? '' : '<div style="width:2px;flex:1;background:var(--border);margin:3px 0"></div>') + '</div>' +
130 '<div style="flex:1;min-width:0;padding-bottom:' + (last ? '0' : '13px') + '">' +
131 '<div style="font-size:13px"><b>' + m.n + '</b> <span class="muted">' + f.act + '</span></div>' +
132 '<div style="font-size:12.5px;margin-top:3px;background:var(--surface2);border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:6px">' +
133 '<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + f.n + '</span>' +
134 (f.amt ? '<b class="num pay">' + money(f.amt) + '</b>' : '') + '</div>' +
135 '<div class="fz11 muted" style="margin-top:3px">' + f.t + '</div></div></div>';
136}).join('');
137
138</script>
139</body>
140</html>
141