655 lines
24 KiB
HTML
655 lines
24 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: #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>
|