小草清真牛肉_H5/orders.html · 约 3244 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>配送订单 · 小草清真牛肉</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>配送订单</h1><span class="right"></span></header>
12<div class="order-tabs">
13 <a class="active">进行中</a><a>配送中</a><a>已完成</a>
14</div>
15<div class="track-bar">
16 <div class="tb-ico">🚚</div>
17 <div class="tb-body"><b>冷链骑手 马师傅 已出发</b><span>保温箱锁鲜 · 预计 11:20 送达城北配送中心</span></div>
18 <div class="tb-btn" data-toast="已查看实时位置">查看轨迹</div>
19</div>
20<div class="order-card">
21 <div class="oc-head"><span>城北中心 · 2026-09-14 09:12 <span class="tag">单号 CG202609140912</span></span><span class="st">配送中</span></div>
22 <div class="oc-goods"><div class="og-img">🥩</div><div class="og-name">内蒙草饲牛里脊 ×2 斤<br/><span style="font-size:11px;color:#9fb89a">散装 · 切片 · 会员价</span></div><div class="og-price">¥116</div></div>
23 <div class="oc-goods"><div class="og-img">🥘</div><div class="og-name">雪花肥牛卷 ×3 斤</div><div class="og-price">¥144</div></div>
24 <div class="oc-foot"><span>共 2 种 · 实付</span><b>¥260</b></div>
25 <div class="call-bar">
26 <i data-toast="已发起缺货替代">🔄 缺货替代</i>
27 <i data-toast="已催单">📞 催单</i>
28 <i class="main" data-toast="已通知骑手拍照签收">📷 签收拍照</i>
29 </div>
30</div>
31<div class="section-title">📡 订单实时进度</div>
32<div class="status-line" id="statusList"></div>
33<div class="order-card" style="margin-top:12px">
34 <div class="oc-head"><span>城北中心 · 2026-09-13 10:05</span><span class="st" style="color:#16a34a">已签收</span></div>
35 <div class="oc-goods"><div class="og-img">🍖</div><div class="og-name">老卤酱牛腱 ×2 斤<br/><span style="font-size:11px;color:#9fb89a">熟食 · 阿訇监制</span></div><div class="og-price">¥136</div></div>
36 <div class="oc-foot"><span>共 1 种 · 实付</span><b>¥136</b></div>
37 <div class="oc-ops"><i class="main">去评价</i><i>再次购买</i></div>
38</div>
39
40
41<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">🥩</span>选购</a><a class="" href="cart.html"><span class="icon">🛒</span>购物车</a><a class="" href="member.html"><span class="icon">👑</span>会员</a><a class=" active" href="mine.html"><span class="icon">👤</span>我的</a></nav>
42<script src="data.js"></script>
43<script>
44 var sl = document.getElementById('statusList');
45 var h = '';
46 window.DATA.orderStatus.forEach(function (t) {
47 var cls = t.now ? 'now' : (t.done ? 'done' : '');
48 h += '<div class="sl-dot ' + cls + '"><div class="sl-c"></div><div>'
49 + '<div class="sl-title">' + t.title + '</div><div class="sl-time">' + (t.time || '待处理') + '</div></div></div>';
50 });
51 sl.innerHTML = h;
52</script>
53<script src="app.js"></script>
54</body>
55</html>