This commit is contained in:
parent
1b167e31b2
commit
278c18e8d8
|
|
@ -0,0 +1,555 @@
|
|||
<!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.totalQuantity}</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>
|
||||
|
|
@ -361,7 +361,7 @@
|
|||
<th>成长值范围</th>
|
||||
<th>开启会员折扣</th>
|
||||
<th>折扣率%</th>
|
||||
<th>开启积分奖励</th>
|
||||
<th>开启积分兑换</th>
|
||||
<th>开启生日优惠券</th>
|
||||
<th>生日优惠券操作</th>
|
||||
<th>开启生日双倍积分</th>
|
||||
|
|
|
|||
Loading…
Reference in New Issue