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

Compare commits

base: linbin:141168c855988f746927caeae6cde42e429d9efc
Branches Tags
linbin:master
...
compare: linbin:90ca3480f673481d97ee6f568c505c7b14224242
Branches Tags
linbin:master

10 Commits
141168c855 ... 90ca3480f6

Author SHA1 Message Date
linbin 90ca3480f6 综述: 增加独立店铺订单管理菜单和页面 
- 在侧边栏菜单中添加独立店铺订单管理子菜单项
- 创建独立店铺订单管理页面目录和文件结构
- 实现独立店铺订单管理功能模块
 2025-10-02 19:26:04 +08:00
linbin 724d85f7b7 综述: 优化市场店铺订单管理页面字段显示 
- 删除店铺订单配送费、调度费、包装费等冗余字段列
- 根据删除的列数相应调整表格行的colspan属性值
- 简化订单信息展示，提升页面可读性和用户体验
 2025-10-02 19:06:52 +08:00
linbin a393b2ed52 综述: 优化市场店铺订单管理页面字段显示 
- 在市场店铺订单管理页面中，增加结算单位订单状态的筛选功能
- 更新表格字段显示，增加结算单位订单状态列
- 同步更新表格行的colspan属性值以适应新增的列
- 完善店铺订单状态和结算单位订单状态的显示
 2025-10-02 19:03:03 +08:00
linbin eaecd7226f 综述: 优化市场订单管理页面UI和功能 
- 在市场店铺订单管理和市场订单管理页面中，优化搜索区域的样式和布局
- 将原有的.date-range样式替换为.filter-row和.filter-item，增强样式复用性和一致性
- 为搜索区域的输入框和选择框添加统一的样式类，提升视觉效果和用户体验
- 实现日期范围的快捷选择功能，包括近1天、近7天、近30天和自定义选项
- 添加自定义日期范围的显示/隐藏逻辑，提升页面交互性
 2025-10-02 18:53:08 +08:00
linbin fc2d581884 综述: 优化市场店铺订单管理页面字段显示 
- 删除店铺订单配送费、调度费、包装费等冗余字段列
- 根据删除的列数相应调整表格行的colspan属性值
- 简化订单信息展示，提升页面可读性和用户体验
 2025-10-02 18:45:28 +08:00
linbin 8a756e33b9 综述: 优化订单管理菜单结构 
- 将市场订单管理和市场店铺订单管理整合到订单管理子菜单下
- 更新订单管理菜单的图标和交互效果
- 完善侧边栏菜单的层级结构和用户体验
 2025-10-02 18:08:45 +08:00
linbin ed785e48d2 综述: 优化市场订单管理页面字段显示 
- 更新主菜单中店铺订单管理的链接指向新的市场店铺订单管理页面
- 删除旧的店铺订单管理页面文件
- 完善市场店铺订单管理页面的字段显示和布局
 2025-10-02 18:01:18 +08:00
linbin 8ef487056b 综述: 优化市场订单管理页面字段显示 
- 调整订单表格字段显示，将"市场订单金额"、"市场订单商品金额"、"市场订单配送费"简化为"订单总金额"、"商品总金额"、"配送费"
- 移除冗余的"市场编号"和"市场名称"字段
- 在子表格中增加"商品总金额"字段显示
- 调整子表格行的列合并数以适应字段调整
 2025-10-02 17:49:54 +08:00
linbin 5c9dbe4490 综述: 新增店铺订单管理页面功能 - 在主菜单中添加店铺订单管理模块 - 创建店铺订单管理页面，包含订单搜索、统计数据展示和分层表格功能 - 实现店铺订单的展开/收起交互效果 2025-10-02 16:42:56 +08:00
linbin 369d2f5bc3 综述: 更新订单管理页面功能 - 将订单管理页面移至市场订单管理目录并更新主页面导航链接 - 删除旧的订单管理目录中的文件 - 保留所有订单管理功能包括搜索、统计和分层表格展示 2025-10-02 16:19:17 +08:00
4 changed files with 1815 additions and 44 deletions
Show Stats Expand all files Collapse all files

23
商家端web/index.html
View File

@ -308,12 +308,29 @@
</li>
<li class="menu-item">
<a href="#" class="menu-link" onclick="loadContent('./订单管理/订单管理.html', this)">
<div class="menu-link" onclick="toggleSubmenu(this)">
<span class="menu-icon">
<i class="fas fa-tasks"></i>
<i class="fas fa-clipboard-list"></i>
</span>
<span class="menu-text">订单管理</span>
</a>
<span class="menu-arrow">
<i class="fas fa-chevron-right"></i>
</span>
</div>
<div class="submenu">
<a href="#" class="submenu-link" onclick="loadContent('./市场订单管理/市场订单管理.html', this)">
<span class="submenu-icon"></span>
市场订单管理
</a>
<a href="#" class="submenu-link" onclick="loadContent('./市场店铺订单管理/市场店铺订单管理.html', this)">
<span class="submenu-icon"></span>
市场店铺订单管理
</a>
<a href="#" class="submenu-link" onclick="loadContent('./独立店铺订单管理/独立店铺订单管理.html', this)">
<span class="submenu-icon"></span>
独立店铺订单管理
</a>
</div>
</li>
<li class="menu-item">

920
商家端web/市场店铺订单管理/市场店铺订单管理.html Normal file
View File

@ -0,0 +1,920 @@
<!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;
}
</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">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="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>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>SO202407190001</td>
<td>2025-07-19 15:33:55</td>
<td>王</td>
<td>13818776990</td>
<td>茅台酱香万家共享(春申路店) 101室</td>
<td>3.8</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>1001</td>
<td>牛牛蔬菜店</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="13">
<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>上海青约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="toggleShopExpand(this)">▼</button></td>
<td>2</td>
<td>SO202407190002</td>
<td>2025-07-19 14:56:21</td>
<td>王</td>
<td>13818776990</td>
<td>茅台酱香万家共享(春申路店) 101室</td>
<td>3.9</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>1002</td>
<td>鲜蔬果园店</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="13">
<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>胡萝卜约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></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>3</td>
<td>SO202407180001</td>
<td>2025-07-18 17:29:48</td>
<td>王</td>
<td>13818776990</td>
<td>瑞星商务中心 201室</td>
<td>2.6</td>
<td><span class="status-tag status-completed">已完成</span></td>
<td><span class="status-tag status-completed">已完成</span></td>
<td>1003</td>
<td>示例店铺</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="13">
<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></td>
<td></td>
<td>金额</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>SO202407180002</td>
<td>2025-07-18 17:29:23</td>
<td>王</td>
<td>13818776990</td>
<td>瑞星商务中心 201室</td>
<td>3.6</td>
<td><span class="status-tag status-cancelled">取消</span></td>
<td><span class="status-tag status-cancelled">取消</span></td>
<td>1004</td>
<td>示例店铺</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="13">
<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></td>
<td></td>
<td>金额</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>SO202407170001</td>
<td>2025-07-17 12:08:07</td>
<td>王</td>
<td>13818776990</td>
<td>瑞星商务中心 201室</td>
<td>2.6</td>
<td><span class="status-tag status-completed">已完成</span></td>
<td><span class="status-tag status-completed">已完成</span></td>
<td>1005</td>
<td>示例店铺</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="13">
<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></td>
<td></td>
<td>金额</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">共 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.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 <= 18) {
document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
alert('跳转到第 ' + page + ' 页');
}
}
});
</script>
</body>
</html>

125
商家端web/订单管理/订单管理.html → 商家端web/市场订单管理/市场订单管理.html
View File

@ -78,14 +78,40 @@
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.date-range {
.filter-row {
display: flex;
align-items: center;
gap: 8px;
gap: 20px;
flex-wrap: wrap;
}
.date-range .form-input {
flex: 1;
.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 {
@ -408,18 +434,18 @@
<!-- 搜索区域 -->
<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 class="filter-row">
<div class="filter-item">
<label>收货人姓名:</label>
<input type="text" placeholder="收货人姓名搜索">
</div>
<div class="form-item">
<label class="form-label">订单编号</label>
<input type="text" class="form-input" placeholder="订单编号">
<div class="filter-item">
<label>订单编号:</label>
<input type="text" placeholder="订单编号">
</div>
<div class="form-item">
<label class="form-label">结算单位订单状态</label>
<select class="form-input">
<div class="filter-item">
<label>结算单位订单状态:</label>
<select>
<option value="">全部</option>
<option value="pending_payment">待支付</option>
<option value="pending_accept">待接单</option>
@ -436,13 +462,22 @@
<option value="platform_cancelled">平台取消订单</option>
</select>
</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 class="button-group">
@ -491,14 +526,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>
</tr>
@ -518,13 +551,11 @@
<td>0</td>
<td>1</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>1</td>
<td>春申菜市场</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="16">
<td colspan="14">
<div class="nested-table-wrapper">
<table class="sub-table">
<thead>
@ -533,6 +564,7 @@
<th>序号</th>
<th>店铺订单号</th>
<th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th>
<th></th>
</tr>
@ -543,6 +575,7 @@
<td>1</td>
<td>SO202407190001</td>
<td>牛牛蔬菜店</td>
<td>1.8</td>
<td><span class="status-tag status-pending">待备货</span></td>
<td></td>
</tr>
@ -592,13 +625,11 @@
<td>0</td>
<td>1</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>1</td>
<td>春申菜市场</td>
<td></td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="16">
<td colspan="14">
<div class="nested-table-wrapper">
<table class="sub-table">
<thead>
@ -607,6 +638,7 @@
<th>序号</th>
<th>店铺订单号</th>
<th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th>
<th></th>
</tr>
@ -617,6 +649,7 @@
<td>1</td>
<td>SO202407190002</td>
<td>鲜蔬果园店</td>
<td>0.9</td>
<td><span class="status-tag status-pending">待备货</span></td>
<td></td>
</tr>
@ -666,13 +699,11 @@
<td>0.1</td>
<td>0.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="16">
<td colspan="14">
<div class="nested-table-wrapper">
<table class="sub-table">
<thead>
@ -681,6 +712,7 @@
<th>序号</th>
<th>店铺订单号</th>
<th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th>
<th></th>
</tr>
@ -691,6 +723,7 @@
<td>1</td>
<td>SO202407180001</td>
<td>示例店铺</td>
<td>2</td>
<td><span class="status-tag status-completed">完成</span></td>
<td></td>
</tr>
@ -740,13 +773,11 @@
<td>0</td>
<td>0.1</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="16">
<td colspan="14">
<div class="nested-table-wrapper">
<table class="sub-table">
<thead>
@ -755,6 +786,7 @@
<th>序号</th>
<th>店铺订单号</th>
<th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th>
<th></th>
</tr>
@ -765,6 +797,7 @@
<td>1</td>
<td>SO202407180001</td>
<td>示例店铺</td>
<td>2</td>
<td><span class="status-tag status-completed">完成</span></td>
<td></td>
</tr>
@ -814,13 +847,11 @@
<td>0.1</td>
<td>0.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="16">
<td colspan="14">
<div class="nested-table-wrapper">
<table class="sub-table">
<thead>
@ -829,6 +860,7 @@
<th>序号</th>
<th>店铺订单号</th>
<th>店铺名称</th>
<th>商品总金额</th>
<th>订单状态</th>
<th></th>
</tr>
@ -839,6 +871,7 @@
<td>1</td>
<td>SO202407180001</td>
<td>示例店铺</td>
<td>2</td>
<td><span class="status-tag status-completed">完成</span></td>
<td></td>
</tr>
@ -910,6 +943,16 @@
</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() {

791
商家端web/独立店铺订单管理/独立店铺订单管理.html Normal file
View File

@ -0,0 +1,791 @@
<!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;
}
.table-section {
background: white;
border-radius: 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;
}
.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;
}
.expandable-row {
background: #f8f9fa;
}
.expand-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-size: 12px;
transition: all 0.3s;
}
.expand-btn:hover {
background: #e6f7ff;
}
.sub-table {
width: 100%;
margin: 8px 0;
border: 1px solid #f0f0f0;
border-radius: 4px;
background: white;
}
.sub-table th,
.sub-table td {
padding: 8px;
font-size: 12px;
border-bottom: 1px solid #f9f9f9;
text-align: left;
}
.sub-table th {
background: #f5f5f5;
font-weight: 600;
color: #666;
}
.nested-table-wrapper {
padding: 16px;
background: #f8f9fa;
}
.product-image {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
}
</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="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">86</div>
</div>
<div class="stat-item">
<div class="stat-label">订单金额（元）</div>
<div class="stat-value">2456.8</div>
</div>
<div class="stat-item">
<div class="stat-label">退款金额</div>
<div class="stat-value">325.5</div>
</div>
<div class="stat-item">
<div class="stat-label">订单完成率</div>
<div class="stat-value">78.5%</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>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>IND202407190001</td>
<td>2025-07-19 16:45:22</td>
<td>李明</td>
<td>13912345678</td>
<td>独立店铺A 201室</td>
<td>45.8</td>
<td>42.8</td>
<td>2</td>
<td>0.5</td>
<td>0.5</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>独立店铺A</td>
<td>无特殊要求</td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="15">
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>新鲜蔬菜组合</td>
<td>2</td>
<td>25.00</td>
<td>22.00</td>
<td>44.00</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>2</td>
<td>IND202407190002</td>
<td>2025-07-19 15:20:15</td>
<td>王芳</td>
<td>13887654321</td>
<td>独立店铺B 102室</td>
<td>32.5</td>
<td>30.0</td>
<td>2</td>
<td>0.25</td>
<td>0.25</td>
<td><span class="status-tag status-completed">已完成</span></td>
<td>独立店铺B</td>
<td>尽快配送</td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="15">
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>有机水果礼盒</td>
<td>1</td>
<td>35.00</td>
<td>30.00</td>
<td>30.00</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>3</td>
<td>IND202407180001</td>
<td>2025-07-18 19:30:45</td>
<td>张伟</td>
<td>13656789012</td>
<td>独立店铺A 305室</td>
<td>28.9</td>
<td>26.9</td>
<td>1.5</td>
<td>0.25</td>
<td>0.25</td>
<td><span class="status-tag status-pending">待取货</span></td>
<td>独立店铺A</td>
<td></td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="15">
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>精选肉类套餐</td>
<td>1</td>
<td>30.00</td>
<td>26.90</td>
<td>26.90</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>4</td>
<td>IND202407180002</td>
<td>2025-07-18 14:15:33</td>
<td>刘静</td>
<td>13723456789</td>
<td>独立店铺C 208室</td>
<td>67.2</td>
<td>62.2</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td><span class="status-tag status-cancelled">已取消</span></td>
<td>独立店铺C</td>
<td>用户取消</td>
</tr>
<tr class="expandable-row" style="display: none;">
<td colspan="15">
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>海鲜大礼包</td>
<td>2</td>
<td>35.00</td>
<td>31.10</td>
<td>62.20</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区域 -->
<div class="pagination">
<div class="pagination-info">共 86 条</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">9</li>
</ul>
<div class="page-item">»</div>
<div class="page-jump">
前往 <input type="number" value="1" min="1" max="9"> 页
</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';
}
});
// 店铺订单展开功能
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.querySelector('.btn-primary').addEventListener('click', function() {
alert('执行查询操作');
});
document.querySelector('.btn-default').addEventListener('click', function() {
document.querySelectorAll('.filter-item input, .filter-item select').forEach(input => {
input.value = '';
});
});
// 分页功能
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('.page-jump input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const page = parseInt(this.value);
if (page >= 1 && page <= 9) {
document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
alert('跳转到第 ' + page + ' 页');
}
}
});
</script>
</body>
</html>