This commit is contained in:
parent
b084ff352b
commit
2f1f660b61
|
|
@ -0,0 +1,594 @@
|
|||
<!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', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
width: 180px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
width: 180px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #66b1ff;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #67c23a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #85ce61;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background-color: #fff;
|
||||
color: #606266;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
color: #409eff;
|
||||
border-color: #c6e2ff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background-color: #fafafa;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
padding: 12px 6px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 6px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.operation-btn {
|
||||
padding: 4px 8px;
|
||||
margin: 0 2px;
|
||||
border: 1px solid #409eff;
|
||||
background: transparent;
|
||||
color: #409eff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.operation-btn:hover {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
min-width: 80px;
|
||||
font-size: 12px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">积分订单管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="search-form">
|
||||
<div class="form-row">
|
||||
<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>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="searchOrders()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetForm()">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table" id="ordersTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品订单号</th>
|
||||
<th>结算单位订单号</th>
|
||||
<th>总订单号</th>
|
||||
<th>总商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品数量</th>
|
||||
<th>消耗积分</th>
|
||||
<th>订单状态</th>
|
||||
<th>顾客实际支付</th>
|
||||
<th>商品总价</th>
|
||||
<th>配送费</th>
|
||||
<th>优惠券减免</th>
|
||||
<th>支付时间</th>
|
||||
<th>预计收入</th>
|
||||
<th>关联总订单链接</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PO2024010001</td>
|
||||
<td>SO2024010001</td>
|
||||
<td>TO2024010001</td>
|
||||
<td>5</td>
|
||||
<td>¥158.00</td>
|
||||
<td>¥145.00</td>
|
||||
<td>2</td>
|
||||
<td>200</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td>¥128.50</td>
|
||||
<td>¥145.00</td>
|
||||
<td>¥8.00</td>
|
||||
<td>¥15.00</td>
|
||||
<td>2024-01-15 14:30:22</td>
|
||||
<td>¥113.50</td>
|
||||
<td><a href="#" style="color: #409eff; text-decoration: none;">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PO2024010002</td>
|
||||
<td>SO2024010002</td>
|
||||
<td>TO2024010002</td>
|
||||
<td>3</td>
|
||||
<td>¥105.00</td>
|
||||
<td>¥95.00</td>
|
||||
<td>1</td>
|
||||
<td>150</td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td>¥89.00</td>
|
||||
<td>¥95.00</td>
|
||||
<td>¥6.00</td>
|
||||
<td>¥8.00</td>
|
||||
<td>2024-01-15 15:45:10</td>
|
||||
<td>¥83.00</td>
|
||||
<td><a href="#" style="color: #409eff; text-decoration: none;">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PO2024010003</td>
|
||||
<td>SO2024010003</td>
|
||||
<td>TO2024010003</td>
|
||||
<td>8</td>
|
||||
<td>¥268.00</td>
|
||||
<td>¥238.00</td>
|
||||
<td>4</td>
|
||||
<td>380</td>
|
||||
<td><span class="status-tag status-processing">待取货</span></td>
|
||||
<td>¥223.00</td>
|
||||
<td>¥238.00</td>
|
||||
<td>¥10.00</td>
|
||||
<td>¥25.00</td>
|
||||
<td>2024-01-15 16:20:35</td>
|
||||
<td>¥213.00</td>
|
||||
<td><a href="#" style="color: #409eff; text-decoration: none;">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PO2024010004</td>
|
||||
<td>SO2024010004</td>
|
||||
<td>TO2024010004</td>
|
||||
<td>12</td>
|
||||
<td>¥456.00</td>
|
||||
<td>¥398.00</td>
|
||||
<td>6</td>
|
||||
<td>580</td>
|
||||
<td><span class="status-tag status-processing">待收货</span></td>
|
||||
<td>¥368.00</td>
|
||||
<td>¥398.00</td>
|
||||
<td>¥15.00</td>
|
||||
<td>¥45.00</td>
|
||||
<td>2024-01-15 17:35:28</td>
|
||||
<td>¥353.00</td>
|
||||
<td><a href="#" style="color: #409eff; text-decoration: none;">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="no-data" id="noDataMsg" style="display: none;">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟订单数据
|
||||
const mockOrders = [
|
||||
{
|
||||
productOrderNo: 'PO2024010001',
|
||||
settlementOrderNo: 'SO2024010001',
|
||||
totalOrderNo: 'TO2024010001',
|
||||
totalQuantity: 5,
|
||||
originalPrice: 158.00,
|
||||
finalPrice: 145.00,
|
||||
productQuantity: 2,
|
||||
pointsUsed: 200,
|
||||
status: '已完成',
|
||||
actualPayment: 128.50,
|
||||
totalPrice: 145.00,
|
||||
deliveryFee: 8.00,
|
||||
couponDiscount: 15.00,
|
||||
paymentTime: '2024-01-15 14:30:22',
|
||||
estimatedIncome: 113.50,
|
||||
orderLink: '查看详情'
|
||||
},
|
||||
{
|
||||
productOrderNo: 'PO2024010002',
|
||||
settlementOrderNo: 'SO2024010002',
|
||||
totalOrderNo: 'TO2024010002',
|
||||
totalQuantity: 3,
|
||||
originalPrice: 105.00,
|
||||
finalPrice: 95.00,
|
||||
productQuantity: 1,
|
||||
pointsUsed: 150,
|
||||
status: '待备货',
|
||||
actualPayment: 89.00,
|
||||
totalPrice: 95.00,
|
||||
deliveryFee: 6.00,
|
||||
couponDiscount: 8.00,
|
||||
paymentTime: '2024-01-15 15:45:10',
|
||||
estimatedIncome: 83.00,
|
||||
orderLink: '查看详情'
|
||||
},
|
||||
{
|
||||
productOrderNo: 'PO2024010003',
|
||||
settlementOrderNo: 'SO2024010003',
|
||||
totalOrderNo: 'TO2024010003',
|
||||
totalQuantity: 8,
|
||||
originalPrice: 268.00,
|
||||
finalPrice: 238.00,
|
||||
productQuantity: 4,
|
||||
pointsUsed: 380,
|
||||
status: '待取货',
|
||||
actualPayment: 223.00,
|
||||
totalPrice: 238.00,
|
||||
deliveryFee: 10.00,
|
||||
couponDiscount: 25.00,
|
||||
paymentTime: '2024-01-15 16:20:35',
|
||||
estimatedIncome: 213.00,
|
||||
orderLink: '查看详情'
|
||||
},
|
||||
{
|
||||
productOrderNo: 'PO2024010004',
|
||||
settlementOrderNo: 'SO2024010004',
|
||||
totalOrderNo: 'TO2024010004',
|
||||
totalQuantity: 12,
|
||||
originalPrice: 456.00,
|
||||
finalPrice: 398.00,
|
||||
productQuantity: 6,
|
||||
pointsUsed: 580,
|
||||
status: '待收货',
|
||||
actualPayment: 368.00,
|
||||
totalPrice: 398.00,
|
||||
deliveryFee: 15.00,
|
||||
couponDiscount: 45.00,
|
||||
paymentTime: '2024-01-15 17:35:28',
|
||||
estimatedIncome: 353.00,
|
||||
orderLink: '查看详情'
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格数据
|
||||
function renderTable(data = []) {
|
||||
const tbody = document.querySelector('#ordersTable tbody');
|
||||
const noDataMsg = document.getElementById('noDataMsg');
|
||||
|
||||
if (data.length === 0) {
|
||||
tbody.innerHTML = '';
|
||||
noDataMsg.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
noDataMsg.style.display = 'none';
|
||||
|
||||
tbody.innerHTML = data.map(order => `
|
||||
<tr>
|
||||
<td>${order.productOrderNo}</td>
|
||||
<td>${order.settlementOrderNo}</td>
|
||||
<td>${order.totalOrderNo}</td>
|
||||
<td>${order.totalQuantity}</td>
|
||||
<td>¥${order.originalPrice.toFixed(2)}</td>
|
||||
<td>¥${order.finalPrice.toFixed(2)}</td>
|
||||
<td>${order.productQuantity}</td>
|
||||
<td>${order.pointsUsed}</td>
|
||||
<td><span class="status-tag ${getStatusClass(order.status)}">${order.status}</span></td>
|
||||
<td>¥${order.actualPayment.toFixed(2)}</td>
|
||||
<td>¥${order.totalPrice.toFixed(2)}</td>
|
||||
<td>¥${order.deliveryFee.toFixed(2)}</td>
|
||||
<td>¥${order.couponDiscount.toFixed(2)}</td>
|
||||
<td>${order.paymentTime}</td>
|
||||
<td>¥${order.estimatedIncome.toFixed(2)}</td>
|
||||
<td><a href="#" style="color: #409eff; text-decoration: none;">${order.orderLink}</a></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 获取状态样式类
|
||||
function getStatusClass(status) {
|
||||
const statusMap = {
|
||||
'待备货': 'status-pending',
|
||||
'待取货': 'status-processing',
|
||||
'待收货': 'status-processing',
|
||||
'已完成': 'status-completed'
|
||||
};
|
||||
return statusMap[status] || 'status-pending';
|
||||
}
|
||||
|
||||
// 搜索订单
|
||||
function searchOrders() {
|
||||
const storeSelect = document.getElementById('storeSelect').value;
|
||||
const productName = document.getElementById('productName').value;
|
||||
const orderStatus = document.getElementById('orderStatus').value;
|
||||
|
||||
// 这里应该调用后端API进行搜索
|
||||
console.log('搜索参数:', { storeSelect, productName, orderStatus });
|
||||
|
||||
// 模拟搜索结果
|
||||
let filteredOrders = [...mockOrders];
|
||||
|
||||
if (orderStatus) {
|
||||
const statusMap = {
|
||||
'pending': '待备货',
|
||||
'preparing': '待取货',
|
||||
'shipping': '待收货',
|
||||
'completed': '已完成'
|
||||
};
|
||||
filteredOrders = filteredOrders.filter(order =>
|
||||
order.status === statusMap[orderStatus]
|
||||
);
|
||||
}
|
||||
|
||||
renderTable(filteredOrders);
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
document.getElementById('storeSelect').value = '';
|
||||
document.getElementById('productName').value = '';
|
||||
document.getElementById('orderStatus').value = '';
|
||||
renderTable([]);
|
||||
}
|
||||
|
||||
// 导出订单
|
||||
function exportOrders() {
|
||||
alert('导出功能开发中...');
|
||||
}
|
||||
|
||||
// 查看订单
|
||||
function viewOrder(orderNo) {
|
||||
alert(`查看订单: ${orderNo}`);
|
||||
}
|
||||
|
||||
// 编辑订单
|
||||
function editOrder(orderNo) {
|
||||
alert(`编辑订单: ${orderNo}`);
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderTable([]);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue