612 lines
23 KiB
HTML
612 lines
23 KiB
HTML
<!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: #f0f2f5;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header-card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.page-desc {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
}
|
|
|
|
.main-card {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 48px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.stat-icon.primary { color: #409EFF; }
|
|
.stat-icon.success { color: #67C23A; }
|
|
.stat-icon.danger { color: #F56C6C; }
|
|
.stat-icon.warning { color: #E6A23C; }
|
|
|
|
.stat-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
|
|
.tabs {
|
|
border-bottom: 2px solid #E4E7ED;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tab-item {
|
|
display: inline-block;
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
color: #303133;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #409EFF;
|
|
border-bottom-color: #409EFF;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.search-form {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
background: #f5f7fa;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-item {
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.form-item label {
|
|
margin-right: 8px;
|
|
color: #606266;
|
|
}
|
|
|
|
.form-item input, .form-item select {
|
|
padding: 8px 12px;
|
|
border: 1px solid #DCDFE6;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 9px 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #409EFF;
|
|
color: white;
|
|
}
|
|
|
|
.btn-default {
|
|
background: white;
|
|
color: #606266;
|
|
border: 1px solid #DCDFE6;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #67C23A;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #F56C6C;
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning {
|
|
background: #E6A23C;
|
|
color: white;
|
|
}
|
|
|
|
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 tr:hover {
|
|
background: #F5F7FA;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tag-success {
|
|
background: #f0f9ff;
|
|
color: #67C23A;
|
|
border: 1px solid #c6f6d5;
|
|
}
|
|
|
|
.tag-warning {
|
|
background: #fffbeb;
|
|
color: #E6A23C;
|
|
border: 1px solid #fef3c7;
|
|
}
|
|
|
|
.tag-danger {
|
|
background: #fef2f2;
|
|
color: #F56C6C;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
.tag-info {
|
|
background: #f4f4f5;
|
|
color: #909399;
|
|
border: 1px solid #e4e4e7;
|
|
}
|
|
|
|
.pagination {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
color: #606266;
|
|
}
|
|
|
|
@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>
|
|
<p class="page-desc">管理分销商申请审核、查看分销商列表及相关统计数据</p>
|
|
</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>
|
|
<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;">通过</button>
|
|
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</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;">通过</button>
|
|
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>王五</td>
|
|
<td>13800138003</td>
|
|
<td>2024-01-17 09:15:00</td>
|
|
<td>2024-01-17 16: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>
|
|
</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;">详情</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;">通过</button>
|
|
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>孙八</td>
|
|
<td>13800138006</td>
|
|
<td>2024-01-20 13:25:00</td>
|
|
<td>2024-01-20 17:10: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>
|
|
</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;">禁用</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;">禁用</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;">禁用</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;">禁用</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;">禁用</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;">禁用</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>
|
|
|
|
<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>
|