综述: 优化订单管理页面状态显示和展开功能
- 合并多个订单状态字段为统一的订单状态展示 - 调整表格列数和嵌套表格的展开逻辑 - 完善子表格展开功能，增加toggleSubExpand函数处理子表格显示 - 优化订单状态标签的显示文本
This commit is contained in:
parent
a8c1089326
commit
a5316bfa7a
|
|
@ -496,10 +496,7 @@
|
|||
<th>市场订单配送费</th>
|
||||
<th>调度费</th>
|
||||
<th>包装费</th>
|
||||
<th>订单支付状态</th>
|
||||
<th>订单业务状态</th>
|
||||
<th>订单退款状态</th>
|
||||
<th>订单结算状态</th>
|
||||
<th>订单状态</th>
|
||||
<th>市场编号</th>
|
||||
<th>市场名称</th>
|
||||
<th>申请退款原因</th>
|
||||
|
|
@ -521,16 +518,13 @@
|
|||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td><span class="status-tag status-paid">正常</span></td>
|
||||
<td><span class="status-tag status-pending">未结算</span></td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>春申菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
|
|
@ -539,20 +533,22 @@
|
|||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn">▼</button></td>
|
||||
<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">
|
||||
<table class="sub-table" style="display: none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
|
|
@ -562,6 +558,7 @@
|
|||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -574,6 +571,7 @@
|
|||
<td></td>
|
||||
<td>2</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -596,18 +594,64 @@
|
|||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td><span class="status-tag status-paid">正常</span></td>
|
||||
<td><span class="status-tag status-pending">未结算</span></td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>春申菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
<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;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>胡萝卜约500g</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>0.9</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><span class="status-tag status-pending">待备货</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -625,19 +669,65 @@
|
|||
<td>0.5</td>
|
||||
<td>0.1</td>
|
||||
<td>0.1</td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td><span class="status-tag status-paid">正常</span></td>
|
||||
<td><span class="status-tag status-completed">已结算</span></td>
|
||||
<td>1</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td>2</td>
|
||||
<td>全季菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
<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;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>商品名称</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>金额</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -655,19 +745,65 @@
|
|||
<td>0.5</td>
|
||||
<td>0</td>
|
||||
<td>0.1</td>
|
||||
<td><span class="status-tag status-pending">待支付</span></td>
|
||||
<td><span class="status-tag status-cancelled">未支付订单取消</span></td>
|
||||
<td><span class="status-tag status-paid">正常</span></td>
|
||||
<td><span class="status-tag status-pending">未结算</span></td>
|
||||
<td>0</td>
|
||||
<td><span class="status-tag status-cancelled">取消</span></td>
|
||||
<td>-1</td>
|
||||
<td>全季菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
<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;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>商品名称</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>金额</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -685,19 +821,65 @@
|
|||
<td>0.5</td>
|
||||
<td>0.1</td>
|
||||
<td>0.1</td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td><span class="status-tag status-paid">正常</span></td>
|
||||
<td><span class="status-tag status-completed">已结算</span></td>
|
||||
<td>1</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td>2</td>
|
||||
<td>全季菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<td colspan="16">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
<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;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th>订单状态</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>商品名称</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>金额</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><span class="status-tag status-completed">完成</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -752,12 +934,33 @@
|
|||
const nextRow = currentRow.nextElementSibling;
|
||||
|
||||
if (nextRow && nextRow.classList.contains('expandable-row')) {
|
||||
if (nextRow.style.display === 'none') {
|
||||
nextRow.style.display = 'table-row';
|
||||
btn.innerHTML = '▲';
|
||||
} else {
|
||||
const isVisible = nextRow.style.display !== 'none';
|
||||
|
||||
if (isVisible) {
|
||||
nextRow.style.display = 'none';
|
||||
btn.innerHTML = '▼';
|
||||
} else {
|
||||
nextRow.style.display = 'table-row';
|
||||
btn.innerHTML = '▲';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 子表格展开功能
|
||||
function toggleSubExpand(btn) {
|
||||
const currentRow = btn.closest('tr');
|
||||
const tableWrapper = currentRow.closest('.nested-table-wrapper');
|
||||
let subTable = tableWrapper.querySelector('.sub-table:not(.order-detail-header)');
|
||||
|
||||
if (subTable) {
|
||||
const isVisible = subTable.style.display !== 'none';
|
||||
|
||||
if (isVisible) {
|
||||
subTable.style.display = 'none';
|
||||
btn.innerHTML = '▼';
|
||||
} else {
|
||||
subTable.style.display = 'table';
|
||||
btn.innerHTML = '▲';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue