xiaocao-housekeeping/app.js · 约 8036 字符
1// 小草家政服务 · 交互逻辑
2let currentId = parseInt(location.search.match(/id=(\d+)/)?.[1] || '1');
3
4function svcCard(s){
5 return `<div class="svc-card" onclick="location.href='detail.html?id=${s.id}'">
6 <div class="sc-icon" style="background:${s.color}">${s.icon}</div>
7 <div class="sc-info">
8 <div class="sc-name">${s.name} ${s.hot?'<span class="badge badge-hot">热销</span>':''}${s.new?'<span class="badge badge-new">新品</span>':''}${s.sale?'<span class="badge badge-sale">特惠</span>':''}</div>
9 <div class="sc-desc">${s.desc}</div>
10 <div class="sc-price">¥${s.price}<small>/${s.unit}</small></div>
11 </div>
12 <button class="sc-btn" onclick="event.stopPropagation();location.href='detail.html?id=${s.id}'">去预约</button>
13 </div>`;
14}
15
16// 首页
17function renderIndex(){
18 document.getElementById('svc-list').innerHTML=SERVICES.filter(s=>s.hot).slice(0,3).map(svcCard).join('');
19 document.getElementById('nanny-list').innerHTML=NANNIES.slice(0,3).map(n=>`
20 <div class="nanny-card">
21 <div class="nc-avatar">${n.icon}</div>
22 <div class="nc-info">
23 <div class="nc-name">${n.name}<span class="nc-verified">已认证</span></div>
24 <div class="nc-tags">${n.tags.join(' · ')} · ${n.years}</div>
25 <div class="nc-score">⭐ ${n.score} · 服务${n.orders}单</div>
26 </div>
27 <button class="nc-btn" onclick="alert('👩 预约${n.name}')">预约</button>
28 </div>`).join('');
29 document.getElementById('coupon-list').innerHTML=COUPONS.map(c=>`
30 <div class="card" style="display:flex;gap:12px;align-items:center;margin:8px 12px;padding:12px">
31 <div style="font-size:28px">🎟️</div>
32 <div style="flex:1"><div style="font-weight:600;font-size:14px">${c.name} <b style="color:var(--primary)">¥${c.amount}</b></div><div style="font-size:12px;color:#999;margin-top:2px">${c.desc} · ${c.expire}到期</div></div>
33 <button class="sc-btn" onclick="alert('🎟️ 已领取${c.name}！')">领取</button>
34 </div>`).join('');
35}
36
37// 服务列表
38let catFilter='全部';
39function renderServices(){
40 let list=SERVICES;
41 if(catFilter==='保洁') list=list.filter(s=>['日常保洁','深度保洁','钟点工'].includes(s.name));
42 else if(catFilter==='母婴') list=list.filter(s=>['保姆服务','月嫂服务'].includes(s.name));
43 else if(catFilter==='家电') list=list.filter(s=>s.name.includes('家电'));
44 else if(catFilter==='小时工') list=list.filter(s=>s.name.includes('钟点工'));
45 document.getElementById('svc-list').innerHTML=list.map(svcCard).join('');
46}
47function setCat(el,c){ catFilter=c;
48 document.querySelectorAll('.filter-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
49 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
50 renderServices();
51}
52
53// 详情
54function renderDetail(){
55 const s=SERVICES.find(x=>x.id===currentId);
56 if(!s) return;
57 currentId=s.id;
58 document.getElementById('detail-body').innerHTML=`
59 <div class="detail-img">${s.icon}</div>
60 <div class="detail-card">
61 <div class="dc-title"><span>${s.name}</span><span class="dc-price">¥${s.price}<small>/${s.unit}</small></span></div>
62 <div class="dc-meta"><span>${s.desc}</span></div>
63 <div class="svc-include">${s.include.map(i=>`<div class="si-item">✓ ${i}</div>`).join('')}</div>
64 <div class="dc-desc">${s.name}服务由平台认证的专业阿姨上门提供，统一着装、自备工具，服务过程全程可追踪。完成服务后24小时内不满意可申请返工。</div>
65 </div>
66 <div class="section-title">👩 推荐阿姨</div>
67 ${NANNIES.slice(0,2).map(n=>`
68 <div class="nanny-card">
69 <div class="nc-avatar">${n.icon}</div>
70 <div class="nc-info"><div class="nc-name">${n.name}<span class="nc-verified">已认证</span></div><div class="nc-tags">${n.tags.join(' · ')} · ${n.years}</div><div class="nc-score">⭐ ${n.score} · 服务${n.orders}单</div></div>
71 <button class="nc-btn" onclick="alert('👩 预约${n.name}')">预约</button>
72 </div>`).join('')}
73 <div class="section-title">📝 服务须知</div>
74 <div class="detail-card" style="font-size:13px;color:#666;line-height:2">
75 <div>• 服务前请确认上门时间与地址</div>
76 <div>• 贵重物品请提前妥善保管</div>
77 <div>• 服务完成后当面确认服务内容</div>
78 <div>• 24小时内不满意可申请返工</div>
79 </div>`;
80}
81
82// 预约
83function renderBook(){
84 const s=SERVICES.find(x=>x.id===currentId)||SERVICES[0];
85 currentId=s.id;
86 document.getElementById('book-svc').innerHTML=`<div class="svc-card"><div class="sc-icon" style="background:${s.color}">${s.icon}</div><div class="sc-info"><div class="sc-name">${s.name}</div><div class="sc-desc">${s.desc}</div><div class="sc-price">¥${s.price}<small>/${s.unit}</small></div></div></div>`;
87 document.getElementById('addr-list').innerHTML=ADDRS.map((a,i)=>`
88 <div class="addr-item ${a.active?'active':''}" onclick="selectAddr(this,${i})">
89 <span class="ai-icon">${a.name==='家'?'🏠':'🏢'}</span>
90 <div class="ai-info"><div class="ai-name">${a.name}</div><div class="ai-detail">${a.detail}</div></div>
91 <span style="color:var(--primary)">${a.active?'✓':''}</span>
92 </div>`).join('');
93}
94function selectTime(el){ document.querySelectorAll('#time-chips .chip').forEach(c=>c.classList.remove('active')); el.classList.add('active'); }
95function selectAddr(el,i){ document.querySelectorAll('.addr-item').forEach(a=>{a.classList.remove('active');a.querySelector('span:last-child').textContent=''}); el.classList.add('active'); el.querySelector('span:last-child').textContent='✓'; }
96function submitBook(){
97 alert('✅ 预约成功！\n\n家政顾问将在30分钟内电话确认\n请保持电话畅通~');
98 location.href='orders.html';
99}
100
101// 订单
102let orderFilter='';
103function renderOrders(){
104 const el=document.getElementById('order-list');
105 if(!el) return;
106 let orders=ORDERS;
107 if(orderFilter) orders=orders.filter(o=>o.status===orderFilter);
108 if(!orders.length){ el.innerHTML='<div class="empty"><div class="eicon">📦</div><div>暂无订单</div></div>'; return; }
109 const colorMap={done:'var(--green)',doing:'var(--blue)',comment:'var(--accent)'};
110 el.innerHTML=orders.map(o=>`
111 <div class="order-item">
112 <div class="oi-top"><span style="font-size:13px;color:#999">${o.id}</span><span class="oi-status" style="color:${colorMap[o.state]}">${o.status}</span></div>
113 <div class="oi-body">
114 <div class="oi-icon">${o.icon}</div>
115 <div class="oi-info"><div class="oi-title">${o.title}</div><div class="oi-time">${o.time}</div></div>
116 </div>
117 <div class="oi-bottom">
118 <span class="oi-price">¥${o.price}</span>
119 ${o.state==='comment'?'<button class="oi-btn comment" onclick="alert('⭐ 评价服务\n\n请为本次服务打分（演示页）')">去评价</button>':o.state==='doing'?'<button class="oi-btn confirm" onclick="alert('✅ 确认服务完成')">确认服务</button>':'<button class="oi-btn" style="background:#f5f5f5;color:#999">再次预约</button>'}
120 </div>
121 </div>`).join('');
122}
123function filterOrder(el,f){ orderFilter=f;
124 document.querySelectorAll('.status-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
125 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
126 renderOrders();
127}
128
129// 我的
130function renderMine(){
131 document.getElementById('p-name').textContent=USER.name;
132 document.getElementById('p-level').textContent=USER.level;
133 document.getElementById('p-points').textContent=USER.points;
134 document.getElementById('p-orders').textContent=USER.orders;
135 document.getElementById('p-coupons').textContent=USER.coupons;
136}
137