xiaocao-job/app.js · 约 6524 字符
1// 小草招聘通 · 交互逻辑
2let currentId = parseInt(location.search.match(/id=(\d+)/)?.[1] || '1');
3
4function jobCard(j){
5 return `<div class="job-card" onclick="location.href='detail.html?id=${j.id}'">
6 <div class="jc-top">
7 <div>
8 <div class="jc-title">${j.title} ${j.hot?'<span class="badge badge-hot">急聘</span>':''}${j.new?'<span class="badge badge-new">新发布</span>':''}</div>
9 <div class="jc-company">${j.company}<span class="jc-verified">✓认证</span></div>
10 </div>
11 <div class="jc-salary">${j.salary}</div>
12 </div>
13 <div class="jc-tags">${j.tags.map(t=>`<span class="tag">${t}</span>`).join('')}</div>
14 <div class="jc-meta"><span>${j.city}·${j.cityTag}</span><span>${j.exp} · ${j.edu}</span><button class="jc-deliver" onclick="event.stopPropagation();deliver()">投递</button></div>
15 </div>`;
16}
17
18// 首页
19function renderIndex(){
20 document.getElementById('job-list').innerHTML=JOBS.filter(j=>j.hot).slice(0,3).map(jobCard).join('');
21}
22
23// 职位列表
24let filter='全部';
25function renderJobs(){
26 let list=JOBS;
27 if(filter==='技术') list=list.filter(j=>j.title.includes('开发')||j.title.includes('工程师'));
28 else if(filter==='设计') list=list.filter(j=>j.title.includes('设计'));
29 else if(filter==='运营') list=list.filter(j=>j.title.includes('运营'));
30 else if(filter==='职能') list=list.filter(j=>!j.title.includes('开发')&&!j.title.includes('设计')&&!j.title.includes('运营')&&!j.title.includes('工程师'));
31 document.getElementById('job-list').innerHTML=list.map(jobCard).join('');
32}
33function setFilter(el,f){ filter=f;
34 document.querySelectorAll('.filter-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
35 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
36 renderJobs();
37}
38
39// 职位详情
40function renderDetail(){
41 const j=JOBS.find(x=>x.id===currentId);
42 if(!j) return;
43 currentId=j.id;
44 document.getElementById('detail-body').innerHTML=`
45 <div class="detail-header">
46 <div class="dh-title">${j.title}</div>
47 <div class="dh-salary">${j.salary}/月</div>
48 <div class="dh-meta">${j.city}·${j.cityTag} · ${j.exp} · ${j.edu}</div>
49 <div class="dh-tags">${j.tags.map(t=>`<span class="tag">${t}</span>`).join('')}</div>
50 </div>
51 <div class="company-card">
52 <div class="cc-logo">🏢</div>
53 <div class="cc-info"><div class="cc-name">${j.company}<span class="jc-verified" style="font-size:10px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:8px;margin-left:4px">✓认证企业</span></div><div class="cc-desc">互联网/科技 · 100-499人 · 已成立8年</div></div>
54 </div>
55 <div class="section-block">
56 <div class="sb-title">📋 职位描述</div>
57 <div class="sb-text">${j.desc}</div>
58 </div>
59 <div class="section-block">
60 <div class="sb-title">✅ 任职要求</div>
61 <ul>${j.require.map(r=>`<li>${r}</li>`).join('')}</ul>
62 </div>
63 <div class="section-block">
64 <div class="sb-title">💰 福利待遇</div>
65 <ul><li>五险一金、带薪年假</li><li>季度团建、节日福利</li><li>弹性工作、晋升通道</li><li>技术分享、学习补贴</li></ul>
66 </div>`;
67}
68function toggleFav(){
69 const el=document.getElementById('fav-icon');
70 el.textContent=el.textContent==='🤍'?'❤️':'🤍';
71}
72function deliver(){
73 alert('✅ 投递成功！\n\n简历已发送至 ${currentId ? "该企业" : ""}\n企业HR将在48小时内反馈，请保持关注');
74}
75
76// 简历
77function renderResume(){
78 const r=RESUME;
79 document.getElementById('r-name').textContent=r.name;
80 document.getElementById('r-desc').textContent=r.edu+' · '+r.school+' · '+r.exp+'经验';
81 document.getElementById('r-expect').textContent=r.expect;
82 document.getElementById('r-salary').textContent=r.expectSalary;
83 document.getElementById('r-age').textContent=r.age+'岁';
84 document.getElementById('r-edu').textContent=r.edu+' · '+r.school;
85 document.getElementById('r-phone').textContent=r.phone;
86 document.getElementById('r-email').textContent=r.email;
87 document.getElementById('r-city').textContent=r.city;
88 document.getElementById('r-skills').innerHTML=r.skills.map(s=>`<div class="chip">${s}</div>`).join('');
89 document.getElementById('r-jobs').innerHTML=r.jobs.map(j=>`
90 <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f5f5f5">
91 <div><div style="font-size:14px;font-weight:600">${j.n}</div><div style="font-size:12px;color:#999;margin-top:2px">${j.c}</div></div>
92 <span style="font-size:12px;color:#999">${j.t}</span>
93 </div>`).join('')+'<div style="text-align:center;color:var(--primary);font-size:13px;padding-top:10px;cursor:pointer" onclick="alert('＋ 添加工作经历')">＋ 添加工作经历</div>';
94}
95
96// 投递记录
97function renderDelivery(){
98 document.getElementById('deliver-list').innerHTML=DELIVERIES.map(d=>`
99 <div class="deliver-item">
100 <div class="di-top">
101 <div><div class="di-title">${d.title}</div><div class="di-company">${d.company} · ${d.time}</div></div>
102 <span class="di-status" style="color:${d.status==='面试中'?'var(--accent)':d.status==='已投递'?'var(--primary)':'var(--green)'};background:${d.status==='面试中'?'#fff7e6':d.status==='已投递'?'var(--primary-light)':'#f6ffed'}">${d.status}</span>
103 </div>
104 <div class="di-progress">
105 <div class="di-step ${d.progress>=1?'done':''}"><div class="di-dot">${d.progress>=1?'✓':'1'}</div>已投递</div>
106 <div class="di-step ${d.progress>=2?'done':''}"><div class="di-dot">${d.progress>=2?'✓':'2'}</div>已查看</div>
107 <div class="di-step ${d.progress>=3?'done':''}"><div class="di-dot">${d.progress>=3?'✓':'3'}</div>面试</div>
108 <div class="di-step ${d.progress>=4?'done':''}"><div class="di-dot">${d.progress>=4?'✓':'4'}</div>录用</div>
109 </div>
110 </div>`).join('');
111}
112
113// 我的
114function renderMine(){
115 document.getElementById('p-name').textContent=USER.name;
116 document.getElementById('p-level').textContent=USER.level;
117 document.getElementById('p-delivers').textContent=USER.delivers;
118 document.getElementById('p-interviews').textContent=USER.interviews;
119 document.getElementById('p-offers').textContent=USER.offers;
120}
121