Compare commits
No commits in common. "73be9fb9a32101d3201d3e3706da57f04130bd2b" and "90ca3480f673481d97ee6f568c505c7b14224242" have entirely different histories.
73be9fb9a3
...
90ca3480f6
|
|
@ -156,10 +156,6 @@
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.submenu-item.expanded .menu-arrow {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
.submenu {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -169,39 +165,6 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submenu-item {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu-item.expanded > .submenu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu .submenu {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保二级子菜单也能正确显示 */
|
|
||||||
.menu-item.expanded .submenu-item.expanded > .submenu,
|
|
||||||
.submenu-item.expanded > .submenu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 特别为分销管理的嵌套子菜单提供显示规则 */
|
|
||||||
.menu-item.expanded .submenu .submenu-item.expanded .submenu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保在品牌管理展开的情况下，分销管理的子菜单能正确显示 */
|
|
||||||
.menu-item.expanded .submenu .submenu-item .submenu {
|
|
||||||
display: none; /* 默认隐藏 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item.expanded .submenu .submenu-item.expanded .submenu {
|
|
||||||
display: block; /* 只有在展开时才显示 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu-link {
|
.submenu-link {
|
||||||
padding: 8px 20px 8px 46px;
|
padding: 8px 20px 8px 46px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
@ -323,7 +286,7 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
<div class="menu-link" onclick="toggleSubmenu(this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-user-cog"></i>
|
<i class="fas fa-user-cog"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -345,7 +308,7 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
<div class="menu-link" onclick="toggleSubmenu(this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-clipboard-list"></i>
|
<i class="fas fa-clipboard-list"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -380,7 +343,7 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
<div class="menu-link" onclick="toggleSubmenu(this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-analytics"></i>
|
<i class="fas fa-analytics"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -407,7 +370,7 @@
|
||||||
|
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
<div class="menu-link" onclick="toggleSubmenu(this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-users"></i>
|
<i class="fas fa-users"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -430,7 +393,7 @@
|
||||||
|
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
<div class="menu-link" onclick="toggleSubmenu(this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-file-alt"></i>
|
<i class="fas fa-file-alt"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -456,7 +419,7 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
|
<div class="menu-link" onclick="toggleSubmenu(this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-award"></i>
|
<i class="fas fa-award"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -474,25 +437,6 @@
|
||||||
<span class="submenu-icon"></span>
|
<span class="submenu-icon"></span>
|
||||||
品牌市场订单
|
品牌市场订单
|
||||||
</a>
|
</a>
|
||||||
<div class="submenu-item">
|
|
||||||
<div class="submenu-link" onclick="toggleSubmenu(this, event);">
|
|
||||||
<span class="submenu-icon"></span>
|
|
||||||
<span class="menu-text">分销管理</span>
|
|
||||||
<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);" style="padding-left: 70px;">
|
|
||||||
<span class="submenu-icon"></span>
|
|
||||||
分销商管理
|
|
||||||
</a>
|
|
||||||
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销订单与佣金管理.html', this);" style="padding-left: 70px;">
|
|
||||||
<span class="submenu-icon"></span>
|
|
||||||
分销订单与佣金管理
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -515,58 +459,10 @@
|
||||||
sidebar.classList.toggle('open');
|
sidebar.classList.toggle('open');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换顶级菜单展开/收起
|
// 切换子菜单展开/收起
|
||||||
function toggleTopLevelSubmenu(element) {
|
function toggleSubmenu(element) {
|
||||||
console.log('toggleTopLevelSubmenu called', element);
|
|
||||||
const menuItem = element.parentElement;
|
const menuItem = element.parentElement;
|
||||||
console.log('Parent menu item:', menuItem);
|
menuItem.classList.toggle('expanded');
|
||||||
|
|
||||||
// 切换 expanded 类
|
|
||||||
const isExpanded = menuItem.classList.toggle('expanded');
|
|
||||||
console.log('Menu item expanded state:', isExpanded);
|
|
||||||
|
|
||||||
// 阻止事件冒泡，防止触发父级菜单的点击事件
|
|
||||||
if (event && event.stopPropagation) {
|
|
||||||
event.stopPropagation();
|
|
||||||
} else if (window.event) {
|
|
||||||
window.event.cancelBubble = true;
|
|
||||||
}
|
|
||||||
console.log('Event stopped from propagating');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换子菜单展开/收起 - 适用于所有层级
|
|
||||||
function toggleSubmenu(element, event) {
|
|
||||||
console.log('toggleSubmenu called', element);
|
|
||||||
const parentElement = element.parentElement;
|
|
||||||
console.log('Parent element:', parentElement);
|
|
||||||
|
|
||||||
let targetElement;
|
|
||||||
|
|
||||||
// Check if this is a direct submenu item or nested submenu item
|
|
||||||
if (parentElement.classList.contains('submenu-item')) {
|
|
||||||
targetElement = parentElement;
|
|
||||||
console.log('Found submenu-item element');
|
|
||||||
} else {
|
|
||||||
targetElement = parentElement;
|
|
||||||
console.log('Using parent element directly');
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Target element before toggle:', targetElement);
|
|
||||||
console.log('Target element classList:', targetElement.classList);
|
|
||||||
|
|
||||||
// Toggle expanded class
|
|
||||||
const isExpanded = targetElement.classList.toggle('expanded');
|
|
||||||
console.log('Target element expanded state after toggle:', isExpanded);
|
|
||||||
console.log('Target element classList after toggle:', targetElement.classList);
|
|
||||||
|
|
||||||
// Prevent event bubbling, to avoid triggering parent menu clicks
|
|
||||||
if (event && event.stopPropagation) {
|
|
||||||
event.stopPropagation();
|
|
||||||
console.log('Event stopped from propagating');
|
|
||||||
} else if (window.event) {
|
|
||||||
window.event.cancelBubble = true;
|
|
||||||
console.log('Event cancelBubble set to true');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载内容到iframe
|
// 加载内容到iframe
|
||||||
|
|
@ -606,22 +502,17 @@
|
||||||
|
|
||||||
// 菜单搜索功能
|
// 菜单搜索功能
|
||||||
document.querySelector('.search-input').addEventListener('input', function(e) {
|
document.querySelector('.search-input').addEventListener('input', function(e) {
|
||||||
console.log('Search input event triggered', e.target.value);
|
|
||||||
const searchText = e.target.value.toLowerCase();
|
const searchText = e.target.value.toLowerCase();
|
||||||
const menuItems = document.querySelectorAll('.menu-item');
|
const menuItems = document.querySelectorAll('.menu-item');
|
||||||
console.log('Found', menuItems.length, 'menu items');
|
|
||||||
|
|
||||||
menuItems.forEach(item => {
|
menuItems.forEach(item => {
|
||||||
const menuText = item.querySelector('.menu-text');
|
const menuText = item.querySelector('.menu-text');
|
||||||
if (menuText) {
|
if (menuText) {
|
||||||
const text = menuText.textContent.toLowerCase();
|
const text = menuText.textContent.toLowerCase();
|
||||||
console.log('Checking menu text:', text);
|
|
||||||
if (text.includes(searchText) || searchText === '') {
|
if (text.includes(searchText) || searchText === '') {
|
||||||
item.style.display = 'block';
|
item.style.display = 'block';
|
||||||
console.log('Display set to block for:', text);
|
|
||||||
} else {
|
} else {
|
||||||
item.style.display = 'none';
|
item.style.display = 'none';
|
||||||
console.log('Display set to none for:', text);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -641,16 +532,6 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// 添加错误监听器以便调试
|
|
||||||
window.addEventListener('error', function(e) {
|
|
||||||
console.error('JavaScript Error:', e.error);
|
|
||||||
console.error('Error Message:', e.message);
|
|
||||||
console.error('Error Filename:', e.filename);
|
|
||||||
console.error('Error Line Number:', e.lineno);
|
|
||||||
console.error('Error Column Number:', e.colno);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Page loaded and scripts initialized');
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,853 +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: #f5f5f5;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-card {
|
|
||||||
background: white;
|
|
||||||
padding: 16px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #262626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-card {
|
|
||||||
background: white;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-cards {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon.primary { color: #1890ff; }
|
|
||||||
.stat-icon.success { color: #52c41a; }
|
|
||||||
.stat-icon.danger { color: #ff4d4f; }
|
|
||||||
.stat-icon.warning { color: #fa8c16; }
|
|
||||||
|
|
||||||
.stat-info {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-item {
|
|
||||||
padding: 16px 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-item.active {
|
|
||||||
color: #1890ff;
|
|
||||||
border-bottom-color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-item:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form {
|
|
||||||
margin: 20px 0;
|
|
||||||
padding: 20px;
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 16px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item label {
|
|
||||||
margin-right: 8px;
|
|
||||||
color: #666;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item input, .form-item select {
|
|
||||||
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 {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 12px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
background: #52c41a;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success:hover {
|
|
||||||
background: #73d13d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: #ff4d4f;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover {
|
|
||||||
background: #ff7875;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning {
|
|
||||||
background: #fa8c16;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning:hover {
|
|
||||||
background: #ffa940;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table th, table td {
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
padding: 12px 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-success {
|
|
||||||
background: #f6ffed;
|
|
||||||
color: #52c41a;
|
|
||||||
border: 1px solid #b7eb8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-warning {
|
|
||||||
background: #fff7e6;
|
|
||||||
color: #fa8c16;
|
|
||||||
border: 1px solid #ffd591;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-danger {
|
|
||||||
background: #fff2f0;
|
|
||||||
color: #ff4d4f;
|
|
||||||
border: 1px solid #ffb3b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-info {
|
|
||||||
background: #f4f4f5;
|
|
||||||
color: #666;
|
|
||||||
border: 1px solid #e4e4e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
|
||||||
.stat-cards {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.stat-cards {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 弹窗样式 */
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal.show {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background-color: white;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 500px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
padding: 20px 24px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #262626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body textarea {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 80px;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 12px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #1890ff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: 16px 24px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<!-- 页面标题 -->
|
|
||||||
<div class="header-card">
|
|
||||||
<h1 class="page-title">分销商管理</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 主内容 -->
|
|
||||||
<div class="main-card">
|
|
||||||
<!-- Tab选项卡 -->
|
|
||||||
<div class="tabs">
|
|
||||||
<div class="tab-item active" onclick="switchTab('apply')">申请审核</div>
|
|
||||||
<div class="tab-item" onclick="switchTab('distributor')">分销商列表</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 申请审核Tab -->
|
|
||||||
<div id="tab-apply" class="tab-content active">
|
|
||||||
<!-- 搜索表单 -->
|
|
||||||
<div class="search-form">
|
|
||||||
<div class="form-item">
|
|
||||||
<label>审核状态</label>
|
|
||||||
<select style="width: 150px">
|
|
||||||
<option value="">全部</option>
|
|
||||||
<option value="0">待审核</option>
|
|
||||||
<option value="-1">已拒绝</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>申请人</label>
|
|
||||||
<input type="text" placeholder="请输入申请人姓名" style="width: 200px">
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<button class="btn btn-primary">查询</button>
|
|
||||||
<button class="btn btn-default">重置</button>
|
|
||||||
<button class="btn btn-success">一键通过</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 申请列表表格 -->
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>申请人</th>
|
|
||||||
<th>手机号</th>
|
|
||||||
<th>申请时间</th>
|
|
||||||
<th>审核时间</th>
|
|
||||||
<th>审核状态</th>
|
|
||||||
<th>拒绝理由</th>
|
|
||||||
<th>操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>张三</td>
|
|
||||||
<td>13800138001</td>
|
|
||||||
<td>2024-01-15 10:30:00</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td><span class="tag tag-warning">待审核</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('张三')">通过</button>
|
|
||||||
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('张三')">拒绝</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>李四</td>
|
|
||||||
<td>13800138002</td>
|
|
||||||
<td>2024-01-16 14:20:00</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td><span class="tag tag-warning">待审核</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('李四')">通过</button>
|
|
||||||
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('李四')">拒绝</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>王五</td>
|
|
||||||
<td>13800138003</td>
|
|
||||||
<td>2024-01-17 09:15:00</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td><span class="tag tag-warning">待审核</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('王五')">通过</button>
|
|
||||||
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('王五')">拒绝</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>赵六</td>
|
|
||||||
<td>13800138004</td>
|
|
||||||
<td>2024-01-18 11:45:00</td>
|
|
||||||
<td>2024-01-18 15:30:00</td>
|
|
||||||
<td><span class="tag tag-danger">已拒绝</span></td>
|
|
||||||
<td>资料不完整</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;" disabled>详情</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>钱七</td>
|
|
||||||
<td>13800138005</td>
|
|
||||||
<td>2024-01-19 08:00:00</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td><span class="tag tag-warning">待审核</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('钱七')">通过</button>
|
|
||||||
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('钱七')">拒绝</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>孙八</td>
|
|
||||||
<td>13800138006</td>
|
|
||||||
<td>2024-01-20 13:25:00</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td><span class="tag tag-warning">待审核</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('孙八')">通过</button>
|
|
||||||
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('孙八')">拒绝</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="pagination">
|
|
||||||
共 6 条
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分销商列表Tab -->
|
|
||||||
<div id="tab-distributor" class="tab-content">
|
|
||||||
<!-- 统计卡片 -->
|
|
||||||
<div class="stat-cards">
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon primary">👥</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">总分销商数</div>
|
|
||||||
<div class="stat-value">8</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon success">✅</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">启用中</div>
|
|
||||||
<div class="stat-value">6</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon danger">❌</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">已禁用</div>
|
|
||||||
<div class="stat-value">2</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon warning">⭐</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">高级分销商</div>
|
|
||||||
<div class="stat-value">4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 搜索表单 -->
|
|
||||||
<div class="search-form">
|
|
||||||
<div class="form-item">
|
|
||||||
<label>姓名</label>
|
|
||||||
<input type="text" placeholder="请输入姓名" style="width: 150px">
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>手机号</label>
|
|
||||||
<input type="text" placeholder="请输入手机号" style="width: 150px">
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>状态</label>
|
|
||||||
<select style="width: 120px">
|
|
||||||
<option value="">全部</option>
|
|
||||||
<option value="1">启用</option>
|
|
||||||
<option value="0">禁用</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>等级</label>
|
|
||||||
<select style="width: 150px">
|
|
||||||
<option value="">全部</option>
|
|
||||||
<option value="1">普通分销商</option>
|
|
||||||
<option value="2">高级分销商</option>
|
|
||||||
<option value="3">精英分销商</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<button class="btn btn-primary">查询</button>
|
|
||||||
<button class="btn btn-default">重置</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分销商列表表格 -->
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>姓名</th>
|
|
||||||
<th>手机号</th>
|
|
||||||
<th>等级</th>
|
|
||||||
<th>进店量</th>
|
|
||||||
<th>成为分销商时间</th>
|
|
||||||
<th>状态</th>
|
|
||||||
<th>禁用原因</th>
|
|
||||||
<th>操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>张三</td>
|
|
||||||
<td>13800138001</td>
|
|
||||||
<td><span class="tag tag-info">普通分销商</span></td>
|
|
||||||
<td>120</td>
|
|
||||||
<td>2024-01-15 10:30:00</td>
|
|
||||||
<td><span class="tag tag-success">启用</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('张三')">禁用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>李四</td>
|
|
||||||
<td>13800138002</td>
|
|
||||||
<td><span class="tag tag-success">高级分销商</span></td>
|
|
||||||
<td>350</td>
|
|
||||||
<td>2024-01-16 14:20:00</td>
|
|
||||||
<td><span class="tag tag-success">启用</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('李四')">禁用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>王五</td>
|
|
||||||
<td>13800138003</td>
|
|
||||||
<td><span class="tag tag-warning">精英分销商</span></td>
|
|
||||||
<td>680</td>
|
|
||||||
<td>2024-01-17 09:15:00</td>
|
|
||||||
<td><span class="tag tag-success">启用</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('王五')">禁用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>赵六</td>
|
|
||||||
<td>13800138004</td>
|
|
||||||
<td><span class="tag tag-info">普通分销商</span></td>
|
|
||||||
<td>45</td>
|
|
||||||
<td>2024-01-18 11:45:00</td>
|
|
||||||
<td><span class="tag tag-danger">禁用</span></td>
|
|
||||||
<td>违规推广</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">启用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>孙八</td>
|
|
||||||
<td>13800138006</td>
|
|
||||||
<td><span class="tag tag-success">高级分销商</span></td>
|
|
||||||
<td>280</td>
|
|
||||||
<td>2024-01-20 13:25:00</td>
|
|
||||||
<td><span class="tag tag-success">启用</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('孙八')">禁用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>周九</td>
|
|
||||||
<td>13800138007</td>
|
|
||||||
<td><span class="tag tag-info">普通分销商</span></td>
|
|
||||||
<td>95</td>
|
|
||||||
<td>2024-01-21 16:00:00</td>
|
|
||||||
<td><span class="tag tag-success">启用</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('周九')">禁用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>吴十</td>
|
|
||||||
<td>13800138008</td>
|
|
||||||
<td><span class="tag tag-warning">精英分销商</span></td>
|
|
||||||
<td>520</td>
|
|
||||||
<td>2024-01-22 10:15:00</td>
|
|
||||||
<td><span class="tag tag-success">启用</span></td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('吴十')">禁用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>郑十一</td>
|
|
||||||
<td>13800138009</td>
|
|
||||||
<td><span class="tag tag-success">高级分销商</span></td>
|
|
||||||
<td>310</td>
|
|
||||||
<td>2024-01-23 14:30:00</td>
|
|
||||||
<td><span class="tag tag-danger">禁用</span></td>
|
|
||||||
<td>不符合资质要求</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
|
||||||
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">启用</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="pagination">
|
|
||||||
共 8 条
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 通过确认弹窗 -->
|
|
||||||
<div id="approveModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title">确认通过</h3>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>确定要通过 <strong id="approveName"></strong> 的申请吗?</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-default" onclick="closeModal('approveModal')">取消</button>
|
|
||||||
<button class="btn btn-success" onclick="confirmApprove()">确认通过</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 拒绝确认弹窗 -->
|
|
||||||
<div id="rejectModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title">确认拒绝</h3>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>确定要拒绝 <strong id="rejectName"></strong> 的申请吗?</p>
|
|
||||||
<textarea id="rejectReason" placeholder="请输入拒绝理由(必填)"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-default" onclick="closeModal('rejectModal')">取消</button>
|
|
||||||
<button class="btn btn-danger" onclick="confirmReject()">确认拒绝</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 禁用确认弹窗 -->
|
|
||||||
<div id="disableModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title">确认禁用</h3>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>确定要禁用分销商 <strong id="disableName"></strong> 吗?</p>
|
|
||||||
<textarea id="disableReason" placeholder="请输入禁用原因(必填)"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-default" onclick="closeModal('disableModal')">取消</button>
|
|
||||||
<button class="btn btn-warning" onclick="confirmDisable()">确认禁用</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let currentApplicant = '';
|
|
||||||
|
|
||||||
function switchTab(tabName) {
|
|
||||||
// 移除所有active类
|
|
||||||
document.querySelectorAll('.tab-item').forEach(item => {
|
|
||||||
item.classList.remove('active');
|
|
||||||
});
|
|
||||||
document.querySelectorAll('.tab-content').forEach(content => {
|
|
||||||
content.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加active类到当前tab
|
|
||||||
event.target.classList.add('active');
|
|
||||||
document.getElementById('tab-' + tabName).classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开通过弹窗
|
|
||||||
function handleApprove(name) {
|
|
||||||
currentApplicant = name;
|
|
||||||
document.getElementById('approveName').textContent = name;
|
|
||||||
document.getElementById('approveModal').classList.add('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开拒绝弹窗
|
|
||||||
function handleReject(name) {
|
|
||||||
currentApplicant = name;
|
|
||||||
document.getElementById('rejectName').textContent = name;
|
|
||||||
document.getElementById('rejectReason').value = '';
|
|
||||||
document.getElementById('rejectModal').classList.add('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
function closeModal(modalId) {
|
|
||||||
document.getElementById(modalId).classList.remove('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认通过
|
|
||||||
function confirmApprove() {
|
|
||||||
alert(`已通过 ${currentApplicant} 的申请`);
|
|
||||||
closeModal('approveModal');
|
|
||||||
// 这里可以添加实际的审核通过逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认拒绝
|
|
||||||
function confirmReject() {
|
|
||||||
const reason = document.getElementById('rejectReason').value.trim();
|
|
||||||
if (!reason) {
|
|
||||||
alert('请输入拒绝理由');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
alert(`已拒绝 ${currentApplicant} 的申请，理由：${reason}`);
|
|
||||||
closeModal('rejectModal');
|
|
||||||
// 这里可以添加实际的审核拒绝逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开禁用弹窗
|
|
||||||
function handleDisable(name) {
|
|
||||||
currentApplicant = name;
|
|
||||||
document.getElementById('disableName').textContent = name;
|
|
||||||
document.getElementById('disableReason').value = '';
|
|
||||||
document.getElementById('disableModal').classList.add('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认禁用
|
|
||||||
function confirmDisable() {
|
|
||||||
const reason = document.getElementById('disableReason').value.trim();
|
|
||||||
if (!reason) {
|
|
||||||
alert('请输入禁用原因');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
alert(`已禁用分销商 ${currentApplicant}，原因：${reason}`);
|
|
||||||
closeModal('disableModal');
|
|
||||||
// 这里可以添加实际的禁用逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击弹窗外部关闭
|
|
||||||
window.onclick = function(event) {
|
|
||||||
if (event.target.classList.contains('modal')) {
|
|
||||||
event.target.classList.remove('show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,654 +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: #f5f5f5;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-card {
|
|
||||||
background: white;
|
|
||||||
padding: 16px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #262626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-cards {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon.primary { color: #1890ff; }
|
|
||||||
.stat-icon.success { color: #52c41a; }
|
|
||||||
.stat-icon.warning { color: #fa8c16; }
|
|
||||||
.stat-icon.info { color: #666; }
|
|
||||||
|
|
||||||
.stat-info {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-card {
|
|
||||||
background: white;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-item {
|
|
||||||
padding: 16px 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-item.active {
|
|
||||||
color: #1890ff;
|
|
||||||
border-bottom-color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-item:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form {
|
|
||||||
margin: 20px 0;
|
|
||||||
padding: 20px;
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 16px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item label {
|
|
||||||
margin-right: 8px;
|
|
||||||
color: #666;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item input, .form-item select {
|
|
||||||
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 {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 12px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
background: #52c41a;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success:hover {
|
|
||||||
background: #73d13d;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table th, table td {
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
padding: 12px 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-success {
|
|
||||||
background: #f6ffed;
|
|
||||||
color: #52c41a;
|
|
||||||
border: 1px solid #b7eb8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-warning {
|
|
||||||
background: #fff7e6;
|
|
||||||
color: #fa8c16;
|
|
||||||
border: 1px solid #ffd591;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-info {
|
|
||||||
background: #f4f4f5;
|
|
||||||
color: #666;
|
|
||||||
border: 1px solid #e4e4e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.money-text {
|
|
||||||
color: #fa8c16;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commission-text {
|
|
||||||
color: #52c41a;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
|
||||||
.stat-cards {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.stat-cards {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<!-- 页面标题 -->
|
|
||||||
<div class="header-card">
|
|
||||||
<h1 class="page-title">分销订单与佣金管理</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 统计卡片 -->
|
|
||||||
<div class="stat-cards">
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon primary">📊</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">分销订单总数</div>
|
|
||||||
<div class="stat-value">1250</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon success">💰</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">订单总金额(元)</div>
|
|
||||||
<div class="stat-value">125680.50</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon warning">💳</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">佣金总额(元)</div>
|
|
||||||
<div class="stat-value">12568.05</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-content">
|
|
||||||
<div class="stat-icon info">📈</div>
|
|
||||||
<div class="stat-info">
|
|
||||||
<div class="stat-label">佣金比例</div>
|
|
||||||
<div class="stat-value">10%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 主内容 -->
|
|
||||||
<div class="main-card">
|
|
||||||
<!-- Tab选项卡 -->
|
|
||||||
<div class="tabs">
|
|
||||||
<div class="tab-item active" onclick="switchTab('order')">订单明细</div>
|
|
||||||
<div class="tab-item" onclick="switchTab('commission')">佣金统计</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 订单明细Tab -->
|
|
||||||
<div id="tab-order" class="tab-content active">
|
|
||||||
<!-- 搜索表单 -->
|
|
||||||
<div class="search-form">
|
|
||||||
<div class="form-item">
|
|
||||||
<label>订单编号</label>
|
|
||||||
<input type="text" placeholder="请输入订单编号" style="width: 200px">
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>分销商</label>
|
|
||||||
<input type="text" placeholder="请输入分销商姓名" style="width: 150px">
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>订单状态</label>
|
|
||||||
<select style="width: 120px">
|
|
||||||
<option value="">全部</option>
|
|
||||||
<option value="0">未完成</option>
|
|
||||||
<option value="1">已完成</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<button class="btn btn-primary">查询</button>
|
|
||||||
<button class="btn btn-default">重置</button>
|
|
||||||
<button class="btn btn-success">导出订单</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 订单列表表格 -->
|
|
||||||
<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>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240101001</td>
|
|
||||||
<td>UNIT20240101001</td>
|
|
||||||
<td>张三</td>
|
|
||||||
<td><span class="money-text">299.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">29.90</span></td>
|
|
||||||
<td><span class="commission-text">20.93</span></td>
|
|
||||||
<td><span class="commission-text">8.97</span></td>
|
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
|
||||||
<td>2024-01-01 10:30:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240102002</td>
|
|
||||||
<td>UNIT20240102002</td>
|
|
||||||
<td>李四</td>
|
|
||||||
<td><span class="money-text">499.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">49.90</span></td>
|
|
||||||
<td><span class="commission-text">49.90</span></td>
|
|
||||||
<td><span class="commission-text">0.00</span></td>
|
|
||||||
<td><span class="tag tag-warning">未完成</span></td>
|
|
||||||
<td>2024-01-02 14:20:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240103003</td>
|
|
||||||
<td>UNIT20240103003</td>
|
|
||||||
<td>王五</td>
|
|
||||||
<td><span class="money-text">688.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">68.80</span></td>
|
|
||||||
<td><span class="commission-text">48.16</span></td>
|
|
||||||
<td><span class="commission-text">20.64</span></td>
|
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
|
||||||
<td>2024-01-03 09:15:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240104004</td>
|
|
||||||
<td>UNIT20240104004</td>
|
|
||||||
<td>张三</td>
|
|
||||||
<td><span class="money-text">358.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">35.80</span></td>
|
|
||||||
<td><span class="commission-text">25.06</span></td>
|
|
||||||
<td><span class="commission-text">10.74</span></td>
|
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
|
||||||
<td>2024-01-04 16:45:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240105005</td>
|
|
||||||
<td>UNIT20240105005</td>
|
|
||||||
<td>王五</td>
|
|
||||||
<td><span class="money-text">799.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">79.90</span></td>
|
|
||||||
<td><span class="commission-text">55.93</span></td>
|
|
||||||
<td><span class="commission-text">23.97</span></td>
|
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
|
||||||
<td>2024-01-05 11:20:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240106006</td>
|
|
||||||
<td>UNIT20240106006</td>
|
|
||||||
<td>李四</td>
|
|
||||||
<td><span class="money-text">428.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">42.80</span></td>
|
|
||||||
<td><span class="commission-text">42.80</span></td>
|
|
||||||
<td><span class="commission-text">0.00</span></td>
|
|
||||||
<td><span class="tag tag-warning">未完成</span></td>
|
|
||||||
<td>2024-01-06 13:50:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240107007</td>
|
|
||||||
<td>UNIT20240107007</td>
|
|
||||||
<td>赵六</td>
|
|
||||||
<td><span class="money-text">568.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">56.80</span></td>
|
|
||||||
<td><span class="commission-text">56.80</span></td>
|
|
||||||
<td><span class="commission-text">0.00</span></td>
|
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
|
||||||
<td>2024-01-07 15:30:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ORD20240108008</td>
|
|
||||||
<td>UNIT20240108008</td>
|
|
||||||
<td>张三</td>
|
|
||||||
<td><span class="money-text">268.00</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><span class="commission-text">26.80</span></td>
|
|
||||||
<td><span class="commission-text">18.76</span></td>
|
|
||||||
<td><span class="commission-text">8.04</span></td>
|
|
||||||
<td><span class="tag tag-success">已完成</span></td>
|
|
||||||
<td>2024-01-08 08:15:00</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="pagination">
|
|
||||||
共 8 条
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 佣金统计Tab -->
|
|
||||||
<div id="tab-commission" class="tab-content">
|
|
||||||
<!-- 搜索表单 -->
|
|
||||||
<div class="search-form">
|
|
||||||
<div class="form-item">
|
|
||||||
<label>分销商</label>
|
|
||||||
<input type="text" placeholder="请输入分销商姓名" style="width: 200px">
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>等级</label>
|
|
||||||
<select style="width: 150px">
|
|
||||||
<option value="">全部</option>
|
|
||||||
<option value="1">普通分销商</option>
|
|
||||||
<option value="2">高级分销商</option>
|
|
||||||
<option value="3">精英分销商</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<button class="btn btn-primary">查询</button>
|
|
||||||
<button class="btn btn-default">重置</button>
|
|
||||||
<button class="btn btn-success">导出佣金</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 佣金统计列表 -->
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<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>张三</td>
|
|
||||||
<td>13800138001</td>
|
|
||||||
<td><span class="tag tag-success">高级分销商</span></td>
|
|
||||||
<td>25</td>
|
|
||||||
<td><span class="money-text">7475.00</span></td>
|
|
||||||
<td><span class="commission-text">747.50</span></td>
|
|
||||||
<td><span class="commission-text">523.25</span></td>
|
|
||||||
<td><span class="commission-text">224.25</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>李四</td>
|
|
||||||
<td>13800138002</td>
|
|
||||||
<td><span class="tag tag-info">普通分销商</span></td>
|
|
||||||
<td>15</td>
|
|
||||||
<td><span class="money-text">4485.00</span></td>
|
|
||||||
<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>10%</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>王五</td>
|
|
||||||
<td>13800138003</td>
|
|
||||||
<td><span class="tag tag-warning">精英分销商</span></td>
|
|
||||||
<td>38</td>
|
|
||||||
<td><span class="money-text">11378.00</span></td>
|
|
||||||
<td><span class="commission-text">1137.80</span></td>
|
|
||||||
<td><span class="commission-text">796.46</span></td>
|
|
||||||
<td><span class="commission-text">341.34</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>赵六</td>
|
|
||||||
<td>13800138004</td>
|
|
||||||
<td><span class="tag tag-info">普通分销商</span></td>
|
|
||||||
<td>12</td>
|
|
||||||
<td><span class="money-text">3592.00</span></td>
|
|
||||||
<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>10%</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>孙八</td>
|
|
||||||
<td>13800138006</td>
|
|
||||||
<td><span class="tag tag-success">高级分销商</span></td>
|
|
||||||
<td>28</td>
|
|
||||||
<td><span class="money-text">8384.00</span></td>
|
|
||||||
<td><span class="commission-text">838.40</span></td>
|
|
||||||
<td><span class="commission-text">586.88</span></td>
|
|
||||||
<td><span class="commission-text">251.52</span></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr style="font-weight: bold; background: #F5F7FA;">
|
|
||||||
<td>合计</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>118</td>
|
|
||||||
<td><span class="money-text">35314.00</span></td>
|
|
||||||
<td><span class="commission-text">3531.40</span></td>
|
|
||||||
<td><span class="commission-text">2714.29</span></td>
|
|
||||||
<td><span class="commission-text">817.11</span></td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="pagination">
|
|
||||||
共 5 条
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function switchTab(tabName) {
|
|
||||||
// 移除所有active类
|
|
||||||
document.querySelectorAll('.tab-item').forEach(item => {
|
|
||||||
item.classList.remove('active');
|
|
||||||
});
|
|
||||||
document.querySelectorAll('.tab-content').forEach(content => {
|
|
||||||
content.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加active类到当前tab
|
|
||||||
event.target.classList.add('active');
|
|
||||||
document.getElementById('tab-' + tabName).classList.add('active');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue