💻 代码预览 · 小草同城跑腿

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>呼叫跑腿 · 小草同城跑腿</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>呼叫跑腿</h1><span class="right">🛵</span></div>
3<div class="card order-form">
4  <div class="section-title" style="margin:0 0 10px">选择服务</div>
5  <div class="type-tabs" id="type-tabs">
6    ${SERVICES.map(s=>'<span class="type-tab'+(s.id==='send'?' sel':'')+'" data-id="'+s.id+'">'+s.emoji+' '+s.name+'</span>').join('')}
7  </div>
8</div>
9<div class="card order-form">
10  <div class="section-title" style="margin:0 0 10px">物品信息</div>
11  <div class="item-sel" id="item-sel"></div>
12  <div style="display:flex;align-items:center;gap:10px;margin-top:14px">
13    <span style="color:#8a6a35;font-size:13px;width:56px">重量</span>
14    <div class="item-sel" style="flex:1">
15      <span class="item-tag weight-tag sel">＜1kg</span>
16      <span class="item-tag weight-tag">1-5kg</span>
17      <span class="item-tag weight-tag">5-10kg</span>
18      <span class="item-tag weight-tag">＞10kg</span>
19    </div>
20  </div>
21  <div style="margin-top:10px"><span class="tag">💰 支持保价</span><span class="tag">📦 专箱专用</span><span class="tag">🔒 实名核验</span></div>
22</div>
23<div class="card order-form">
24  <div class="section-title" style="margin:0 0 4px">取送地址</div>
25  <div class="of-row"><span class="of-label">📍 取件</span><span class="of-input" id="of-from">阳光花园3栋楼下</span><span class="of-sub" onclick="$('#of-from').textContent='公司·科技园A座12层'">换一个 ›</span></div>
26  <div class="of-row"><span class="of-label">🏠 送达</span><span class="of-input" id="of-to">幸福里小区1栋501</span><span class="of-sub" onclick="$('#of-to').textContent='政务中心2楼窗口'">换一个 ›</span></div>
27  <div class="of-row" style="border-bottom:none"><span class="of-label">💬 备注</span><span class="of-input" style="color:#a58d5f;font-weight:400">加急 / 轻拿轻放 / 电话联系…</span></div>
28</div>
29<div class="card">
30  <div class="price-est" id="price-est">
31    <div class="pe-row"><span>基础配送费</span><span id="pe-base">¥7.00</span></div>
32    <div class="pe-row"><span>重量附加费</span><span id="pe-weight">¥0.00</span></div>
33    <div class="pe-total"><span>预估合计</span><b id="pe-total">¥7.00</b></div>
34    <div style="font-size:11px;color:#a58d5f;margin-top:4px">* 实际费用以里程为准，夜间/恶劣天气可能加收</div>
35  </div>
36</div>
37<button class="btn btn-dark" style="margin:0 12px 24px;width:calc(100% - 24px)" onclick="submitOrder()">立即下单 · 呼叫附近骑手</button>
38<div style="height:20px"></div>
39<script src="data.js"></script><script src="app.js"></script>
40<script>
41$('#type-tabs').innerHTML=SERVICES.map(s=>'<span class="type-tab'+(s.id==='send'?' sel':'')+'" data-id="'+s.id+'" onclick="setType(this.dataset.id)">'+s.emoji+' '+s.name+'</span>').join('');
42$('#item-sel').innerHTML=ITEM_TYPES.map(i=>'<span class="item-tag'+(i==='文件'?' sel':'')+'" onclick="setItem(this.textContent)">'+i+'</span>').join('');
43$$('.weight-tag').forEach(t=>t.onclick=()=>{$$('.weight-tag').forEach(x=>x.classList.remove('sel'));t.classList.add('sel');setWeight(t.textContent)});
44const tp=new URLSearchParams(location.search).get('type');
45if(tp)setType(tp);
46updateEst();
47</script>
48</body></html>