parent
7850cb6d9d
commit
b05af1010b
|
|
@ -1,568 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>订单详情 - 四级订单关系</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px 15px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 卡片基础样式 */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 总订单样式 */
|
||||
.total-order {
|
||||
border-left: 4px solid #ff6b6b;
|
||||
}
|
||||
|
||||
.total-order .card-header {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.total-order .card-header::after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.total-order.collapsed .card-header::after {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
/* 结算单位订单样式 */
|
||||
.settlement-order {
|
||||
border-left: 4px solid #4ecdc4;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.settlement-order .card-header {
|
||||
background: linear-gradient(135deg, #4ecdc4, #6ee5dd);
|
||||
color: white;
|
||||
padding: 12px 15px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settlement-order .card-header::after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.settlement-order.collapsed .card-header::after {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
/* 店铺订单样式 */
|
||||
.shop-order {
|
||||
border-left: 4px solid #45b7d1;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.shop-order .card-header {
|
||||
background: linear-gradient(135deg, #45b7d1, #66c5e8);
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shop-order .card-header::after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.shop-order.collapsed .card-header::after {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
/* 商品订单样式 */
|
||||
.product-order {
|
||||
border-left: 4px solid #96ceb4;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.product-order .card-header {
|
||||
background: linear-gradient(135deg, #96ceb4, #a8d5c4);
|
||||
color: white;
|
||||
padding: 8px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-content.expanded {
|
||||
display: block;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-item label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.info-item span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
background: #e8f5e8;
|
||||
color: #2d8f2d;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #eee;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settlement-order {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.shop-order {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.product-order {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>订单详情查看</h1>
|
||||
<p>四级订单关系展示</p>
|
||||
</div>
|
||||
|
||||
<!-- 总订单层级 -->
|
||||
<div class="card total-order" id="totalOrder">
|
||||
<div class="card-header" onclick="toggleCard('totalOrder')">
|
||||
<h3>总订单 #TO202401150001</h3>
|
||||
</div>
|
||||
<div class="card-content expanded">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>总订单号</label>
|
||||
<span>TO202401150001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>总金额</label>
|
||||
<span class="amount">¥289.50</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>优惠券减免</label>
|
||||
<span class="amount">-¥20.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>积分减免</label>
|
||||
<span class="amount">-¥5.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>配送费</label>
|
||||
<span>¥8.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>预计收入</label>
|
||||
<span class="amount">¥272.50</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>下单时间</label>
|
||||
<span>2024-01-15 14:30:25</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>预计送达</label>
|
||||
<span>2024-01-15 16:00:00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>距离</label>
|
||||
<span>2.3km</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>订单状态</label>
|
||||
<span class="status">配送中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结算单位订单层级 -->
|
||||
<div class="card settlement-order" id="settlementOrder1">
|
||||
<div class="card-header" onclick="toggleCard('settlementOrder1')">
|
||||
<h4>结算单位订单 #1 - 大妈集市结算单位</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>序号</label>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>结算单位名称</label>
|
||||
<span>大妈集市结算单位</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 店铺订单层级 -->
|
||||
<div class="card shop-order" id="shopOrder1">
|
||||
<div class="card-header" onclick="toggleCard('shopOrder1')">
|
||||
<h5>店铺订单 #1 - 牛牛蔬菜店</h5>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>序号</label>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>店铺名称</label>
|
||||
<span>牛牛蔬菜店</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品订单层级 -->
|
||||
<div class="card product-order">
|
||||
<div class="card-header">
|
||||
<h6>商品订单 #PO202401150001001</h6>
|
||||
</div>
|
||||
<div class="card-content expanded">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>商品订单号</label>
|
||||
<span>PO202401150001001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品名称</label>
|
||||
<span>有机白菜</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品价格</label>
|
||||
<span class="amount">¥12.50</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品数量</label>
|
||||
<span>2份</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>优惠券减免</label>
|
||||
<span class="amount">-¥2.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>积分减免</label>
|
||||
<span class="amount">-¥1.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品订单金额</label>
|
||||
<span class="amount">¥22.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card product-order">
|
||||
<div class="card-header">
|
||||
<h6>商品订单 #PO202401150001002</h6>
|
||||
</div>
|
||||
<div class="card-content expanded">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>商品订单号</label>
|
||||
<span>PO202401150001002</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品名称</label>
|
||||
<span>新鲜胡萝卜</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品价格</label>
|
||||
<span class="amount">¥8.90</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品数量</label>
|
||||
<span>3份</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>优惠券减免</label>
|
||||
<span class="amount">-¥3.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>积分减免</label>
|
||||
<span class="amount">-¥1.50</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品订单金额</label>
|
||||
<span class="amount">¥22.20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二个店铺 -->
|
||||
<div class="card shop-order" id="shopOrder2">
|
||||
<div class="card-header" onclick="toggleCard('shopOrder2')">
|
||||
<h5>店铺订单 #2 - 鲜果时光店</h5>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>序号</label>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>店铺名称</label>
|
||||
<span>鲜果时光店</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card product-order">
|
||||
<div class="card-header">
|
||||
<h6>商品订单 #PO202401150002001</h6>
|
||||
</div>
|
||||
<div class="card-content expanded">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>商品订单号</label>
|
||||
<span>PO202401150002001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品名称</label>
|
||||
<span>进口苹果</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品价格</label>
|
||||
<span class="amount">¥15.80</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品数量</label>
|
||||
<span>2斤</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>优惠券减免</label>
|
||||
<span class="amount">-¥5.00</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>积分减免</label>
|
||||
<span class="amount">-¥1.50</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>商品订单金额</label>
|
||||
<span class="amount">¥25.10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleCard(cardId) {
|
||||
const card = document.getElementById(cardId);
|
||||
const content = card.querySelector('.card-content');
|
||||
|
||||
if (content.classList.contains('expanded')) {
|
||||
content.classList.remove('expanded');
|
||||
card.classList.add('collapsed');
|
||||
content.style.display = 'none';
|
||||
} else {
|
||||
content.classList.add('expanded');
|
||||
card.classList.remove('collapsed');
|
||||
content.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 默认展开总订单
|
||||
const totalOrder = document.getElementById('totalOrder');
|
||||
const totalContent = totalOrder.querySelector('.card-content');
|
||||
totalContent.classList.add('expanded');
|
||||
totalContent.style.display = 'block';
|
||||
|
||||
// 添加平滑滚动效果
|
||||
document.querySelectorAll('.card-header').forEach(header => {
|
||||
header.addEventListener('click', function(e) {
|
||||
// 添加点击反馈效果
|
||||
this.style.transform = 'scale(0.98)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = 'scale(1)';
|
||||
}, 150);
|
||||
});
|
||||
});
|
||||
|
||||
// 模拟数据加载动画（可选）
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.card').forEach((card, index) => {
|
||||
card.style.animation = `slideIn 0.3s ease ${index * 0.1}s forwards`;
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 添加滑入动画
|
||||
const slideInKeyframes = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = slideInKeyframes;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,868 @@
|
|||
<!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;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
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">
|
||||
<div class="order-number">${order.settlementOrderNo}</div>
|
||||
<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>
|
||||
|
|
@ -1,551 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>积分订单管理</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 0 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 头部标题 */
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-section {
|
||||
background: #fff;
|
||||
border: 1px dashed #ccc;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.search-group label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.search-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-input:focus,
|
||||
.search-select:focus {
|
||||
outline: none;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: 1px dashed #ccc;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 订单列表 */
|
||||
.orders-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed #eee;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px dashed #ccc;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.highlight {
|
||||
color: #e74c3c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #eee;
|
||||
}
|
||||
|
||||
.payment-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 6px 12px;
|
||||
border: 1px dashed #007bff;
|
||||
background: #fff;
|
||||
color: #007bff;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 加载提示 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
flex-direction: row;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.search-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<h1>积分订单管理</h1>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<div class="search-row">
|
||||
<div class="search-group">
|
||||
<label>类别</label>
|
||||
<select class="search-select" id="categoryFilter">
|
||||
<option value="">全部类别</option>
|
||||
<option value="food">食品饮料</option>
|
||||
<option value="daily">日用百货</option>
|
||||
<option value="digital">数码电器</option>
|
||||
<option value="clothing">服装配饰</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-group">
|
||||
<label>商品名称</label>
|
||||
<input type="text" class="search-input" placeholder="请输入商品名称" id="productNameFilter">
|
||||
</div>
|
||||
<div class="search-group">
|
||||
<label>订单状态</label>
|
||||
<select class="search-select" id="statusFilter">
|
||||
<option value="">全部状态</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="pending">处理中</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-buttons">
|
||||
<button class="btn btn-primary" onclick="searchOrders()">查询</button>
|
||||
<button class="btn" onclick="resetSearch()">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<div class="orders-section" id="ordersList">
|
||||
<!-- 订单卡片将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<div class="loading" id="loading" style="display: none;">
|
||||
加载中...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟订单数据
|
||||
const mockOrders = [
|
||||
{
|
||||
productOrderNo: "PO20240801001",
|
||||
settlementOrderNo: "SO20240801001",
|
||||
totalOrderNo: "TO20240801001",
|
||||
totalQuantity: 3,
|
||||
originalPrice: 158.00,
|
||||
currentPrice: 138.00,
|
||||
quantity: 2,
|
||||
consumedPoints: 1380,
|
||||
status: "completed",
|
||||
statusText: "已完成",
|
||||
deliveryFee: 8.00,
|
||||
couponDiscount: 20.00,
|
||||
paymentTime: "2024-08-01 14:30:25",
|
||||
salesIncome: 138.00,
|
||||
totalRevenue: 126.00
|
||||
},
|
||||
{
|
||||
productOrderNo: "PO20240801002",
|
||||
settlementOrderNo: "SO20240801002",
|
||||
totalOrderNo: "TO20240801002",
|
||||
totalQuantity: 1,
|
||||
originalPrice: 89.00,
|
||||
currentPrice: 79.00,
|
||||
quantity: 1,
|
||||
consumedPoints: 790,
|
||||
status: "pending",
|
||||
statusText: "处理中",
|
||||
deliveryFee: 5.00,
|
||||
couponDiscount: 10.00,
|
||||
paymentTime: "2024-08-01 16:45:12",
|
||||
salesIncome: 79.00,
|
||||
totalRevenue: 74.00
|
||||
},
|
||||
{
|
||||
productOrderNo: "PO20240801003",
|
||||
settlementOrderNo: "SO20240801003",
|
||||
totalOrderNo: "TO20240801003",
|
||||
totalQuantity: 5,
|
||||
originalPrice: 299.00,
|
||||
currentPrice: 259.00,
|
||||
quantity: 1,
|
||||
consumedPoints: 2590,
|
||||
status: "completed",
|
||||
statusText: "已完成",
|
||||
deliveryFee: 12.00,
|
||||
couponDiscount: 40.00,
|
||||
paymentTime: "2024-08-01 09:20:33",
|
||||
salesIncome: 259.00,
|
||||
totalRevenue: 231.00
|
||||
},
|
||||
{
|
||||
productOrderNo: "PO20240801004",
|
||||
settlementOrderNo: "SO20240801004",
|
||||
totalOrderNo: "TO20240801004",
|
||||
totalQuantity: 2,
|
||||
originalPrice: 128.00,
|
||||
currentPrice: 98.00,
|
||||
quantity: 2,
|
||||
consumedPoints: 980,
|
||||
status: "cancelled",
|
||||
statusText: "已取消",
|
||||
deliveryFee: 6.00,
|
||||
couponDiscount: 30.00,
|
||||
paymentTime: "2024-08-01 11:15:48",
|
||||
salesIncome: 0.00,
|
||||
totalRevenue: 0.00
|
||||
},
|
||||
{
|
||||
productOrderNo: "PO20240801005",
|
||||
settlementOrderNo: "SO20240801005",
|
||||
totalOrderNo: "TO20240801005",
|
||||
totalQuantity: 4,
|
||||
originalPrice: 188.00,
|
||||
currentPrice: 168.00,
|
||||
quantity: 1,
|
||||
consumedPoints: 1680,
|
||||
status: "pending",
|
||||
statusText: "处理中",
|
||||
deliveryFee: 8.00,
|
||||
couponDiscount: 20.00,
|
||||
paymentTime: "2024-08-01 17:22:15",
|
||||
salesIncome: 168.00,
|
||||
totalRevenue: 156.00
|
||||
}
|
||||
];
|
||||
|
||||
let filteredOrders = [...mockOrders];
|
||||
|
||||
// 渲染订单列表
|
||||
function renderOrders(orders) {
|
||||
const ordersList = document.getElementById('ordersList');
|
||||
|
||||
if (orders.length === 0) {
|
||||
ordersList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="icon">📋</div>
|
||||
<p>暂无订单数据</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const ordersHtml = orders.map(order => `
|
||||
<div class="order-card">
|
||||
<div class="order-header">
|
||||
<div class="order-number">${order.productOrderNo}</div>
|
||||
<div class="order-status status-${order.status}">${order.statusText}</div>
|
||||
</div>
|
||||
<div class="order-details">
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">结算单订单号</div>
|
||||
<div class="detail-value">${order.settlementOrderNo}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">总订单号</div>
|
||||
<div class="detail-value">${order.totalOrderNo}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">商品数量</div>
|
||||
<div class="detail-value">${order.quantity}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">商品原价</div>
|
||||
<div class="detail-value">¥${order.originalPrice.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">商品终价</div>
|
||||
<div class="detail-value highlight">¥${order.currentPrice.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">消费积分</div>
|
||||
<div class="detail-value highlight">${order.consumedPoints}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">配送费</div>
|
||||
<div class="detail-value">¥${order.deliveryFee.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">优惠券减免</div>
|
||||
<div class="detail-value">¥${order.couponDiscount.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">顾客支付</div>
|
||||
<div class="detail-value">¥${order.salesIncome.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">预计收入</div>
|
||||
<div class="detail-value highlight">¥${order.totalRevenue.toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-footer">
|
||||
<div class="payment-time">支付时间：${order.paymentTime}</div>
|
||||
<button class="action-btn" onclick="viewOrderDetails('${order.productOrderNo}')">关联总订单</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
ordersList.innerHTML = ordersHtml;
|
||||
}
|
||||
|
||||
// 搜索订单
|
||||
function searchOrders() {
|
||||
const categoryFilter = document.getElementById('categoryFilter').value;
|
||||
const productNameFilter = document.getElementById('productNameFilter').value.toLowerCase();
|
||||
const statusFilter = document.getElementById('statusFilter').value;
|
||||
|
||||
filteredOrders = mockOrders.filter(order => {
|
||||
const matchCategory = !categoryFilter || order.category === categoryFilter;
|
||||
const matchProductName = !productNameFilter || order.productOrderNo.toLowerCase().includes(productNameFilter);
|
||||
const matchStatus = !statusFilter || order.status === statusFilter;
|
||||
|
||||
return matchCategory && matchProductName && matchStatus;
|
||||
});
|
||||
|
||||
showLoading();
|
||||
setTimeout(() => {
|
||||
hideLoading();
|
||||
renderOrders(filteredOrders);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 重置搜索
|
||||
function resetSearch() {
|
||||
document.getElementById('categoryFilter').value = '';
|
||||
document.getElementById('productNameFilter').value = '';
|
||||
document.getElementById('statusFilter').value = '';
|
||||
|
||||
filteredOrders = [...mockOrders];
|
||||
renderOrders(filteredOrders);
|
||||
}
|
||||
|
||||
// 查看订单详情
|
||||
function viewOrderDetails(orderNo) {
|
||||
alert(`查看订单 ${orderNo} 详情`);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
document.getElementById('loading').style.display = 'block';
|
||||
document.getElementById('ordersList').style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
function hideLoading() {
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
document.getElementById('ordersList').style.display = 'block';
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderOrders(filteredOrders);
|
||||
});
|
||||
|
||||
// 搜索输入框回车事件
|
||||
document.getElementById('productNameFilter').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
searchOrders();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue