驰旭鲜卤_H5/orders.html · 约 3209 字符
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>锁鲜箱配送 · 预计 19: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-22 18:12 <span class="tag">单号 CX202609221812</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:#bba493">散装 · 麻辣 · 会员价</span></div><div class="og-price">¥30</div></div>
23 <div class="oc-goods"><div class="og-img">🐔</div><div class="og-name">藤椒卤凤爪 ×3 份</div><div class="og-price">¥57</div></div>
24 <div class="oc-foot"><span>共 2 种 · 实付</span><b>¥92</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-21 19: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:#bba493">荤菜 · 五香</span></div><div class="og-price">¥50</div></div>
36 <div class="oc-foot"><span>共 1 种 · 实付</span><b>¥50</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>