小草文具店_H5/orders.html · 约 3236 字符
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>书包本册已打包 · 预计今日 18:00 送达城西仓</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-21 09:12 <span class="tag">单号 WB202609210912</span></span><span class="st">配送中</span></div>
22 <div class="oc-goods"><div class="og-img">🖊️</div><div class="og-name">速干中性笔 0.5mm ×2 盒<br/><span style="font-size:11px;color:#9aa3b8">黑 · 盒装 · 会员价</span></div><div class="og-price">¥38</div></div>
23 <div class="oc-goods"><div class="og-img">📒</div><div class="og-name">A5 简约笔记本 ×3 本</div><div class="og-price">¥36</div></div>
24 <div class="oc-foot"><span>共 2 种 · 实付</span><b>¥66</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-20 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">双层文具盒 ×1 个<br/><span style="font-size:11px;color:#9aa3b8">大容量 · 分层收纳</span></div><div class="og-price">¥25</div></div>
36 <div class="oc-foot"><span>共 1 种 · 实付</span><b>¥25</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>