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

综述: 优化品牌市场订单管理页面时间查询功能和表格结构统一 

- 将品牌市场订单的时间查询改为与订单管理下的市场订单管理一致的快捷时间范围选择方式，包括近1天、近7天、近30天和自定义选项，提升用户体验一致性。
- 统一两个页面的表格字段结构，将"市场订单金额"等字段改为"订单总金额"等标准字段名称，删除冗余的市场编号和市场名称字段。
- 在子表格中添加商品总金额字段，使表格数据结构与订单管理页面完全一致，确保数据展示的标准化。
- 调整表格colspan和相关的CSS样式，确保页面布局的完整性和一致性。
This commit is contained in:
linbin 2025-10-08 01:08:34 +08:00
parent 1f38c0317e
commit b3547febf1
1 changed files with 74 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
商家端web/品牌管理/品牌市场订单管理.html
View File

@ -78,14 +78,40 @@
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
.date-range { .filter-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 20px;
flex-wrap: wrap;
} }
.date-range .form-input { .filter-item {
flex: 1; display: flex;
align-items: center;
gap: 10px;
}
.filter-item label {
font-weight: 500;
color: #333;
min-width: 70px;
}
.filter-item select,
.filter-item input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
min-width: 120px;
font-size: 14px;
transition: all 0.3s ease;
}
.filter-item select:focus,
.filter-item input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
outline: none;
} }
.button-group { .button-group {
@ -447,13 +473,22 @@
<option value="platform_cancelled">平台取消订单</option> <option value="platform_cancelled">平台取消订单</option>
</select> </select>
</div> </div>
<div class="form-item">
<label class="form-label">订单时间</label>
<div class="date-range">
<input type="date" class="form-input" placeholder="开始日期">
<span>-</span>
<input type="date" class="form-input" placeholder="结束日期">
</div> </div>
<div class="filter-row">
<div class="filter-item">
<label for="dateRange">日期范围:</label>
<select id="dateRange">
<option value="today">近1天</option>
<option value="week" selected>近7天</option>
<option value="month">近30天</option>
<option value="custom">自定义</option>
</select>
</div>
<div class="filter-item" id="customDateRange" style="display: none;">
<label for="startDate">开始日期:</label>
<input type="date" id="startDate">
<label for="endDate">结束日期:</label>
<input type="date" id="endDate">
</div> </div>
</div> </div>
<div class="button-group"> <div class="button-group">
@ -502,14 +537,12 @@
<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>包装费</th>
<th>订单状态</th> <th>订单状态</th>
<th>市场编号</th>
<th>市场名称</th>
<th>申请退款原因</th> <th>申请退款原因</th>
<th></th> <th></th>
</tr> </tr>
@ -529,13 +562,11 @@
<td>0</td> <td>0</td>
<td>1</td> <td>1</td>
<td><span class="status-tag status-paid">已支付</span></td> <td><span class="status-tag status-paid">已支付</span></td>
<td>1</td>
<td>春申菜市场</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="14">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table"> <table class="sub-table">
<thead> <thead>
@ -544,6 +575,7 @@
<th>序号</th> <th>序号</th>
<th>店铺订单号</th> <th>店铺订单号</th>
<th>店铺名称</th> <th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th> <th>订单状态</th>
<th></th> <th></th>
</tr> </tr>
@ -554,6 +586,7 @@
<td>1</td> <td>1</td>
<td>SO202407190001</td> <td>SO202407190001</td>
<td>牛牛蔬菜店</td> <td>牛牛蔬菜店</td>
<td>1.8</td>
<td><span class="status-tag status-pending">待备货</span></td> <td><span class="status-tag status-pending">待备货</span></td>
<td></td> <td></td>
</tr> </tr>
@ -603,13 +636,11 @@
<td>0</td> <td>0</td>
<td>1</td> <td>1</td>
<td><span class="status-tag status-paid">已支付</span></td> <td><span class="status-tag status-paid">已支付</span></td>
<td>1</td>
<td>春申菜市场</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="14">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table"> <table class="sub-table">
<thead> <thead>
@ -618,6 +649,7 @@
<th>序号</th> <th>序号</th>
<th>店铺订单号</th> <th>店铺订单号</th>
<th>店铺名称</th> <th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th> <th>订单状态</th>
<th></th> <th></th>
</tr> </tr>
@ -628,6 +660,7 @@
<td>1</td> <td>1</td>
<td>SO202407190002</td> <td>SO202407190002</td>
<td>鲜蔬果园店</td> <td>鲜蔬果园店</td>
<td>0.9</td>
<td><span class="status-tag status-pending">待备货</span></td> <td><span class="status-tag status-pending">待备货</span></td>
<td></td> <td></td>
</tr> </tr>
@ -677,13 +710,11 @@
<td>0.1</td> <td>0.1</td>
<td>0.1</td> <td>0.1</td>
<td><span class="status-tag status-completed">已完成</span></td> <td><span class="status-tag status-completed">已完成</span></td>
<td>2</td>
<td>全季菜市场</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="14">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table"> <table class="sub-table">
<thead> <thead>
@ -692,6 +723,7 @@
<th>序号</th> <th>序号</th>
<th>店铺订单号</th> <th>店铺订单号</th>
<th>店铺名称</th> <th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th> <th>订单状态</th>
<th></th> <th></th>
</tr> </tr>
@ -702,6 +734,7 @@
<td>1</td> <td>1</td>
<td>SO202407180001</td> <td>SO202407180001</td>
<td>示例店铺</td> <td>示例店铺</td>
<td>2</td>
<td><span class="status-tag status-completed">完成</span></td> <td><span class="status-tag status-completed">完成</span></td>
<td></td> <td></td>
</tr> </tr>
@ -751,13 +784,11 @@
<td>0</td> <td>0</td>
<td>0.1</td> <td>0.1</td>
<td><span class="status-tag status-cancelled">取消</span></td> <td><span class="status-tag status-cancelled">取消</span></td>
<td>-1</td>
<td>全季菜市场</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="14">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table"> <table class="sub-table">
<thead> <thead>
@ -766,6 +797,7 @@
<th>序号</th> <th>序号</th>
<th>店铺订单号</th> <th>店铺订单号</th>
<th>店铺名称</th> <th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th> <th>订单状态</th>
<th></th> <th></th>
</tr> </tr>
@ -776,6 +808,7 @@
<td>1</td> <td>1</td>
<td>SO202407180001</td> <td>SO202407180001</td>
<td>示例店铺</td> <td>示例店铺</td>
<td>2</td>
<td><span class="status-tag status-completed">完成</span></td> <td><span class="status-tag status-completed">完成</span></td>
<td></td> <td></td>
</tr> </tr>
@ -825,13 +858,11 @@
<td>0.1</td> <td>0.1</td>
<td>0.1</td> <td>0.1</td>
<td><span class="status-tag status-completed">已完成</span></td> <td><span class="status-tag status-completed">已完成</span></td>
<td>2</td>
<td>全季菜市场</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr class="expandable-row" style="display: none;"> <tr class="expandable-row" style="display: none;">
<td colspan="16"> <td colspan="14">
<div class="nested-table-wrapper"> <div class="nested-table-wrapper">
<table class="sub-table"> <table class="sub-table">
<thead> <thead>
@ -840,6 +871,7 @@
<th>序号</th> <th>序号</th>
<th>店铺订单号</th> <th>店铺订单号</th>
<th>店铺名称</th> <th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th> <th>订单状态</th>
<th></th> <th></th>
</tr> </tr>
@ -850,6 +882,7 @@
<td>1</td> <td>1</td>
<td>SO202407180001</td> <td>SO202407180001</td>
<td>示例店铺</td> <td>示例店铺</td>
<td>2</td>
<td><span class="status-tag status-completed">完成</span></td> <td><span class="status-tag status-completed">完成</span></td>
<td></td> <td></td>
</tr> </tr>
@ -921,6 +954,16 @@
</div> </div>
<script> <script>
// 日期范围选择
document.getElementById('dateRange').addEventListener('change', function() {
const customDateRange = document.getElementById('customDateRange');
if (this.value === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
}
});
// 标签页切换功能 // 标签页切换功能
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() { tab.addEventListener('click', function() {