Compare commits
5 Commits
02f4adf076
...
5789213bf1
| Author | SHA1 | Date |
|---|---|---|
 linbin
|
5789213bf1 | |
|
linbin
|
920ea3d47e | |
|
linbin
|
6a08901a82 | |
|
linbin
|
c56b88d0ae | |
|
linbin
|
89ec4e1156 |
|
|
@ -55,9 +55,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
background: white;
|
background: white;
|
||||||
border-bottom: 1px solid #e5e5e5;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,543 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,547 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,748 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,531 @@
|
||||||
|
<!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