r110/detail.html · 约 6923 字符
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="detail">
11
12<div class="navbar"><a class="bk" href="bills.html">‹</a><div class="tt">账单详情</div><div class="rt" data-sheet="#shMore">•••</div></div>
13
14<div class="card" style="text-align:center;padding:20px 14px 16px">
15 <div class="ico lg" id="dIco" style="margin:0 auto;width:54px;height:54px;font-size:27px">🍜</div>
16 <div class="fz12 muted" style="margin-top:9px" id="dCat">餐饮</div>
17 <div class="num" id="dAmt" style="font-size:33px;font-weight:800;line-height:1.2;margin-top:2px">-486.00</div>
18 <div id="dTags" style="margin-top:8px"></div>
19</div>
20
21<div class="card frm" id="dFrm"></div>
22
23<div class="card">
24 <div class="ttl">🧾 票据附件 <span class="rt">2 张</span></div>
25 <div style="display:flex;gap:9px">
26 <div style="flex:1;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(135deg,#ffe8de,#ffd0bd);display:flex;align-items:center;justify-content:center;font-size:26px" data-tip="演示版：图片查看器需真机">🧾</div>
27 <div style="flex:1;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(135deg,#e3f6ef,#c4ecdd);display:flex;align-items:center;justify-content:center;font-size:26px" data-tip="演示版：图片查看器需真机">📄</div>
28 <div style="flex:1;aspect-ratio:1/1;border-radius:12px;border:1px dashed #ccd8d4;display:flex;align-items:center;justify-content:center;font-size:24px;color:#b6c5c0" data-tip="演示版：新增票据需真机相机">＋</div>
29 </div>
30</div>
31
32<div class="card">
33 <div class="ttl">📍 消费位置</div>
34 <div style="display:flex;align-items:center;gap:11px">
35 <div class="ico" style="background:#e7effd">🗺️</div>
36 <div style="flex:1">
37 <div style="font-size:13.5px;font-weight:700">海底捞火锅（万象天地店）</div>
38 <div class="fz11 muted mt6">深圳市南山区科苑南路 2888 号 L4-06 · 距家 3.2km</div>
39 </div>
40 </div>
41</div>
42
43<div class="card">
44 <div class="ttl">📊 同类消费对比</div>
45 <div class="grid3">
46 <div style="background:var(--surface2);border-radius:12px;padding:10px;text-align:center">
47 <div class="fz11 muted">本月餐饮</div><div class="num" style="font-weight:800;margin-top:2px">¥2,186</div>
48 </div>
49 <div style="background:var(--surface2);border-radius:12px;padding:10px;text-align:center">
50 <div class="fz11 muted">本笔占比</div><div class="num" style="font-weight:800;margin-top:2px;color:var(--accent-d)">22.2%</div>
51 </div>
52 <div style="background:var(--surface2);border-radius:12px;padding:10px;text-align:center">
53 <div class="fz11 muted">同类均值</div><div class="num" style="font-weight:800;margin-top:2px">¥312</div>
54 </div>
55 </div>
56 <div class="fz12 muted" style="margin-top:11px;background:var(--accent-l);border-radius:10px;padding:9px 11px;color:var(--accent-d)">
57 💡 这笔比家庭餐饮均值高 <b>55.8%</b>，本月餐饮预算已用 78%，注意控制聚餐频次。
58 </div>
59</div>
60
61<div style="display:flex;gap:9px;margin:14px 13px 0">
62 <a class="btn" style="flex:1" href="add.html">✏️ 编辑</a>
63 <a class="btn" style="flex:1" href="add.html">📄 再记一笔</a>
64 <button class="btn dg" style="flex:1" id="delBtn">🗑 删除</button>
65</div>
66<div class="foot">记录 ID 由本地生成 · 支持导出与云备份</div>
67<div style="height:20px"></div>
68
69<div class="sheet" id="shMore">
70 <div class="sh"><h3>更多操作</h3><span class="x" data-close>✕</span></div>
71 <div class="list">
72 <div class="it" data-tip="演示版：已复制账单文本"><div class="ico">📋</div><div class="mn"><div class="n">复制账单信息</div><div class="d">生成一段可分享的文本</div></div><span class="ar">›</span></div>
73 <div class="it" data-tip="演示版：AA 分摊开发中"><div class="ico">🧮</div><div class="mn"><div class="n">发起 AA 分摊</div><div class="d">按家庭成员平均或自定义比例</div></div><span class="ar">›</span></div>
74 <div class="it" data-tip="演示版：标记报销成功"><div class="ico">🧾</div><div class="mn"><div class="n">标记为可报销</div><div class="d">纳入报销台账，到账后自动冲抵</div></div><span class="ar">›</span></div>
75 <div class="it" data-tip="演示版：模板已保存"><div class="ico">⭐</div><div class="mn"><div class="n">存为常用模板</div><div class="d">下次一键记同类账单</div></div><span class="ar">›</span></div>
76 </div>
77</div>
78
79
80<div class="mask" id="mask"></div>
81<div class="toast" id="toast"></div>
82<script src="data.js"></script>
83<script src="app.js"></script>
84<script>
85
86function qs(k) { var m = location.search.match(new RegExp('[?&]' + k + '=([^&]+)')); return m ? decodeURIComponent(m[1]) : ''; }
87var id = qs('id') || 't01';
88var list = allBills(), b = null;
89for (var i = 0; i < list.length; i++) { if (list[i].id === id) { b = list[i]; break; } }
90if (!b) b = list[0];
91
92var c = catOf(b.cat), a = accOf(b.acc), m = memOf(b.mem);
93$('#dIco').innerHTML = c.e; $('#dIco').style.background = c.c + '1a';
94$('#dCat').textContent = (b.t === 'pay' ? '支出' : '收入') + ' · ' + c.n;
95$('#dAmt').textContent = money(b.amt, b.t);
96$('#dAmt').className = 'num ' + (b.t === 'pay' ? 'pay' : 'inc');
97$('#dTags').innerHTML = '<span class="tag g">' + b.n + '</span>' +
98 (b.tags || []).map(function (t) { return '<span class="tag a" style="margin-left:6px">' + t + '</span>'; }).join('');
99
100var WK = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
101var p = b.date.split('-'), dt = new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
102var rows = [
103 ['账户', a.e + ' ' + a.n + (a.tail ? ' (' + a.tail + ')' : '')],
104 ['时间', b.date + ' ' + b.time + ' ' + WK[dt.getDay()]],
105 ['记录人', m.e + ' ' + m.n + ' · ' + m.role],
106 ['所属账本', '🏡 家庭日常账本'],
107 ['支付方式', a.kind === 'credit' ? '信用卡消费（计入本期账单）' : '余额支付'],
108 ['备注', b.note || '（无备注）']
109];
110$('#dFrm').innerHTML = rows.map(function (r) {
111 return '<div class="fi"><div class="lb">' + r[0] + '</div><div class="vl" style="font-weight:600">' + r[1] + '</div></div>';
112}).join('');
113
114$('#delBtn').addEventListener('click', function () {
115 var arr = SG.get('bills', []).filter(function (x) { return x.id !== b.id; });
116 SG.set('bills', arr);
117 toast('账单已删除，正在返回…');
118 setTimeout(function () { location.href = 'bills.html'; }, 900);
119});
120
121</script>
122</body>
123</html>
124