linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
linbin 2025-08-17 01:09:45 +08:00
parent 8cb971bf9a
commit e6f83c6c5d
1 changed files with 239 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
商家端web/2.1 营销工具/2.1.1 会员功能/积分订单/积分订单管理.html
View File

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