更新积分订单管理页面
- 实现可展开的二级表格结构，支持查看结算订单下的商品明细 - 添加展开/折叠功能和相关样式 - 更新JavaScript逻辑以支持新的数据结构和交互
This commit is contained in:
parent
50f605cbec
commit
7d0725d80e
|
|
@ -232,6 +232,45 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
color: #409eff;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.child-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.child-table th {
|
||||
background-color: #f0f0f0;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.child-table td {
|
||||
font-size: 12px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.parent-row:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.child-row td {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
|
|
@ -299,11 +338,11 @@
|
|||
<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 class="btn-group">
|
||||
<button class="btn btn-primary" onclick="searchOrders()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetForm()">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -312,67 +351,18 @@
|
|||
<table class="data-table" id="ordersTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品订单号</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品数量</th>
|
||||
<th>消耗积分</th>
|
||||
<th>顾客支付</th>
|
||||
<th>积分类型</th>
|
||||
<th style="width: 40px;"></th>
|
||||
<th>结算订单号</th>
|
||||
<th>摊位</th>
|
||||
<th>订单状态</th>
|
||||
<th>配送费</th>
|
||||
<th>打包费</th>
|
||||
<th>调度费</th>
|
||||
<th>支付时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PO2024010001</td>
|
||||
<td>¥158.00</td>
|
||||
<td>2</td>
|
||||
<td>200</td>
|
||||
<td>¥0.00</td>
|
||||
<td>积分换购</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td>¥8.00</td>
|
||||
<td>¥2.00</td>
|
||||
<td>2024-01-15 14:30:22</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PO2024010002</td>
|
||||
<td>¥105.00</td>
|
||||
<td>1</td>
|
||||
<td>150</td>
|
||||
<td>¥52.50</td>
|
||||
<td>积分优惠购</td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td>¥6.00</td>
|
||||
<td>¥1.50</td>
|
||||
<td>2024-01-15 15:45:10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PO2024010003</td>
|
||||
<td>¥268.00</td>
|
||||
<td>4</td>
|
||||
<td>380</td>
|
||||
<td>¥0.00</td>
|
||||
<td>积分换购</td>
|
||||
<td><span class="status-tag status-processing">待取货</span></td>
|
||||
<td>¥10.00</td>
|
||||
<td>¥3.00</td>
|
||||
<td>2024-01-15 16:20:35</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PO2024010004</td>
|
||||
<td>¥456.00</td>
|
||||
<td>6</td>
|
||||
<td>580</td>
|
||||
<td>¥228.00</td>
|
||||
<td>积分优惠购</td>
|
||||
<td><span class="status-tag status-processing">待收货</span></td>
|
||||
<td>¥15.00</td>
|
||||
<td>¥4.50</td>
|
||||
<td>2024-01-15 17:35:28</td>
|
||||
</tr>
|
||||
<tbody id="ordersTableBody">
|
||||
<!-- 数据将通过JavaScript动态生成 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -383,61 +373,98 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟订单数据
|
||||
const mockOrders = [
|
||||
// 模拟结算订单数据（一级表格数据）
|
||||
const settlementOrders = [
|
||||
{
|
||||
productOrderNo: 'PO2024010001',
|
||||
originalPrice: 158.00,
|
||||
productQuantity: 2,
|
||||
pointsUsed: 200,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
settlementOrderNo: 'SO2024010001',
|
||||
booth: '牛牛蔬菜店',
|
||||
status: '已完成',
|
||||
deliveryFee: 8.00,
|
||||
packageFee: 2.00,
|
||||
paymentTime: '2024-01-15 14:30:22'
|
||||
dispatchFee: 3.00,
|
||||
paymentTime: '2024-01-15 14:30:22',
|
||||
// 商品明细（二级表格数据）
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010001',
|
||||
productName: '有机蔬菜礼盒',
|
||||
originalPrice: 158.00,
|
||||
productQuantity: 2,
|
||||
pointsUsed: 200,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
status: '已完成'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
productOrderNo: 'PO2024010002',
|
||||
originalPrice: 105.00,
|
||||
productQuantity: 1,
|
||||
pointsUsed: 150,
|
||||
customerPayment: 52.50,
|
||||
pointsType: '积分优惠购',
|
||||
settlementOrderNo: 'SO2024010002',
|
||||
booth: '小明水果店',
|
||||
status: '待备货',
|
||||
deliveryFee: 6.00,
|
||||
packageFee: 1.50,
|
||||
paymentTime: '2024-01-15 15:45:10'
|
||||
dispatchFee: 2.00,
|
||||
paymentTime: '2024-01-15 15:45:10',
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010002',
|
||||
productName: '进口苹果',
|
||||
originalPrice: 105.00,
|
||||
productQuantity: 1,
|
||||
pointsUsed: 150,
|
||||
customerPayment: 52.50,
|
||||
pointsType: '积分优惠购',
|
||||
status: '待备货'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
productOrderNo: 'PO2024010003',
|
||||
originalPrice: 268.00,
|
||||
productQuantity: 4,
|
||||
pointsUsed: 380,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
settlementOrderNo: 'SO2024010003',
|
||||
booth: '王记杂货铺',
|
||||
status: '待取货',
|
||||
deliveryFee: 10.00,
|
||||
packageFee: 3.00,
|
||||
paymentTime: '2024-01-15 16:20:35'
|
||||
dispatchFee: 4.00,
|
||||
paymentTime: '2024-01-15 16:20:35',
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010003',
|
||||
productName: '新鲜牛奶',
|
||||
originalPrice: 268.00,
|
||||
productQuantity: 4,
|
||||
pointsUsed: 380,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
status: '待取货'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
productOrderNo: 'PO2024010004',
|
||||
originalPrice: 456.00,
|
||||
productQuantity: 6,
|
||||
pointsUsed: 580,
|
||||
customerPayment: 228.00,
|
||||
pointsType: '积分优惠购',
|
||||
settlementOrderNo: 'SO2024010004',
|
||||
booth: '牛牛蔬菜店',
|
||||
status: '待收货',
|
||||
deliveryFee: 15.00,
|
||||
packageFee: 4.50,
|
||||
paymentTime: '2024-01-15 17:35:28'
|
||||
dispatchFee: 5.00,
|
||||
paymentTime: '2024-01-15 17:35:28',
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010004',
|
||||
productName: '精品牛肉',
|
||||
originalPrice: 456.00,
|
||||
productQuantity: 6,
|
||||
pointsUsed: 580,
|
||||
customerPayment: 228.00,
|
||||
pointsType: '积分优惠购',
|
||||
status: '待收货'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格数据
|
||||
// 渲染一级表格数据
|
||||
function renderTable(data = []) {
|
||||
const tbody = document.querySelector('#ordersTable tbody');
|
||||
const tbody = document.getElementById('ordersTableBody');
|
||||
const noDataMsg = document.getElementById('noDataMsg');
|
||||
|
||||
if (data.length === 0) {
|
||||
|
|
@ -448,20 +475,70 @@
|
|||
|
||||
noDataMsg.style.display = 'none';
|
||||
|
||||
tbody.innerHTML = data.map(order => `
|
||||
<tr>
|
||||
<td>${order.productOrderNo}</td>
|
||||
<td>¥${order.originalPrice.toFixed(2)}</td>
|
||||
<td>${order.productQuantity}</td>
|
||||
<td>${order.pointsUsed}</td>
|
||||
<td>¥${order.customerPayment.toFixed(2)}</td>
|
||||
<td>${order.pointsType}</td>
|
||||
tbody.innerHTML = data.map((order, index) => `
|
||||
<tr class="parent-row" data-index="${index}">
|
||||
<td><span class="expand-btn">▶</span></td>
|
||||
<td>${order.settlementOrderNo}</td>
|
||||
<td>${order.booth}</td>
|
||||
<td><span class="status-tag ${getStatusClass(order.status)}">${order.status}</span></td>
|
||||
<td>¥${order.deliveryFee.toFixed(2)}</td>
|
||||
<td>¥${order.packageFee.toFixed(2)}</td>
|
||||
<td>¥${order.dispatchFee.toFixed(2)}</td>
|
||||
<td>${order.paymentTime}</td>
|
||||
</tr>
|
||||
<tr class="child-row" data-parent-index="${index}" style="display: none;">
|
||||
<td colspan="8">
|
||||
<table class="data-table child-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品订单号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品数量</th>
|
||||
<th>消耗积分</th>
|
||||
<th>顾客支付</th>
|
||||
<th>积分类型</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${order.items.map(item => `
|
||||
<tr>
|
||||
<td>${item.productOrderNo}</td>
|
||||
<td>${item.productName}</td>
|
||||
<td>¥${item.originalPrice.toFixed(2)}</td>
|
||||
<td>${item.productQuantity}</td>
|
||||
<td>${item.pointsUsed}</td>
|
||||
<td>¥${item.customerPayment.toFixed(2)}</td>
|
||||
<td>${item.pointsType}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
|
||||
// 添加展开/折叠事件监听器
|
||||
document.querySelectorAll('.expand-btn').forEach((btn, index) => {
|
||||
btn.addEventListener('click', function() {
|
||||
toggleRow(index);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 展开/折叠行
|
||||
function toggleRow(index) {
|
||||
const parentRow = document.querySelector(`.parent-row[data-index="${index}"]`);
|
||||
const childRow = document.querySelector(`.child-row[data-parent-index="${index}"]`);
|
||||
const expandBtn = parentRow.querySelector('.expand-btn');
|
||||
|
||||
if (childRow.style.display === 'none' || childRow.style.display === '') {
|
||||
childRow.style.display = 'table-row';
|
||||
expandBtn.textContent = '▼';
|
||||
} else {
|
||||
childRow.style.display = 'none';
|
||||
expandBtn.textContent = '▶';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态样式类
|
||||
|
|
@ -485,7 +562,7 @@
|
|||
console.log('搜索参数:', { storeSelect, productName, orderStatus });
|
||||
|
||||
// 模拟搜索结果
|
||||
let filteredOrders = [...mockOrders];
|
||||
let filteredOrders = [...settlementOrders];
|
||||
|
||||
if (orderStatus) {
|
||||
const statusMap = {
|
||||
|
|
@ -507,7 +584,7 @@
|
|||
document.getElementById('storeSelect').value = '';
|
||||
document.getElementById('productName').value = '';
|
||||
document.getElementById('orderStatus').value = '';
|
||||
renderTable([]);
|
||||
renderTable(settlementOrders);
|
||||
}
|
||||
|
||||
// 导出订单
|
||||
|
|
@ -527,7 +604,7 @@
|
|||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderTable([]);
|
||||
renderTable(settlementOrders);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue