xiaocao-community/app.js · 约 5407 字符
1// 小草智慧社区 · 交互逻辑
2
3// 首页
4function renderIndex(){
5 document.getElementById('ch-name').textContent=SITE.name;
6 document.getElementById('ch-addr').textContent=SITE.addr;
7 document.getElementById('ch-buildings').textContent=SITE.buildings;
8 document.getElementById('ch-households').textContent=SITE.households;
9 document.getElementById('latest-notice').textContent=NOTICES[0].title;
10 const nl=document.getElementById('notice-list');
11 if(nl) nl.innerHTML=NOTICES.slice(0,3).map(n=>`
12 <div class="notice-item">
13 <div class="ni-top">
14 <span class="ni-title">${n.title}</span>
15 <span class="badge ${n.type==='urgent'?'badge-urgent':n.type==='activity'?'badge-activity':'badge-notice'}">${n.type==='urgent'?'紧急':n.type==='activity'?'活动':'通知'}</span>
16 </div>
17 <div class="ni-content">${n.content.substring(0,60)}...</div>
18 <div class="ni-time">${n.time}</div>
19 </div>`).join('');
20 renderRepairList();
21}
22function renderRepairList(){
23 const el=document.getElementById('repair-list');
24 if(!el) return;
25 el.innerHTML=REPAIRS.map(r=>`
26 <div class="repair-item">
27 <div class="ri-top">
28 <span class="ri-title">${r.title}</span>
29 <span class="ri-status ${r.status}">${r.status==='done'?'已完成':r.status==='processing'?'处理中':'待处理'}</span>
30 </div>
31 <div class="ri-desc">${r.desc}</div>
32 <div class="ri-time">${r.time} · ${r.type}</div>
33 <div class="repair-progress">
34 <div class="rp-step ${r.progress>=1?'done':''}"><div class="rp-dot">${r.progress>=1?'✓':'1'}</div>已提交</div>
35 <div class="rp-step ${r.progress>=2?'done':''}"><div class="rp-dot">${r.progress>=2?'✓':'2'}</div>处理中</div>
36 <div class="rp-step ${r.progress>=3?'done':''}"><div class="rp-dot">${r.progress>=3?'✓':'3'}</div>已完成</div>
37 </div>
38 </div>`).join('');
39}
40
41// 报修
42function renderRepairs(){ renderRepairList(); }
43function selectType(el){
44 document.querySelectorAll('.type-chips .chip').forEach(c=>c.classList.remove('active'));
45 el.classList.add('active');
46}
47function submitRepair(){
48 alert('✅ 报修提交成功！\n\n维修师傅将在24小时内联系您。\n您可以在「我的报修记录」中查看进度。');
49}
50
51// 缴费
52function renderBills(){
53 const el=document.getElementById('bill-list');
54 if(!el) return;
55 let unpaid=0,unpaidTotal=0;
56 el.innerHTML=BILLS.map(b=>{
57 if(!b.paid){unpaid++;unpaidTotal+=b.amount}
58 return `<div class="bill-item">
59 <div class="bi-icon" style="background:${b.color}">${b.icon}</div>
60 <div class="bi-info">
61 <div class="bi-name">${b.name}</div>
62 <div class="bi-period">${b.period}</div>
63 </div>
64 ${b.paid
65 ?'<div><div class="bi-amount" style="color:#ccc">¥'+b.amount+'</div><div class="bi-status">已缴费</div></div>'
66 :'<div><div class="bi-amount">¥'+b.amount+'</div><button class="bi-pay" onclick="payBill(\''+b.name+'\','+b.amount+')">缴费</button></div>'}
67 </div>`;
68 }).join('');
69 document.getElementById('unpaid-count').textContent=unpaid+'笔';
70 document.getElementById('unpaid-total').textContent='¥'+unpaidTotal;
71}
72function payBill(name,amount){
73 alert('💳 '+name+'缴费\n\n金额：¥'+amount+'\n支付方式：微信支付\n\n✅ 缴费成功！感谢您的配合。');
74}
75
76// 邻里圈
77function renderNeighbors(){
78 const el=document.getElementById('topic-list');
79 if(!el) return;
80 el.innerHTML=TOPICS.map((t,i)=>`
81 <div class="topic-item">
82 <div class="ti-head">
83 <div class="ti-avatar" style="background:var(--primary-light)">${t.avatar}</div>
84 <div><span class="ti-user">${t.user}</span><span class="ti-tag" style="background:${t.tagColor}">${t.tag}</span></div>
85 <div style="margin-left:auto" class="ti-time">${t.time}</div>
86 </div>
87 <div class="ti-title">${t.title}</div>
88 <div class="ti-content">${t.content}</div>
89 <div class="ti-actions">
90 <span class="${t.liked?'liked':''}" onclick="toggleTopicLike(${i})">${t.liked?'❤️':'🤍'} ${t.likes}</span>
91 <span>💬 ${t.comments}</span>
92 <span>📤 分享</span>
93 </div>
94 </div>`).join('');
95}
96function toggleTopicLike(i){ TOPICS[i].liked=!TOPICS[i].liked;TOPICS[i].likes+=TOPICS[i].liked?1:-1;renderNeighbors(); }
97function publishTopic(){ alert('✏️ 发布话题\n\n和邻居分享新鲜事、求助或建议吧！\n（此为演示页面）'); }
98
99// 便民服务
100function renderService(){
101 const sg=document.getElementById('service-grid');
102 if(sg) sg.innerHTML=SERVICES.map(s=>`
103 <div class="service-card" onclick="alert('预约${s.name}')">
104 <div class="sc-icon">${s.icon}</div>
105 <div class="sc-name">${s.name}</div>
106 <div class="sc-desc">${s.desc}</div>
107 </div>`).join('');
108 const ml=document.getElementById('merchant-list');
109 if(ml) ml.innerHTML=MERCHANTS.map(m=>`
110 <div class="merchant-item">
111 <div class="mi-icon" style="background:var(--primary-light)">${m.icon}</div>
112 <div class="mi-info"><div class="mi-name">${m.name}</div><div class="mi-type">${m.type}</div><div class="mi-dist">距小区 ${m.dist}</div></div>
113 <button class="mi-btn" onclick="alert('查看${m.name}详情')">查看</button>
114 </div>`).join('');
115}
116