app.js · 约 6644 字符
1// 小草车主服务 · 交互逻辑
2function stationCard(s){
3 return `<div class="station-item">
4 <div class="si-top">
5 <div><span class="si-name">${s.name}</span><span class="si-brand">${s.brand}</span></div>
6 <div class="si-price"><span class="sp-now">¥${s.price}</span><span class="sp-old">¥${s.old}</span></div>
7 </div>
8 <div class="si-meta">📍 ${s.dist} · 92#汽油</div>
9 <span class="si-disc">🎉 ${s.disc}</span>
10 <button class="si-btn" onclick="alert('⛽ 已预约导航至：'+'${s.name}'+'\n\n到站出示本页享直降优惠（演示页）')">去加油 ›</button>
11 </div>`;
12}
13
14// 首页
15function renderIndex(){
16 document.getElementById('store-list').innerHTML = STORES.slice(0,2).map(s=>`
17 <div class="svc-card">
18 <div class="sc-icon">${s.icon}</div>
19 <div class="sc-info">
20 <div class="sc-name">${s.name}</div>
21 <div class="sc-desc">${s.rating} · ${s.dist}</div>
22 <div class="sc-price">¥${s.price}<small> <s>¥${s.orig}</s> · ${s.desc}</small></div>
23 </div>
24 <button class="sc-btn" onclick="location.href='wash.html'">预约</button>
25 </div>`).join('');
26 document.getElementById('station-list').innerHTML = STATIONS.slice(0,2).map(stationCard).join('');
27}
28function signIn(el){
29 el.textContent = '✅ 已签到';
30 el.style.background = '#f0f2f5';
31 el.style.color = '#999';
32 el.disabled = true;
33 alert('🎁 签到成功！\n\n获得：加油满200减15券 ×1\n洗车立减10元券 ×1');
34}
35
36// 违章
37function renderViolation(){
38 document.getElementById('vc-plate').textContent = CAR.plate;
39 document.getElementById('vs-unpay').textContent = VIO.filter(v=>v.status==='unpay').length;
40 document.getElementById('vs-point').textContent = CAR.points + '分';
41 const unpay = VIO.filter(v=>v.status==='unpay');
42 document.getElementById('vs-money').textContent = '¥' + unpay.reduce((s,v)=>s+v.money,0);
43 document.getElementById('vio-list').innerHTML = VIO.map((v,idx)=>`
44 <div class="vio-item">
45 <div class="vi-top">
46 <span class="vi-type">${v.img} ${v.type}</span>
47 <span class="vi-point">扣${v.point}分</span>
48 </div>
49 <div class="vi-meta">📅 ${v.time}<br>📍 ${v.place}</div>
50 <div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">
51 <span class="vi-money">¥${v.money}</span>
52 <span class="vi-status ${v.status==='unpay'?'unpay':'paid'}">${v.status==='unpay'?'未处理':'已缴款'}</span>
53 </div>
54 ${v.status==='unpay'
55 ? '<button class="vi-btn pay" onclick="payVio('+idx+')">立即缴款</button>'
56 : '<button class="vi-btn done" disabled>已处理</button>'}
57 </div>`).join('');
58}
59function payVio(idx){
60 const v=VIO[idx];
61 alert('✅ 缴款成功！\n\n罚款金额：¥'+v.money+'\n支付方式：微信支付（演示页）');
62 v.status='paid';
63 renderViolation();
64}
65
66// 加油
67let rechargeSel=1;
68function renderGas(){
69 document.getElementById('recharge-row').innerHTML = RECHARGE.map((r,i)=>`
70 <div class="rc-item ${i===rechargeSel?'active':''}" onclick="pickRecharge(${i})">
71 <div class="rc-amount">¥${r.a}</div><div class="rc-bonus">送${r.b}</div>
72 </div>`).join('');
73 document.getElementById('station-list').innerHTML = STATIONS.map(stationCard).join('');
74}
75function pickRecharge(i){ rechargeSel=i; renderGas(); }
76function recharge(){ alert('✅ 充值成功！\n\n到账 ¥'+RECHARGE[rechargeSel].a+'，赠送 '+RECHARGE[rechargeSel].b+'元油券\n（演示页）'); }
77
78// 洗车
79let srvFilter='全部';
80function renderWash(){
81 document.getElementById('store-list').innerHTML = STORES.map(s=>`
82 <div class="store-item">
83 <div class="st-icon">${s.icon}</div>
84 <div class="st-info">
85 <div class="st-name">${s.name}</div>
86 <div class="st-rating">${s.rating} · ${s.dist}</div>
87 <div class="st-meta">${s.desc}</div>
88 <div class="st-price">¥${s.price} <small style="text-decoration:line-through;color:#999">¥${s.orig}</small></div>
89 </div>
90 <button class="st-btn" onclick="alert('✅ 预约成功！\n\n'+'${s.name}'+'\n到店时间：2026-08-11 17:30（演示页）')">预约</button>
91 </div>`).join('');
92 let list = SRVS;
93 if(srvFilter!=='全部') list = SRVS.filter(x=>x.name.includes(srvFilter));
94 document.getElementById('srv-grid').innerHTML = list.map(s=>`
95 <div class="service-card">
96 <div class="srv-icon">${s.icon}</div>
97 <div class="srv-name">${s.name}</div>
98 <div class="srv-desc">${s.desc}</div>
99 <div class="srv-bottom">
100 <span class="srv-price">¥${s.price}<small> <s>¥${s.orig}</s></small></span>
101 <button class="srv-btn" onclick="alert('✅ 已加入团购：'+'${s.name}'+'\n到店出示核销码即可使用（演示页）')">团购</button>
102 </div>
103 </div>`).join('');
104}
105function filterSrv(el,f){
106 srvFilter=f;
107 document.querySelectorAll('.filter-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
108 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
109 renderWash();
110}
111
112// 停车
113function renderPark(){
114 document.getElementById('park-list').innerHTML = PARKS.map(p=>`
115 <div class="park-item">
116 <div class="pi-top">
117 <div><div class="pi-name">🅿️ ${p.name}</div><div class="pi-dist">📍 ${p.dist} · ${p.type}</div></div>
118 <div style="text-align:right"><div class="pi-price">${p.price}</div><div class="pi-left ${p.left===0?'full':''}">${p.left===0?'已满':p.left+' 个车位'}</div></div>
119 </div>
120 <div class="pi-meta">⏰ 营业时间：24小时 · 支持无感支付</div>
121 <button class="pi-btn ${p.left===0?'stop':''}" ${p.left===0?'disabled':''} onclick="parkNow(this,'${p.name}')">${p.left===0?'已满':'导航去停车'}</button>
122 </div>`).join('');
123}
124function parkNow(btn,name){
125 alert('🅿️ 已发起导航至：'+name+'\n\n进场后自动识别车牌，离场无感支付（演示页）');
126}
127
128// 我的
129function renderMine(){
130 document.getElementById('p-name').textContent=USER.name;
131 document.getElementById('p-level').textContent=USER.level;
132 document.getElementById('p-points').textContent=USER.points;
133 document.getElementById('p-coupons').textContent=USER.coupons;
134 document.getElementById('p-orders').textContent=USER.orders;
135 document.getElementById('p-plate').textContent=CAR.plate;
136 document.getElementById('p-model').textContent=CAR.model;
137}
138