2025-10-02 15:40:03 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-10-02 17:02:20 +00:00
|
|
|
<title>分销商管理</title>
|
2025-10-02 15:40:03 +00:00
|
|
|
<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;
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #f5f5f5;
|
2025-10-02 15:40:03 +00:00
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
2025-10-02 17:02:20 +00:00
|
|
|
max-width: 1600px;
|
2025-10-02 15:40:03 +00:00
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-card {
|
|
|
|
|
background: white;
|
2025-10-02 17:02:20 +00:00
|
|
|
padding: 16px 24px;
|
2025-10-02 15:40:03 +00:00
|
|
|
border-radius: 8px;
|
2025-10-02 17:02:20 +00:00
|
|
|
margin-bottom: 16px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-title {
|
2025-10-02 17:02:20 +00:00
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #262626;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-desc {
|
|
|
|
|
font-size: 14px;
|
2025-10-02 17:02:20 +00:00
|
|
|
color: #666;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-card {
|
|
|
|
|
background: white;
|
2025-10-02 17:02:20 +00:00
|
|
|
padding: 24px;
|
2025-10-02 15:40:03 +00:00
|
|
|
border-radius: 8px;
|
2025-10-02 17:02:20 +00:00
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-cards {
|
|
|
|
|
display: grid;
|
2025-10-02 17:02:20 +00:00
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
2025-10-02 15:40:03 +00:00
|
|
|
gap: 20px;
|
2025-10-02 17:02:20 +00:00
|
|
|
margin-bottom: 16px;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-card {
|
2025-10-02 17:02:20 +00:00
|
|
|
text-align: center;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border: 1px solid #f0f0f0;
|
2025-10-02 15:40:03 +00:00
|
|
|
border-radius: 8px;
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #fafafa;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-content {
|
|
|
|
|
display: flex;
|
2025-10-02 17:02:20 +00:00
|
|
|
flex-direction: column;
|
2025-10-02 15:40:03 +00:00
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-icon {
|
|
|
|
|
font-size: 48px;
|
2025-10-02 17:02:20 +00:00
|
|
|
margin-bottom: 12px;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
.stat-icon.primary { color: #1890ff; }
|
|
|
|
|
.stat-icon.success { color: #52c41a; }
|
|
|
|
|
.stat-icon.danger { color: #ff4d4f; }
|
|
|
|
|
.stat-icon.warning { color: #fa8c16; }
|
2025-10-02 15:40:03 +00:00
|
|
|
|
|
|
|
|
.stat-info {
|
2025-10-02 17:02:20 +00:00
|
|
|
width: 100%;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-label {
|
|
|
|
|
font-size: 14px;
|
2025-10-02 17:02:20 +00:00
|
|
|
color: #666;
|
2025-10-02 15:40:03 +00:00
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
2025-10-02 17:02:20 +00:00
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #1890ff;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
.tabs {
|
2025-10-02 17:02:20 +00:00
|
|
|
display: flex;
|
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
2025-10-02 16:22:44 +00:00
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-item {
|
2025-10-02 17:02:20 +00:00
|
|
|
padding: 16px 20px;
|
2025-10-02 16:22:44 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
border-bottom: 2px solid transparent;
|
2025-10-02 17:02:20 +00:00
|
|
|
margin-bottom: -1px;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transition: all 0.3s;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-item.active {
|
2025-10-02 17:02:20 +00:00
|
|
|
color: #1890ff;
|
|
|
|
|
border-bottom-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-item:hover {
|
|
|
|
|
color: #1890ff;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-content {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-content.active {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 15:40:03 +00:00
|
|
|
.search-form {
|
|
|
|
|
margin: 20px 0;
|
2025-10-02 16:22:44 +00:00
|
|
|
padding: 20px;
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #fafafa;
|
|
|
|
|
border-radius: 6px;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item {
|
|
|
|
|
display: inline-block;
|
2025-10-02 17:02:20 +00:00
|
|
|
margin-right: 16px;
|
2025-10-02 16:22:44 +00:00
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item label {
|
|
|
|
|
margin-right: 8px;
|
2025-10-02 17:02:20 +00:00
|
|
|
color: #666;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 14px;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item input, .form-item select {
|
2025-10-02 17:02:20 +00:00
|
|
|
height: 40px;
|
|
|
|
|
padding: 0 12px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 6px;
|
2025-10-02 16:22:44 +00:00
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
.btn {
|
2025-10-02 17:02:20 +00:00
|
|
|
height: 40px;
|
|
|
|
|
padding: 0 16px;
|
2025-10-02 16:22:44 +00:00
|
|
|
border: none;
|
2025-10-02 17:02:20 +00:00
|
|
|
border-radius: 6px;
|
2025-10-02 16:22:44 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
2025-10-02 17:02:20 +00:00
|
|
|
margin-right: 12px;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
transition: all 0.3s;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #1890ff;
|
2025-10-02 16:22:44 +00:00
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
.btn-primary:hover {
|
|
|
|
|
background: #40a9ff;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
.btn-default {
|
|
|
|
|
background: white;
|
2025-10-02 17:02:20 +00:00
|
|
|
color: #666;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default:hover {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
color: #1890ff;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-success {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #52c41a;
|
2025-10-02 16:22:44 +00:00
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
.btn-success:hover {
|
|
|
|
|
background: #73d13d;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
.btn-danger {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #ff4d4f;
|
2025-10-02 16:22:44 +00:00
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
.btn-danger:hover {
|
|
|
|
|
background: #ff7875;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
.btn-warning {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #fa8c16;
|
2025-10-02 16:22:44 +00:00
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
.btn-warning:hover {
|
|
|
|
|
background: #ffa940;
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
margin-top: 20px;
|
2025-10-02 17:02:20 +00:00
|
|
|
font-size: 14px;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table th, table td {
|
2025-10-02 17:02:20 +00:00
|
|
|
border: 1px solid #f0f0f0;
|
|
|
|
|
padding: 12px 16px;
|
2025-10-02 16:22:44 +00:00
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table th {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #fafafa;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table td {
|
|
|
|
|
border-bottom: 1px solid #f9f9f9;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
2025-10-02 17:02:20 +00:00
|
|
|
table tbody tr:hover {
|
|
|
|
|
background: #f8f9fa;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
display: inline-block;
|
2025-10-02 17:02:20 +00:00
|
|
|
padding: 4px 8px;
|
2025-10-02 16:22:44 +00:00
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 12px;
|
2025-10-02 17:02:20 +00:00
|
|
|
font-weight: 500;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag-success {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #f6ffed;
|
|
|
|
|
color: #52c41a;
|
|
|
|
|
border: 1px solid #b7eb8f;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag-warning {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #fff7e6;
|
|
|
|
|
color: #fa8c16;
|
|
|
|
|
border: 1px solid #ffd591;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag-danger {
|
2025-10-02 17:02:20 +00:00
|
|
|
background: #fff2f0;
|
|
|
|
|
color: #ff4d4f;
|
|
|
|
|
border: 1px solid #ffb3b3;
|
2025-10-02 16:22:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag-info {
|
|
|
|
|
background: #f4f4f5;
|
2025-10-02 17:02:20 +00:00
|
|
|
color: #666;
|
2025-10-02 16:22:44 +00:00
|
|
|
border: 1px solid #e4e4e7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination {
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin-top: 20px;
|
2025-10-02 17:02:20 +00:00
|
|
|
padding-top: 20px;
|
|
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 14px;
|
2025-10-02 15:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@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;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-10-02 17:23:08 +00:00
|
|
|
|
|
|
|
|
/* 弹窗样式 */
|
|
|
|
|
.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;
|
|
|
|
|
}
|
2025-10-02 15:40:03 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-10-02 16:22:44 +00:00
|
|
|
<div class="container">
|
2025-10-02 15:40:03 +00:00
|
|
|
<!-- 页面标题 -->
|
|
|
|
|
<div class="header-card">
|
2025-10-02 17:02:20 +00:00
|
|
|
<h1 class="page-title">分销商管理</h1>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 主内容 -->
|
|
|
|
|
<div class="main-card">
|
2025-10-02 16:22:44 +00:00
|
|
|
<!-- 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">
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
2025-10-02 16:22:44 +00:00
|
|
|
<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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<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>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<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>
|
2025-10-02 16:22:44 +00:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>王五</td>
|
|
|
|
|
<td>13800138003</td>
|
|
|
|
|
<td>2024-01-17 09:15:00</td>
|
2025-10-02 17:23:08 +00:00
|
|
|
<td>-</td>
|
|
|
|
|
<td><span class="tag tag-warning">待审核</span></td>
|
2025-10-02 16:22:44 +00:00
|
|
|
<td>-</td>
|
|
|
|
|
<td>
|
2025-10-02 17:23:08 +00:00
|
|
|
<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>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;" disabled>详情</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<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>
|
2025-10-02 16:22:44 +00:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>孙八</td>
|
|
|
|
|
<td>13800138006</td>
|
|
|
|
|
<td>2024-01-20 13:25:00</td>
|
2025-10-02 17:23:08 +00:00
|
|
|
<td>-</td>
|
|
|
|
|
<td><span class="tag tag-warning">待审核</span></td>
|
2025-10-02 16:22:44 +00:00
|
|
|
<td>-</td>
|
|
|
|
|
<td>
|
2025-10-02 17:23:08 +00:00
|
|
|
<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>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-02 16:22:44 +00:00
|
|
|
</div>
|
2025-10-02 15:40:03 +00:00
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
<!-- 搜索表单 -->
|
|
|
|
|
<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>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
2025-10-02 16:22:44 +00:00
|
|
|
<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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('张三')">禁用</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('李四')">禁用</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('王五')">禁用</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('孙八')">禁用</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('周九')">禁用</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 17:23:08 +00:00
|
|
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('吴十')">禁用</button>
|
2025-10-02 16:22:44 +00:00
|
|
|
</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>
|
2025-10-02 15:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-10-02 17:23:08 +00:00
|
|
|
<!-- 通过确认弹窗 -->
|
|
|
|
|
<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>
|
|
|
|
|
|
2025-10-02 15:40:03 +00:00
|
|
|
<script>
|
2025-10-02 17:23:08 +00:00
|
|
|
let currentApplicant = '';
|
|
|
|
|
|
2025-10-02 16:22:44 +00:00
|
|
|
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');
|
|
|
|
|
}
|
2025-10-02 17:23:08 +00:00
|
|
|
|
|
|
|
|
// 打开通过弹窗
|
|
|
|
|
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');
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-10-02 15:40:03 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
