xiaocao-travel/app.js · 约 5570 字符
1// 小草旅游攻略 · 交互逻辑
2let currentId = parseInt(location.search.match(/id=(\d+)/)?.[1] || '1');
3
4function destCard(d){
5 return `<div class="dest-card" onclick="location.href='detail.html?id=${d.id}'">
6 <div class="dc-img"><span class="dc-tag badge ${d.hot?'badge-hot':d.new?'badge-new':'badge-rec'}">${d.hot?'🔥热门':d.new?'🆕新上':'⭐推荐'}</span>${d.emoji}</div>
7 <div class="dc-body">
8 <div class="dc-title">${d.name}</div>
9 <div class="dc-desc">${d.desc}</div>
10 <div class="dc-meta"><span class="dc-score">⭐ ${d.score}</span><span class="dc-price">人均¥${d.price}</span></div>
11 </div>
12 </div>`;
13}
14
15// 首页
16function renderIndex(){
17 document.getElementById('dest-list').innerHTML=DESTINATIONS.filter(d=>d.hot).slice(0,3).map(destCard).join('');
18 document.getElementById('post-list').innerHTML=POSTS.slice(0,2).map(postCard).join('');
19}
20function postCard(p){
21 return `<div class="post-item">
22 <div class="pi-head">
23 <div class="pi-avatar">${p.avatar}</div>
24 <div><div class="pi-user">${p.user}</div><div class="pi-time">${p.time}</div></div>
25 <div style="margin-left:auto;color:#ccc">⋯</div>
26 </div>
27 <div class="pi-title">${p.title}</div>
28 <div class="pi-text">${p.text}</div>
29 <div class="pi-img">${p.img}</div>
30 <div class="pi-actions">
31 <span class="${p.liked?'liked':''}" onclick="toggleLike(this)">${p.liked?'❤️':'🤍'} ${p.likes}</span>
32 <span>💬 ${p.comments}</span>
33 <span>📤 分享</span>
34 </div>
35 </div>`;
36}
37
38// 目的地列表
39let catFilter='全部';
40function renderDestinations(){
41 let list=DESTINATIONS;
42 if(catFilter==='自然') list=list.filter(d=>d.type==='自然风光');
43 else if(catFilter==='历史') list=list.filter(d=>d.type==='历史文化');
44 else if(catFilter==='海滨') list=list.filter(d=>d.type==='海滨度假');
45 else if(catFilter==='古城') list=list.filter(d=>d.type==='古城古镇');
46 document.getElementById('dest-list').innerHTML=list.map(destCard).join('');
47}
48function setCat(el,c){ catFilter=c;
49 document.querySelectorAll('.filter-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
50 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
51 renderDestinations();
52}
53
54// 目的地详情
55function renderDetail(){
56 const d=DESTINATIONS.find(x=>x.id===currentId);
57 if(!d) return;
58 currentId=d.id;
59 document.getElementById('detail-body').innerHTML=`
60 <div class="detail-img" style="height:170px;background:linear-gradient(135deg,${d.color},#fff);display:flex;align-items:center;justify-content:center;font-size:70px">${d.emoji}</div>
61 <div class="detail-card" style="background:#fff;border-radius:12px;margin:12px;padding:16px">
62 <div style="display:flex;justify-content:space-between;align-items:center">
63 <div><div style="font-size:18px;font-weight:700">${d.name}</div><div style="font-size:12px;color:#999;margin-top:2px">${d.city} · ${d.type}</div></div>
64 <div style="text-align:right"><div style="font-size:22px;color:var(--accent);font-weight:700">⭐${d.score}</div><div style="font-size:11px;color:#999">人均¥${d.price}</div></div>
65 </div>
66 <div style="font-size:13px;color:#666;margin-top:10px">${d.desc}</div>
67 <div style="margin-top:8px">${d.tags.map(t=>`<span class="tag">#${t}</span>`).join('')}</div>
68 </div>
69 <div class="section-title">🗺️ 一日游路线</div>
70 <div class="card" style="padding-top:4px">
71 ${d.spots.map(s=>`<div class="spot-item"><div class="si-no">${s.t==='上午'?'1':s.t==='中午'?'2':s.t==='下午'?'3':'4'}</div><div class="si-info"><div class="si-name">${s.n}</div><div class="si-desc">${s.d}</div></div><span style="font-size:12px;color:var(--primary);font-weight:600">${s.t}</span></div>`).join('')}
72 </div>
73 <div class="section-title">🍜 必吃美食</div>
74 <div class="card" style="padding-top:4px">
75 ${d.foods.map(f=>`<div class="food-item"><div class="fi-icon">${f.e}</div><div class="fi-info"><div class="fi-name">${f.n}</div></div><span class="fi-price">${f.p}</span></div>`).join('')}
76 </div>`;
77}
78
79// 行程规划
80function renderPlan(){
81 document.getElementById('plan-list').innerHTML=ITINERARY.map(day=>`
82 <div class="plan-day">
83 <div class="pd-head"><span class="pd-day">${day.day}</span><span class="pd-date">${day.date}</span></div>
84 ${day.items.map(it=>`<div class="pd-item"><span class="pd-time">${it.t}</span><span class="pd-icon">${it.i}</span><span class="pd-name">${it.n}</span></div>`).join('')}
85 </div>`).join('');
86}
87
88// 游记
89function renderTravelogue(){
90 document.getElementById('post-list').innerHTML=POSTS.map(postCard).join('');
91}
92function toggleLike(el){
93 const span=el;
94 const liked=span.classList.toggle('liked');
95 const m=span.textContent.match(/(\d+)/);
96 if(m) span.textContent=(liked?'❤️ ':'🤍 ')+(parseInt(m[1])+(liked?1:-1));
97}
98function publishPost(){ alert('📝 发布游记\n\n记录你的旅行故事，分享给更多旅友！（演示页）'); }
99
100// 我的
101function renderMine(){
102 document.getElementById('p-name').textContent=USER.name;
103 document.getElementById('p-level').textContent=USER.level;
104 document.getElementById('p-trips').textContent=USER.trips;
105 document.getElementById('p-spots').textContent=USER.spots;
106 document.getElementById('p-likes').textContent=USER.likes.toLocaleString();
107}
108