app.js · 约 7306 字符
1// 小草亲子早教 · 交互逻辑
2function courseCard(c){
3 const doneHtml = c.done>0 ? `<div style="font-size:11px;color:var(--green)">已学 ${c.done}/${c.lessons} 课</div>` : '';
4 return `<div class="course-card" onclick="location.href='detail.html?id='+${c.id}">
5 <div class="cc-img" style="background:${c.color}">${c.emoji}</div>
6 <div class="cc-info">
7 <div class="cc-name">${c.name}</div>
8 <div class="cc-tags"><span class="tag">${c.age}</span><span class="tag">${c.cat}</span>${c.hot?'<span class="tag" style="background:#fff1f0;color:#ff4d4f">🔥热门</span>':''}</div>
9 <div class="cc-meta">共 ${c.lessons} 课 · 适合 ${c.age}</div>
10 <div class="cc-bottom">
11 <span class="cc-price">¥${c.price}<small> <s>¥${c.orig}</s></small></span>
12 ${doneHtml}
13 <button class="cc-btn" onclick="event.stopPropagation();location.href='detail.html?id='+${c.id}">${c.done>0?'继续学习':'开始学习'}</button>
14 </div>
15 </div>
16 </div>`;
17}
18
19// 首页
20let ageFilter='全部';
21function renderIndex(){
22 document.getElementById('age-pick').innerHTML = AGES.map(a=>`<div class="age-item ${a===ageFilter?'active':''}" onclick="pickAge(this,'${a}')">${a}</div>`).join('');
23 let list = COURSES;
24 if(ageFilter!=='全部') list = list.filter(c=>c.age===ageFilter);
25 document.getElementById('course-list').innerHTML = list.slice(0,3).map(courseCard).join('');
26 document.getElementById('activity-list').innerHTML = ACTIVITIES.slice(0,2).map(activityCard).join('');
27}
28function pickAge(el,a){ ageFilter=a; renderIndex(); }
29function activityCard(a){
30 return `<div class="activity-card">
31 <div class="ac-img" style="background:${a.color}"><span class="ac-tag badge badge-hot">${a.tag}</span>${a.emoji}</div>
32 <div class="ac-body">
33 <div class="ac-name">${a.name}</div>
34 <div class="ac-meta">📅 ${a.time}<br>📍 ${a.place}</div>
35 <div class="ac-bottom">
36 <span class="ac-quota">🟢 剩余名额 ${a.quota} 组家庭</span>
37 <button class="ac-btn" onclick="signUp('${a.name}')">立即报名</button>
38 </div>
39 </div>
40 </div>`;
41}
42function signUp(name){ alert('✅ 报名成功！\n\n'+name+'\n请提前10分钟到场签到（演示页）'); }
43
44// 课程列表
45let courseAge='全部', courseCat='全部';
46function renderCourses(){
47 document.querySelectorAll('#age-bar a').forEach((a,i)=>{
48 const v = i===0?'全部':AGES[i];
49 a.className = v===courseAge?'active':'';
50 a.style.color = v===courseAge?'var(--primary)':'#8a6474';
51 a.style.borderBottom = v===courseAge?'2px solid var(--primary)':'none';
52 });
53 document.querySelectorAll('#cat-bar a').forEach((a,i)=>{
54 const v = i===0?'全部':['认知','语言','运动','艺术','思维'][i-1];
55 a.className = v===courseCat?'active':'';
56 a.style.color = v===courseCat?'var(--primary)':'#8a6474';
57 a.style.borderBottom = v===courseCat?'2px solid var(--primary)':'none';
58 });
59 let list = COURSES.filter(c=>(courseAge==='全部'||c.age===courseAge) && (courseCat==='全部'||c.cat===courseCat));
60 document.getElementById('course-list').innerHTML = list.length ? list.map(courseCard).join('') : '<div class="empty"><div class="eicon">📚</div><div>暂无匹配课程</div></div>';
61}
62document.addEventListener('click', function(e){
63 const a = e.target.closest('#age-bar a');
64 if(a){ courseAge = a.textContent; renderCourses(); }
65 const b = e.target.closest('#cat-bar a');
66 if(b){ courseCat = b.textContent; renderCourses(); }
67});
68
69// 课程详情
70let currentCourse = null;
71let checkinDays = 0;
72function renderDetail(){
73 const id = parseInt(location.search.match(/id=(\d+)/)?.[1] || '1');
74 currentCourse = COURSES.find(c=>c.id===id) || COURSES[0];
75 document.getElementById('dh-emoji').innerHTML = '<span class="dh-tag badge badge-new">'+currentCourse.age+'</span>' + currentCourse.emoji;
76 document.getElementById('dh-tag').textContent = currentCourse.age;
77 document.getElementById('db-name').textContent = currentCourse.name;
78 document.getElementById('db-meta').textContent = '共'+currentCourse.lessons+'课 · 已学'+currentCourse.done+'课 · '+currentCourse.cat+'启蒙';
79 document.getElementById('db-desc').textContent = currentCourse.desc + '。亲子共学效果更佳，建议每天固定时间学习10分钟。';
80 document.getElementById('cb-num').textContent = 15;
81 document.getElementById('lesson-list').innerHTML = LESSONS.map((l,i)=>{
82 const isDone = i < currentCourse.done;
83 return `<div class="lesson-item" onclick="${isDone?'':'alert(\'▶️ 开始播放：'+l.name+'（演示页）\')'}">
84 <div class="li-num ${isDone?'done':''}">${isDone?'✓':i+1}</div>
85 <div class="li-info"><div class="li-name">${l.name}</div><div class="li-dur">⏱️ ${l.dur}</div></div>
86 <span class="li-status ${isDone?'done':''}">${isDone?'已完成':'未学习'}</span>
87 </div>`;
88 }).join('');
89}
90function checkin(){
91 const btn = document.getElementById('cb-btn');
92 btn.textContent = '✅ 已打卡';
93 btn.style.background = '#f0f2f5';
94 btn.style.color = '#999';
95 alert('⏰ 打卡成功！\n\n今日已学习 8 分钟，获得 20 成长积分');
96}
97
98// 活动
99function renderActivity(){
100 document.getElementById('activity-list').innerHTML = ACTIVITIES.map(activityCard).join('');
101 document.querySelectorAll('#act-bar a').forEach((a,i)=>{
102 a.onclick = function(){
103 const f = i===0?'全部':['亲子运动','阅读','户外','手作'][i-1];
104 let list = f==='全部' ? ACTIVITIES : ACTIVITIES.filter(x=>x.tag===f);
105 document.getElementById('activity-list').innerHTML = list.map(activityCard).join('');
106 document.querySelectorAll('#act-bar a').forEach(x=>{x.className='';x.style.color='#8a6474';x.style.borderBottom='none'});
107 a.className='active'; a.style.color='var(--primary)'; a.style.borderBottom='2px solid var(--primary)';
108 };
109 });
110}
111
112// 成长记录
113function renderGrowth(){
114 document.getElementById('growth-grid').innerHTML = GROWTH.map(g=>`
115 <div class="growth-card">
116 <div class="gc-val">${g.value}<small> ${g.unit}</small></div>
117 <div class="gc-label">${g.label}</div>
118 </div>`).join('');
119 document.getElementById('timeline').innerHTML = TIMELINE.map(t=>`
120 <div class="tl-item">
121 <div class="tl-icon">${t.icon}</div>
122 <div class="tl-info"><div class="tl-title">${t.title}</div><div class="tl-time">📅 ${t.time}</div></div>
123 </div>`).join('');
124 document.getElementById('album-grid').innerHTML = ALBUMS.map(a=>`
125 <div class="al-item" style="background:${a.color}">${a.emoji}</div>`).join('') + `
126 <div class="al-item al-add" onclick="alert('📸 添加照片（演示页）')"><span style="font-size:24px">＋</span><span>添加照片</span></div>`;
127}
128
129// 我的
130function renderMine(){
131 document.getElementById('p-name').textContent=USER.name;
132 document.getElementById('p-baby').textContent='宝宝：'+USER.baby;
133 document.getElementById('p-points').textContent=USER.points;
134 document.getElementById('p-courses').textContent=USER.courses;
135 document.getElementById('p-checkin').textContent=USER.checkin;
136 document.getElementById('p-level').textContent='🏅 '+USER.level;
137}
138