Compare commits
No commits in common. "b724494f7e4a1a10f795dd0aa75ff7392d90c91c" and "f1131ff27afca5f84d4ffb9c9df2eedd2b079bce" have entirely different histories.
b724494f7e
...
f1131ff27a
|
|
@ -475,10 +475,6 @@
|
||||||
<span class="submenu-icon"></span>
|
<span class="submenu-icon"></span>
|
||||||
品牌市场订单管理
|
品牌市场订单管理
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/品牌店铺订单管理.html', this);" style="padding-left: 70px;">
|
|
||||||
<span class="submenu-icon"></span>
|
|
||||||
品牌店铺订单管理
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/品牌信息.html', this)">
|
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/品牌信息.html', this)">
|
||||||
|
|
|
||||||
|
|
@ -382,7 +382,8 @@
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>结算单位订单编号</th>
|
<th>订单编号</th>
|
||||||
|
<th>市场订单号</th>
|
||||||
<th>分销商</th>
|
<th>分销商</th>
|
||||||
<th>订单金额(元)</th>
|
<th>订单金额(元)</th>
|
||||||
<th>分佣比例</th>
|
<th>分佣比例</th>
|
||||||
|
|
@ -397,6 +398,7 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240101001</td>
|
<td>ORD20240101001</td>
|
||||||
|
<td>UNIT20240101001</td>
|
||||||
<td>张三</td>
|
<td>张三</td>
|
||||||
<td><span class="money-text">299.00</span></td>
|
<td><span class="money-text">299.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -405,10 +407,11 @@
|
||||||
<td><span class="commission-text">8.97</span></td>
|
<td><span class="commission-text">8.97</span></td>
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
<td>2024-01-01 10:30:00</td>
|
<td>2024-01-01 10:30:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240102002</td>
|
<td>ORD20240102002</td>
|
||||||
|
<td>UNIT20240102002</td>
|
||||||
<td>李四</td>
|
<td>李四</td>
|
||||||
<td><span class="money-text">499.00</span></td>
|
<td><span class="money-text">499.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -417,10 +420,11 @@
|
||||||
<td><span class="commission-text">0.00</span></td>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
<td><span class="tag tag-warning">未完成</span></td>
|
<td><span class="tag tag-warning">未完成</span></td>
|
||||||
<td>2024-01-02 14:20:00</td>
|
<td>2024-01-02 14:20:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240103003</td>
|
<td>ORD20240103003</td>
|
||||||
|
<td>UNIT20240103003</td>
|
||||||
<td>王五</td>
|
<td>王五</td>
|
||||||
<td><span class="money-text">688.00</span></td>
|
<td><span class="money-text">688.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -429,10 +433,11 @@
|
||||||
<td><span class="commission-text">20.64</span></td>
|
<td><span class="commission-text">20.64</span></td>
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
<td>2024-01-03 09:15:00</td>
|
<td>2024-01-03 09:15:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240104004</td>
|
<td>ORD20240104004</td>
|
||||||
|
<td>UNIT20240104004</td>
|
||||||
<td>张三</td>
|
<td>张三</td>
|
||||||
<td><span class="money-text">358.00</span></td>
|
<td><span class="money-text">358.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -441,10 +446,11 @@
|
||||||
<td><span class="commission-text">10.74</span></td>
|
<td><span class="commission-text">10.74</span></td>
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
<td>2024-01-04 16:45:00</td>
|
<td>2024-01-04 16:45:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240105005</td>
|
<td>ORD20240105005</td>
|
||||||
|
<td>UNIT20240105005</td>
|
||||||
<td>王五</td>
|
<td>王五</td>
|
||||||
<td><span class="money-text">799.00</span></td>
|
<td><span class="money-text">799.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -453,10 +459,11 @@
|
||||||
<td><span class="commission-text">23.97</span></td>
|
<td><span class="commission-text">23.97</span></td>
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
<td>2024-01-05 11:20:00</td>
|
<td>2024-01-05 11:20:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240106006</td>
|
<td>ORD20240106006</td>
|
||||||
|
<td>UNIT20240106006</td>
|
||||||
<td>李四</td>
|
<td>李四</td>
|
||||||
<td><span class="money-text">428.00</span></td>
|
<td><span class="money-text">428.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -465,10 +472,11 @@
|
||||||
<td><span class="commission-text">0.00</span></td>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
<td><span class="tag tag-warning">未完成</span></td>
|
<td><span class="tag tag-warning">未完成</span></td>
|
||||||
<td>2024-01-06 13:50:00</td>
|
<td>2024-01-06 13:50:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240107007</td>
|
<td>ORD20240107007</td>
|
||||||
|
<td>UNIT20240107007</td>
|
||||||
<td>赵六</td>
|
<td>赵六</td>
|
||||||
<td><span class="money-text">568.00</span></td>
|
<td><span class="money-text">568.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -477,10 +485,11 @@
|
||||||
<td><span class="commission-text">0.00</span></td>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
<td>2024-01-07 15:30:00</td>
|
<td>2024-01-07 15:30:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ORD20240108008</td>
|
<td>ORD20240108008</td>
|
||||||
|
<td>UNIT20240108008</td>
|
||||||
<td>张三</td>
|
<td>张三</td>
|
||||||
<td><span class="money-text">268.00</span></td>
|
<td><span class="money-text">268.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
|
|
@ -489,7 +498,7 @@
|
||||||
<td><span class="commission-text">8.04</span></td>
|
<td><span class="commission-text">8.04</span></td>
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
<td>2024-01-08 08:15:00</td>
|
<td>2024-01-08 08:15:00</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -551,7 +560,7 @@
|
||||||
<td><span class="commission-text">523.25</span></td>
|
<td><span class="commission-text">523.25</span></td>
|
||||||
<td><span class="commission-text">224.25</span></td>
|
<td><span class="commission-text">224.25</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>李四</td>
|
<td>李四</td>
|
||||||
|
|
@ -563,7 +572,7 @@
|
||||||
<td><span class="commission-text">448.50</span></td>
|
<td><span class="commission-text">448.50</span></td>
|
||||||
<td><span class="commission-text">0.00</span></td>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>王五</td>
|
<td>王五</td>
|
||||||
|
|
@ -575,7 +584,7 @@
|
||||||
<td><span class="commission-text">796.46</span></td>
|
<td><span class="commission-text">796.46</span></td>
|
||||||
<td><span class="commission-text">341.34</span></td>
|
<td><span class="commission-text">341.34</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>赵六</td>
|
<td>赵六</td>
|
||||||
|
|
@ -587,7 +596,7 @@
|
||||||
<td><span class="commission-text">359.20</span></td>
|
<td><span class="commission-text">359.20</span></td>
|
||||||
<td><span class="commission-text">0.00</span></td>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>孙八</td>
|
<td>孙八</td>
|
||||||
|
|
@ -599,7 +608,7 @@
|
||||||
<td><span class="commission-text">586.88</span></td>
|
<td><span class="commission-text">586.88</span></td>
|
||||||
<td><span class="commission-text">251.52</span></td>
|
<td><span class="commission-text">251.52</span></td>
|
||||||
<td>10%</td>
|
<td>10%</td>
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">查看订单</button></td>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
|
|
|
||||||
|
|
@ -1,959 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>品牌店铺订单管理 - 大妈集市商户端</title>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
background: white;
|
|
||||||
padding: 16px 24px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #262626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-section {
|
|
||||||
background: white;
|
|
||||||
padding: 24px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 12px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #1890ff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
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 {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #1890ff;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #40a9ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-default {
|
|
||||||
background: white;
|
|
||||||
color: #666;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-default:hover {
|
|
||||||
border-color: #1890ff;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-section {
|
|
||||||
background: white;
|
|
||||||
padding: 24px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs-section {
|
|
||||||
background: white;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
padding: 16px 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab.active {
|
|
||||||
color: #1890ff;
|
|
||||||
border-bottom-color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-section {
|
|
||||||
background: white;
|
|
||||||
border-radius: 0 0 8px 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-table th {
|
|
||||||
background: #fafafa;
|
|
||||||
padding: 12px 16px;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #666;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-table td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-bottom: 1px solid #f9f9f9;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-table tbody tr:hover {
|
|
||||||
background: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expandable-row {
|
|
||||||
background: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-btn:hover {
|
|
||||||
background: #e6f7ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-table {
|
|
||||||
width: 100%;
|
|
||||||
margin: 8px 0;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-table th,
|
|
||||||
.sub-table td {
|
|
||||||
padding: 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-bottom: 1px solid #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-table th {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-tag {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-paid {
|
|
||||||
background: #f6ffed;
|
|
||||||
color: #52c41a;
|
|
||||||
border: 1px solid #b7eb8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-pending {
|
|
||||||
background: #fff7e6;
|
|
||||||
color: #fa8c16;
|
|
||||||
border: 1px solid #ffd591;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-cancelled {
|
|
||||||
background: #fff2f0;
|
|
||||||
color: #ff4d4f;
|
|
||||||
border: 1px solid #ffb3b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-completed {
|
|
||||||
background: #f6ffed;
|
|
||||||
color: #52c41a;
|
|
||||||
border: 1px solid #b7eb8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
padding: 20px 24px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background: white;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-info {
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-size-selector {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-size-select {
|
|
||||||
height: 32px;
|
|
||||||
padding: 0 8px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-list {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item:hover {
|
|
||||||
border-color: #1890ff;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item.active {
|
|
||||||
background: #1890ff;
|
|
||||||
color: white;
|
|
||||||
border-color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item.disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-jump {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-jump input {
|
|
||||||
width: 60px;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0 8px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-image {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nested-table-wrapper {
|
|
||||||
padding: 16px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-detail-header {
|
|
||||||
background: #f5f5f5;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fee-item {
|
|
||||||
color: #ff4d4f;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.market-name {
|
|
||||||
color: #1890ff;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<!-- 页面标题 -->
|
|
||||||
<div class="page-header">
|
|
||||||
<h1 class="page-title">品牌店铺订单管理</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 搜索区域 -->
|
|
||||||
<div class="search-section">
|
|
||||||
<div class="filter-row">
|
|
||||||
<div class="filter-item">
|
|
||||||
<label>收货人姓名:</label>
|
|
||||||
<input type="text" placeholder="收货人姓名搜索">
|
|
||||||
</div>
|
|
||||||
<div class="filter-item">
|
|
||||||
<label>订单编号:</label>
|
|
||||||
<input type="text" placeholder="订单编号">
|
|
||||||
</div>
|
|
||||||
<div class="filter-item">
|
|
||||||
<label>店铺订单状态:</label>
|
|
||||||
<select>
|
|
||||||
<option value="">全部</option>
|
|
||||||
<option value="stock_completed">备货完成</option>
|
|
||||||
<option value="pending_pickup">待取货</option>
|
|
||||||
<option value="pickup_pending_delivery">已取货（待配送）</option>
|
|
||||||
<option value="delivery_in_progress">配送中</option>
|
|
||||||
<option value="delivery_completed_pending_receipt">配送完成(待收货)</option>
|
|
||||||
<option value="pending_review">待评价</option>
|
|
||||||
<option value="completed">已完成</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="filter-item">
|
|
||||||
<label>结算单位订单状态:</label>
|
|
||||||
<select>
|
|
||||||
<option value="">全部</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>
|
|
||||||
<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 class="button-group">
|
|
||||||
<button class="btn btn-primary">查询</button>
|
|
||||||
<button class="btn btn-default">重置</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 统计数据区域 -->
|
|
||||||
<div class="stats-section">
|
|
||||||
<div class="stats-grid">
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">订单数量（笔）</div>
|
|
||||||
<div class="stat-value">125</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">订单金额（元）</div>
|
|
||||||
<div class="stat-value">5680.50</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">配送费总额（元）</div>
|
|
||||||
<div class="stat-value">380.20</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">包装费总额（元）</div>
|
|
||||||
<div class="stat-value">125.50</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">调度费总额（元）</div>
|
|
||||||
<div class="stat-value">95.80</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">退款金额</div>
|
|
||||||
<div class="stat-value">450.30</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">订单完成率</div>
|
|
||||||
<div class="stat-value">28.8%</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">代理商抽成(元)</div>
|
|
||||||
<div class="stat-value">0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 表格区域 -->
|
|
||||||
<div class="table-section">
|
|
||||||
<div class="table-wrapper">
|
|
||||||
<table class="order-table">
|
|
||||||
<thead>
|
|
||||||
<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>
|
|
||||||
<th>申请退款原因</th>
|
|
||||||
<th>配送费</th>
|
|
||||||
<th>包装费</th>
|
|
||||||
<th>调度费</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
|
||||||
<td>1</td>
|
|
||||||
<td>BSO202407190001</td>
|
|
||||||
<td>2025-07-19 15:33:55</td>
|
|
||||||
<td>张三</td>
|
|
||||||
<td>13818776990</td>
|
|
||||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
|
||||||
<td>38.5</td>
|
|
||||||
<td><span class="market-name">春申菜市场</span></td>
|
|
||||||
<td><span class="status-tag status-paid">已支付</span></td>
|
|
||||||
<td><span class="status-tag status-paid">-</span></td>
|
|
||||||
<td>品牌生鲜店</td>
|
|
||||||
<td></td>
|
|
||||||
<td><span class="fee-item">-</span></td>
|
|
||||||
<td><span class="fee-item">-</span></td>
|
|
||||||
<td><span class="fee-item">-</span></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="expandable-row" style="display: none;">
|
|
||||||
<td colspan="16">
|
|
||||||
<div class="nested-table-wrapper">
|
|
||||||
<table class="sub-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<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>45.0</td>
|
|
||||||
<td>38.5</td>
|
|
||||||
<td>38.5</td>
|
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
|
||||||
<td>2</td>
|
|
||||||
<td>BSO202407190002</td>
|
|
||||||
<td>2025-07-19 14:56:21</td>
|
|
||||||
<td>李四</td>
|
|
||||||
<td>13928776991</td>
|
|
||||||
<td>瑞星商务中心 201室</td>
|
|
||||||
<td>56.8</td>
|
|
||||||
<td><span class="market-name">徐汇菜市场</span></td>
|
|
||||||
<td><span class="status-tag status-completed">已完成</span></td>
|
|
||||||
<td><span class="status-tag status-completed">已完成</span></td>
|
|
||||||
<td>品牌水果店</td>
|
|
||||||
<td></td>
|
|
||||||
<td><span class="fee-item">5.0</span></td>
|
|
||||||
<td><span class="fee-item">2.0</span></td>
|
|
||||||
<td><span class="fee-item">1.2</span></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="expandable-row" style="display: none;">
|
|
||||||
<td colspan="16">
|
|
||||||
<div class="nested-table-wrapper">
|
|
||||||
<table class="sub-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<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>68.0</td>
|
|
||||||
<td>56.8</td>
|
|
||||||
<td>56.8</td>
|
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
|
||||||
<td>3</td>
|
|
||||||
<td>BSO202407180001</td>
|
|
||||||
<td>2025-07-18 17:29:48</td>
|
|
||||||
<td>王五</td>
|
|
||||||
<td>13738776992</td>
|
|
||||||
<td>静安寺商圈 A座501室</td>
|
|
||||||
<td>78.9</td>
|
|
||||||
<td><span class="market-name">静安菜市场</span></td>
|
|
||||||
<td><span class="status-tag status-delivery">配送中</span></td>
|
|
||||||
<td><span class="status-tag status-delivery">配送中</span></td>
|
|
||||||
<td>品牌肉品店</td>
|
|
||||||
<td></td>
|
|
||||||
<td><span class="fee-item">6.0</span></td>
|
|
||||||
<td><span class="fee-item">2.5</span></td>
|
|
||||||
<td><span class="fee-item">1.5</span></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="expandable-row" style="display: none;">
|
|
||||||
<td colspan="16">
|
|
||||||
<div class="nested-table-wrapper">
|
|
||||||
<table class="sub-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<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>89.9</td>
|
|
||||||
<td>78.9</td>
|
|
||||||
<td>78.9</td>
|
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
|
||||||
<td>4</td>
|
|
||||||
<td>BSO202407180002</td>
|
|
||||||
<td>2025-07-18 17:29:23</td>
|
|
||||||
<td>赵六</td>
|
|
||||||
<td>13648776993</td>
|
|
||||||
<td>浦东新区 张江高科技园区</td>
|
|
||||||
<td>45.2</td>
|
|
||||||
<td><span class="market-name">浦东菜市场</span></td>
|
|
||||||
<td><span class="status-tag status-cancelled">取消</span></td>
|
|
||||||
<td><span class="status-tag status-cancelled">取消</span></td>
|
|
||||||
<td>品牌海鲜店</td>
|
|
||||||
<td>用户主动取消</td>
|
|
||||||
<td><span class="fee-item">4.5</span></td>
|
|
||||||
<td><span class="fee-item">1.8</span></td>
|
|
||||||
<td><span class="fee-item">1.0</span></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="expandable-row" style="display: none;">
|
|
||||||
<td colspan="16">
|
|
||||||
<div class="nested-table-wrapper">
|
|
||||||
<table class="sub-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<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>52.0</td>
|
|
||||||
<td>45.2</td>
|
|
||||||
<td>45.2</td>
|
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
|
|
||||||
<td>5</td>
|
|
||||||
<td>BSO202407170001</td>
|
|
||||||
<td>2025-07-17 12:08:07</td>
|
|
||||||
<td>陈七</td>
|
|
||||||
<td>13558776994</td>
|
|
||||||
<td>黄浦区 南京东路步行街</td>
|
|
||||||
<td>68.0</td>
|
|
||||||
<td><span class="market-name">黄浦菜市场</span></td>
|
|
||||||
<td><span class="status-tag status-pending">待接单</span></td>
|
|
||||||
<td><span class="status-tag status-pending">待接单</span></td>
|
|
||||||
<td>品牌零食店</td>
|
|
||||||
<td></td>
|
|
||||||
<td><span class="fee-item">5.5</span></td>
|
|
||||||
<td><span class="fee-item">2.2</span></td>
|
|
||||||
<td><span class="fee-item">1.3</span></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="expandable-row" style="display: none;">
|
|
||||||
<td colspan="16">
|
|
||||||
<div class="nested-table-wrapper">
|
|
||||||
<table class="sub-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<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>75.0</td>
|
|
||||||
<td>68.0</td>
|
|
||||||
<td>68.0</td>
|
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页区域 -->
|
|
||||||
<div class="pagination">
|
|
||||||
<div class="pagination-info">共 125 条</div>
|
|
||||||
<div class="pagination-controls">
|
|
||||||
<div class="page-size-selector">
|
|
||||||
<select class="page-size-select">
|
|
||||||
<option value="10">10条/页</option>
|
|
||||||
<option value="20">20条/页</option>
|
|
||||||
<option value="50">50条/页</option>
|
|
||||||
<option value="100">100条/页</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="page-item disabled">«</div>
|
|
||||||
<ul class="page-list">
|
|
||||||
<li class="page-item active">1</li>
|
|
||||||
<li class="page-item">2</li>
|
|
||||||
<li class="page-item">3</li>
|
|
||||||
<li class="page-item">4</li>
|
|
||||||
<li class="page-item">5</li>
|
|
||||||
<li class="page-item">...</li>
|
|
||||||
<li class="page-item">13</li>
|
|
||||||
</ul>
|
|
||||||
<div class="page-item">»</div>
|
|
||||||
<div class="page-jump">
|
|
||||||
前往 <input type="number" value="1" min="1" max="13"> 页
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 => {
|
|
||||||
tab.addEventListener('click', function() {
|
|
||||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
||||||
this.classList.add('active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 展开/收起功能
|
|
||||||
function toggleExpand(btn) {
|
|
||||||
const currentRow = btn.closest('tr');
|
|
||||||
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 = '▲';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 店铺订单展开功能
|
|
||||||
function toggleShopExpand(btn) {
|
|
||||||
const currentRow = btn.closest('tr');
|
|
||||||
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 = '▲';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页功能
|
|
||||||
document.querySelectorAll('.page-item:not(.disabled):not(.active)').forEach(item => {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
if (!this.classList.contains('disabled') && this.textContent !== '...') {
|
|
||||||
document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
|
|
||||||
this.classList.add('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 搜索功能
|
|
||||||
document.querySelector('.btn-primary').addEventListener('click', function() {
|
|
||||||
alert('执行查询操作');
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelector('.btn-default').addEventListener('click', function() {
|
|
||||||
document.querySelectorAll('.form-input').forEach(input => {
|
|
||||||
input.value = '';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 页面跳转功能
|
|
||||||
document.querySelector('.page-jump input').addEventListener('keypress', function(e) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
const page = parseInt(this.value);
|
|
||||||
if (page >= 1 && page <= 13) {
|
|
||||||
document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
|
|
||||||
alert('跳转到第 ' + page + ' 页');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue