编辑页面

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:'Microsoft YaHei',sans-serif;background:#f0f2f5;min-height:100vh}
.container{display:flex;min-height:100vh}
/* 侧边栏 */
.sidebar{width:220px;background:#001529;position:fixed;height:100vh;overflow-y:auto}
.logo{height:60px;display:flex;align-items:center;justify-content:center;background:#002140;color:#fff;font-size:18px;font-weight:bold;border-bottom:1px solid #003a70}
.nav-item{padding:14px 24px;color:#a6d7ff;cursor:pointer;transition:.3s;border-left:3px solid transparent}
.nav-item:hover{background:#001529;color:#fff}
.nav-item.active{background:#1899ff;color:#fff;border-left-color:#1899ff}
.nav-group{margin-top:8px}
.nav-title{padding:10px 24px;color:#fff;font-size:14px;font-weight:bold}
.sub-nav{padding-left:24px}
.sub-item{padding:12px 20px;color:#a6d7ff;cursor:pointer;transition:.3s;font-size:14px;border-left:3px solid transparent}
.sub-item:hover{color:#fff}
.sub-item.active{color:#fff;background:rgba(24,144,255,.15);border-left-color:#1899ff}
/* 主内容区 */
.main{margin-left:220px;flex:1}
.header{height:60px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}
.header-left{display:flex;align-items:center;gap:16px}
.breadcrumb{color:#666;font-size:14px}
.header-right{display:flex;align-items:center;gap:20px}
.header-user{display:flex;align-items:center;gap:8px;cursor:pointer}
.header-user .avatar{width:36px;height:36px;background:#1899ff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
/* 内容区 */
.content{padding:24px}
.page-title{font-size:20px;font-weight:bold;color:#333;margin-bottom:20px}
/* 统计卡片 */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.stat-card h3{color:#666;font-size:14px;margin-bottom:8px;font-weight:normal}
.stat-card .value{font-size:28px;font-weight:bold;color:#333}
.stat-card .trend{font-size:12px;margin-top:8px}
.stat-card .trend.up{color:#52c41a}
.stat-card .trend.down{color:#ff4d4f}
/* 表格卡片 */
.card{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-title{font-size:16px;font-weight:bold;color:#333}
.btn{padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;border:none;transition:.3s}
.btn-primary{background:#1899ff;color:#fff}
.btn-primary:hover{background:#40a9ff}
.btn-default{background:#fff;border:1px solid #d9d9d9;color:#333}
.btn-default:hover{border-color:#1899ff;color:#1899ff}
/* 表格 */
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid #f0f0f0}
th{background:#fafafa;font-weight:600;color:#333;font-size:14px}
tr:hover{background:#f5f5f5}
.tag{padding:2px 8px;border-radius:4px;font-size:12px}
.tag-success{background:#e6f7ff;color:#1899ff}
.tag-warning{background:#fff7e6;color:#fa8c16}
.tag-danger{background:#fff1f0;color:#ff4d4f}
.tag-default{background:#f5f5f5;color:#666}
/* 操作按钮 */
.action-btn{color:#1899ff;cursor:pointer;margin-right:12px}
.action-btn:hover{text-decoration:underline}
/* 分页 */
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.page-info{color:#666;font-size:14px}
/* 搜索栏 */
.search-bar{display:flex;gap:12px;margin-bottom:16px}
.search-input{padding:8px 12px;border:1px solid #d9d9d9;border-radius:4px;width:240px}
.search-input:focus{outline:none;border-color:#1899ff}
/* 模态框 */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:8px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto}
.modal-header{padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}
.modal-title{font-size:16px;font-weight:bold}
.modal-close{font-size:24px;cursor:pointer;color:#999}
.modal-close:hover{color:#333}
.modal-body{padding:20px}
.modal-footer{padding:16px 20px;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;gap:12px}
/* 表单 */
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;font-size:14px;color:#333}
.form-input{width:100%;padding:8px 12px;border:1px solid #d9d9d9;border-radius:4px}
.form-input:focus{outline:none;border-color:#1899ff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* 空状态 */
.empty-state{padding:60px 0;text-align:center;color:#999}
.empty-state svg{width:80px;height:80px;margin-bottom:16px;opacity:.5}
/* 页面隐藏 */
.page{display:none}
.page.active{display:block}
/* 切换动画 */
.page{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
</style>
</head>
<body>
<div class="container">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="logo">短剧分销管理后台</div>
<nav id="sidebarNav">
<div class="nav-group">
<div class="nav-item" onclick="showPage('dashboard')">工作台</div>
</div>
<div class="nav-group">
<div class="nav-title">用户管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('user-list')">用户列表</div>
<div class="sub-item" onclick="showPage('user-level')">用户分级管理</div>
<div class="sub-item" onclick="showPage('user-behavior')">用户行为数据</div>
<div class="sub-item" onclick="showPage('user-ban')">用户封禁/解封</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">短剧管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('drama-audit')">短剧审核</div>
<div class="sub-item" onclick="showPage('drama-operate')">短剧运营</div>
<div class="sub-item" onclick="showPage('drama-copyright')">版权管理</div>
<div class="sub-item" onclick="showPage('drama-stats')">播放数据统计</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">商城管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('goods-audit')">商品审核</div>
<div class="sub-item" onclick="showPage('goods-category')">商品分类管理</div>
<div class="sub-item" onclick="showPage('order-manage')">平台订单管理</div>
<div class="sub-item" onclick="showPage('logistics')">物流管理</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">商家入驻管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('merchant-audit')">入驻审核</div>
<div class="sub-item" onclick="showPage('merchant-list')">商家列表管理</div>
<div class="sub-item" onclick="showPage('merchant-settle')">商家结算管理</div>
<div class="sub-item" onclick="showPage('merchant-violate')">商家违规处理</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">分销系统管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('distribution-rule')">分销规则设置</div>
<div class="sub-item" onclick="showPage('distributor')">分销商管理</div>
<div class="sub-item" onclick="showPage('commission')">佣金管理</div>
<div class="sub-item" onclick="showPage('promo-stats')">推广数据统计</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">短视频内容管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('video-audit')">短视频审核</div>
<div class="sub-item" onclick="showPage('material')">素材库管理</div>
<div class="sub-item" onclick="showPage('content-stats')">内容数据</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">财务管理</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('revenue')">平台收益统计</div>
<div class="sub-item" onclick="showPage('withdraw')">提现管理</div>
<div class="sub-item" onclick="showPage('bill')">账单明细</div>
<div class="sub-item" onclick="showPage('invoice')">发票管理</div>
</div>
</div>
<div class="nav-group">
<div class="nav-title">系统设置</div>
<div class="sub-nav">
<div class="sub-item" onclick="showPage('basic-settings')">基础设置</div>
<div class="sub-item" onclick="showPage('payment-config')">支付配置</div>
<div class="sub-item" onclick="showPage('permission')">权限管理</div>
<div class="sub-item" onclick="showPage('backup')">数据备份</div>
<div class="sub-item" onclick="showPage('ad-config')">广告管理</div>
</div>
</div>
</nav>
</aside>

<!-- 主内容区 -->
<main class="main">
<header class="header">
<div class="header-left">
<span class="breadcrumb" id="currentPath">工作台</span>
</div>
<div class="header-right">
<div class="header-user">
<span>管理员</span>
<div class="avatar">A</div>
</div>
</div>
</header>

<div class="content">
<!-- 工作台 -->
<div class="page active" id="page-dashboard">
<div class="page-title">工作台</div>
<div class="stats-row">
<div class="stat-card">
<h3>今日新增用户</h3>
<div class="value">1,234</div>
<div class="trend up">较昨日 +12.5%</div>
</div>
<div class="stat-card">
<h3>待审核短剧</h3>
<div class="value">56</div>
<div class="trend">3条待处理</div>
</div>
<div class="stat-card">
<h3>今日订单</h3>
<div class="value">3,892</div>
<div class="trend up">较昨日 +8.3%</div>
</div>
<div class="stat-card">
<h3>今日收益</h3>
<div class="value">¥128,560</div>
<div class="trend up">较昨日 +15.2%</div>
</div>
</div>
<div class="card">
<div class="card-header">
<span class="card-title">待办事项</span>
</div>
<table>
<thead><tr><th>事项</th><th>数量</th><th>操作</th></tr></thead>
<tbody>
<tr><td>待审核短剧</td><td><span class="tag tag-warning">56</span></td><td><span class="action-btn" onclick="showPage('drama-audit')">立即处理</span></td></tr>
<tr><td>待审核商家入驻</td><td><span class="tag tag-warning">12</span></td><td><span class="action-btn" onclick="showPage('merchant-audit')">立即处理</span></td></tr>
<tr><td>待审核商品</td><td><span class="tag tag-warning">89</span></td><td><span class="action-btn" onclick="showPage('goods-audit')">立即处理</span></td></tr>
<tr><td>待处理提现申请</td><td><span class="tag tag-warning">23</span></td><td><span class="action-btn" onclick="showPage('withdraw')">立即处理</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 用户列表 -->
<div class="page" id="page-user-list">
<div class="page-title">用户列表</div>
<div class="card">
<div class="search-bar">
<input type="text" class="search-input" placeholder="搜索用户ID/昵称/手机号">
<select class="search-input"><option>全部用户类型</option><option>普通用户</option><option>会员用户</option><option>分销商用户</option></select>
<button class="btn btn-primary">搜索</button>
</div>
<table>
<thead><tr><th>用户ID</th><th>昵称</th><th>手机号</th><th>用户类型</th><th>注册时间</th><th>最后登录</th><th>操作</th></tr></thead>
<tbody>
<tr><td>10001</td><td>张三</td><td>138****1234</td><td><span class="tag tag-success">分销商</span></td><td>2025-03-15</td><td>2025-04-25 10:30</td><td><span class="action-btn">查看详情</span><span class="action-btn">封禁</span></td></tr>
<tr><td>10002</td><td>李四</td><td>139****5678</td><td><span class="tag tag-default">普通用户</span></td><td>2025-04-01</td><td>2025-04-25 09:15</td><td><span class="action-btn">查看详情</span><span class="action-btn">封禁</span></td></tr>
<tr><td>10003</td><td>王五</td><td>137****9012</td><td><span class="tag tag-warning">会员用户</span></td><td>2025-02-20</td><td>2025-04-24 18:00</td><td><span class="action-btn">查看详情</span><span class="action-btn">封禁</span></td></tr>
</tbody>
</table>
<div class="pagination">
<span class="page-info">共 1234 条记录，每页 10 条</span>
<div>1 2 3 ... 124</div>
</div>
</div>
</div>

<!-- 用户分级管理 -->
<div class="page" id="page-user-level">
<div class="page-title">用户分级管理</div>
<div class="card">
<div class="card-header">
<span class="card-title">用户等级配置</span>
<button class="btn btn-primary">添加等级</button>
</div>
<table>
<thead><tr><th>等级名称</th><th>等级权益</th><th>用户数量</th><th>操作</th></tr></thead>
<tbody>
<tr><td>普通用户</td><td>基础观看权限</td><td>8,234</td><td><span class="action-btn">编辑</span><span class="action-btn">删除</span></td></tr>
<tr><td>会员用户</td><td>免费观看、优先推送</td><td>1,567</td><td><span class="action-btn">编辑</span><span class="action-btn">删除</span></td></tr>
<tr><td>分销商</td><td>推广权限、佣金分成</td><td>456</td><td><span class="action-btn">编辑</span><span class="action-btn">删除</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 用户行为数据 -->
<div class="page" id="page-user-behavior">
<div class="page-title">用户行为数据</div>
<div class="stats-row">
<div class="stat-card"><h3>总观看次数</h3><div class="value">5,678,901</div></div>
<div class="stat-card"><h3>总消费金额</h3><div class="value">¥2,345,678</div></div>
<div class="stat-card"><h3>总分销订单</h3><div class="value">12,345</div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">行为记录查询</span></div>
<div class="search-bar">
<select class="search-input"><option>观看记录</option><option>消费记录</option><option>分销记录</option></select>
<input type="text" class="search-input" placeholder="用户ID">
<input type="date" class="search-input">
<button class="btn btn-primary">查询</button>
</div>
<table>
<thead><tr><th>用户ID</th><th>行为类型</th><th>内容</th><th>时间</th></tr></thead>
<tbody>
<tr><td>10001</td><td>观看</td><td>《霸道总裁爱上我》第15集</td><td>2025-04-25 10:30</td></tr>
<tr><td>10002</td><td>消费</td><td>解锁短剧《都市修仙》</td><td>2025-04-25 09:15</td></tr>
<tr><td>10003</td><td>分销</td><td>推广成功，获得佣金¥12.5</td><td>2025-04-24 18:00</td></tr>
</tbody>
</table>
</div>
</div>

<!-- 用户封禁/解封 -->
<div class="page" id="page-user-ban">
<div class="page-title">用户封禁/解封</div>
<div class="card">
<div class="search-bar">
<input type="text" class="search-input" placeholder="用户ID/手机号">
<select class="search-input"><option>全部状态</option><option>已封禁</option><option>正常</option></select>
<button class="btn btn-primary">搜索</button>
</div>
<table>
<thead><tr><th>用户ID</th><th>昵称</th><th>封禁原因</th><th>封禁时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>10010</td><td>违规用户A</td><td>发布违规内容</td><td>2025-04-20</td><td><span class="tag tag-danger">已封禁</span></td><td><span class="action-btn" onclick="openModal('unban')">解封</span></td></tr>
<tr><td>10011</td><td>违规用户B</td><td>恶意刷单</td><td>2025-04-18</td><td><span class="tag tag-danger">已封禁</span></td><td><span class="action-btn" onclick="openModal('unban')">解封</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 短剧审核 -->
<div class="page" id="page-drama-audit">
<div class="page-title">短剧审核</div>
<div class="card">
<div class="search-bar">
<select class="search-input"><option>全部状态</option><option>待审核</option><option>已通过</option><option>已驳回</option></select>
<button class="btn btn-primary">搜索</button>
</div>
<table>
<thead><tr><th>短剧ID</th><th>短剧名称</th><th>上传商家</th><th>上传时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>20001</td><td>《霸道总裁爱上我》</td><td>优酷影视</td><td>2025-04-25</td><td><span class="tag tag-warning">待审核</span></td><td><span class="action-btn" onclick="openModal('audit')">审核</span></td></tr>
<tr><td>20002</td><td>《都市修仙传》</td><td>腾讯视频</td><td>2025-04-24</td><td><span class="tag tag-success">已通过</span></td><td><span class="action-btn">查看</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 短剧运营 -->
<div class="page" id="page-drama-operate">
<div class="page-title">短剧运营</div>
<div class="stats-row">
<div class="stat-card"><h3>总短剧数</h3><div class="value">1,234</div></div>
<div class="stat-card"><h3>今日播放量</h3><div class="value">56,789</div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">推荐位管理</span><button class="btn btn-primary">添加推荐</button></div>
<table>
<thead><tr><th>短剧名称</th><th>推荐位</th><th>排序</th><th>操作</th></tr></thead>
<tbody>
<tr><td>《霸道总裁爱上我》</td><td>首页轮播</td><td>1</td><td><span class="action-btn">编辑</span><span class="action-btn">取消推荐</span></td></tr>
<tr><td>《都市修仙传》</td><td>热门推荐</td><td>2</td><td><span class="action-btn">编辑</span><span class="action-btn">取消推荐</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 版权管理 -->
<div class="page" id="page-drama-copyright">
<div class="page-title">版权管理</div>
<div class="card">
<div class="card-header"><span class="card-title">版权登记列表</span><button class="btn btn-primary">新增版权</button></div>
<table>
<thead><tr><th>短剧名称</th><th>版权方</th><th>授权期限</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>《霸道总裁爱上我》</td><td>优酷影视</td><td>2025-01-01 至 2026-01-01</td><td><span class="tag tag-success">有效</span></td><td><span class="action-btn">编辑</span><span class="action-btn">查看详情</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 播放数据统计 -->
<div class="page" id="page-drama-stats">
<div class="page-title">播放数据统计</div>
<div class="stats-row">
<div class="stat-card"><h3>总播放量</h3><div class="value">12,345,678</div></div>
<div class="stat-card"><h3>总解锁次数</h3><div class="value">567,890</div></div>
<div class="stat-card"><h3>总收益</h3><div class="value">¥2,345,678</div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">播放排行</span></div>
<table>
<thead><tr><th>排名</th><th>短剧名称</th><th>播放量</th><th>解锁量</th><th>收益</th></tr></thead>
<tbody>
<tr><td>1</td><td>《霸道总裁爱上我》</td><td>1,234,567</td><td>56,789</td><td>¥123,456</td></tr>
<tr><td>2</td><td>《都市修仙传》</td><td>987,654</td><td>45,678</td><td>¥98,765</td></tr>
</tbody>
</table>
</div>
</div>

<!-- 商品审核 -->
<div class="page" id="page-goods-audit">
<div class="page-title">商品审核</div>
<div class="card">
<table>
<thead><tr><th>商品ID</th><th>商品名称</th><th>商家</th><th>价格</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>30001</td><td>短剧周边T恤</td><td>影视商城</td><td>¥99</td><td><span class="tag tag-warning">待审核</span></td><td><span class="action-btn" onclick="openModal('goodsAudit')">审核</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 商品分类管理 -->
<div class="page" id="page-goods-category">
<div class="page-title">商品分类管理</div>
<div class="card">
<div class="card-header"><button class="btn btn-primary">添加分类</button></div>
<table>
<thead><tr><th>分类名称</th><th>图标</th><th>排序</th><th>商品数量</th><th>操作</th></tr></thead>
<tbody>
<tr><td>服饰</td><td>👕</td><td>1</td><td>56</td><td><span class="action-btn">编辑</span><span class="action-btn">删除</span></td></tr>
<tr><td>周边</td><td>🎁</td><td>2</td><td>34</td><td><span class="action-btn">编辑</span><span class="action-btn">删除</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 平台订单管理 -->
<div class="page" id="page-order-manage">
<div class="page-title">平台订单管理</div>
<div class="stats-row">
<div class="stat-card"><h3>今日订单</h3><div class="value">3,892</div></div>
<div class="stat-card"><h3>今日交易额</h3><div class="value">¥156,789</div></div>
</div>
<div class="card">
<div class="search-bar">
<input type="text" class="search-input" placeholder="订单号">
<select class="search-input"><option>全部状态</option><option>待支付</option><option>已完成</option><option>已退款</option></select>
<button class="btn btn-primary">搜索</button>
</div>
<table>
<thead><tr><th>订单号</th><th>用户</th><th>商品</th><th>金额</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>ORD20250425001</td><td>张三</td><td>短剧周边T恤</td><td>¥99</td><td><span class="tag tag-success">已完成</span></td><td><span class="action-btn">查看详情</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 物流管理 -->
<div class="page" id="page-logistics">
<div class="page-title">物流管理</div>
<div class="card">
<div class="card-header"><button class="btn btn-primary">添加物流公司</button></div>
<table>
<thead><tr><th>物流公司</th><th>编码</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>顺丰速运</td><td>SF</td><td><span class="tag tag-success">启用</span></td><td><span class="action-btn">编辑</span><span class="action-btn">禁用</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 入驻审核 -->
<div class="page" id="page-merchant-audit">
<div class="page-title">入驻审核</div>
<div class="card">
<table>
<thead><tr><th>商家ID</th><th>商家名称</th><th>联系人</th><th>申请时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>M001</td><td>优酷影视</td><td>李经理 138****1234</td><td>2025-04-25</td><td><span class="tag tag-warning">待审核</span></td><td><span class="action-btn" onclick="openModal('merchantAudit')">审核</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 商家列表管理 -->
<div class="page" id="page-merchant-list">
<div class="page-title">商家列表管理</div>
<div class="card">
<table>
<thead><tr><th>商家ID</th><th>商家名称</th><th>店铺状态</th><th>违规记录</th><th>操作</th></tr></thead>
<tbody>
<tr><td>M001</td><td>优酷影视</td><td><span class="tag tag-success">营业中</span></td><td>0</td><td><span class="action-btn">查看详情</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 商家结算管理 -->
<div class="page" id="page-merchant-settle">
<div class="page-title">商家结算管理</div>
<div class="card">
<div class="card-header"><span class="card-title">结算周期设置</span></div>
<div class="form-group"><label class="form-label">结算周期</label><select class="form-input"><option>周结</option><option>月结</option></select></div>
<div class="form-group"><label class="form-label">佣金比例</label><input type="number" class="form-input" value="15" placeholder="%"></div>
<button class="btn btn-primary">保存设置</button>
</div>
</div>

<!-- 商家违规处理 -->
<div class="page" id="page-merchant-violate">
<div class="page-title">商家违规处理</div>
<div class="card">
<table>
<thead><tr><th>商家</th><th>违规类型</th><th>违规时间</th><th>处理方式</th><th>操作</th></tr></thead>
<tbody>
<tr><td>违规商家A</td><td>虚假宣传</td><td>2025-04-20</td><td><span class="tag tag-warning">警告</span></td><td><span class="action-btn">查看详情</span></td></tr>
</tbody>
</table>
</div>
</div>

<!-- 分销规则设置 -->
<div class="page" id="page-distribution-rule">
<div class="page-title">分销规则设置</div>
<div class="card">
<div class="card-header"><span class="card-title">二级分销佣金配置</span></div>
<div class="form-row">
<div class="form-group"><label class="form-label">一级佣金比例 (%)</label><input type="number" class="form-input" value="10"></div>
<div class="form-group"><label class="form-label">二级佣金比例 (%)</label><input type="number" class="form-input" value="5"></div>
</div>
<div class="form-group"><label class="form-label">升级条件</label><textarea class="form-input" rows="3">累计推广订单达100单可升级为高级分销商
角色名称	权限范围	操作
超级管理员	全部权限	编辑
运营人员	内容管理、订单管理	编辑删除
编辑页面

分销商总数

团队总数

待审核佣金

已发放佣金

总播放量

总点赞量

挂载转化率

短剧分成

商品抽成

会员费

总收益

编辑页面

分销商总数

团队总数

待审核佣金

已发放佣金

总推广人数

总转化订单

总佣金支出

总播放量

总点赞量

挂载转化率

短剧分成

商品抽成

会员费

总收益
