更新品牌管理模块功能

- 在index.html中添加分销商管理和分销订单与佣金管理菜单项
- 移除旧的分销商审核和管理演示页面
- 移除旧的分销订单和佣金管理演示页面
- 添加新的分销商管理页面
- 添加新的分销订单与佣金管理页面

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
linbin 2025-10-03 01:02:20 +08:00
parent e405208130
commit f4c90aee69
3 changed files with 255 additions and 152 deletions

View File

@ -437,6 +437,14 @@
<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>
</ul>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分销商审核和管理系统</title>
<title>分销商管理</title>
<style>
* {
margin: 0;
@ -14,104 +14,111 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #f0f2f5;
background: #f5f5f5;
padding: 20px;
}
.container {
max-width: 1400px;
max-width: 1600px;
margin: 0 auto;
}
.header-card {
background: white;
padding: 30px;
padding: 16px 24px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.page-title {
font-size: 28px;
font-weight: bold;
color: #303133;
margin-bottom: 10px;
font-size: 24px;
font-weight: 600;
color: #262626;
}
.page-desc {
font-size: 14px;
color: #909399;
color: #666;
}
.main-card {
background: white;
padding: 20px;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.stat-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
margin-bottom: 16px;
}
.stat-card {
background: white;
padding: 24px;
text-align: center;
padding: 20px;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: #fafafa;
}
.stat-content {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-icon {
font-size: 48px;
margin-right: 20px;
margin-bottom: 12px;
}
.stat-icon.primary { color: #409EFF; }
.stat-icon.success { color: #67C23A; }
.stat-icon.danger { color: #F56C6C; }
.stat-icon.warning { color: #E6A23C; }
.stat-icon.primary { color: #1890ff; }
.stat-icon.success { color: #52c41a; }
.stat-icon.danger { color: #ff4d4f; }
.stat-icon.warning { color: #fa8c16; }
.stat-info {
flex: 1;
width: 100%;
}
.stat-label {
font-size: 14px;
color: #909399;
color: #666;
margin-bottom: 8px;
}
.stat-value {
font-size: 32px;
font-weight: bold;
color: #303133;
font-size: 24px;
font-weight: 600;
color: #1890ff;
}
.tabs {
border-bottom: 2px solid #E4E7ED;
display: flex;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
}
.tab-item {
display: inline-block;
padding: 12px 20px;
padding: 16px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: #303133;
margin-bottom: -1px;
color: #666;
font-size: 14px;
transition: all 0.3s;
}
.tab-item.active {
color: #409EFF;
border-bottom-color: #409EFF;
color: #1890ff;
border-bottom-color: #1890ff;
}
.tab-item:hover {
color: #1890ff;
}
.tab-content {
@ -125,121 +132,164 @@
.search-form {
margin: 20px 0;
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
background: #fafafa;
border-radius: 6px;
}
.form-item {
display: inline-block;
margin-right: 20px;
margin-right: 16px;
margin-bottom: 10px;
}
.form-item label {
margin-right: 8px;
color: #606266;
color: #666;
font-weight: 500;
font-size: 14px;
}
.form-item input, .form-item select {
padding: 8px 12px;
border: 1px solid #DCDFE6;
border-radius: 4px;
height: 40px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
.form-item input:focus, .form-item select:focus {
outline: none;
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.btn {
padding: 9px 15px;
height: 40px;
padding: 0 16px;
border: none;
border-radius: 4px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
margin-right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.btn-primary {
background: #409EFF;
background: #1890ff;
color: white;
}
.btn-primary:hover {
background: #40a9ff;
}
.btn-default {
background: white;
color: #606266;
border: 1px solid #DCDFE6;
color: #666;
border: 1px solid #ddd;
}
.btn-default:hover {
border-color: #1890ff;
color: #1890ff;
}
.btn-success {
background: #67C23A;
background: #52c41a;
color: white;
}
.btn-success:hover {
background: #73d13d;
}
.btn-danger {
background: #F56C6C;
background: #ff4d4f;
color: white;
}
.btn-danger:hover {
background: #ff7875;
}
.btn-warning {
background: #E6A23C;
background: #fa8c16;
color: white;
}
.btn-warning:hover {
background: #ffa940;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table th, table td {
border: 1px solid #EBEEF5;
padding: 12px 8px;
text-align: center;
font-size: 14px;
}
table th {
background: #F5F7FA;
color: #606266;
font-weight: bold;
table th, table td {
border: 1px solid #f0f0f0;
padding: 12px 16px;
text-align: center;
}
table tr:hover {
background: #F5F7FA;
table th {
background: #fafafa;
color: #666;
font-weight: 600;
}
table td {
border-bottom: 1px solid #f9f9f9;
}
table tbody tr:hover {
background: #f8f9fa;
}
.tag {
display: inline-block;
padding: 4px 12px;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.tag-success {
background: #f0f9ff;
color: #67C23A;
border: 1px solid #c6f6d5;
background: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
}
.tag-warning {
background: #fffbeb;
color: #E6A23C;
border: 1px solid #fef3c7;
background: #fff7e6;
color: #fa8c16;
border: 1px solid #ffd591;
}
.tag-danger {
background: #fef2f2;
color: #F56C6C;
border: 1px solid #fecaca;
background: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffb3b3;
}
.tag-info {
background: #f4f4f5;
color: #909399;
color: #666;
border: 1px solid #e4e4e7;
}
.pagination {
text-align: right;
margin-top: 20px;
color: #606266;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
color: #666;
font-size: 14px;
}
@media screen and (max-width: 1200px) {
@ -259,8 +309,7 @@
<div class="container">
<!-- 页面标题 -->
<div class="header-card">
<h1 class="page-title">分销商审核与管理系统</h1>
<p class="page-desc">管理分销商申请审核、查看分销商列表及相关统计数据</p>
<h1 class="page-title">分销商管理</h1>
</div>
<!-- 主内容 -->

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分销订单与佣金管理系统</title>
<title>分销订单与佣金管理</title>
<style>
* {
margin: 0;
@ -14,7 +14,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #f0f2f5;
background: #f5f5f5;
padding: 20px;
}
@ -25,93 +25,100 @@
.header-card {
background: white;
padding: 30px;
padding: 16px 24px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.page-title {
font-size: 28px;
font-weight: bold;
color: #303133;
margin-bottom: 10px;
font-size: 24px;
font-weight: 600;
color: #262626;
}
.page-desc {
font-size: 14px;
color: #909399;
color: #666;
}
.stat-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
margin-bottom: 16px;
}
.stat-card {
background: white;
padding: 24px;
text-align: center;
padding: 20px;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: #fafafa;
}
.stat-content {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-icon {
font-size: 48px;
margin-right: 20px;
margin-bottom: 12px;
}
.stat-icon.primary { color: #409EFF; }
.stat-icon.success { color: #67C23A; }
.stat-icon.warning { color: #E6A23C; }
.stat-icon.info { color: #909399; }
.stat-icon.primary { color: #1890ff; }
.stat-icon.success { color: #52c41a; }
.stat-icon.warning { color: #fa8c16; }
.stat-icon.info { color: #666; }
.stat-info {
flex: 1;
width: 100%;
}
.stat-label {
font-size: 14px;
color: #909399;
color: #666;
margin-bottom: 8px;
}
.stat-value {
font-size: 32px;
font-weight: bold;
color: #303133;
font-size: 24px;
font-weight: 600;
color: #1890ff;
}
.main-card {
background: white;
padding: 20px;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tabs {
border-bottom: 2px solid #E4E7ED;
display: flex;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
}
.tab-item {
display: inline-block;
padding: 12px 20px;
padding: 16px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: #303133;
margin-bottom: -1px;
color: #666;
font-size: 14px;
transition: all 0.3s;
}
.tab-item.active {
color: #409EFF;
border-bottom-color: #409EFF;
color: #1890ff;
border-bottom-color: #1890ff;
}
.tab-item:hover {
color: #1890ff;
}
.tab-content {
@ -125,115 +132,155 @@
.search-form {
margin: 20px 0;
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
background: #fafafa;
border-radius: 6px;
}
.form-item {
display: inline-block;
margin-right: 20px;
margin-right: 16px;
margin-bottom: 10px;
}
.form-item label {
margin-right: 8px;
color: #606266;
color: #666;
font-weight: 500;
font-size: 14px;
}
.form-item input, .form-item select {
padding: 8px 12px;
border: 1px solid #DCDFE6;
border-radius: 4px;
height: 40px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
.form-item input:focus, .form-item select:focus {
outline: none;
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.btn {
padding: 9px 15px;
height: 40px;
padding: 0 16px;
border: none;
border-radius: 4px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
margin-right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.btn-primary {
background: #409EFF;
background: #1890ff;
color: white;
}
.btn-primary:hover {
background: #40a9ff;
}
.btn-default {
background: white;
color: #606266;
border: 1px solid #DCDFE6;
color: #666;
border: 1px solid #ddd;
}
.btn-default:hover {
border-color: #1890ff;
color: #1890ff;
}
.btn-success {
background: #67C23A;
background: #52c41a;
color: white;
}
.btn-success:hover {
background: #73d13d;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table th, table td {
border: 1px solid #EBEEF5;
padding: 12px 8px;
text-align: center;
font-size: 14px;
}
table th {
background: #F5F7FA;
color: #606266;
font-weight: bold;
table th, table td {
border: 1px solid #f0f0f0;
padding: 12px 16px;
text-align: center;
}
table tr:hover {
background: #F5F7FA;
table th {
background: #fafafa;
color: #666;
font-weight: 600;
}
table td {
border-bottom: 1px solid #f9f9f9;
}
table tbody tr:hover {
background: #f8f9fa;
}
table tfoot tr {
background: #fafafa;
font-weight: 600;
}
.tag {
display: inline-block;
padding: 4px 12px;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.tag-success {
background: #f0f9ff;
color: #67C23A;
border: 1px solid #c6f6d5;
background: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
}
.tag-warning {
background: #fffbeb;
color: #E6A23C;
border: 1px solid #fef3c7;
background: #fff7e6;
color: #fa8c16;
border: 1px solid #ffd591;
}
.tag-info {
background: #f4f4f5;
color: #909399;
color: #666;
border: 1px solid #e4e4e7;
}
.money-text {
color: #E6A23C;
font-weight: bold;
color: #fa8c16;
font-weight: 600;
}
.commission-text {
color: #67C23A;
font-weight: bold;
color: #52c41a;
font-weight: 600;
}
.pagination {
text-align: right;
margin-top: 20px;
color: #606266;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
color: #666;
font-size: 14px;
}
@media screen and (max-width: 1200px) {
@ -253,8 +300,7 @@
<div class="container">
<!-- 页面标题 -->
<div class="header-card">
<h1 class="page-title">分销订单与佣金管理系统</h1>
<p class="page-desc">查看分销订单明细、佣金统计及分销业绩数据</p>
<h1 class="page-title">分销订单与佣金管理</h1>
</div>
<!-- 统计卡片 -->