551 lines
17 KiB
HTML
551 lines
17 KiB
HTML
<!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> |