首页/ mobileweb/ 某杰蔬菜批发配送/ 代码预览

💻 代码预览 · 某杰蔬菜批发配送

mw_shop · 上传者 小草
← 返回详情
某杰蔬菜批发配送_H5/orders.html · 约 3217 字符
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>车牌 陕A·8F2X · 预计 05: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-09 03:12 <span class="tag">单号 CG202609090312</span></span><span class="st">配送中</span></div>
22  <div class="oc-goods"><div class="og-img">🥬</div><div class="og-name">山东寿光大白菜 ×50 斤<br/><span style="font-size:11px;color:#9bbf93">散装 · 一级 · 批发价</span></div><div class="og-price">¥75</div></div>
23  <div class="oc-goods"><div class="og-img">🥔</div><div class="og-name">云南黄心土豆 ×30 斤</div><div class="og-price">¥57</div></div>
24  <div class="oc-foot"><span>共 3 种 · 实付</span><b>¥192</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-08 04:05</span><span class="st" style="color:#16a34a">已结算</span></div>
35  <div class="oc-goods"><div class="og-img">🍎</div><div class="og-name">栖霞红富士 ×40 斤<br/><span style="font-size:11px;color:#9bbf93">箱装 · 一级</span></div><div class="og-price">¥192</div></div>
36  <div class="oc-foot"><span>共 1 种 · 实付</span><b>¥192</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>