2025-08-19 16:55:45 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-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', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 100vw;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 页面头部 */
|
|
|
|
|
.page-header {
|
|
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 20px 16px 16px;
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-title {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 搜索表单 */
|
|
|
|
|
.search-form {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
border-bottom: 8px solid #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item {
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-label {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input,
|
|
|
|
|
.form-select {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
border: 1px solid #e0e0e0;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
transition: border-color 0.3s, box-shadow 0.3s;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
appearance: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input:focus,
|
|
|
|
|
.form-select:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: #667eea;
|
|
|
|
|
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-select {
|
|
|
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
|
|
|
|
|
background-position: right 12px center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:active {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
transform: translateY(1px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default {
|
|
|
|
|
background: #fff;
|
|
|
|
|
color: #666;
|
|
|
|
|
border: 1px solid #e0e0e0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default:active {
|
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
transform: translateY(1px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 订单卡片列表 */
|
|
|
|
|
.orders-container {
|
|
|
|
|
padding: 0 16px 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-card {
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-card:active {
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-header {
|
|
|
|
|
padding: 16px;
|
|
|
|
|
background: linear-gradient(90deg, #f8f9ff 0%, #fff 100%);
|
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-number {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-status {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 16px;
|
|
|
|
|
right: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-tag {
|
|
|
|
|
padding: 4px 10px;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-pending {
|
|
|
|
|
background-color: #fff7e6;
|
|
|
|
|
color: #fa8c16;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-processing {
|
|
|
|
|
background-color: #e6f7ff;
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-completed {
|
|
|
|
|
background-color: #f6ffed;
|
|
|
|
|
color: #52c41a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-meta {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-summary {
|
|
|
|
|
padding: 16px;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
gap: 12px 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.summary-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.summary-label {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.summary-value {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.summary-value.price {
|
|
|
|
|
color: #f5222d;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 展开/折叠功能 */
|
|
|
|
|
.expand-section {
|
|
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-header {
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
background: #fafafa;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
transition: background-color 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-header:active {
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-title {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-icon {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
transition: transform 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-icon.rotated {
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-content {
|
|
|
|
|
display: none;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
background: #fafbfc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.expand-content.show {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 店铺订单样式 */
|
|
|
|
|
.store-order {
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
border: 1px solid #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.store-name {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.store-order-no {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 商品明细样式 */
|
|
|
|
|
.product-list {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 12px 0;
|
|
|
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-item:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-info {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-name {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-meta {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-price {
|
|
|
|
|
text-align: right;
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.original-price {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #999;
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.points-info {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #fa8c16;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.payment-info {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #f5222d;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 无数据状态 */
|
|
|
|
|
.no-data {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 60px 20px;
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no-data-icon {
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
color: #ddd;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 加载状态 */
|
|
|
|
|
.loading {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 40px 20px;
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loading::before {
|
|
|
|
|
content: '';
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border: 2px solid #e0e0e0;
|
|
|
|
|
border-top-color: #667eea;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 1s linear infinite;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 点击反馈 */
|
|
|
|
|
.touchable {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.touchable::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: rgba(0,0,0,0.1);
|
|
|
|
|
transition: width 0.6s, height 0.6s;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.touchable:active::before {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 优化小屏幕显示 */
|
|
|
|
|
@media (max-width: 360px) {
|
|
|
|
|
.order-summary {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.summary-item {
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-group {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* iPhone X 等设备的安全区域 */
|
|
|
|
|
@supports (padding: max(0px)) {
|
|
|
|
|
.page-header {
|
|
|
|
|
padding-top: max(20px, env(safe-area-inset-top));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.orders-container {
|
|
|
|
|
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- 页面头部 -->
|
|
|
|
|
<div class="page-header">
|
|
|
|
|
<h1 class="page-title">积分订单管理</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 搜索表单 -->
|
|
|
|
|
<div class="search-form">
|
|
|
|
|
<div class="form-item">
|
|
|
|
|
<label class="form-label">摊铺</label>
|
|
|
|
|
<select class="form-select" id="storeSelect">
|
|
|
|
|
<option value="">全部</option>
|
|
|
|
|
<option value="store1">牛牛蔬菜店</option>
|
|
|
|
|
<option value="store2">小明水果店</option>
|
|
|
|
|
<option value="store3">王记杂货铺</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-item">
|
|
|
|
|
<label class="form-label">商品名称</label>
|
|
|
|
|
<input type="text" class="form-input" placeholder="请输入商品名称" id="productName">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-item">
|
|
|
|
|
<label class="form-label">订单状态</label>
|
|
|
|
|
<select class="form-select" id="orderStatus">
|
|
|
|
|
<option value="">全部订单</option>
|
|
|
|
|
<option value="pending">待备货</option>
|
|
|
|
|
<option value="preparing">待取货</option>
|
|
|
|
|
<option value="shipping">待收货</option>
|
|
|
|
|
<option value="completed">已完成</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
<button class="btn btn-primary touchable" onclick="searchOrders()">查询</button>
|
|
|
|
|
<button class="btn btn-default touchable" onclick="resetForm()">重置</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 订单列表容器 -->
|
|
|
|
|
<div class="orders-container" id="ordersContainer">
|
|
|
|
|
<!-- 订单卡片将通过JavaScript动态生成 -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 无数据状态 -->
|
|
|
|
|
<div class="no-data" id="noDataMsg" style="display: none;">
|
|
|
|
|
<div class="no-data-icon">📋</div>
|
|
|
|
|
<div>暂无订单数据</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 加载状态 -->
|
|
|
|
|
<div class="loading" id="loadingMsg" style="display: none;">
|
|
|
|
|
数据加载中...
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 模拟结算订单数据
|
|
|
|
|
const settlementOrders = [
|
|
|
|
|
{
|
|
|
|
|
settlementOrderNo: 'SU2024010001',
|
|
|
|
|
status: '已完成',
|
|
|
|
|
deliveryFee: 8.00,
|
|
|
|
|
packageFee: 2.00,
|
|
|
|
|
dispatchFee: 3.00,
|
|
|
|
|
totalFee: 13.00,
|
|
|
|
|
paymentTime: '2024-01-15 14:30:22',
|
|
|
|
|
storeOrders: [
|
|
|
|
|
{
|
|
|
|
|
storeOrderNo: 'SO2024010001',
|
|
|
|
|
booth: '牛牛蔬菜店',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
productOrderNo: 'PO2024010001',
|
|
|
|
|
productName: '有机蔬菜礼盒',
|
|
|
|
|
originalPrice: 158.00,
|
|
|
|
|
productQuantity: 2,
|
|
|
|
|
pointsUsed: 200,
|
|
|
|
|
customerPayment: 0.00,
|
|
|
|
|
pointsType: '积分换购',
|
|
|
|
|
status: '已完成'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
storeOrderNo: 'SO2024010005',
|
|
|
|
|
booth: '小明水果店',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
productOrderNo: 'PO2024010005',
|
|
|
|
|
productName: '进口车厘子',
|
|
|
|
|
originalPrice: 98.00,
|
|
|
|
|
productQuantity: 1,
|
|
|
|
|
pointsUsed: 50,
|
|
|
|
|
customerPayment: 49.00,
|
|
|
|
|
pointsType: '积分优惠购',
|
|
|
|
|
status: '已完成'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
productOrderNo: 'PO2024010006',
|
|
|
|
|
productName: '新鲜橙子',
|
|
|
|
|
originalPrice: 45.00,
|
|
|
|
|
productQuantity: 3,
|
|
|
|
|
pointsUsed: 90,
|
|
|
|
|
customerPayment: 0.00,
|
|
|
|
|
pointsType: '积分换购',
|
|
|
|
|
status: '已完成'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
settlementOrderNo: 'SU2024010002',
|
|
|
|
|
status: '待备货',
|
|
|
|
|
deliveryFee: 6.00,
|
|
|
|
|
packageFee: 1.50,
|
|
|
|
|
dispatchFee: 2.00,
|
|
|
|
|
totalFee: 9.50,
|
|
|
|
|
paymentTime: '2024-01-15 15:45:10',
|
|
|
|
|
storeOrders: [
|
|
|
|
|
{
|
|
|
|
|
storeOrderNo: 'SO2024010002',
|
|
|
|
|
booth: '小明水果店',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
productOrderNo: 'PO2024010002',
|
|
|
|
|
productName: '进口苹果',
|
|
|
|
|
originalPrice: 105.00,
|
|
|
|
|
productQuantity: 1,
|
|
|
|
|
pointsUsed: 150,
|
|
|
|
|
customerPayment: 52.50,
|
|
|
|
|
pointsType: '积分优惠购',
|
|
|
|
|
status: '待备货'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
settlementOrderNo: 'SU2024010003',
|
|
|
|
|
status: '待取货',
|
|
|
|
|
deliveryFee: 10.00,
|
|
|
|
|
packageFee: 3.00,
|
|
|
|
|
dispatchFee: 4.00,
|
|
|
|
|
totalFee: 17.00,
|
|
|
|
|
paymentTime: '2024-01-15 16:20:35',
|
|
|
|
|
storeOrders: [
|
|
|
|
|
{
|
|
|
|
|
storeOrderNo: 'SO2024010003',
|
|
|
|
|
booth: '王记杂货铺',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
productOrderNo: 'PO2024010003',
|
|
|
|
|
productName: '新鲜牛奶',
|
|
|
|
|
originalPrice: 268.00,
|
|
|
|
|
productQuantity: 4,
|
|
|
|
|
pointsUsed: 380,
|
|
|
|
|
customerPayment: 0.00,
|
|
|
|
|
pointsType: '积分换购',
|
|
|
|
|
status: '待取货'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
settlementOrderNo: 'SU2024010004',
|
|
|
|
|
status: '待收货',
|
|
|
|
|
deliveryFee: 15.00,
|
|
|
|
|
packageFee: 4.50,
|
|
|
|
|
dispatchFee: 5.00,
|
|
|
|
|
totalFee: 24.50,
|
|
|
|
|
paymentTime: '2024-01-15 17:35:28',
|
|
|
|
|
storeOrders: [
|
|
|
|
|
{
|
|
|
|
|
storeOrderNo: 'SO2024010004',
|
|
|
|
|
booth: '牛牛蔬菜店',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
productOrderNo: 'PO2024010004',
|
|
|
|
|
productName: '精品牛肉',
|
|
|
|
|
originalPrice: 456.00,
|
|
|
|
|
productQuantity: 6,
|
|
|
|
|
pointsUsed: 580,
|
|
|
|
|
customerPayment: 228.00,
|
|
|
|
|
pointsType: '积分优惠购',
|
|
|
|
|
status: '待收货'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 渲染订单卡片
|
|
|
|
|
function renderOrders(orders = []) {
|
|
|
|
|
const container = document.getElementById('ordersContainer');
|
|
|
|
|
const noDataMsg = document.getElementById('noDataMsg');
|
|
|
|
|
|
|
|
|
|
if (orders.length === 0) {
|
|
|
|
|
container.innerHTML = '';
|
|
|
|
|
noDataMsg.style.display = 'block';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
noDataMsg.style.display = 'none';
|
|
|
|
|
|
|
|
|
|
container.innerHTML = orders.map(order => `
|
|
|
|
|
<div class="order-card">
|
|
|
|
|
<!-- 订单头部 -->
|
|
|
|
|
<div class="order-header">
|
2025-08-19 17:20:19 +00:00
|
|
|
<div class="order-number">结算订单 ${order.settlementOrderNo}</div>
|
2025-08-19 16:55:45 +00:00
|
|
|
<div class="order-meta">${order.paymentTime}</div>
|
|
|
|
|
<div class="order-status">
|
|
|
|
|
<span class="status-tag ${getStatusClass(order.status)}">${order.status}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 订单摘要 -->
|
|
|
|
|
<div class="order-summary">
|
|
|
|
|
<div class="summary-item">
|
|
|
|
|
<span class="summary-label">配送费</span>
|
|
|
|
|
<span class="summary-value price">¥${order.deliveryFee.toFixed(2)}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="summary-item">
|
|
|
|
|
<span class="summary-label">打包费</span>
|
|
|
|
|
<span class="summary-value price">¥${order.packageFee.toFixed(2)}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="summary-item">
|
|
|
|
|
<span class="summary-label">调度费</span>
|
|
|
|
|
<span class="summary-value price">¥${order.dispatchFee.toFixed(2)}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="summary-item">
|
|
|
|
|
<span class="summary-label">总费用</span>
|
|
|
|
|
<span class="summary-value price">¥${order.totalFee.toFixed(2)}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 店铺订单详情 -->
|
|
|
|
|
<div class="expand-section">
|
|
|
|
|
<div class="expand-header" onclick="toggleExpand(this)">
|
|
|
|
|
<span class="expand-title">店铺订单详情 (${order.storeOrders.length}个)</span>
|
|
|
|
|
<span class="expand-icon">▶</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="expand-content">
|
|
|
|
|
${order.storeOrders.map(storeOrder => `
|
|
|
|
|
<div class="store-order">
|
|
|
|
|
<div class="store-name">${storeOrder.booth}</div>
|
|
|
|
|
<div class="store-order-no">订单号: ${storeOrder.storeOrderNo}</div>
|
|
|
|
|
|
|
|
|
|
<!-- 商品明细 -->
|
|
|
|
|
<div class="expand-section">
|
|
|
|
|
<div class="expand-header" onclick="toggleExpand(this)">
|
|
|
|
|
<span class="expand-title">商品明细 (${storeOrder.items.length}件)</span>
|
|
|
|
|
<span class="expand-icon">▶</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="expand-content">
|
|
|
|
|
<div class="product-list">
|
|
|
|
|
${storeOrder.items.map(item => `
|
|
|
|
|
<div class="product-item">
|
|
|
|
|
<div class="product-info">
|
|
|
|
|
<div class="product-name">${item.productName}</div>
|
|
|
|
|
<div class="product-meta">
|
|
|
|
|
<span>订单号: ${item.productOrderNo}</span>
|
|
|
|
|
<span>数量: ${item.productQuantity}</span>
|
|
|
|
|
<span>${item.pointsType}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product-price">
|
|
|
|
|
<div class="original-price">¥${item.originalPrice.toFixed(2)}</div>
|
|
|
|
|
<div class="points-info">${item.pointsUsed}积分</div>
|
|
|
|
|
${item.customerPayment > 0 ? `<div class="payment-info">¥${item.customerPayment.toFixed(2)}</div>` : ''}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`).join('')}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`).join('')}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`).join('');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 展开/折叠功能
|
|
|
|
|
function toggleExpand(header) {
|
|
|
|
|
const icon = header.querySelector('.expand-icon');
|
|
|
|
|
const content = header.nextElementSibling;
|
|
|
|
|
|
|
|
|
|
if (content.classList.contains('show')) {
|
|
|
|
|
content.classList.remove('show');
|
|
|
|
|
icon.classList.remove('rotated');
|
|
|
|
|
} else {
|
|
|
|
|
content.classList.add('show');
|
|
|
|
|
icon.classList.add('rotated');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取状态样式类
|
|
|
|
|
function getStatusClass(status) {
|
|
|
|
|
const statusMap = {
|
|
|
|
|
'待备货': 'status-pending',
|
|
|
|
|
'待取货': 'status-processing',
|
|
|
|
|
'待收货': 'status-processing',
|
|
|
|
|
'已完成': 'status-completed'
|
|
|
|
|
};
|
|
|
|
|
return statusMap[status] || 'status-pending';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 搜索订单
|
|
|
|
|
function searchOrders() {
|
|
|
|
|
const loadingMsg = document.getElementById('loadingMsg');
|
|
|
|
|
const container = document.getElementById('ordersContainer');
|
|
|
|
|
const noDataMsg = document.getElementById('noDataMsg');
|
|
|
|
|
|
|
|
|
|
// 显示加载状态
|
|
|
|
|
loadingMsg.style.display = 'block';
|
|
|
|
|
container.style.display = 'none';
|
|
|
|
|
noDataMsg.style.display = 'none';
|
|
|
|
|
|
|
|
|
|
const storeSelect = document.getElementById('storeSelect').value;
|
|
|
|
|
const productName = document.getElementById('productName').value;
|
|
|
|
|
const orderStatus = document.getElementById('orderStatus').value;
|
|
|
|
|
|
|
|
|
|
// 模拟API调用延迟
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let filteredOrders = [...settlementOrders];
|
|
|
|
|
|
|
|
|
|
// 按状态筛选
|
|
|
|
|
if (orderStatus) {
|
|
|
|
|
const statusMap = {
|
|
|
|
|
'pending': '待备货',
|
|
|
|
|
'preparing': '待取货',
|
|
|
|
|
'shipping': '待收货',
|
|
|
|
|
'completed': '已完成'
|
|
|
|
|
};
|
|
|
|
|
filteredOrders = filteredOrders.filter(order =>
|
|
|
|
|
order.status === statusMap[orderStatus]
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 按商品名称筛选
|
|
|
|
|
if (productName) {
|
|
|
|
|
filteredOrders = filteredOrders.filter(order =>
|
|
|
|
|
order.storeOrders.some(storeOrder =>
|
|
|
|
|
storeOrder.items.some(item =>
|
|
|
|
|
item.productName.toLowerCase().includes(productName.toLowerCase())
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 按摊铺筛选
|
|
|
|
|
if (storeSelect) {
|
|
|
|
|
const storeMap = {
|
|
|
|
|
'store1': '牛牛蔬菜店',
|
|
|
|
|
'store2': '小明水果店',
|
|
|
|
|
'store3': '王记杂货铺'
|
|
|
|
|
};
|
|
|
|
|
filteredOrders = filteredOrders.filter(order =>
|
|
|
|
|
order.storeOrders.some(storeOrder =>
|
|
|
|
|
storeOrder.booth === storeMap[storeSelect]
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 隐藏加载状态，显示结果
|
|
|
|
|
loadingMsg.style.display = 'none';
|
|
|
|
|
container.style.display = 'block';
|
|
|
|
|
renderOrders(filteredOrders);
|
|
|
|
|
}, 800);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 重置表单
|
|
|
|
|
function resetForm() {
|
|
|
|
|
document.getElementById('storeSelect').value = '';
|
|
|
|
|
document.getElementById('productName').value = '';
|
|
|
|
|
document.getElementById('orderStatus').value = '';
|
|
|
|
|
renderOrders(settlementOrders);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 页面加载完成后初始化
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
renderOrders(settlementOrders);
|
|
|
|
|
|
|
|
|
|
// 添加输入框回车搜索功能
|
|
|
|
|
document.getElementById('productName').addEventListener('keypress', function(e) {
|
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
|
searchOrders();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 防止页面缩放
|
|
|
|
|
document.addEventListener('touchstart', function(event) {
|
|
|
|
|
if (event.touches.length > 1) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 防止双击缩放
|
|
|
|
|
let lastTouchEnd = 0;
|
|
|
|
|
document.addEventListener('touchend', function(event) {
|
|
|
|
|
const now = (new Date()).getTime();
|
|
|
|
|
if (now - lastTouchEnd <= 300) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
lastTouchEnd = now;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
