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

综述: 优化订单管理页面结构和功能 

- 在订单状态筛选中，将原有的简单状态选项细化为完整的订单流程状态，包括待支付、待接单、待备货、待取货、已取货待配送、配送中、已配送待收货、完成待评价、未支付取消、用户申请退款中、用户申请已退款、商家取消、平台取消等13种状态
- 将表格中的"总订单号"列标题修改为"结算订单号"，更准确反映业务含义
- 优化订单展开功能，修改toggleShopExpand函数实现更准确的行展开逻辑，区分主表格和子表格的展开行为
- 简化嵌套表格结构，移除了重复的订单详情头部表格，直接使用单一的子表格展示店铺订单信息
This commit is contained in:
linbin 2025-09-26 11:20:46 +08:00
parent b6302401bd
commit 11630b9560
1 changed files with 57 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
商家端web/订单管理/订单管理.html
View File

@ -421,12 +421,19 @@
<label class="form-label">订单状态</label> <label class="form-label">订单状态</label>
<select class="form-input"> <select class="form-input">
<option value="">全部</option> <option value="">全部</option>
<option value="pending">待支付</option> <option value="pending_payment">待支付</option>
<option value="paid">已支付</option> <option value="pending_accept">待接单</option>
<option value="completed">已完成</option> <option value="pending_prepare">待备货</option>
<option value="cancelled">取消</option> <option value="pending_pickup">待取货</option>
<option value="refund">退款</option> <option value="pickup_pending_delivery">已取货（待配送）</option>
<option value="partial_refund">部分退款</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> </select>
</div> </div>
<div class="form-item"> <div class="form-item">
@ -479,7 +486,7 @@
<tr> <tr>
<th></th> <th></th>
<th>序号</th> <th>序号</th>
<th>总订单号</th> <th>结算订单号</th>
<th>下单时间</th> <th>下单时间</th>
<th>收货人姓名</th> <th>收货人姓名</th>
<th>收货人电话</th> <th>收货人电话</th>
@ -498,7 +505,7 @@
</thead> </thead>
<tbody> <tbody>
<tr> <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>1</td>
<td>11120250719153384808917</td> <td>11120250719153384808917</td>
<td>2025-07-19 15:33:55</td> <td>2025-07-19 15:33:55</td>
@ -519,29 +526,7 @@
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="16">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table order-detail-header"> <table class="sub-table">
<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;">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -596,7 +581,7 @@
</tr> </tr>
<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>2</td>
<td>11120250719145684803694</td> <td>11120250719145684803694</td>
<td>2025-07-19 14:56:21</td> <td>2025-07-19 14:56:21</td>
@ -617,29 +602,7 @@
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="16">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table order-detail-header"> <table class="sub-table">
<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;">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -694,7 +657,7 @@
</tr> </tr>
<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>3</td>
<td>21120250718172950560206</td> <td>21120250718172950560206</td>
<td>2025-07-18 17:29:48</td> <td>2025-07-18 17:29:48</td>
@ -715,29 +678,7 @@
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="16">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table order-detail-header"> <table class="sub-table">
<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;">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -792,7 +733,7 @@
</tr> </tr>
<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>4</td>
<td>21120250718172950562355</td> <td>21120250718172950562355</td>
<td>2025-07-18 17:29:23</td> <td>2025-07-18 17:29:23</td>
@ -813,29 +754,7 @@
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="16">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table order-detail-header"> <table class="sub-table">
<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;">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -890,7 +809,7 @@
</tr> </tr>
<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>5</td>
<td>21120250717120850567740</td> <td>21120250717120850567740</td>
<td>2025-07-17 12:08:07</td> <td>2025-07-17 12:08:07</td>
@ -911,29 +830,7 @@
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="16">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table order-detail-header"> <table class="sub-table">
<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;">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -1068,22 +965,44 @@
} }
} }
// 店铺订单展开功能（店铺订单展开商品订单） // 订单展开功能
function toggleShopExpand(btn) { function toggleShopExpand(btn) {
const currentRow = btn.closest('tr'); 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 tableWrapper = currentRow.closest('.nested-table-wrapper');
const tables = tableWrapper.querySelectorAll('.sub-table'); if (tableWrapper) {
let productTable = tables[tables.length - 1]; // 获取最后一个表格（商品订单表格） // 查找商品订单表格（第二个sub-table）
const subTables = tableWrapper.querySelectorAll('.sub-table');
const productTable = subTables[1]; // 第二个表格是商品订单表格
if (productTable) { if (productTable) {
const isVisible = productTable.style.display !== 'none'; const isVisible = productTable.style.display === 'table';
if (isVisible) { if (isVisible) {
productTable.style.display = 'none'; productTable.style.display = 'none';
btn.innerHTML = '▼'; btn.innerHTML = '▼';
} else { } else {
productTable.style.display = 'table'; productTable.style.display = 'table';
btn.innerHTML = '▲'; btn.innerHTML = '▲';
}
} }
} }
} }