综述: 实现订单管理功能页面
- 在商家端web中新增订单管理页面，包含订单查询、订单状态管理、订单详情查看等功能模块 - 实现订单数据的展示和操作界面，支持订单筛选和排序功能
This commit is contained in:
parent
9e10ca67ec
commit
a8c1089326
|
|
@ -0,0 +1,798 @@
|
|||
<!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: 1400px;
|
||||
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);
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-range .form-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.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 8px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-table td {
|
||||
padding: 12px 8px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">订单管理</h1>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<div class="search-form">
|
||||
<div class="form-item">
|
||||
<label class="form-label">收货人姓名</label>
|
||||
<input type="text" class="form-input" placeholder="收货人姓名搜索">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">订单编号</label>
|
||||
<input type="text" class="form-input" placeholder="订单编号">
|
||||
</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>
|
||||
<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">177</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">订单金额（元）</div>
|
||||
<div class="stat-value">4662.3</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">退款金额</div>
|
||||
<div class="stat-value">680.17</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">订单完成率</div>
|
||||
<div class="stat-value">32.77%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">代理商抽成(元)</div>
|
||||
<div class="stat-value">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页区域 -->
|
||||
<div class="tabs-section">
|
||||
<div class="tabs">
|
||||
<div class="tab active">全部订单</div>
|
||||
<div class="tab">待支付</div>
|
||||
<div class="tab">待接单</div>
|
||||
<div class="tab">待备货</div>
|
||||
<div class="tab">待取货</div>
|
||||
<div class="tab">已取货</div>
|
||||
<div class="tab">配送中</div>
|
||||
<div class="tab">已配送</div>
|
||||
<div class="tab">完成</div>
|
||||
<div class="tab">未支付订单取消</div>
|
||||
<div class="tab">用户申请退款中</div>
|
||||
<div class="tab">用户申请已退款</div>
|
||||
<div class="tab">商家取消订单</div>
|
||||
<div class="tab">平台取消订单</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>
|
||||
<th>市场名称</th>
|
||||
<th>申请退款原因</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>11120250719153384808917</td>
|
||||
<td>2025-07-19 15:33:55</td>
|
||||
<td>王</td>
|
||||
<td>13818776990</td>
|
||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
||||
<td>3.8</td>
|
||||
<td>1.8</td>
|
||||
<td>0</td>
|
||||
<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>春申菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<div class="nested-table-wrapper">
|
||||
<table class="sub-table order-detail-header">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>序号</th>
|
||||
<th>订单编号</th>
|
||||
<th>店铺名称</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button class="expand-btn">▼</button></td>
|
||||
<td>1</td>
|
||||
<td>11220250719153384807045</td>
|
||||
<td>牛牛蔬菜店</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>上海青约300g</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>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="toggleExpand(this)">▼</button></td>
|
||||
<td>2</td>
|
||||
<td>11120250719145684803694</td>
|
||||
<td>2025-07-19 14:56:21</td>
|
||||
<td>王</td>
|
||||
<td>13818776990</td>
|
||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
||||
<td>3.9</td>
|
||||
<td>0.9</td>
|
||||
<td>1</td>
|
||||
<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>春申菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td>3</td>
|
||||
<td>21120250718172950560206</td>
|
||||
<td>2025-07-18 17:29:48</td>
|
||||
<td>王</td>
|
||||
<td>13818776990</td>
|
||||
<td>瑞星商务中心 201室</td>
|
||||
<td>2.6</td>
|
||||
<td>2</td>
|
||||
<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>全季菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td>4</td>
|
||||
<td>21120250718172950562355</td>
|
||||
<td>2025-07-18 17:29:23</td>
|
||||
<td>王</td>
|
||||
<td>13818776990</td>
|
||||
<td>瑞星商务中心 201室</td>
|
||||
<td>3.6</td>
|
||||
<td>3</td>
|
||||
<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>全季菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><button class="expand-btn" onclick="toggleExpand(this)">▼</button></td>
|
||||
<td>5</td>
|
||||
<td>21120250717120850567740</td>
|
||||
<td>2025-07-17 12:08:07</td>
|
||||
<td>王</td>
|
||||
<td>13818776990</td>
|
||||
<td>瑞星商务中心 201室</td>
|
||||
<td>2.6</td>
|
||||
<td>2</td>
|
||||
<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>全季菜市场</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="expandable-row" style="display: none;">
|
||||
<td colspan="20">
|
||||
<div class="nested-table-wrapper">
|
||||
<div style="color: #666; font-size: 14px; padding: 8px;">订单详情展开内容...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">共 177 条</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">6</li>
|
||||
<li class="page-item">...</li>
|
||||
<li class="page-item">18</li>
|
||||
</ul>
|
||||
<div class="page-item">»</div>
|
||||
<div class="page-jump">
|
||||
前往 <input type="number" value="1" min="1" max="18"> 页
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 标签页切换功能
|
||||
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')) {
|
||||
if (nextRow.style.display === 'none') {
|
||||
nextRow.style.display = 'table-row';
|
||||
btn.innerHTML = '▲';
|
||||
} else {
|
||||
nextRow.style.display = 'none';
|
||||
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 <= 18) {
|
||||
document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
|
||||
alert('跳转到第 ' + page + ' 页');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue