小草水果店_H5/orders.html · 约 3269 字符
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:30 送达城南水果总店</span></div>
18 <div class="tb-btn" data-toast="已查看实时位置">查看轨迹</div>
19</div>
20<div class="order-card">
21 <div class="oc-head"><span>城南总店 · 2026-08-30 10:12 <span class="tag">单号 GX202608301012</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:#b09a7e">散装 · 18mm+ · 会员价</span></div><div class="og-price">¥31.8</div></div>
23 <div class="oc-goods"><div class="og-img">🍓</div><div class="og-name">丹东 99 草莓 ×1 盒（A 级）</div><div class="og-price">¥29.9</div></div>
24 <div class="oc-foot"><span>共 2 种 · 实付</span><b>¥51.7</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-08-29 09:05</span><span class="st" style="color:#16a34a">已签收</span></div>
35 <div class="oc-goods"><div class="og-img">🍉</div><div class="og-name">宁夏硒砂瓜 ×1 个（约 12 斤）<br/><span style="font-size:11px;color:#b09a7e">沙瓤 · 5 斤起称</span></div><div class="og-price">¥34.8</div></div>
36 <div class="oc-foot"><span>共 1 种 · 实付</span><b>¥34.8</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=" active" href="cart.html"><span class="icon">🛒</span>购物车</a><a class="" href="member.html"><span class="icon">👑</span>会员</a><a class="" 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>