综述: 优化订单管理页面结构和功能
- 在订单状态筛选中，将原有的简单状态选项细化为完整的订单流程状态，包括待支付、待接单、待备货、待取货、已取货待配送、配送中、已配送待收货、完成待评价、未支付取消、用户申请退款中、用户申请已退款、商家取消、平台取消等13种状态 - 将表格中的"总订单号"列标题修改为"结算订单号"，更准确反映业务含义 - 优化订单展开功能，修改toggleShopExpand函数实现更准确的行展开逻辑，区分主表格和子表格的展开行为 - 简化嵌套表格结构，移除了重复的订单详情头部表格，直接使用单一的子表格展示店铺订单信息
This commit is contained in:
parent
b6302401bd
commit
11630b9560
|
|
@ -421,12 +421,19 @@
|
|||
<label class="form-label">订单状态</label>
|
||||
<select class="form-input">
|
||||
<option value="">全部</option>
|
||||
<option value="pending">待支付</option>
|
||||
<option value="paid">已支付</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">取消</option>
|
||||
<option value="refund">退款</option>
|
||||
<option value="partial_refund">部分退款</option>
|
||||
<option value="pending_payment">待支付</option>
|
||||
<option value="pending_accept">待接单</option>
|
||||
<option value="pending_prepare">待备货</option>
|
||||
<option value="pending_pickup">待取货</option>
|
||||
<option value="pickup_pending_delivery">已取货（待配送）</option>
|
||||
<option value="delivery_in_progress">配送中（待送达）</option>
|
||||
<option value="delivered_pending_receipt">已配送（待收货或已送达自提点）</option>
|
||||
<option value="completed_pending_review">完成（待评价或自动完成）</option>
|
||||
<option value="unpaid_cancelled">未支付订单取消</option>
|
||||
<option value="user_refund_processing">用户申请退款中</option>
|
||||
<option value="user_refund_completed">用户申请已退款</option>
|
||||
<option value="merchant_cancelled">商家取消订单</option>
|
||||
<option value="platform_cancelled">平台取消订单</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
|
|
@ -479,7 +486,7 @@
|
|||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>总订单号</th>
|
||||
<th>结算订单号</th>
|
||||
<th>下单时间</th>
|
||||
<th>收货人姓名</th>
|
||||
<th>收货人电话</th>
|
||||
|
|
@ -498,7 +505,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>11120250719153384808917</td>
|
||||
<td>2025-07-19 15:33:55</td>
|
||||
|
|
@ -519,29 +526,7 @@
|
|||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleSubExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>11220250719153384807045</td>
|
||||
<td>牛牛蔬菜店</td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="sub-table" style="display: none;">
|
||||
<table class="sub-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -596,7 +581,7 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
||||
<td>2</td>
|
||||
<td>11120250719145684803694</td>
|
||||
<td>2025-07-19 14:56:21</td>
|
||||
|
|
@ -617,29 +602,7 @@
|
|||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleSubExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>11220250719145684802345</td>
|
||||
<td>鲜蔬果园店</td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="sub-table" style="display: none;">
|
||||
<table class="sub-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -694,7 +657,7 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
||||
<td>3</td>
|
||||
<td>21120250718172950560206</td>
|
||||
<td>2025-07-18 17:29:48</td>
|
||||
|
|
@ -715,29 +678,7 @@
|
|||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleSubExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>订单详细编号</td>
|
||||
<td>店铺名称</td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="sub-table" style="display: none;">
|
||||
<table class="sub-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -792,7 +733,7 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
||||
<td>4</td>
|
||||
<td>21120250718172950562355</td>
|
||||
<td>2025-07-18 17:29:23</td>
|
||||
|
|
@ -813,29 +754,7 @@
|
|||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleSubExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>订单详细编号</td>
|
||||
<td>店铺名称</td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="sub-table" style="display: none;">
|
||||
<table class="sub-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -890,7 +809,7 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
||||
<td>5</td>
|
||||
<td>21120250717120850567740</td>
|
||||
<td>2025-07-17 12:08:07</td>
|
||||
|
|
@ -911,29 +830,7 @@
|
|||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleSubExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>订单详细编号</td>
|
||||
<td>店铺名称</td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="sub-table" style="display: none;">
|
||||
<table class="sub-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -1068,22 +965,44 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 店铺订单展开功能（店铺订单展开商品订单）
|
||||
// 订单展开功能
|
||||
function toggleShopExpand(btn) {
|
||||
const currentRow = btn.closest('tr');
|
||||
|
||||
// 如果是结算订单行（主表格中的行），展开/收起店铺订单表格
|
||||
if (currentRow.closest('table').classList.contains('order-table')) {
|
||||
const nextRow = currentRow.nextElementSibling;
|
||||
if (nextRow && nextRow.classList.contains('expandable-row')) {
|
||||
const isVisible = nextRow.style.display !== 'none';
|
||||
|
||||
if (isVisible) {
|
||||
nextRow.style.display = 'none';
|
||||
btn.innerHTML = '▼';
|
||||
} else {
|
||||
nextRow.style.display = 'table-row';
|
||||
btn.innerHTML = '▲';
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果是店铺订单行（子表格中的行），展开/收起商品订单表格
|
||||
const tableWrapper = currentRow.closest('.nested-table-wrapper');
|
||||
const tables = tableWrapper.querySelectorAll('.sub-table');
|
||||
let productTable = tables[tables.length - 1]; // 获取最后一个表格（商品订单表格）
|
||||
if (tableWrapper) {
|
||||
// 查找商品订单表格（第二个sub-table）
|
||||
const subTables = tableWrapper.querySelectorAll('.sub-table');
|
||||
const productTable = subTables[1]; // 第二个表格是商品订单表格
|
||||
|
||||
if (productTable) {
|
||||
const isVisible = productTable.style.display !== 'none';
|
||||
if (productTable) {
|
||||
const isVisible = productTable.style.display === 'table';
|
||||
|
||||
if (isVisible) {
|
||||
productTable.style.display = 'none';
|
||||
btn.innerHTML = '▼';
|
||||
} else {
|
||||
productTable.style.display = 'table';
|
||||
btn.innerHTML = '▲';
|
||||
if (isVisible) {
|
||||
productTable.style.display = 'none';
|
||||
btn.innerHTML = '▼';
|
||||
} else {
|
||||
productTable.style.display = 'table';
|
||||
btn.innerHTML = '▲';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue