This commit is contained in:
parent
8cb971bf9a
commit
e6f83c6c5d
|
|
@ -271,6 +271,67 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 三级表格样式 */
|
||||
.level1-row {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.level1-row:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.level2-container td {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.level2-table {
|
||||
margin: 5px 0;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.level2-table th {
|
||||
background-color: #eef1f6;
|
||||
font-size: 12px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.level2-table td {
|
||||
background-color: #f8f9fa;
|
||||
font-size: 12px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.level2-row:hover {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.level3-container td {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.level3-table {
|
||||
margin: 5px 0;
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
.level3-table th {
|
||||
background-color: #e8eaec;
|
||||
font-size: 11px;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
.level3-table td {
|
||||
background-color: #fafbfc;
|
||||
font-size: 11px;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
.level3-table tr:hover {
|
||||
background-color: #f0f9ff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
|
|
@ -352,12 +413,13 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40px;"></th>
|
||||
<th>店铺订单号</th>
|
||||
<th>结算单位订单号</th>
|
||||
<th>摊位</th>
|
||||
<th>订单状态</th>
|
||||
<th>配送费</th>
|
||||
<th>打包费</th>
|
||||
<th>调度费</th>
|
||||
<th>总费用</th>
|
||||
<th>支付时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -373,96 +435,121 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟结算订单数据（一级表格数据）
|
||||
// 模拟结算订单数据（三级表格数据）
|
||||
const settlementOrders = [
|
||||
{
|
||||
settlementOrderNo: 'SO2024010001',
|
||||
booth: '牛牛蔬菜店',
|
||||
settlementOrderNo: 'SU2024010001',
|
||||
status: '已完成',
|
||||
deliveryFee: 8.00,
|
||||
packageFee: 2.00,
|
||||
dispatchFee: 3.00,
|
||||
totalFee: 13.00,
|
||||
paymentTime: '2024-01-15 14:30:22',
|
||||
// 商品明细（二级表格数据）
|
||||
items: [
|
||||
// 店铺订单（二级表格数据）
|
||||
storeOrders: [
|
||||
{
|
||||
productOrderNo: 'PO2024010001',
|
||||
productName: '有机蔬菜礼盒',
|
||||
originalPrice: 158.00,
|
||||
productQuantity: 2,
|
||||
pointsUsed: 200,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
status: '已完成'
|
||||
storeOrderNo: 'SO2024010001',
|
||||
booth: '牛牛蔬菜店',
|
||||
// 商品明细（三级表格数据）
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010001',
|
||||
productName: '有机蔬菜礼盒',
|
||||
originalPrice: 158.00,
|
||||
productQuantity: 2,
|
||||
pointsUsed: 200,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
status: '已完成'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
settlementOrderNo: 'SO2024010002',
|
||||
booth: '小明水果店',
|
||||
settlementOrderNo: 'SU2024010002',
|
||||
status: '待备货',
|
||||
deliveryFee: 6.00,
|
||||
packageFee: 1.50,
|
||||
dispatchFee: 2.00,
|
||||
totalFee: 9.50,
|
||||
paymentTime: '2024-01-15 15:45:10',
|
||||
items: [
|
||||
storeOrders: [
|
||||
{
|
||||
productOrderNo: 'PO2024010002',
|
||||
productName: '进口苹果',
|
||||
originalPrice: 105.00,
|
||||
productQuantity: 1,
|
||||
pointsUsed: 150,
|
||||
customerPayment: 52.50,
|
||||
pointsType: '积分优惠购',
|
||||
status: '待备货'
|
||||
storeOrderNo: 'SO2024010002',
|
||||
booth: '小明水果店',
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010002',
|
||||
productName: '进口苹果',
|
||||
originalPrice: 105.00,
|
||||
productQuantity: 1,
|
||||
pointsUsed: 150,
|
||||
customerPayment: 52.50,
|
||||
pointsType: '积分优惠购',
|
||||
status: '待备货'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
settlementOrderNo: 'SO2024010003',
|
||||
booth: '王记杂货铺',
|
||||
settlementOrderNo: 'SU2024010003',
|
||||
status: '待取货',
|
||||
deliveryFee: 10.00,
|
||||
packageFee: 3.00,
|
||||
dispatchFee: 4.00,
|
||||
totalFee: 17.00,
|
||||
paymentTime: '2024-01-15 16:20:35',
|
||||
items: [
|
||||
storeOrders: [
|
||||
{
|
||||
productOrderNo: 'PO2024010003',
|
||||
productName: '新鲜牛奶',
|
||||
originalPrice: 268.00,
|
||||
productQuantity: 4,
|
||||
pointsUsed: 380,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
status: '待取货'
|
||||
storeOrderNo: 'SO2024010003',
|
||||
booth: '王记杂货铺',
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010003',
|
||||
productName: '新鲜牛奶',
|
||||
originalPrice: 268.00,
|
||||
productQuantity: 4,
|
||||
pointsUsed: 380,
|
||||
customerPayment: 0.00,
|
||||
pointsType: '积分换购',
|
||||
status: '待取货'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
settlementOrderNo: 'SO2024010004',
|
||||
booth: '牛牛蔬菜店',
|
||||
settlementOrderNo: 'SU2024010004',
|
||||
status: '待收货',
|
||||
deliveryFee: 15.00,
|
||||
packageFee: 4.50,
|
||||
dispatchFee: 5.00,
|
||||
totalFee: 24.50,
|
||||
paymentTime: '2024-01-15 17:35:28',
|
||||
items: [
|
||||
storeOrders: [
|
||||
{
|
||||
productOrderNo: 'PO2024010004',
|
||||
productName: '精品牛肉',
|
||||
originalPrice: 456.00,
|
||||
productQuantity: 6,
|
||||
pointsUsed: 580,
|
||||
customerPayment: 228.00,
|
||||
pointsType: '积分优惠购',
|
||||
status: '待收货'
|
||||
storeOrderNo: 'SO2024010004',
|
||||
booth: '牛牛蔬菜店',
|
||||
items: [
|
||||
{
|
||||
productOrderNo: 'PO2024010004',
|
||||
productName: '精品牛肉',
|
||||
originalPrice: 456.00,
|
||||
productQuantity: 6,
|
||||
pointsUsed: 580,
|
||||
customerPayment: 228.00,
|
||||
pointsType: '积分优惠购',
|
||||
status: '待收货'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染一级表格数据
|
||||
// 渲染三级表格数据
|
||||
function renderTable(data = []) {
|
||||
const tbody = document.getElementById('ordersTableBody');
|
||||
const noDataMsg = document.getElementById('noDataMsg');
|
||||
|
|
@ -475,41 +562,69 @@
|
|||
|
||||
noDataMsg.style.display = 'none';
|
||||
|
||||
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>
|
||||
tbody.innerHTML = data.map((settlementOrder, settlementIndex) => `
|
||||
<!-- 第一层：结算单位订单 -->
|
||||
<tr class="level1-row" data-settlement-index="${settlementIndex}">
|
||||
<td><span class="expand-btn level1-expand">▶</span></td>
|
||||
<td>${settlementOrder.settlementOrderNo}</td>
|
||||
<td>-</td>
|
||||
<td><span class="status-tag ${getStatusClass(settlementOrder.status)}">${settlementOrder.status}</span></td>
|
||||
<td>¥${settlementOrder.deliveryFee.toFixed(2)}</td>
|
||||
<td>¥${settlementOrder.packageFee.toFixed(2)}</td>
|
||||
<td>¥${settlementOrder.dispatchFee.toFixed(2)}</td>
|
||||
<td>¥${settlementOrder.totalFee.toFixed(2)}</td>
|
||||
<td>${settlementOrder.paymentTime}</td>
|
||||
</tr>
|
||||
<tr class="child-row" data-parent-index="${index}" style="display: none;">
|
||||
<td colspan="8">
|
||||
<table class="data-table child-table">
|
||||
<!-- 第二层：店铺订单 -->
|
||||
<tr class="level2-container" data-settlement-index="${settlementIndex}" style="display: none;">
|
||||
<td colspan="9">
|
||||
<table class="data-table child-table level2-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品订单号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品数量</th>
|
||||
<th>消耗积分</th>
|
||||
<th>顾客支付</th>
|
||||
<th>积分类型</th>
|
||||
<th style="width: 40px;"></th>
|
||||
<th>店铺订单号</th>
|
||||
<th>摊位</th>
|
||||
<th colspan="6"></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>
|
||||
${settlementOrder.storeOrders.map((storeOrder, storeIndex) => `
|
||||
<tr class="level2-row" data-settlement-index="${settlementIndex}" data-store-index="${storeIndex}">
|
||||
<td><span class="expand-btn level2-expand">▶</span></td>
|
||||
<td>${storeOrder.storeOrderNo}</td>
|
||||
<td>${storeOrder.booth}</td>
|
||||
<td colspan="6"></td>
|
||||
</tr>
|
||||
<!-- 第三层：商品详情 -->
|
||||
<tr class="level3-container" data-settlement-index="${settlementIndex}" data-store-index="${storeIndex}" style="display: none;">
|
||||
<td colspan="9">
|
||||
<table class="data-table child-table level3-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品订单号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品数量</th>
|
||||
<th>消耗积分</th>
|
||||
<th>顾客支付</th>
|
||||
<th>积分类型</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${storeOrder.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('')}
|
||||
</tbody>
|
||||
|
|
@ -518,25 +633,60 @@
|
|||
</tr>
|
||||
`).join('');
|
||||
|
||||
// 添加展开/折叠事件监听器
|
||||
document.querySelectorAll('.expand-btn').forEach((btn, index) => {
|
||||
// 添加三级展开/折叠事件监听器
|
||||
addExpandListeners();
|
||||
}
|
||||
|
||||
// 添加三级展开/折叠事件监听器
|
||||
function addExpandListeners() {
|
||||
// 第一层展开/折叠（结算单位订单）
|
||||
document.querySelectorAll('.level1-expand').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
toggleRow(index);
|
||||
const settlementIndex = this.closest('tr').dataset.settlementIndex;
|
||||
toggleLevel2(settlementIndex, this);
|
||||
});
|
||||
});
|
||||
|
||||
// 第二层展开/折叠（店铺订单）
|
||||
document.querySelectorAll('.level2-expand').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const settlementIndex = this.closest('tr').dataset.settlementIndex;
|
||||
const storeIndex = this.closest('tr').dataset.storeIndex;
|
||||
toggleLevel3(settlementIndex, storeIndex, this);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 展开/折叠行
|
||||
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');
|
||||
|
||||
// 展开/折叠第二层（店铺订单）
|
||||
function toggleLevel2(settlementIndex, expandBtn) {
|
||||
const level2Container = document.querySelector(`.level2-container[data-settlement-index="${settlementIndex}"]`);
|
||||
|
||||
if (childRow.style.display === 'none' || childRow.style.display === '') {
|
||||
childRow.style.display = 'table-row';
|
||||
if (level2Container.style.display === 'none' || level2Container.style.display === '') {
|
||||
level2Container.style.display = 'table-row';
|
||||
expandBtn.textContent = '▼';
|
||||
} else {
|
||||
childRow.style.display = 'none';
|
||||
level2Container.style.display = 'none';
|
||||
expandBtn.textContent = '▶';
|
||||
// 同时关闭所有第三层
|
||||
const level3Containers = document.querySelectorAll(`.level3-container[data-settlement-index="${settlementIndex}"]`);
|
||||
level3Containers.forEach(container => {
|
||||
container.style.display = 'none';
|
||||
});
|
||||
// 重置第二层展开按钮
|
||||
const level2Btns = document.querySelectorAll(`.level2-expand[data-settlement-index="${settlementIndex}"]`);
|
||||
level2Btns.forEach(btn => btn.textContent = '▶');
|
||||
}
|
||||
}
|
||||
|
||||
// 展开/折叠第三层（商品详情）
|
||||
function toggleLevel3(settlementIndex, storeIndex, expandBtn) {
|
||||
const level3Container = document.querySelector(`.level3-container[data-settlement-index="${settlementIndex}"][data-store-index="${storeIndex}"]`);
|
||||
|
||||
if (level3Container.style.display === 'none' || level3Container.style.display === '') {
|
||||
level3Container.style.display = 'table-row';
|
||||
expandBtn.textContent = '▼';
|
||||
} else {
|
||||
level3Container.style.display = 'none';
|
||||
expandBtn.textContent = '▶';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue