xiaocao-rent/app.js · 约 6034 字符
1// 小草租房优选 · 交互逻辑
2let currentId = parseInt(location.search.match(/id=(\d+)/)?.[1] || '1');
3let favs = JSON.parse(localStorage.getItem('xc_favs') || '[]');
4
5function toggleFav(id){
6 const i = favs.indexOf(id);
7 if(i>=0) favs.splice(i,1); else favs.push(id);
8 localStorage.setItem('xc_favs', JSON.stringify(favs));
9 renderIndex(); renderList(); renderFav();
10}
11function houseCard(h){
12 const isFav = favs.includes(h.id);
13 return `<div class="house-card" onclick="location.href='detail.html?id=${h.id}'">
14 <div class="hc-img">${h.emoji}</div>
15 <div class="hc-info">
16 <div class="hc-title">${h.title}</div>
17 <div class="hc-price">¥${h.price}<small>/月</small></div>
18 <div class="hc-desc">${h.type} · ${h.area} · ${h.orientation}向</div>
19 <div class="hc-tags">${h.tags.map(t=>`<span class="tag">${t}</span>`).join('')}</div>
20 <div class="hc-meta"><span>${h.city} · ${h.floor}</span><span class="hc-fav" onclick="event.stopPropagation();toggleFav(${h.id})">${isFav?'❤️':'🤍'}</span></div>
21 </div>
22 </div>`;
23}
24
25// 首页
26function renderIndex(){
27 document.getElementById('city-bar').innerHTML=CITIES.map((c,i)=>`<a class="${i===0?'active':''}" onclick="alert('切换到${c}')">${c}</a>`).join('');
28 document.getElementById('house-list').innerHTML=HOUSES.slice(0,4).map(houseCard).join('');
29}
30
31// 列表
32let filter='全部';
33function renderList(){
34 let houses=HOUSES;
35 if(filter==='整租') houses=houses.filter(h=>h.type.includes('整租'));
36 else if(filter==='合租') houses=houses.filter(h=>h.type.includes('合租'));
37 else if(filter==='1000以下') houses=houses.filter(h=>h.price<1000);
38 else if(filter==='1000-3000') houses=houses.filter(h=>h.price>=1000&&h.price<=3000);
39 document.getElementById('house-list').innerHTML=houses.map(houseCard).join('');
40}
41function setFilter(el,f){ filter=f;
42 document.querySelectorAll('.fb-item').forEach(x=>x.classList.remove('active'));
43 el.classList.add('active'); renderList();
44}
45
46// 详情
47function renderDetail(){
48 const h=HOUSES.find(x=>x.id===currentId);
49 if(!h) return;
50 currentId=h.id;
51 document.getElementById('fav-icon').textContent=favs.includes(h.id)?'❤️':'🤍';
52 document.getElementById('detail-body').innerHTML=`
53 <div class="detail-img"><span class="di-badge badge ${h.hot?'badge-hot':h.new?'badge-new':'badge-rec'}">${h.hot?'🔥热销':h.new?'🆕新房':'⭐精选'}</span>${h.emoji}</div>
54 <div class="detail-price">
55 <div class="dp-price">¥${h.price}<small>/月</small></div>
56 <div class="dp-desc">${h.title}</div>
57 <div class="dp-meta"><span>${h.type}</span><span>${h.area}</span><span>${h.orientation}向</span><span>${h.floor}</span></div>
58 </div>
59 <div class="section-title">📍 小区位置</div>
60 <div class="card" style="font-size:13px;color:#666;line-height:1.8">${h.city} · ${h.desc}</div>
61 <div class="section-title">🛋️ 房屋配套</div>
62 <div class="facility-grid">${FACILITIES.map(f=>`<div class="facility-item"><div class="fi-icon">${f.icon}</div><div class="fi-name">${f.name}</div></div>`).join('')}</div>
63 <div class="section-title">📋 房源信息</div>
64 <div class="card" style="font-size:13px;line-height:2">
65 <div style="display:flex;justify-content:space-between"><span style="color:#999">付款方式</span><span>押一付三</span></div>
66 <div style="display:flex;justify-content:space-between"><span style="color:#999">看房时间</span><span>随时可看</span></div>
67 <div style="display:flex;justify-content:space-between"><span style="color:#999">入住时间</span><span>随时入住</span></div>
68 <div style="display:flex;justify-content:space-between"><span style="color:#999">中介费</span><span style="color:var(--primary)">会员免收</span></div>
69 </div>`;
70}
71function toggleFavDetail(){ toggleFav(currentId); document.getElementById('fav-icon').textContent=favs.includes(currentId)?'❤️':'🤍'; }
72
73// 预约
74function renderBook(){
75 const h=HOUSES.find(x=>x.id===currentId)||HOUSES[0];
76 currentId=h.id;
77 document.getElementById('book-house').innerHTML=`<div class="house-card"><div class="hc-img">${h.emoji}</div><div class="hc-info"><div class="hc-title">${h.title}</div><div class="hc-price">¥${h.price}<small>/月</small></div><div class="hc-desc">${h.type} · ${h.area} · ${h.city}</div></div></div>`;
78}
79function selectTime(el){
80 document.querySelectorAll('#time-chips .chip').forEach(c=>c.classList.remove('active'));
81 el.classList.add('active');
82}
83function submitBook(){
84 alert('✅ 预约成功！\n\n经纪人将在30分钟内与您电话确认\n请保持电话畅通~');
85 location.href='fav.html';
86}
87
88// 收藏
89function renderFav(){
90 const favHouses=HOUSES.filter(h=>favs.includes(h.id));
91 document.getElementById('fav-count').textContent=favHouses.length+'套';
92 document.getElementById('fav-list').innerHTML=favHouses.length
93 ? favHouses.map(houseCard).join('')
94 : '<div class="fav-empty"><div class="eicon">⭐</div><div>还没有收藏房源，去<a href="list.html" style="color:var(--primary)">找房</a>看看吧~</div></div>';
95 document.getElementById('appoint-list').innerHTML=APPOINTMENTS.map(a=>`
96 <div class="record-item">
97 <div class="ri-img">${a.emoji}</div>
98 <div class="ri-info"><div class="ri-title">${a.title}</div><div class="ri-time">${a.time}</div></div>
99 <div class="ri-status" style="color:${a.status==='已完成'?'var(--green)':a.status==='待确认'?'var(--gold)':'var(--blue)'}">${a.status}</div>
100 </div>`).join('');
101}
102
103// 我的
104function renderMine(){
105 document.getElementById('p-name').textContent=USER.name;
106 document.getElementById('p-level').textContent=USER.level;
107 document.getElementById('p-favs').textContent=favs.length||USER.favs;
108 document.getElementById('p-appointments').textContent=USER.appointments;
109 document.getElementById('p-orders').textContent=USER.orders;
110}
111