r110/recur.html · 约 5681 字符
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="recur">
11
12<div class="navbar"><a class="bk" href="me.html">‹</a><div class="tt">周期账单 · 自动记账</div><div class="rt" data-sheet="#shRec">＋ 新增</div></div>
13
14<div class="card tight" style="background:linear-gradient(135deg,#e3f6ef,#d3f1e6);border:1px solid #c9ece0">
15 <div style="display:flex;align-items:center;gap:11px">
16 <div class="ico" style="background:#fff">🔁</div>
17 <div style="flex:1">
18 <div style="font-size:13.5px;font-weight:800;color:var(--brand-d)">已启用 3 条规则，本月自动记账 ¥7,474</div>
19 <div class="fz11" style="color:#0b7f5f;margin-top:2px">房贷、物业、宽带话费到期自动入账，无需手动记录</div>
20 </div>
21 </div>
22</div>
23
24<div class="sec"><h2>固定支出<small>每月自动执行</small></h2></div>
25<div class="card" id="recBox"></div>
26
27<div class="card">
28 <div class="ttl">📅 本月执行记录</div>
29 <div class="list">
30 <div class="it"><div class="ico" style="background:#9254de1a">🏠</div>
31 <div class="mn"><div class="n">房贷月供</div><div class="d">8 月 3 日 09:00 已自动记账 · 招行储蓄卡</div></div>
32 <div class="amt num pay">-6,820.00<small><span class="tag g">成功</span></small></div></div>
33 <div class="it"><div class="ico" style="background:#0f9d761a">🧹</div>
34 <div class="mn"><div class="n">物业费</div><div class="d">8 月 8 日 待执行 · 微信零钱</div></div>
35 <div class="amt num muted">-386.00<small><span class="tag a">待执行</span></small></div></div>
36 <div class="it"><div class="ico" style="background:#13c2c21a">📶</div>
37 <div class="mn"><div class="n">宽带 + 手机套餐</div><div class="d">8 月 10 日 待执行 · 支付宝</div></div>
38 <div class="amt num muted">-268.00<small><span class="tag a">待执行</span></small></div></div>
39 </div>
40</div>
41
42<div class="card">
43 <div class="ttl">💡 智能识别建议 <span class="rt">基于历史账单</span></div>
44 <div class="list">
45 <div class="it"><div class="ico" style="background:#fef3c7">🅿️</div>
46 <div class="mn"><div class="n">检测到「车位租金」连续 6 个月出现</div><div class="d">金额稳定 ¥450 · 每月 15 日左右</div></div>
47 <button class="btn sm pri" data-tip="演示版：已加入周期账单">设为周期</button></div>
48 <div class="it"><div class="ico" style="background:#e7effd">🎬</div>
49 <div class="mn"><div class="n">检测到「视频会员」连续 12 个月扣费</div><div class="d">金额 ¥25 · 每月 1 日自动续费</div></div>
50 <button class="btn sm" data-tip="演示版：已忽略该建议">忽略</button></div>
51 </div>
52</div>
53<div style="height:8px"></div>
54
55<div class="sheet" id="shRec">
56 <div class="sh"><h3>新增周期账单</h3><span class="x" data-close>✕</span></div>
57 <div class="frm">
58 <div class="fi"><div class="lb">名称</div><input class="tx" id="rName" placeholder="如：车位租金"></div>
59 <div class="fi"><div class="lb">金额</div><input class="tx" id="rAmt" placeholder="如：450" inputmode="decimal"></div>
60 <div class="fi"><div class="lb">周期</div><div class="vl">每月 15 日</div></div>
61 <div class="fi"><div class="lb">扣款账户</div><div class="vl">微信零钱</div></div>
62 <div class="fi"><div class="lb">提前提醒</div><div class="vl">提前 1 天推送</div></div>
63 </div>
64 <button class="btn pri block" style="margin-top:13px" id="rOk">保存规则</button>
65</div>
66
67
68<div class="mask" id="mask"></div>
69<div class="toast" id="toast"></div>
70<script src="data.js"></script>
71<script src="app.js"></script>
72<script>
73
74function renderRec() {
75 $('#recBox').innerHTML = RECURS.map(function (r, i) {
76 var a = accOf(r.acc);
77 return '<div style="display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)">' +
78 '<div class="ico" style="background:var(--surface2)">' + r.e + '</div>' +
79 '<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">' + r.n + '</div>' +
80 '<div class="fz11 muted" style="margin-top:2px">' + r.day + ' · ' + a.n + '</div></div>' +
81 '<div style="text-align:right"><div class="num pay" style="font-weight:800">' + money(r.amt) + '</div>' +
82 '<span class="tag' + (r.on ? ' g' : '') + '" data-sw="' + i + '" style="margin-top:3px;display:inline-block;cursor:pointer">' +
83 (r.on ? '已启用' : '已暂停') + '</span></div></div>';
84 }).join('');
85 $$('#recBox [data-sw]').forEach(function (el) {
86 el.addEventListener('click', function () {
87 var i = Number(el.getAttribute('data-sw'));
88 RECURS[i].on = !RECURS[i].on;
89 renderRec();
90 toast(RECURS[i].n + (RECURS[i].on ? ' 已启用自动记账' : ' 已暂停'));
91 });
92 });
93}
94renderRec();
95$('#rOk').addEventListener('click', function () {
96 var n = $('#rName').value.trim(), v = parseFloat($('#rAmt').value || '0');
97 if (!n || !(v > 0)) { toast('请填写名称与金额'); return; }
98 RECURS.push({ n: n, e: '🔁', amt: v, day: '每月 15 日', acc: 'a2', on: true });
99 renderRec(); closeSheet(); $('#rName').value = ''; $('#rAmt').value = '';
100 toast('周期账单「' + n + '」已创建');
101});
102
103</script>
104</body>
105</html>
106