小草同城跑腿_H5/app.js · 约 4436 字符
1// 小草同城跑腿 · 逻辑层
2const $=s=>document.querySelector(s), $$=s=>document.querySelectorAll(s);
3const store={
4 get orders(){return JSON.parse(localStorage.getItem('rn_orders')||'[]')},
5 set orders(v){localStorage.setItem('rn_orders',JSON.stringify(v))},
6 get coupons(){return JSON.parse(localStorage.getItem('rn_coupons')||JSON.stringify(COUPONS))},
7 set coupons(v){localStorage.setItem('rn_coupons',JSON.stringify(v))}
8};
9function fmt(n){return '¥'+n.toFixed(2)}
10function toast(msg){const t=document.createElement('div');t.textContent=msg;t.style.cssText='position:fixed;top:20%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999;transition:opacity .3s';document.body.appendChild(t);setTimeout(()=>{t.style.opacity='0';setTimeout(()=>t.remove(),300)},1200)}
11/* 下单 */
12let ORDER={type:'send',item:'文件',from:'',to:'',weight:'<1kg',price:7};
13function setType(id){
14 ORDER.type=id;
15 $$('.type-tab').forEach(t=>t.classList.toggle('sel',t.dataset.id===id));
16 updateEst();
17}
18function setItem(v){
19 ORDER.item=v;
20 $$('.item-tag').forEach(t=>t.classList.toggle('sel',t.textContent===v));
21}
22function setWeight(v){
23 ORDER.weight=v;
24 $$('.weight-tag').forEach(t=>t.classList.toggle('sel',t.textContent===v));
25 updateEst();
26}
27function updateEst(){
28 const base={send:7,buy:5,pick:6,do:15}[ORDER.type]||7;
29 const weight=ORDER.weight==='5-10kg'?4:ORDER.weight==='>10kg'?9:0;
30 const total=base+weight;
31 $('#pe-base').textContent='¥'+base+'.00';
32 $('#pe-weight').textContent='¥'+weight+'.00';
33 $('#pe-total').textContent='¥'+total+'.00';
34 window._est=total;
35}
36function submitOrder(){
37 const from=$('#of-from').textContent,to=$('#of-to').textContent;
38 if(from==='选择取件地址'||to==='选择送达地址'){toast('请先填写取送地址');return}
39 const o={id:'RN'+Date.now().toString().slice(-8),type:SERVICES.find(s=>s.id===ORDER.type).name,item:ORDER.item,from,to,total:window._est||7,time:new Date().toLocaleString('zh-CN',{hour:'2-digit',minute:'2-digit'}),status:'骑手已接单',code:'48'+Math.floor(10+Math.random()*89)+Math.floor(10+Math.random()*89)};
40 store.orders=[o,...store.orders];
41 store.coupons=store.coupons.slice(1);
42 toast('下单成功，正在为你匹配骑手');
43 setTimeout(()=>location.href='track.html?id='+o.id,800);
44}
45/* 订单列表 */
46function renderOrdersPage(){
47 const wrap=$('#order-list');const orders=store.orders;
48 const hist=ORDER_HISTORY;
49 if(!orders.length&&!hist.length){wrap.innerHTML='<div class="empty"><span class="e-icon">🛵</span>还没有订单<br>下单让骑手跑起来吧～</div>';return}
50 wrap.innerHTML=orders.map(o=>`
51 <div class="order-item" onclick="location.href='track.html?id=${o.id}'">
52 <div class="oi-head"><span>${o.time} · 订单号 ${o.id}</span><span class="oi-status">● ${o.status}</span></div>
53 <div class="oi-body"><span class="oi-emoji">📦</span>
54 <div><div class="oi-name">${o.type} · ${o.item}</div><div class="oi-meta">${o.from} → ${o.to}</div></div>
55 <div class="oi-price"><b>¥${o.total}</b><div style="font-size:10px;color:#a58d5f">查看轨迹 ›</div></div>
56 </div>
57 </div>`).join('')+
58 hist.map(h=>`
59 <div class="order-item">
60 <div class="oi-head"><span>${h.time}</span><span class="oi-status" style="color:${h.status==='配送中'?'var(--primary-dark)':'var(--green)'}">${h.status==='配送中'?'● 配送中':'✓ '+h.status}</span></div>
61 <div class="oi-body"><span class="oi-emoji">${h.emoji}</span>
62 <div><div class="oi-name">${h.name}</div><div class="oi-meta">${h.from}</div></div>
63 <div class="oi-price"><b>¥${h.price}</b></div>
64 </div>
65 </div>`).join('');
66}
67function renderMine(){
68 $('#u-name').textContent=USER.name;$('#u-level').textContent=USER.level+' · 手机 '+USER.phone;
69 $('#m-coupons').textContent=USER.coupons+store.coupons.length;
70 $('#m-points').textContent=USER.points;$('#m-orders').textContent=USER.orders;
71 $('#m-saved').textContent=USER.saved.toFixed(1);
72}
73function renderTrack(){
74 $('#tl-list').innerHTML=TIMELINE.map((t,i)=>'<div class="tl-item '+(t.done?'done':'')+(i===3?' now':'')+'"><div><div class="tl-text">'+t.text+'</div><div class="tl-time">'+t.time+(t.done?' · 已完成':' · 进行中')+'</div></div></div>').join('');
75}
76