Compare commits
No commits in common. "5789213bf1f9b22cb79e0c782e28c1d84562da5b" and "02f4adf0767d75fd03b2aabcd329c024fdb0d97c" have entirely different histories.
5789213bf1
...
02f4adf076
|
|
@ -55,6 +55,9 @@
|
|||
display: flex;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tab {
|
||||
|
|
|
|||
|
|
@ -1,543 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>店铺订单 - 牛牛蔬菜店</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(180deg, rgba(5, 60, 35, 0.8), rgba(5, 60, 35, 0));
|
||||
padding: 20px 0 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 8px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px 0;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #09542B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background-color: #09542B;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 10px;
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.order-card-header {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
.order-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-number .number {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-preparing {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-waiting {
|
||||
color: #fa4350;
|
||||
}
|
||||
|
||||
.order-no-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
color: #09542B;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.order-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell:not(:last-child) {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.cell-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cell-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid #999;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item .icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto 4px;
|
||||
}
|
||||
|
||||
.nav-item .label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav-item.active .label {
|
||||
color: #09542B;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 时间计时器样式 */
|
||||
.timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="shop-name">牛牛蔬菜店</div>
|
||||
<div class="flex-1"></div>
|
||||
<div>
|
||||
<svg class="share-icon" viewBox="0 0 1024 1024" fill="white">
|
||||
<path d="M768 853.333333a128 128 0 1 1-90.453333-37.546666l-281.6-211.2a128 128 0 1 1 0-184.746667l281.6-211.2a128 128 0 1 1 38.826666 51.84l-281.6 211.2a128 128 0 0 1 0 81.066667l281.6 211.2A128 128 0 0 1 768 853.333333z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab-item active" data-tab="prepare">待备货 (9)</div>
|
||||
<div class="tab-item" data-tab="pickup">待取货 (0)</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<!-- 待备货列表 -->
|
||||
<div class="tab-pane active" id="prepare">
|
||||
<!-- 订单 #4 -->
|
||||
<div class="order-card">
|
||||
<div class="order-card-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
流水号 <span class="number">4</span>
|
||||
</span>
|
||||
<span class="order-time">2025-07-15 15:44:08</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" data-start="2025-07-15 15:44:08">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card-body">
|
||||
<div class="cell" data-order-no="SO20250715154408001" data-day-sn="4" data-start-time="2025-07-15 15:44:08">
|
||||
<div class="cell-title">货品数量：1件</div>
|
||||
<div class="cell-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单 #3 -->
|
||||
<div class="order-card">
|
||||
<div class="order-card-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
流水号 <span class="number">3</span>
|
||||
</span>
|
||||
<span class="order-time">2025-07-15 13:33:03</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" data-start="2025-07-15 13:33:03">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card-body">
|
||||
<div class="cell" data-order-no="SO20250715133303001" data-day-sn="3" data-start-time="2025-07-15 13:33:03">
|
||||
<div class="cell-title">货品数量：1件</div>
|
||||
<div class="cell-arrow"></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-title">预售订单状态</div>
|
||||
<div class="cell-value">已付尾款</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单 #2 -->
|
||||
<div class="order-card">
|
||||
<div class="order-card-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
流水号 <span class="number">2</span>
|
||||
</span>
|
||||
<span class="order-time">2025-07-10 14:22:20</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" data-start="2025-07-10 14:22:20">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card-body">
|
||||
<div class="cell" data-order-no="SO20250710142220001" data-day-sn="2" data-start-time="2025-07-10 14:22:20">
|
||||
<div class="cell-title">货品数量：1件</div>
|
||||
<div class="cell-arrow"></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-title">预售订单状态</div>
|
||||
<div class="cell-value">已付尾款</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单 #1 -->
|
||||
<div class="order-card">
|
||||
<div class="order-card-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
流水号 <span class="number">1</span>
|
||||
</span>
|
||||
<span class="order-time">2025-07-03 18:39:01</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" data-start="2025-07-03 18:39:01">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card-body">
|
||||
<div class="cell" data-order-no="SO20250703183901001" data-day-sn="1" data-start-time="2025-07-03 18:39:01">
|
||||
<div class="cell-title">货品数量：1件</div>
|
||||
<div class="cell-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单 #3 (早期) -->
|
||||
<div class="order-card">
|
||||
<div class="order-card-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
流水号 <span class="number">3</span>
|
||||
</span>
|
||||
<span class="order-time">2025-07-02 01:48:35</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" data-start="2025-07-02 01:48:35">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card-body">
|
||||
<div class="cell" data-order-no="SO20250702014835001" data-day-sn="3" data-start-time="2025-07-02 01:48:35">
|
||||
<div class="cell-title">货品数量：1件</div>
|
||||
<div class="cell-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单 #2 (早期) -->
|
||||
<div class="order-card">
|
||||
<div class="order-card-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
流水号 <span class="number">2</span>
|
||||
</span>
|
||||
<span class="order-time">2025-07-02 01:24:16</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" data-start="2025-07-02 01:24:16">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card-body">
|
||||
<div class="cell" data-order-no="SO20250702012416001" data-day-sn="2" data-start-time="2025-07-02 01:24:16">
|
||||
<div class="cell-title">货品数量：1件</div>
|
||||
<div class="cell-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待取货列表 -->
|
||||
<div class="tab-pane" id="pickup">
|
||||
<div class="empty-state">
|
||||
暂无待取货订单
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-item active">
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M928 928H96c-17.664 0-32-14.336-32-32V416c0-17.664 14.336-32 32-32s32 14.336 32 32v448h768V416c0-17.664 14.336-32 32-32s32 14.336 32 32v480c0 17.664-14.336 32-32 32z"/>
|
||||
<path d="M512 672c-8.192 0-16.384-3.072-22.624-9.376l-320-320c-12.512-12.512-12.512-32.768 0-45.248s32.768-12.512 45.248 0L512 594.752l297.376-297.376c12.512-12.512 32.768-12.512 45.248 0s12.512 32.768 0 45.248l-320 320C528.384 668.928 520.192 672 512 672z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="label" style="color: #09542B;">工作台</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M853.333333 960H170.666667c-46.933333 0-85.333333-38.4-85.333334-85.333333V298.666667c0-46.933333 38.4-85.333333 85.333334-85.333334h682.666666c46.933333 0 85.333333 38.4 85.333334 85.333334v576c0 46.933333-38.4 85.333333-85.333334 85.333333zM170.666667 277.333333c-12.8 0-21.333333 8.533333-21.333334 21.333334v576c0 12.8 8.533333 21.333333 21.333334 21.333333h682.666666c12.8 0 21.333333-8.533333 21.333334-21.333333V298.666667c0-12.8-8.533333-21.333333-21.333334-21.333334H170.666667z"/>
|
||||
<path d="M864 384H160c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h704c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="label">消息</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z"/>
|
||||
<path d="M512 672c-88.224 0-160-71.776-160-160s71.776-160 160-160 160 71.776 160 160-71.776 160-160 160z m0-256c-52.928 0-96 43.072-96 96s43.072 96 96 96 96-43.072 96-96-43.072-96-96-96z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="label">我的</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab 切换功能
|
||||
const tabs = document.querySelectorAll('.tab-item');
|
||||
const panes = document.querySelectorAll('.tab-pane');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
const targetTab = this.getAttribute('data-tab');
|
||||
|
||||
// 移除所有active类
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
panes.forEach(p => p.classList.remove('active'));
|
||||
|
||||
// 添加active类到当前tab和对应的pane
|
||||
this.classList.add('active');
|
||||
document.getElementById(targetTab).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 订单时间计时器功能
|
||||
function updateTimers() {
|
||||
const timers = document.querySelectorAll('.timer');
|
||||
const now = new Date();
|
||||
|
||||
timers.forEach(timer => {
|
||||
const startTime = new Date(timer.getAttribute('data-start'));
|
||||
const diffInMilliseconds = now - startTime;
|
||||
|
||||
if (diffInMilliseconds < 0) return;
|
||||
|
||||
const totalSeconds = Math.floor(diffInMilliseconds / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
timer.textContent =
|
||||
String(hours).padStart(2, '0') + ':' +
|
||||
String(minutes).padStart(2, '0') + ':' +
|
||||
String(seconds).padStart(2, '0');
|
||||
});
|
||||
}
|
||||
|
||||
// 每秒更新计时器
|
||||
updateTimers();
|
||||
setInterval(updateTimers, 1000);
|
||||
|
||||
// 复制订单号功能
|
||||
function copyToClipboard(text) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
alert('复制成功');
|
||||
});
|
||||
} else {
|
||||
// 降级方案
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
alert('复制成功');
|
||||
}
|
||||
}
|
||||
|
||||
// 为复制按钮添加点击事件
|
||||
document.querySelectorAll('.copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
const orderNo = this.getAttribute('data-order-no');
|
||||
copyToClipboard(orderNo);
|
||||
});
|
||||
});
|
||||
|
||||
// 订单卡片点击 - 跳转到备货清单页面
|
||||
document.querySelectorAll('.cell').forEach(cell => {
|
||||
cell.addEventListener('click', function() {
|
||||
const orderNo = this.getAttribute('data-order-no');
|
||||
const daySn = this.getAttribute('data-day-sn');
|
||||
const startTime = this.getAttribute('data-start-time');
|
||||
|
||||
if (orderNo && daySn && startTime) {
|
||||
// 跳转到备货清单页面，并传递参数
|
||||
window.location.href = `shop-order-prepare.html?orderNo=${orderNo}&daySn=${daySn}&startTime=${encodeURIComponent(startTime)}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,547 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>备货清单</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #053C23;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-back {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
padding: 16px;
|
||||
margin-bottom: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.order-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-number .number {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-preparing {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-waiting {
|
||||
color: #fa4350;
|
||||
}
|
||||
|
||||
.order-no-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
color: #09542B;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.remark-section {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.remark-label {
|
||||
color: #666;
|
||||
padding-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.remark-text {
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.remark-notice {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
padding: 8px 12px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.product-card:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.product-spec-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #666;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.product-cost-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #09542B;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background-color: #053C23;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 0 20px;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.modal-button:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<svg class="navbar-back" viewBox="0 0 1024 1024" fill="white" onclick="history.back()">
|
||||
<path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-352c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872L387.872 512l318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z"/>
|
||||
</svg>
|
||||
<div class="navbar-title">备货清单</div>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 订单头部信息 -->
|
||||
<div class="order-header">
|
||||
<div class="order-header-row">
|
||||
<div>
|
||||
<span class="order-number">
|
||||
#<span class="number" id="daySn">4</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="order-status status-preparing">
|
||||
正在备货 <span class="timer" id="prepareTimer">00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-no-row">
|
||||
<span class="order-no">订单号：<span id="orderNo">SO20250715154408001</span></span>
|
||||
<div class="copy-btn" onclick="copyOrderNo()">
|
||||
<svg width="12" height="12" viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"/>
|
||||
</svg>
|
||||
复制
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单备注 -->
|
||||
<div class="remark-section">
|
||||
<div class="remark-label">订单备注</div>
|
||||
<div class="remark-content">
|
||||
<div class="remark-text">请帮忙挑选新鲜的蔬菜，谢谢！</div>
|
||||
<div class="remark-notice">
|
||||
<svg width="12" height="12" viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
|
||||
<path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"/>
|
||||
</svg>
|
||||
若上述备注信息和您备货商品无关，请忽略
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<div class="products-section">
|
||||
<!-- 商品1 -->
|
||||
<div class="product-card">
|
||||
<div class="product-content">
|
||||
<img src="https://via.placeholder.com/80" alt="商品图片" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">新鲜有机西红柿</div>
|
||||
<div class="product-spec-row">
|
||||
<div>500g/份</div>
|
||||
<div>x 1</div>
|
||||
</div>
|
||||
<div class="product-price">￥ 12.80</div>
|
||||
<div class="product-cost-row">
|
||||
<div>成本 ￥8.50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品2 -->
|
||||
<div class="product-card">
|
||||
<div class="product-content">
|
||||
<img src="https://via.placeholder.com/80" alt="商品图片" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">农家土鸡蛋</div>
|
||||
<div class="product-spec-row">
|
||||
<div>10个/盒</div>
|
||||
<div>x 1</div>
|
||||
</div>
|
||||
<div class="product-price">￥ 28.00</div>
|
||||
<div class="product-cost-row">
|
||||
<div>成本 ￥18.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品3 -->
|
||||
<div class="product-card">
|
||||
<div class="product-content">
|
||||
<img src="https://via.placeholder.com/80" alt="商品图片" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">精选五常大米</div>
|
||||
<div class="product-spec-row">
|
||||
<div>2.5kg/袋</div>
|
||||
<div>x 1</div>
|
||||
</div>
|
||||
<div class="product-price">￥ 45.00</div>
|
||||
<div class="product-cost-row">
|
||||
<div>成本 ￥32.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="footer-buttons">
|
||||
<button class="btn btn-primary" onclick="showCompleteModal()">备货完成</button>
|
||||
<button class="btn btn-secondary" onclick="handlePrint()">打印订单</button>
|
||||
</div>
|
||||
|
||||
<!-- 备货完成弹窗 -->
|
||||
<div class="modal" id="completeModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-title">是否确认备货完成？</div>
|
||||
<div class="modal-buttons">
|
||||
<button class="modal-button" onclick="handleRefund()">补差价</button>
|
||||
<button class="modal-button" onclick="handleConfirm()">确认</button>
|
||||
<button class="modal-button" onclick="closeModal()">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast提示 -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
// 获取URL参数
|
||||
function getUrlParam(name) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return urlParams.get(name);
|
||||
}
|
||||
|
||||
// 初始化订单数据
|
||||
const orderNo = getUrlParam('orderNo') || 'SO20250715154408001';
|
||||
const daySn = getUrlParam('daySn') || '4';
|
||||
const startTime = getUrlParam('startTime') || '2025-07-15 15:44:08';
|
||||
|
||||
document.getElementById('orderNo').textContent = orderNo;
|
||||
document.getElementById('daySn').textContent = daySn;
|
||||
|
||||
// 时间计时器
|
||||
function updateTimer() {
|
||||
const timer = document.getElementById('prepareTimer');
|
||||
const orderTime = new Date(startTime);
|
||||
const currentTime = new Date();
|
||||
const diffInMilliseconds = currentTime - orderTime;
|
||||
|
||||
if (diffInMilliseconds < 0) return;
|
||||
|
||||
const totalSeconds = Math.floor(diffInMilliseconds / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
timer.textContent =
|
||||
String(hours).padStart(2, '0') + ':' +
|
||||
String(minutes).padStart(2, '0') + ':' +
|
||||
String(seconds).padStart(2, '0');
|
||||
}
|
||||
|
||||
// 每秒更新计时器
|
||||
updateTimer();
|
||||
setInterval(updateTimer, 1000);
|
||||
|
||||
// 复制订单号
|
||||
function copyOrderNo() {
|
||||
const orderNoText = document.getElementById('orderNo').textContent;
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(orderNoText).then(() => {
|
||||
showToast('复制成功');
|
||||
});
|
||||
} else {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = orderNoText;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
showToast('复制成功');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示备货完成弹窗
|
||||
function showCompleteModal() {
|
||||
document.getElementById('completeModal').classList.add('show');
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
document.getElementById('completeModal').classList.remove('show');
|
||||
}
|
||||
|
||||
// 补差价
|
||||
function handleRefund() {
|
||||
closeModal();
|
||||
showToast('补差价功能开发中');
|
||||
}
|
||||
|
||||
// 确认备货完成
|
||||
function handleConfirm() {
|
||||
closeModal();
|
||||
showToast('备货完成');
|
||||
setTimeout(() => {
|
||||
history.back();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// 打印订单
|
||||
function handlePrint() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
// 显示Toast
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 点击弹窗外部关闭
|
||||
document.getElementById('completeModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,748 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>订单详情</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #013820;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
width: 11px;
|
||||
height: 10px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #1f1f1f;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.market-name {
|
||||
font-size: 11px;
|
||||
color: #575859;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
width: 4px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 8px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
border: 1px solid #ddd;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.product-spec {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.product-right {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #ff6300;
|
||||
}
|
||||
|
||||
.product-right .label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-right .price {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #ededed;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 13px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.price-value.discount {
|
||||
color: #ff6300;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.total-price .label {
|
||||
font-size: 13px;
|
||||
color: #1f1f1f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
width: 4px;
|
||||
height: 7px;
|
||||
margin-left: 8px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toggle-icon.up {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.total-price .value {
|
||||
font-size: 19px;
|
||||
color: #ff6300;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #1f1f1f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 85px;
|
||||
font-size: 13px;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
width: calc(100% - 85px);
|
||||
font-size: 13px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
color: #808080;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
color: #013820;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
padding: 15px 25px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 15px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 25px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
min-width: 85px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #013820;
|
||||
color: white;
|
||||
border-color: #013820;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #025530;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: white;
|
||||
color: #013820;
|
||||
border-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.view-all-text {
|
||||
font-size: 11px;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.view-all .arrow {
|
||||
width: 4px;
|
||||
height: 7px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.arrow.down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.arrow.up {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<span class="back-btn" onclick="goBack()">◀</span>
|
||||
<span class="title-text" id="pageTitle">订单详情</span>
|
||||
<span class="contact-icon" onclick="contactMerchant()">💬</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- 店铺和商品信息 -->
|
||||
<div class="card">
|
||||
<div id="shopOrdersContainer">
|
||||
<!-- 动态生成店铺订单 -->
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 价格明细 -->
|
||||
<div id="priceDetail" class="hidden">
|
||||
<!-- 动态生成价格明细 -->
|
||||
</div>
|
||||
|
||||
<div class="total-price">
|
||||
<div class="label" onclick="togglePriceDetail()">
|
||||
实付款
|
||||
<span class="toggle-icon" id="toggleIcon">›</span>
|
||||
</div>
|
||||
<div class="value">
|
||||
¥<span id="totalMoney">0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" style="position: relative; padding: 15px 0; margin-top: 15px;">
|
||||
<button class="btn btn-info" id="refundBtn" onclick="applyRefund()">申请售后</button>
|
||||
<button class="btn btn-primary" onclick="contactMerchant()">联系商家</button>
|
||||
<button class="btn btn-primary" id="callBtn" onclick="callMerchant()">致电商家</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配送信息 -->
|
||||
<div class="card">
|
||||
<div class="section-title">配送信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">配送方式</div>
|
||||
<div class="info-value" id="deliveryType">同城配送</div>
|
||||
</div>
|
||||
<div class="info-row" id="pickAddressRow" class="hidden">
|
||||
<div class="info-label">自提点地址</div>
|
||||
<div class="info-value" id="pickAddress"></div>
|
||||
</div>
|
||||
<div class="info-row" id="expressCompanyRow" class="hidden">
|
||||
<div class="info-label">快递公司</div>
|
||||
<div class="info-value" id="expressCompany"></div>
|
||||
</div>
|
||||
<div class="info-row" id="expressNoRow" class="hidden">
|
||||
<div class="info-label">快递单号</div>
|
||||
<div class="info-value">
|
||||
<span id="expressNo"></span>
|
||||
<span class="copy-btn" onclick="copyText('expressNo')">复制</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">收货地址</div>
|
||||
<div class="info-value" id="receiverInfo">
|
||||
<div id="receiverAddress"></div>
|
||||
<div id="receiverContact"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<div class="card">
|
||||
<div class="section-title">订单信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">订单备注</div>
|
||||
<div class="info-value" id="orderRemark">无</div>
|
||||
</div>
|
||||
<div class="info-row" style="cursor: pointer;" onclick="copyText('unitOrderNo')">
|
||||
<div class="info-label">订单编号</div>
|
||||
<div class="info-value" id="unitOrderNo"></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">下单时间</div>
|
||||
<div class="info-value" id="createTime"></div>
|
||||
</div>
|
||||
<div class="info-row" id="preSaleStageRow" class="hidden">
|
||||
<div class="info-label">预售状态</div>
|
||||
<div class="info-value" id="preSaleStage"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 从URL获取订单编号
|
||||
function getQueryParam(name) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return urlParams.get(name);
|
||||
}
|
||||
|
||||
const unitOrderNo = getQueryParam('unitOrderNo');
|
||||
|
||||
// 模拟订单详情数据
|
||||
const mockOrderDetail = {
|
||||
unitOrderNo: unitOrderNo || 'ORDER20250116001',
|
||||
unitType: 2,
|
||||
status: 1,
|
||||
refundStatus: 0,
|
||||
orderCategory: 1,
|
||||
marketName: '大妈集市',
|
||||
marketId: '1001',
|
||||
shopId: '2001',
|
||||
totalMoney: 88.50,
|
||||
productMoney: 80.00,
|
||||
packageMoney: 2.00,
|
||||
deliveryMoney: 8.00,
|
||||
couponMoney: 1.50,
|
||||
dispatchMoney: 0,
|
||||
dispatchMode: 0,
|
||||
deliveryType: 1, // 0:自提 1:同城配送 2:全国快递
|
||||
pickAddress: '',
|
||||
expressCompany: '',
|
||||
expressNo: '',
|
||||
receiver: {
|
||||
poi: '北京市朝阳区某某小区',
|
||||
detail: '1号楼2单元302',
|
||||
receiverName: '张三',
|
||||
receiverPhone: '13800138000'
|
||||
},
|
||||
remark: '请尽快配送',
|
||||
createTime: '2025-01-16 10:30:00',
|
||||
contactPhone: '400-123-4567',
|
||||
shopOrders: [
|
||||
{
|
||||
shopName: '新鲜蔬菜店',
|
||||
shopId: '2001',
|
||||
products: [
|
||||
{
|
||||
productId: '3001',
|
||||
productName: '新鲜白菜',
|
||||
productImg: '🥬',
|
||||
productSpecName: '500g/份',
|
||||
originPrice: 5.00,
|
||||
finalPrice: 4.50,
|
||||
productCount: 2
|
||||
},
|
||||
{
|
||||
productId: '3002',
|
||||
productName: '有机西红柿',
|
||||
productImg: '🍅',
|
||||
productSpecName: '1kg/份',
|
||||
originPrice: 12.00,
|
||||
finalPrice: 11.50,
|
||||
productCount: 3
|
||||
},
|
||||
{
|
||||
productId: '3003',
|
||||
productName: '新鲜土豆',
|
||||
productImg: '🥔',
|
||||
productSpecName: '500g/份',
|
||||
originPrice: 6.00,
|
||||
finalPrice: 5.50,
|
||||
productCount: 1
|
||||
},
|
||||
{
|
||||
productId: '3004',
|
||||
productName: '农家黄瓜',
|
||||
productImg: '🥒',
|
||||
productSpecName: '500g/份',
|
||||
originPrice: 8.00,
|
||||
finalPrice: 7.50,
|
||||
productCount: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let showAllProducts = false;
|
||||
let showPriceDetail = false;
|
||||
|
||||
// 初始化页面
|
||||
function init() {
|
||||
renderOrderDetail(mockOrderDetail);
|
||||
}
|
||||
|
||||
// 渲染订单详情
|
||||
function renderOrderDetail(order) {
|
||||
// 设置标题
|
||||
const title = getOrderTitle(order);
|
||||
document.getElementById('pageTitle').textContent = title;
|
||||
|
||||
// 设置总价
|
||||
document.getElementById('totalMoney').textContent = order.totalMoney.toFixed(2);
|
||||
|
||||
// 渲染店铺订单
|
||||
const shopOrdersContainer = document.getElementById('shopOrdersContainer');
|
||||
shopOrdersContainer.innerHTML = order.shopOrders.map((shopOrder, shopIndex) => {
|
||||
const productCount = shopOrder.products.length;
|
||||
const displayProducts = showAllProducts ? shopOrder.products : shopOrder.products.slice(0, 3);
|
||||
const remainingProducts = showAllProducts ? [] : shopOrder.products.slice(3);
|
||||
|
||||
return `
|
||||
<div class="shop-order">
|
||||
<div class="shop-header">
|
||||
<div class="shop-info">
|
||||
<span class="shop-icon">🏪</span>
|
||||
<span class="shop-name">${shopOrder.shopName}</span>
|
||||
<span class="market-name">(${order.marketName})</span>
|
||||
</div>
|
||||
<span class="arrow-right">›</span>
|
||||
</div>
|
||||
<div class="product-list">
|
||||
${displayProducts.map(product => `
|
||||
<div class="product-item">
|
||||
<div class="product-left">
|
||||
<div class="product-img" onclick="toProduct('${product.productId}')">${product.productImg}</div>
|
||||
<div class="product-info">
|
||||
<div class="product-name">${product.productName}</div>
|
||||
<div class="product-spec">规格：${product.productSpecName}</div>
|
||||
<div class="product-spec">单价：¥${product.originPrice.toFixed(2)}</div>
|
||||
<div class="product-spec">数量：${product.productCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-right">
|
||||
<span class="label">实付</span>
|
||||
<span class="price">¥${product.finalPrice.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
${productCount > 3 && !showAllProducts ? `
|
||||
<div class="view-all" onclick="toggleProducts()">
|
||||
<span class="view-all-text">查看全部</span>
|
||||
<span class="arrow down">›</span>
|
||||
</div>
|
||||
` : ''}
|
||||
${remainingProducts.length > 0 && showAllProducts ? `
|
||||
${remainingProducts.map(product => `
|
||||
<div class="product-item">
|
||||
<div class="product-left">
|
||||
<div class="product-img" onclick="toProduct('${product.productId}')">${product.productImg}</div>
|
||||
<div class="product-info">
|
||||
<div class="product-name">${product.productName}</div>
|
||||
<div class="product-spec">规格：${product.productSpecName}</div>
|
||||
<div class="product-spec">单价：¥${product.originPrice.toFixed(2)}</div>
|
||||
<div class="product-spec">数量：${product.productCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-right">
|
||||
<span class="label">实付</span>
|
||||
<span class="price">¥${product.finalPrice.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
` : ''}
|
||||
${showAllProducts && productCount > 3 ? `
|
||||
<div class="view-all" onclick="toggleProducts()">
|
||||
<span class="view-all-text">收起全部</span>
|
||||
<span class="arrow up">›</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// 渲染价格明细
|
||||
const priceDetailHtml = `
|
||||
${order.orderCategory === 1 ? `
|
||||
<div class="price-row">
|
||||
<div class="price-label">商品金额</div>
|
||||
<div class="price-value">¥${order.productMoney.toFixed(2)}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="price-row">
|
||||
<div class="price-label">包装费</div>
|
||||
<div class="price-value">¥${order.packageMoney.toFixed(2)}</div>
|
||||
</div>
|
||||
${order.dispatchMode === 1 ? `
|
||||
<div class="price-row">
|
||||
<div class="price-label">调度费(多店铺)</div>
|
||||
<div class="price-value">¥${order.dispatchMoney.toFixed(2)}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="price-row">
|
||||
<div class="price-label">配送费</div>
|
||||
<div class="price-value">¥${order.deliveryMoney.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="price-row">
|
||||
<div class="price-label">优惠券</div>
|
||||
<div class="price-value discount">-¥${order.couponMoney.toFixed(2)}</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('priceDetail').innerHTML = priceDetailHtml;
|
||||
|
||||
// 配送信息
|
||||
const deliveryTypeText = order.deliveryType === 0 ? '自提' :
|
||||
order.deliveryType === 1 ? '同城配送' : '全国快递';
|
||||
document.getElementById('deliveryType').textContent = deliveryTypeText;
|
||||
|
||||
if (order.deliveryType === 0 && order.pickAddress) {
|
||||
document.getElementById('pickAddressRow').classList.remove('hidden');
|
||||
document.getElementById('pickAddress').textContent = order.pickAddress;
|
||||
}
|
||||
|
||||
if (order.deliveryType === 2) {
|
||||
if (order.expressCompany) {
|
||||
document.getElementById('expressCompanyRow').classList.remove('hidden');
|
||||
document.getElementById('expressCompany').textContent = order.expressCompany;
|
||||
}
|
||||
if (order.expressNo) {
|
||||
document.getElementById('expressNoRow').classList.remove('hidden');
|
||||
document.getElementById('expressNo').textContent = order.expressNo;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('receiverAddress').textContent =
|
||||
order.receiver.poi + order.receiver.detail;
|
||||
document.getElementById('receiverContact').textContent =
|
||||
order.receiver.receiverName + ' ' + order.receiver.receiverPhone;
|
||||
|
||||
// 订单信息
|
||||
document.getElementById('orderRemark').textContent = order.remark || '无';
|
||||
document.getElementById('unitOrderNo').textContent = order.unitOrderNo;
|
||||
document.getElementById('createTime').textContent = order.createTime;
|
||||
|
||||
// 显示/隐藏申请售后按钮
|
||||
if (order.refundStatus === 0 && order.status < 5) {
|
||||
document.getElementById('refundBtn').classList.remove('hidden');
|
||||
} else {
|
||||
document.getElementById('refundBtn').classList.add('hidden');
|
||||
}
|
||||
|
||||
// 显示/隐藏致电商家按钮
|
||||
if (!order.contactPhone) {
|
||||
document.getElementById('callBtn').classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// 获取订单标题
|
||||
function getOrderTitle(order) {
|
||||
const { status, refundStatus } = order;
|
||||
|
||||
if (refundStatus === -2) {
|
||||
return '申请退款中';
|
||||
}
|
||||
|
||||
switch (status) {
|
||||
case 0: return '待付款';
|
||||
case 1: return '待发货';
|
||||
case 2: return '已取货';
|
||||
case 3: return '待收货';
|
||||
case 5: return '已完成';
|
||||
case 6: return '已取消';
|
||||
case 7: return '退款中';
|
||||
case 8: return '已退款';
|
||||
default: return '订单详情';
|
||||
}
|
||||
}
|
||||
|
||||
// 切换商品显示
|
||||
function toggleProducts() {
|
||||
showAllProducts = !showAllProducts;
|
||||
renderOrderDetail(mockOrderDetail);
|
||||
}
|
||||
|
||||
// 切换价格明细
|
||||
function togglePriceDetail() {
|
||||
showPriceDetail = !showPriceDetail;
|
||||
const priceDetail = document.getElementById('priceDetail');
|
||||
const toggleIcon = document.getElementById('toggleIcon');
|
||||
|
||||
if (showPriceDetail) {
|
||||
priceDetail.classList.remove('hidden');
|
||||
toggleIcon.classList.add('up');
|
||||
} else {
|
||||
priceDetail.classList.add('hidden');
|
||||
toggleIcon.classList.remove('up');
|
||||
}
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
// 跳转到商品详情
|
||||
function toProduct(productId) {
|
||||
console.log('跳转到商品详情:', productId);
|
||||
}
|
||||
|
||||
// 联系商家
|
||||
function contactMerchant() {
|
||||
console.log('联系商家');
|
||||
alert('打开聊天窗口');
|
||||
}
|
||||
|
||||
// 致电商家
|
||||
function callMerchant() {
|
||||
if (mockOrderDetail.contactPhone) {
|
||||
window.location.href = `tel:${mockOrderDetail.contactPhone}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 申请售后
|
||||
function applyRefund() {
|
||||
console.log('申请售后');
|
||||
window.location.href = `refund-standalone.html?unitOrderNo=${mockOrderDetail.unitOrderNo}`;
|
||||
}
|
||||
|
||||
// 复制文本
|
||||
function copyText(elementId) {
|
||||
const text = document.getElementById(elementId).textContent;
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
alert('复制成功');
|
||||
}).catch(() => {
|
||||
alert('复制失败');
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,531 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的订单</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #013820;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 12px 0;
|
||||
position: sticky;
|
||||
top: 48px;
|
||||
z-index: 99;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 15px;
|
||||
color: #1f1f1f;
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
background: linear-gradient(150deg, #FFC534 0%, #FF8421 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #1f1f1f;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.market-name {
|
||||
font-size: 15px;
|
||||
color: #575859;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.status-normal {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.status-important {
|
||||
color: #FF6300;
|
||||
}
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.product-images {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.order-price {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 21px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.product-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 5px;
|
||||
color: #808080;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 4px;
|
||||
height: 7px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #013820;
|
||||
color: white;
|
||||
border-color: #013820;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #025530;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: white;
|
||||
color: #013820;
|
||||
border-color: #013820;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.empty-view {
|
||||
text-align: center;
|
||||
padding: 50px 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">我的订单</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab-item active" data-tab="0">全部订单</div>
|
||||
<div class="tab-item" data-tab="1">待发货</div>
|
||||
<div class="tab-item" data-tab="2">待收货</div>
|
||||
<div class="tab-item" data-tab="3">待评价</div>
|
||||
<div class="tab-item" data-tab="4">退款/售后</div>
|
||||
</div>
|
||||
|
||||
<div class="order-list" id="orderList">
|
||||
<!-- 订单卡片动态生成 -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟订单数据
|
||||
const mockOrders = [
|
||||
{
|
||||
unitOrderNo: 'ORDER20250116001',
|
||||
unitType: 2,
|
||||
shopName: '新鲜蔬菜店',
|
||||
marketName: '大妈集市',
|
||||
status: 1, // 待发货
|
||||
refundStatus: 0,
|
||||
productImgs: '🥬,🥕,🥔',
|
||||
totalMoney: 88.50,
|
||||
productCount: 5,
|
||||
orderCategory: 1,
|
||||
},
|
||||
{
|
||||
unitOrderNo: 'ORDER20250116002',
|
||||
unitType: 2,
|
||||
shopName: '水果超市',
|
||||
marketName: '大妈集市',
|
||||
status: 3, // 待收货
|
||||
refundStatus: 0,
|
||||
productImgs: '🍎,🍌',
|
||||
totalMoney: 128.00,
|
||||
productCount: 3,
|
||||
orderCategory: 1,
|
||||
},
|
||||
{
|
||||
unitOrderNo: 'ORDER20250116003',
|
||||
unitType: 2,
|
||||
shopName: '肉类专营店',
|
||||
marketName: '大妈集市',
|
||||
status: 5, // 已完成
|
||||
refundStatus: 0,
|
||||
productImgs: '🥩',
|
||||
totalMoney: 256.80,
|
||||
productCount: 2,
|
||||
orderCategory: 1,
|
||||
evaluated: false,
|
||||
},
|
||||
{
|
||||
unitOrderNo: 'ORDER20250116004',
|
||||
unitType: 1,
|
||||
marketName: '大妈集市',
|
||||
status: 0, // 待付款
|
||||
refundStatus: 0,
|
||||
productImgs: '🍞,🥐',
|
||||
totalMoney: 99.90,
|
||||
productCount: 4,
|
||||
orderCategory: 1,
|
||||
},
|
||||
];
|
||||
|
||||
// 订单状态枚举
|
||||
const OrderStatus = {
|
||||
WAIT_PAY: 0,
|
||||
WAIT_PREPARE: 1,
|
||||
WAIT_RECEIVE: 2,
|
||||
WAIT_CONFIRM: 3,
|
||||
COMPLETE: 5,
|
||||
CANCEL: 6,
|
||||
REFUNDING: 7,
|
||||
REFUND: 8,
|
||||
};
|
||||
|
||||
let currentTab = 0;
|
||||
|
||||
// 初始化页面
|
||||
function init() {
|
||||
// 绑定tab点击事件
|
||||
document.querySelectorAll('.tab-item').forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
// 移除所有active状态
|
||||
document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
|
||||
// 添加当前active状态
|
||||
this.classList.add('active');
|
||||
// 获取tab索引
|
||||
currentTab = parseInt(this.dataset.tab);
|
||||
// 渲染订单列表
|
||||
renderOrders();
|
||||
});
|
||||
});
|
||||
|
||||
// 初始渲染
|
||||
renderOrders();
|
||||
}
|
||||
|
||||
// 根据tab过滤订单
|
||||
function filterOrders(orders, tabIndex) {
|
||||
switch (tabIndex) {
|
||||
case 0: // 全部订单
|
||||
return orders;
|
||||
case 1: // 待发货
|
||||
return orders.filter(o => o.status === OrderStatus.WAIT_PREPARE);
|
||||
case 2: // 待收货
|
||||
return orders.filter(o => o.status === OrderStatus.WAIT_CONFIRM);
|
||||
case 3: // 待评价
|
||||
return orders.filter(o => o.status === OrderStatus.COMPLETE && !o.evaluated);
|
||||
case 4: // 退款/售后
|
||||
return orders.filter(o => o.refundStatus !== 0 || o.status === OrderStatus.REFUNDING || o.status === OrderStatus.REFUND);
|
||||
default:
|
||||
return orders;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取订单状态文本和样式
|
||||
function getOrderStatus(order) {
|
||||
const { status, refundStatus } = order;
|
||||
|
||||
if (refundStatus === -2) {
|
||||
return { text: '申请退款中', isImportant: true };
|
||||
}
|
||||
|
||||
let text = '';
|
||||
let isImportant = false;
|
||||
|
||||
switch (status) {
|
||||
case OrderStatus.WAIT_PAY:
|
||||
text = '待付款';
|
||||
isImportant = true;
|
||||
break;
|
||||
case OrderStatus.WAIT_PREPARE:
|
||||
text = '待发货';
|
||||
isImportant = false;
|
||||
break;
|
||||
case OrderStatus.WAIT_CONFIRM:
|
||||
text = '待收货';
|
||||
isImportant = true;
|
||||
break;
|
||||
case OrderStatus.COMPLETE:
|
||||
text = '已完成';
|
||||
isImportant = false;
|
||||
break;
|
||||
case OrderStatus.CANCEL:
|
||||
text = '已取消';
|
||||
isImportant = false;
|
||||
break;
|
||||
case OrderStatus.REFUNDING:
|
||||
text = '退款中';
|
||||
isImportant = false;
|
||||
break;
|
||||
case OrderStatus.REFUND:
|
||||
text = '已退款';
|
||||
isImportant = false;
|
||||
break;
|
||||
default:
|
||||
text = '未知状态';
|
||||
isImportant = false;
|
||||
}
|
||||
|
||||
return { text, isImportant };
|
||||
}
|
||||
|
||||
// 渲染订单列表
|
||||
function renderOrders() {
|
||||
const orderListEl = document.getElementById('orderList');
|
||||
const filteredOrders = filterOrders(mockOrders, currentTab);
|
||||
|
||||
if (filteredOrders.length === 0) {
|
||||
orderListEl.innerHTML = '<div class="empty-view">暂无订单数据哦</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
orderListEl.innerHTML = filteredOrders.map(order => {
|
||||
const statusInfo = getOrderStatus(order);
|
||||
const productImages = order.productImgs.split(',').slice(0, 3);
|
||||
|
||||
return `
|
||||
<div class="order-card" onclick="toOrderDetail('${order.unitOrderNo}')">
|
||||
<div class="order-header">
|
||||
<div class="shop-info">
|
||||
<span class="shop-icon">🏪</span>
|
||||
${order.unitType === 2 ? `
|
||||
<span class="shop-name">${order.shopName}</span>
|
||||
<span class="market-name">(${order.marketName})</span>
|
||||
` : `
|
||||
<span class="market-name">${order.marketName}</span>
|
||||
`}
|
||||
</div>
|
||||
<div class="order-status ${statusInfo.isImportant ? 'status-important' : 'status-normal'}">
|
||||
${statusInfo.text}
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-content">
|
||||
<div class="product-images">
|
||||
${productImages.map(emoji => `<div class="product-img">${emoji}</div>`).join('')}
|
||||
</div>
|
||||
<div class="order-price">
|
||||
<div class="price-value">
|
||||
<span class="price-symbol">￥</span>${order.totalMoney.toFixed(2)}
|
||||
</div>
|
||||
<div class="product-count">
|
||||
共${order.productCount}件
|
||||
<span class="arrow-icon">›</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${renderOrderActions(order)}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 渲染订单操作按钮
|
||||
function renderOrderActions(order) {
|
||||
const { status, orderCategory } = order;
|
||||
let buttons = '';
|
||||
|
||||
// 待付款
|
||||
if (status === OrderStatus.WAIT_PAY && orderCategory === 1) {
|
||||
buttons = `
|
||||
<div class="order-actions">
|
||||
<button class="btn btn-info" onclick="event.stopPropagation(); cancelOrder('${order.unitOrderNo}')">取消订单</button>
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); payOrder('${order.unitOrderNo}')">去结算</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// 待收货
|
||||
else if (status === OrderStatus.WAIT_CONFIRM) {
|
||||
buttons = `
|
||||
<div class="order-actions">
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); confirmReceive('${order.unitOrderNo}')">确认收货</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// 已完成
|
||||
else if (status === OrderStatus.COMPLETE && orderCategory === 1) {
|
||||
buttons = `
|
||||
<div class="order-actions">
|
||||
<button class="btn btn-info" onclick="event.stopPropagation(); addToCart('${order.unitOrderNo}')">加入购物车</button>
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); orderAgain('${order.unitOrderNo}')">再来一单</button>
|
||||
${!order.evaluated ? `<button class="btn btn-primary" onclick="event.stopPropagation(); goReview('${order.unitOrderNo}')">去评价</button>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
// 跳转到订单详情
|
||||
function toOrderDetail(unitOrderNo) {
|
||||
console.log('跳转到订单详情:', unitOrderNo);
|
||||
window.location.href = `order-detail.html?unitOrderNo=${unitOrderNo}`;
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
function cancelOrder(unitOrderNo) {
|
||||
if (confirm('是否确认取消订单？')) {
|
||||
console.log('取消订单:', unitOrderNo);
|
||||
alert('取消订单成功');
|
||||
renderOrders();
|
||||
}
|
||||
}
|
||||
|
||||
// 支付订单
|
||||
function payOrder(unitOrderNo) {
|
||||
console.log('去支付:', unitOrderNo);
|
||||
alert('跳转到支付页面');
|
||||
}
|
||||
|
||||
// 确认收货
|
||||
function confirmReceive(unitOrderNo) {
|
||||
if (confirm('是否确认收货？')) {
|
||||
console.log('确认收货:', unitOrderNo);
|
||||
alert('确认收货成功');
|
||||
renderOrders();
|
||||
}
|
||||
}
|
||||
|
||||
// 再来一单
|
||||
function orderAgain(unitOrderNo) {
|
||||
console.log('再来一单:', unitOrderNo);
|
||||
alert('跳转到结算页面');
|
||||
}
|
||||
|
||||
// 加入购物车
|
||||
function addToCart(unitOrderNo) {
|
||||
console.log('加入购物车:', unitOrderNo);
|
||||
alert('加入购物车成功');
|
||||
}
|
||||
|
||||
// 去评价
|
||||
function goReview(unitOrderNo) {
|
||||
console.log('去评价:', unitOrderNo);
|
||||
alert('跳转到评价页面');
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue