app.js · 约 4760 字符
1// 小草校园通 · 交互逻辑
2function $(id){return document.getElementById(id)}
3const noticeItem = n => `
4 <a class="notice-item" href="notice.html">
5 <div class="ni-badge" style="background:${n.type==='lost'?'var(--primary-light)':n.type==='pay'?'#fff7e6':'var(--primary-light)'};color:${n.type==='lost'?'var(--red)':n.type==='pay'?'var(--gold)':'var(--primary)'}">${n.badge}</div>
6 <div class="ni-info"><div class="ni-title">${n.title}</div><div class="ni-desc">${n.desc}</div></div>
7 <span class="ni-time">${n.time}</span>
8 </a>`;
9
10// 首页
11function renderIndex(){
12 $('hero-sub').textContent = '今天有 ' + (SCHEDULE['周五'].length || 0) + ' 节课 · 校园卡余额 ¥' + CARD.balance;
13 $('quick-grid').innerHTML = QUICK.map(q=>`<a href="${q.href}"><span class="qicon">${q.icon}</span>${q.name}</a>`).join('');
14 $('notice-list').innerHTML = NOTICES.slice(0,4).map(noticeItem).join('');
15 const today = new Date().getDay();
16 const weekIdx = today>=1&&today<=5 ? today-1 : 4;
17 const key = WEEK[weekIdx];
18 const courses = SCHEDULE[key]||[];
19 $('today-course').innerHTML = '<div class="sd-title"><b>' + key + '</b><span>共 ' + courses.length + ' 节课</span></div>' +
20 (courses.length ? courses.map(c=>`
21 <div class="course-row">
22 <div class="cr-time"><b>${c[0].split(':')[0]}:00</b>${c[0]}</div>
23 <div class="cr-info"><div class="cr-name">${c[1]}</div><div class="cr-meta">${key} ${c[0]} · 第${parseInt(c[0])/2}大节</div></div>
24 <span class="cr-loc">${c[2]}</span>
25 </div>`).join('') : '<div class="empty"><div class="eicon">🎉</div><div>今天没有课，好好休息吧</div></div>');
26}
27
28// 课表
29let curDay = 4;
30function renderSchedule(){
31 const wb = $('week-bar');
32 wb.innerHTML = WEEK.map((d,i)=>`<a class="${i===curDay?'active':''}" onclick="setDay(${i})">${d}</a>`).join('');
33 renderCourses();
34}
35function setDay(i){ curDay=i; renderCourses(); }
36function renderCourses(){
37 const key = WEEK[curDay];
38 const courses = SCHEDULE[key]||[];
39 $('schedule-list').innerHTML = `
40 <div class="schedule-day">
41 <div class="sd-title"><b>${key}</b><span>共 ${courses.length} 节课</span></div>
42 ${courses.length ? courses.map(c=>`
43 <div class="course-row">
44 <div class="cr-time"><b>${c[0].split(':')[0]}:00</b>${c[0]}</div>
45 <div class="cr-info"><div class="cr-name">${c[1]}</div><div class="cr-meta">${key} ${c[0]} · 第${parseInt(c[0])/2}大节</div></div>
46 <span class="cr-loc">${c[2]}</span>
47 </div>`).join('') : '<div class="empty" style="padding:30px"><div class="eicon">🎉</div><div>今天没有课</div></div>'}
48 </div>`;
49}
50
51// 成绩
52function renderGrades(){
53 $('score-list').innerHTML = SCORES.map(s=>`
54 <div class="score-item">
55 <div class="si-name">${s.name}</div>
56 <span class="si-credit">${s.credit}学分</span>
57 <span class="si-score ${s.grade}">${s.score}</span>
58 </div>`).join('');
59}
60
61// 校园卡
62let cardFrozen = false;
63function renderCard(){
64 $('c-balance').textContent = CARD.balance;
65 $('c-status').textContent = cardFrozen ? '状态：已挂失' : '状态：正常';
66 $('consum-list').innerHTML = CONSUMS.map(c=>`
67 <div class="consum-item">
68 <div class="co-icon">${c.icon}</div>
69 <div class="co-info"><b>${c.name}</b><span>${c.time}</span></div>
70 <span class="co-amount" style="color:${c.amount.startsWith('+')?'var(--primary)':'#333'}">${c.amount}</span>
71 </div>`).join('');
72}
73function recharge(){ alert('💳 即将跳转充值页面\n支持微信/支付宝/银行卡充值'); }
74function freezeCard(){
75 cardFrozen = !cardFrozen;
76 renderCard();
77 alert(cardFrozen ? '🔒 校园卡已挂失，请尽快补办新卡' : '✅ 已解除挂失');
78}
79
80// 资讯
81let noticeFilter = '';
82function renderNotices(){
83 const list = $('notice-list');
84 let notices = NOTICES;
85 if(noticeFilter) notices = notices.filter(n=>n.badge===noticeFilter);
86 list.innerHTML = notices.length ? notices.map(noticeItem).join('') :
87 '<div class="empty"><div class="eicon">📢</div><div>暂无相关资讯</div></div>';
88}
89function filterNotice(el, f){
90 noticeFilter = f;
91 document.querySelectorAll('.status-bar a').forEach(a=>{a.classList.remove('active');a.style.color='#666';a.style.fontWeight='400';});
92 el.classList.add('active'); el.style.color='var(--primary)'; el.style.fontWeight='600';
93 renderNotices();
94}
95
96// 我的
97function renderMine(){
98 $('m-name').textContent = STUDENT.name;
99 $('m-dept').textContent = STUDENT.dept;
100 $('m-balance').textContent = STUDENT.balance;
101 $('m-courses').textContent = STUDENT.courses;
102 $('m-avg').textContent = STUDENT.avg;
103}
104