app.js · 约 4801 字符
1// 小草快递助手 · 交互逻辑
2function $(id){return document.getElementById(id)}
3const pkgCard = p => `
4 <a class="pkg-card" href="trace.html?id=${p.id}">
5 <div class="pk-icon">${p.icon}</div>
6 <div class="pk-info">
7 <div class="pk-name">${p.name}<span class="st" style="color:${p.status==='已签收'?'var(--secondary)':p.status==='待取件'?'var(--blue)':'var(--primary)'}">${p.status}</span></div>
8 <div class="pk-no">${p.company} · ${p.no}</div>
9 <div class="pk-last">${p.last}</div>
10 ${p.code?`<span class="pk-code">取件码 ${p.code}</span>`:''}
11 </div>
12 </a>`;
13
14// 首页
15function renderIndex(){
16 $('quick-grid').innerHTML = QUICK.map(q=>`<a href="${q.href}"><span class="qicon">${q.icon}</span>${q.name}</a>`).join('');
17 $('pkg-list').innerHTML = PKGS.filter(p=>p.status!=='已签收').slice(0,3).map(pkgCard).join('');
18 $('coupon-list').innerHTML = COUPONS.slice(0,2).map(c=>`
19 <div class="card" style="display:flex;gap:12px;align-items:center;padding:12px">
20 <div style="font-size:32px">🎟️</div>
21 <div style="flex:1"><div style="font-weight:600;font-size:14px">${c.name}</div><div style="font-size:12px;color:#999;margin-top:2px">${c.desc} · ${c.expire}到期</div></div>
22 <span class="badge badge-hot">¥${c.amount}</span>
23 </div>`).join('');
24}
25function doTrack(){
26 const no = $('track-input').value.trim();
27 if(!no){ alert('请输入快递单号'); return; }
28 alert('🔍 正在查询：' + no + '\n演示环境已展示模拟物流轨迹');
29 location.href = 'trace.html';
30}
31
32// 物流详情
33function renderTrace(){
34 const id = new URLSearchParams(location.search).get('id')||1;
35 const p = PKGS.find(x=>x.id==id) || PKGS[0];
36 $('t-status').textContent = p.status;
37 $('t-name').textContent = p.name;
38 $('t-company').textContent = p.company;
39 $('t-no').textContent = p.no;
40 $('trace-list').innerHTML = TRACES.map((t,i)=>`
41 <div class="trace-item ${i===0?'current':i>0?'done':''}">
42 <span class="tdot"></span>
43 <div class="tt">${t.t}</div>
44 <div class="tm">${t.tm}</div>
45 </div>`).join('');
46}
47
48// 寄件
49let curCmp = 1;
50function renderSend(){
51 $('cmp-row').innerHTML = COMPS.map((c,i)=>`
52 <div class="cmp ${i===curCmp?'active':''}" onclick="pickCmp(${i})">
53 <span class="ci">${c.icon}</span><b>${c.name}</b><span>${c.price}</span>
54 </div>`).join('');
55 const price = 10 + curCmp; // 首重价
56 const coupon = 5;
57 $('s-price').textContent = '¥' + price;
58 $('s-coupon').textContent = '-¥' + coupon;
59 $('s-total').textContent = '¥' + (price - coupon);
60}
61function pickCmp(i){ curCmp=i; renderSend(); }
62function doSend(){
63 alert('✅ 下单成功！\n快递员将在预约时间上门取件\n请提前打包好物品，保持电话畅通');
64}
65
66// 包裹列表
67let pkgFilter = '';
68function renderPkgs(){
69 const list = $('pkg-list');
70 let pkgs = PKGS;
71 if(pkgFilter) pkgs = pkgs.filter(p=>p.status===pkgFilter);
72 list.innerHTML = pkgs.length ? pkgs.map(pkgCard).join('') :
73 '<div class="empty"><div class="eicon">📦</div><div>暂无该状态的包裹</div></div>';
74}
75function filterPkg(el, f){ pkgFilter=f;
76 document.querySelectorAll('.status-bar a').forEach(a=>a.classList.remove('active'));
77 el.classList.add('active'); renderPkgs();
78}
79
80// 地址簿
81function renderAddr(){
82 $('recv-list').innerHTML = ADDRS.filter(a=>a.type==='收').map(a=>`
83 <div class="addr-item">
84 <div class="ai-type">${a.type}</div>
85 <div class="ai-info"><b>${a.name} <span>${a.phone}</span></b><div>${a.addr}</div></div>
86 <span style="color:#ccc">${a.default?'⭐':''}</span>
87 </div>`).join('');
88 $('send-list').innerHTML = ADDRS.filter(a=>a.type==='寄').map(a=>`
89 <div class="addr-item">
90 <div class="ai-type send">${a.type}</div>
91 <div class="ai-info"><b>${a.name} <span>${a.phone}</span></b><div>${a.addr}</div></div>
92 <span style="color:#ccc">${a.default?'⭐':''}</span>
93 </div>`).join('');
94}
95function addAddr(){ alert('📝 演示环境：新增地址功能已预留接口'); }
96
97// 我的
98function renderMine(){
99 $('m-name').textContent = MEMBER.name;
100 $('m-points').textContent = MEMBER.points;
101 $('m-pkgs').textContent = MEMBER.pkgs;
102 $('m-sent').textContent = MEMBER.sent;
103 $('m-coupon-list').innerHTML = COUPONS.map(c=>`
104 <div class="card" style="display:flex;gap:12px;align-items:center;padding:12px">
105 <div style="font-size:32px">🎟️</div>
106 <div style="flex:1"><div style="font-weight:600;font-size:14px">${c.name}</div><div style="font-size:12px;color:#999;margin-top:2px">${c.desc} · ${c.expire}到期</div></div>
107 <span class="badge badge-hot">¥${c.amount}</span>
108 </div>`).join('');
109}
110