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;
}
/* 三级表格样式 */
.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 = '▶';
}
}