Skip to content

qqxb-qqqf / qqck-project

Go to a project
Commit 6819f1a3 by 张倩
Options

增加原型文件

parent 3faa2a52
Inline Side-by-side
Showing with 1961 additions and 3058 deletions
.obsidian/app.json
{} {
\ No newline at end of file "showUnsupportedFiles": true
}
\ No newline at end of file
.obsidian/core-plugins.json
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
"canvas": true, "canvas": true,
"outgoing-link": true, "outgoing-link": true,
"tag-pane": true, "tag-pane": true,
"footnotes": false, "footnotes": true,
"properties": true, "properties": true,
"page-preview": true, "page-preview": true,
"daily-notes": true, "daily-notes": true,
...@@ -17,17 +17,17 @@ ...@@ -17,17 +17,17 @@
"slash-command": false, "slash-command": false,
"editor-status": true, "editor-status": true,
"bookmarks": true, "bookmarks": true,
"markdown-importer": false, "markdown-importer": true,
"zk-prefixer": false, "zk-prefixer": true,
"random-note": false, "random-note": false,
"outline": true, "outline": true,
"word-count": true, "word-count": true,
"slides": false, "slides": true,
"audio-recorder": false, "audio-recorder": false,
"workspaces": false, "workspaces": true,
"file-recovery": true, "file-recovery": true,
"publish": false, "publish": false,
"sync": true, "sync": true,
"bases": true, "bases": true,
"webviewer": false "webviewer": true
} }
\ No newline at end of file
.obsidian/graph.json 0 → 100644
{
"collapse-filter": true,
"search": "",
"showTags": false,
"showAttachments": false,
"hideUnresolved": false,
"showOrphans": true,
"collapse-color-groups": true,
"colorGroups": [],
"collapse-display": true,
"showArrow": false,
"textFadeMultiplier": 0,
"nodeSizeMultiplier": 1,
"lineSizeMultiplier": 1,
"collapse-forces": true,
"centerStrength": 0.518713248970312,
"repelStrength": 10,
"linkStrength": 1,
"linkDistance": 250,
"scale": 1,
"close": false
}
\ No newline at end of file
.obsidian/page-preview.json 0 → 100644
{
"preview": true
}
\ No newline at end of file
.obsidian/workspace.json
...@@ -4,20 +4,21 @@ ...@@ -4,20 +4,21 @@
"type": "split", "type": "split",
"children": [ "children": [
{ {
"id": "dc349f6b35a96757", "id": "97ab42d47d4068ce",
"type": "tabs", "type": "tabs",
"children": [ "children": [
{ {
"id": "c949569524e16b87", "id": "5d97c29978d17542",
"type": "leaf", "type": "leaf",
"state": { "state": {
"type": "empty", "type": "graph",
"state": {}, "state": {},
"icon": "lucide-file", "icon": "lucide-git-fork",
"title": "新标签页" "title": "关系图谱"
} }
} }
] ],
"stacked": true
} }
], ],
"direction": "vertical" "direction": "vertical"
...@@ -36,7 +37,7 @@ ...@@ -36,7 +37,7 @@
"state": { "state": {
"type": "file-explorer", "type": "file-explorer",
"state": { "state": {
"sortOrder": "alphabetical", "sortOrder": "byCreatedTimeReverse",
"autoReveal": true "autoReveal": true
}, },
"icon": "lucide-folder-closed", "icon": "lucide-folder-closed",
...@@ -150,20 +151,41 @@ ...@@ -150,20 +151,41 @@
"state": { "state": {
"type": "outline", "type": "outline",
"state": { "state": {
"file": "未命名.base",
"followCursor": false, "followCursor": false,
"showSearch": false, "showSearch": false,
"searchQuery": "" "searchQuery": ""
}, },
"icon": "lucide-list", "icon": "lucide-list",
"title": "大纲" "title": "未命名 的大纲"
}
},
{
"id": "cfd419189131780c",
"type": "leaf",
"state": {
"type": "git-view",
"state": {},
"icon": "git-pull-request",
"title": "Source Control"
}
},
{
"id": "f4d4bb0d63059e98",
"type": "leaf",
"state": {
"type": "footnotes",
"state": {},
"icon": "lucide-file-signature",
"title": "脚注"
} }
} }
] ],
"currentTab": 5
} }
], ],
"direction": "horizontal", "direction": "horizontal",
"width": 300, "width": 300
"collapsed": true
}, },
"left-ribbon": { "left-ribbon": {
"hiddenItems": { "hiddenItems": {
...@@ -174,9 +196,26 @@ ...@@ -174,9 +196,26 @@
"daily-notes:打开/创建今天的日记": false, "daily-notes:打开/创建今天的日记": false,
"templates:插入模板": false, "templates:插入模板": false,
"command-palette:打开命令面板": false, "command-palette:打开命令面板": false,
"bases:新建数据库": false "bases:新建数据库": false,
"workspaces:管理工作区布局": false,
"zk-prefixer:创建时间戳笔记": false,
"markdown-importer:打开 Markdown 格式转换器": false
} }
}, },
"active": "cf2ff5c8eae1bc75", "active": "cf2ff5c8eae1bc75",
"lastOpenFiles": [] "lastOpenFiles": [
"2026-07-03.md",
"99回收站/合伙人管理.html",
"99回收站/管理员工作台.html",
"99回收站/合伙人详情-未发奖励.html",
"99回收站",
"后台HTML原型/99回收站/合伙人详情-未发奖励.html",
"后台HTML原型/99回收站/管理员工作台.html",
"后台HTML原型/99回收站/合伙人管理.html",
"后台HTML原型/99回收站",
"后台HTML原型/回收站/合伙人详情-未发奖励.html",
"后台HTML原型/回收站/合伙人管理.html",
"未命名.md",
"未命名 1.md"
]
} }
\ No newline at end of file
HTML原型/assignee_table.html deleted 100644 → 0
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>对接人分配表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
.layout{display:flex;height:100vh}
.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
.nav-item:hover{background:#f5f5f5;color:#1677ff}
.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
.main{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
.page-title{font-size:15px;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:#1677ff;color:#1677ff}
.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-primary:hover{background:#0958d9}
.btn-sm{padding:3px 9px;font-size:11px}
.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
.btn-link+.btn-link{margin-left:8px}
.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 24px;flex-shrink:0}
.filter-grid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.filter-item{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px}
.filter-item label{color:#8c8c8c}
.filter-item input,.filter-item select{height:28px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:110px}
.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
.filter-btns{margin-left:auto;display:flex;gap:6px}
.content{padding:16px 24px;flex:1}
.info-bar{background:#e8f4ff;border:1px solid #91caff;border-radius:6px;padding:9px 14px;font-size:12px;color:#0958d9;margin-bottom:12px;display:flex;gap:6px}
.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
tbody tr:hover{background:#fafcff}
tbody tr:last-child{border-bottom:none}
td{padding:9px 10px;vertical-align:middle}
.cell-sub{font-size:11px;color:#bfbfbf;margin-top:2px}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.tag-cyan{background:#e6fffb;color:#08979c;border-color:#87e8de}
.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
.tag-gold{background:#fffbe6;color:#d48806;border-color:#ffe58f}
.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
/* 弹窗 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:flex-start;justify-content:center;padding:32px 0;overflow-y:auto}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:8px;width:580px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden;margin:auto}
.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
.modal-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
.modal-body{padding:18px 20px;max-height:70vh;overflow-y:auto}
.modal-footer{padding:10px 20px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0;background:#fff}
.detail-row{display:flex;font-size:13px;padding:7px 0;border-bottom:1px solid #f5f5f5}
.detail-row:last-child{border-bottom:none}
.dl{width:90px;flex-shrink:0;color:#8c8c8c;text-align:right;padding-right:12px;line-height:1.6}
.dv{flex:1;color:#1a1a1a;line-height:1.6}
.sec-title{font-size:12px;font-weight:500;color:#8c8c8c;margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid #f5f5f5}
</style>
</head>
<body>
<div class="layout">
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-group">合伙人管理</div>
<div class="nav-item">合伙人管理列表</div>
<div class="nav-group">商机管理</div>
<div class="nav-item">商机管理列表</div>
<div class="nav-item active">对接人分配表</div>
<div class="nav-group">佣金结算</div>
<div class="nav-item">合伙人佣金结算</div>
<div class="nav-item">渠道管理员佣金结算</div>
<div class="nav-item">对接人佣金结算</div>
</div>
<div class="main">
<div class="page-header">
<span class="page-title">对接人分配表</span>
<div style="display:flex;gap:8px">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>企业名称</label><input type="text" id="f-ent" placeholder="请输入"></div>
<div class="filter-item"><label>产品名称</label><input type="text" id="f-prod" placeholder="请输入"></div>
<div class="filter-item"><label>对接人</label>
<select id="f-asgn">
<option value="">全部</option>
<option>李明</option><option>赵磊</option><option>刘婷</option><option>王芳</option>
</select>
</div>
<div class="filter-item"><label>渠道管理员</label>
<select id="f-channel">
<option value="">全部</option>
<option>王利娟</option>
</select>
</div>
<div class="filter-item"><label>合伙人</label><input type="text" id="f-partner" placeholder="姓名/手机号"></div>
<div class="filter-item"><label>写入时间</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="date" style="min-width:118px"><span style="color:#bfbfbf">至</span><input type="date" style="min-width:118px">
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary btn-sm" onclick="renderTable()"><i class="ti ti-search"></i>查询</button>
<button class="btn btn-sm" onclick="resetFilter()"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<div class="info-bar">
<i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
<span>本表记录商机<b>已分配对接人且已关联企业</b>后自动写入的数据。新建商机时系统将查询此表，按「企业名称 + 产品名称」匹配，若有记录则自动带入对接人。</span>
</div>
<div class="table-card">
<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 id="main-tbody"></tbody>
</table>
<div class="pagination">
<span id="row-count">共 4 条</span>
<div style="display:flex;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 详情弹窗 -->
<div class="modal-overlay" id="modal-detail">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#1677ff"><i class="ti ti-table"></i>分配记录详情</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-detail')"></i>
</div>
<div class="modal-body" id="detail-body"></div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-detail')">关闭</button>
</div>
</div>
</div>
<script>
var DATA = [
{ id:1, enterprise:'远航科技有限公司', product:'岗位外包', catg:'异地用工',
partner:'李鹏飞 / 158****0129', assignee:'李明', channel:'王利娟',
leadStatus:'跟进中', writtenAt:'2026-06-22 15:30', leadId:'LM001' },
{ id:2, enterprise:'启航教育咨询', product:'代理记账', catg:'财税服务',
partner:'李鹏飞 / 158****0129', assignee:'赵磊', channel:'王利娟',
leadStatus:'已成单', writtenAt:'2026-06-20 13:50', leadId:'LM003' },
{ id:3, enterprise:'顺达物流有限公司', product:'社保公积金托管', catg:'人事代理',
partner:'赛晓丽 / 137****3269', assignee:'王芳', channel:'王利娟',
leadStatus:'已成单', writtenAt:'2026-06-15 11:00', leadId:'LM005' },
{ id:4, enterprise:'云端科技股份公司', product:'AI获客工具', catg:'AI获客',
partner:'张情 / 166****8880', assignee:'刘婷', channel:'王利娟',
leadStatus:'跟进中', writtenAt:'2026-06-17 13:00', leadId:'LM008' },
{ id:5, enterprise:'蓝海投资管理公司', product:'劳务派遣', catg:'异地用工',
partner:'李鹏飞 / 158****0129', assignee:'李明', channel:'王利娟',
leadStatus:'暂时挂起', writtenAt:'2026-06-18 15:50', leadId:'LM004' },
];
var LS = {
'跟进中':'tag-cyan','已成单':'tag-green','待分配':'tag-blue',
'待审核':'tag-orange','暂时挂起':'tag-gold','已作废':'tag-gray'
};
function renderTable() {
var fe = document.getElementById('f-ent').value.trim();
var fp = document.getElementById('f-prod').value.trim();
var fa = document.getElementById('f-asgn').value;
var fc = document.getElementById('f-channel').value;
var fpar = document.getElementById('f-partner').value.trim();
var list = DATA.filter(function(d) {
if (fe && d.enterprise.indexOf(fe) < 0) return false;
if (fp && d.product.indexOf(fp) < 0) return false;
if (fa && d.assignee !== fa) return false;
if (fc && d.channel !== fc) return false;
if (fpar && d.partner.indexOf(fpar) < 0) return false;
return true;
});
document.getElementById('row-count').textContent = '共 ' + list.length + ' 条';
document.getElementById('main-tbody').innerHTML = list.map(function(d) {
return '<tr>'
+ '<td><span style="font-weight:500;cursor:pointer;color:#1677ff" onclick="openDetail(' + d.id + ')">' + d.enterprise + '</span></td>'
+ '<td>' + d.product + '</td>'
+ '<td style="color:#8c8c8c">' + d.catg + '</td>'
+ '<td style="font-size:12px">' + d.partner + '</td>'
+ '<td><span style="color:#1677ff;font-weight:500">' + d.assignee + '</span></td>'
+ '<td style="color:#1677ff">' + d.channel + '</td>'
+ '<td><span class="tag ' + (LS[d.leadStatus]||'tag-gray') + '">' + d.leadStatus + '</span></td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.writtenAt + '</td>'
+ '<td><button class="btn-link">' + d.leadId + '</button></td>'
+ '<td><button class="btn-link" onclick="openDetail(' + d.id + ')">详情</button></td>'
+ '</tr>';
}).join('') || '<tr><td colspan="10" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
}
function openDetail(id) {
var d = DATA.find(function(x) { return x.id === id; });
if (!d) return;
var html = '<div class="sec-title" style="margin-top:0">企业 &amp; 产品信息</div>'
+ '<div class="detail-row"><span class="dl">企业名称</span><span class="dv" style="font-weight:500;color:#1677ff">' + d.enterprise + '</span></div>'
+ '<div class="detail-row"><span class="dl">产品名称</span><span class="dv">' + d.product + '</span></div>'
+ '<div class="detail-row"><span class="dl">产品分类</span><span class="dv">' + d.catg + '</span></div>'
+ '<div class="sec-title">关联人员</div>'
+ '<div class="detail-row"><span class="dl">合伙人</span><span class="dv">' + d.partner + '</span></div>'
+ '<div class="detail-row"><span class="dl">对接人</span><span class="dv" style="color:#1677ff;font-weight:500">' + d.assignee + '</span></div>'
+ '<div class="detail-row"><span class="dl">渠道管理员</span><span class="dv" style="color:#1677ff">' + d.channel + '</span></div>'
+ '<div class="sec-title">来源信息</div>'
+ '<div class="detail-row"><span class="dl">来源商机</span><span class="dv"><button class="btn-link">' + d.leadId + '</button></span></div>'
+ '<div class="detail-row"><span class="dl">商机状态</span><span class="dv"><span class="tag ' + (LS[d.leadStatus]||'tag-gray') + '">' + d.leadStatus + '</span></span></div>'
+ '<div class="detail-row"><span class="dl">写入时间</span><span class="dv">' + d.writtenAt + '</span></div>'
+ '<div class="sec-title">写入规则说明</div>'
+ '<div style="background:#f5f5f5;border-radius:6px;padding:10px 12px;font-size:12px;color:#595959;line-height:1.8">'
+ '· 触发条件：商机分配对接人 <b>且</b> 已关联企业，两者同时满足<br>'
+ '· 查询逻辑：新建商机时以「企业名称 + 产品名称」为 Key 查询本表<br>'
+ '· 命中则自动带入对接人，跳过手动分配步骤<br>'
+ '· 本表与企业详情的「对接人分配表」Tab 为同一数据源'
+ '</div>';
document.getElementById('detail-body').innerHTML = html;
openModal('modal-detail');
}
function resetFilter() {
['f-ent','f-prod','f-asgn','f-channel','f-partner'].forEach(function(id) {
var el = document.getElementById(id); if (el) el.value = '';
});
renderTable();
}
function openModal(id) { document.getElementById(id).classList.add('show'); }
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
renderTable();
</script>
</body>
</html>
HTML原型/channel_manager_todo.html deleted 100644 → 0
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>渠道管理员工作台</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
.layout{display:flex;height:100vh}
.sidebar{width:200px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
.sidebar-logo{padding:14px 16px;font-size:14px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:6px}
.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;display:flex;align-items:center;gap:6px}
.nav-item:hover{background:#f5f5f5;color:#1677ff}
.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
.nav-badge{font-size:11px;background:#ff4d4f;color:#fff;border-radius:100px;padding:0 5px;min-width:18px;text-align:center}
.main{flex:1;overflow-y:auto;background:#f0f2f5}
/* 顶部欢迎 */
.welcome-bar{background:linear-gradient(135deg,#1677ff 0%,#0958d9 100%);padding:20px 28px;color:#fff}
.welcome-title{font-size:18px;font-weight:600;margin-bottom:4px}
.welcome-sub{font-size:13px;opacity:.85}
.welcome-stats{display:flex;gap:24px;margin-top:14px}
.w-stat{background:rgba(255,255,255,.15);border-radius:8px;padding:10px 18px;text-align:center;min-width:90px}
.w-stat-val{font-size:22px;font-weight:700}
.w-stat-lbl{font-size:11px;opacity:.8;margin-top:2px}
.content{padding:20px 24px}
/* 流程卡片 */
.flow-title{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.flow-title i{color:#1677ff}
.flow-steps{display:flex;align-items:stretch;gap:0;margin-bottom:24px;position:relative}
.flow-step{flex:1;background:#fff;border:1px solid #e8e8e8;border-radius:0;padding:14px 14px 16px;position:relative;cursor:default}
.flow-step:first-child{border-radius:8px 0 0 8px}
.flow-step:last-child{border-radius:0 8px 8px 0}
.flow-step+.flow-step{border-left:none}
.flow-step:not(:last-child)::after{content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #e8e8e8;z-index:2}
.flow-step:not(:last-child)::before{content:'';position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #fff;z-index:3}
.step-num{width:22px;height:22px;border-radius:50%;background:#1677ff;color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}
.step-num.done{background:#52c41a}
.step-name{font-size:13px;font-weight:600;margin-bottom:4px}
.step-desc{font-size:11px;color:#8c8c8c;line-height:1.6}
.step-action{margin-top:10px}
/* 待办卡片区 */
.todo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:24px}
.todo-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
.todo-card-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0f0}
.todo-card-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.todo-card-title i{font-size:16px}
.todo-count{font-size:11px;background:#ff4d4f;color:#fff;border-radius:100px;padding:1px 7px;font-weight:500}
.todo-count.warn{background:#fa8c16}
.todo-count.info{background:#1677ff}
.todo-card-body{padding:0}
.todo-item{padding:10px 16px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;justify-content:space-between;gap:10px}
.todo-item:last-child{border-bottom:none}
.todo-item-left{flex:1;min-width:0}
.todo-item-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo-item-meta{font-size:11px;color:#8c8c8c;margin-top:2px}
.todo-card-footer{padding:8px 16px;border-top:1px solid #f0f0f0;text-align:center}
/* 通用 */
.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:#1677ff;color:#1677ff}
.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-primary:hover{background:#0958d9}
.btn-sm{padding:3px 10px;font-size:11px}
.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:1px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
/* 最近操作日志 */
.log-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;margin-bottom:14px}
.log-header{padding:12px 16px;border-bottom:1px solid #f0f0f0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.log-header i{color:#1677ff}
.log-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid #f5f5f5}
.log-item:last-child{border-bottom:none}
.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.log-body{flex:1}
.log-text{font-size:13px;line-height:1.6}
.log-time{font-size:11px;color:#bfbfbf;margin-top:2px}
/* 弹窗 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:10px;width:500px;box-shadow:0 12px 40px rgba(0,0,0,.18);overflow:hidden}
.modal-header{padding:16px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
.modal-body{padding:20px}
.modal-footer{padding:12px 20px 16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
.form-item{margin-bottom:14px}
.form-item label{font-size:12px;color:#595959;display:block;margin-bottom:5px}
.form-item input,.form-item select,.form-item textarea{width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff}
.form-item input:focus,.form-item select:focus{border-color:#1677ff}
.form-item textarea{height:72px;padding:8px 10px;resize:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req{color:#cf1322;margin-left:2px}
.step-indicator{display:flex;gap:0;margin-bottom:18px}
.step-ind{flex:1;text-align:center;font-size:11px;padding:6px 4px;background:#f5f5f5;color:#8c8c8c;border:1px solid #e8e8e8}
.step-ind.active{background:#1677ff;color:#fff;border-color:#1677ff;font-weight:500}
.step-ind.done{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.step-ind:first-child{border-radius:6px 0 0 6px}
.step-ind:last-child{border-radius:0 6px 6px 0}
</style>
</head>
<body>
<div class="layout">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i>亲亲创客</div>
<div class="nav-group">工作台</div>
<div class="nav-item active"><i class="ti ti-layout-dashboard"></i>渠道管理工作台 <span class="nav-badge">8</span></div>
<div class="nav-group">合伙人管理</div>
<div class="nav-item"><i class="ti ti-users"></i>合伙人管理列表</div>
<div class="nav-item"><i class="ti ti-clipboard-list"></i>合伙人订单管理</div>
<div class="nav-group">佣金结算</div>
<div class="nav-item"><i class="ti ti-coin"></i>合伙人佣金结算</div>
<div class="nav-item"><i class="ti ti-chart-bar"></i>渠道管理员佣金结算</div>
<div class="nav-item"><i class="ti ti-user-check"></i>对接人佣金结算</div>
<div class="nav-item"><i class="ti ti-gift"></i>介绍人奖励记录</div>
<div class="nav-item"><i class="ti ti-report-analytics"></i>业绩统计</div>
</div>
<div class="main">
<!-- 欢迎栏 -->
<div class="welcome-bar">
<div class="welcome-title">👋 你好，王利娟！今天有 8 项待办需要处理</div>
<div class="welcome-sub">渠道管理员 · 亲亲创客合伙人项目</div>
<div class="welcome-stats">
<div class="w-stat"><div class="w-stat-val">3</div><div class="w-stat-lbl">待分配商机</div></div>
<div class="w-stat"><div class="w-stat-val">2</div><div class="w-stat-lbl">待创建企业</div></div>
<div class="w-stat"><div class="w-stat-val">2</div><div class="w-stat-lbl">待设置对接人</div></div>
<div class="w-stat"><div class="w-stat-val">4</div><div class="w-stat-lbl">介绍人奖励待发</div></div>
<div class="w-stat"><div class="w-stat-val">12</div><div class="w-stat-lbl">待审核佣金</div></div>
</div>
</div>
<div class="content">
<!-- 商机转化流程 -->
<div class="flow-title"><i class="ti ti-route"></i>商机转化标准流程</div>
<div class="flow-steps">
<div class="flow-step">
<div class="step-num done"><i class="ti ti-check" style="font-size:11px"></i></div>
<div class="step-name">① 合伙人报备商机</div>
<div class="step-desc">合伙人在小程序报备客户，系统记录时间戳并锁定归属</div>
</div>
<div class="flow-step" style="border-color:#fa8c16;border-width:1.5px">
<div class="step-num" style="background:#fa8c16">2</div>
<div class="step-name" style="color:#fa8c16">② 分配对接人</div>
<div class="step-desc">渠道管理员根据业务类型，从产品对接人名单中指定跟单人员</div>
<div class="step-action"><button class="btn btn-sm" style="border-color:#fa8c16;color:#fa8c16" onclick="openModal('modal-assign')"><i class="ti ti-arrows-exchange"></i>去分配 (3)</button></div>
</div>
<div class="flow-step">
<div class="step-num" style="background:#8c8c8c">3</div>
<div class="step-name">③ 创建企业客户</div>
<div class="step-desc">在系统中创建企业档案，标记客户类型为"合伙人客户"，关联合伙人</div>
<div class="step-action"><button class="btn btn-sm" style="border-color:#8c8c8c;color:#8c8c8c" onclick="openModal('modal-create-enterprise')"><i class="ti ti-building-plus"></i>去创建 (2)</button></div>
</div>
<div class="flow-step">
<div class="step-num" style="background:#8c8c8c">4</div>
<div class="step-name">④ 添加服务购买记录</div>
<div class="step-desc">在企业详情中记录购买产品，绑定对接人，触发后续佣金计算</div>
<div class="step-action"><button class="btn btn-sm" style="border-color:#8c8c8c;color:#8c8c8c" onclick="openModal('modal-service-record')"><i class="ti ti-clipboard-plus"></i>去添加 (2)</button></div>
</div>
<div class="flow-step">
<div class="step-num" style="background:#8c8c8c">5</div>
<div class="step-name">⑤ 佣金结算审核</div>
<div class="step-desc">订单产生后，审核渠道管理员、对接人、合伙人三方佣金结算单</div>
<div class="step-action"><button class="btn btn-sm" style="border-color:#8c8c8c;color:#8c8c8c"><i class="ti ti-checks"></i>去审核 (12)</button></div>
</div>
</div>
<!-- 三列待办 -->
<div class="todo-grid">
<!-- 待分配商机 -->
<div class="todo-card">
<div class="todo-card-header">
<div class="todo-card-title"><i class="ti ti-arrows-exchange" style="color:#fa8c16"></i>待分配商机</div>
<span class="todo-count warn">3</span>
</div>
<div class="todo-card-body">
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">锦绣餐饮集团</div>
<div class="todo-item-meta">合伙人：华盛机构 · 三节福利采购 · 06-23</div>
</div>
<button class="btn btn-primary btn-sm" onclick="openModal('modal-assign')">分配</button>
</div>
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">新桥律师事务所</div>
<div class="todo-item-meta">合伙人：王芳 · 个人社保缴纳 · 06-24</div>
</div>
<button class="btn btn-primary btn-sm" onclick="openModal('modal-assign')">分配</button>
</div>
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">蓝海投资管理</div>
<div class="todo-item-meta">合伙人：赵伟 · 代理记账 · 06-24</div>
</div>
<button class="btn btn-primary btn-sm" onclick="openModal('modal-assign')">分配</button>
</div>
</div>
<div class="todo-card-footer"><button class="btn-link">查看全部商机 →</button></div>
</div>
<!-- 待创建企业 -->
<div class="todo-card">
<div class="todo-card-header">
<div class="todo-card-title"><i class="ti ti-building-plus" style="color:#1677ff"></i>待创建企业客户</div>
<span class="todo-count info">2</span>
</div>
<div class="todo-card-body">
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">锦绣餐饮集团</div>
<div class="todo-item-meta">商机已分配 · 对接人：赵磊 · 已等待 1天</div>
</div>
<button class="btn btn-primary btn-sm" onclick="openModal('modal-create-enterprise')">创建</button>
</div>
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">新桥律师事务所</div>
<div class="todo-item-meta">商机已分配 · 对接人：李明 · 刚刚分配</div>
</div>
<button class="btn btn-primary btn-sm" onclick="openModal('modal-create-enterprise')">创建</button>
</div>
</div>
<div class="todo-card-footer"><button class="btn-link">查看全部企业 →</button></div>
</div>
<!-- 待设置对接人订单 -->
<div class="todo-card">
<div class="todo-card-header">
<div class="todo-card-title"><i class="ti ti-user-plus" style="color:#cf1322"></i>订单待设置对接人</div>
<span class="todo-count">2</span>
</div>
<div class="todo-card-body">
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">1356657 · 企业员工社保代缴</div>
<div class="todo-item-meta">张情测试合伙人企业 · 未设置对接人</div>
</div>
<button class="btn btn-sm" style="border-color:#cf1322;color:#cf1322" onclick="openModal('modal-set-assignee')">设置</button>
</div>
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">1356656 · 劳务派遣</div>
<div class="todo-item-meta">张情测试合伙人企业 · 未设置对接人</div>
</div>
<button class="btn btn-sm" style="border-color:#cf1322;color:#cf1322" onclick="openModal('modal-set-assignee')">设置</button>
</div>
</div>
<div class="todo-card-footer"><button class="btn-link">查看全部待设置订单 →</button></div>
</div>
</div>
<!-- 第二行待办 -->
<div class="todo-grid">
<!-- 介绍人奖励 -->
<div class="todo-card">
<div class="todo-card-header">
<div class="todo-card-title"><i class="ti ti-gift" style="color:#d46b08"></i>介绍人奖励待发放</div>
<span class="todo-count warn">4</span>
</div>
<div class="todo-card-body">
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">王芳 → 蓝海投资管理公司</div>
<div class="todo-item-meta">奖励 ¥50 · 首单触发 06-20</div>
</div>
<button class="btn btn-sm" style="border-color:#fa8c16;color:#fa8c16">发放</button>
</div>
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">李鹏飞 → 中兴建材集团</div>
<div class="todo-item-meta">奖励 ¥50 · 首单触发 06-21</div>
</div>
<button class="btn btn-sm" style="border-color:#fa8c16;color:#fa8c16">发放</button>
</div>
</div>
<div class="todo-card-footer"><button class="btn-link">查看全部奖励记录 →</button></div>
</div>
<!-- 待审核佣金 -->
<div class="todo-card">
<div class="todo-card-header">
<div class="todo-card-title"><i class="ti ti-receipt" style="color:#531dab"></i>佣金结算待审核</div>
<span class="todo-count" style="background:#531dab">12</span>
</div>
<div class="todo-card-body">
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">渠道管理员佣金</div>
<div class="todo-item-meta">12 条待审核 · 合计 ¥240.00</div>
</div>
<button class="btn btn-sm" style="border-color:#531dab;color:#531dab">批量审核</button>
</div>
<div class="todo-item">
<div class="todo-item-left">
<div class="todo-item-name">对接人佣金</div>
<div class="todo-item-meta">8 条待审核 · 合计 ¥43.00</div>
</div>
<button class="btn btn-sm" style="border-color:#531dab;color:#531dab">批量审核</button>
</div>
</div>
<div class="todo-card-footer"><button class="btn-link">前往佣金结算管理 →</button></div>
</div>
<!-- 近期操作日志 -->
<div class="log-card" style="margin-bottom:0">
<div class="log-header"><i class="ti ti-history"></i>近期操作记录</div>
<div class="log-item">
<div class="log-dot" style="background:#52c41a"></div>
<div class="log-body">
<div class="log-text">为 <b>远航科技</b> 的订单 1356660 分配对接人 <b>李明</b></div>
<div class="log-time">今天 10:22</div>
</div>
</div>
<div class="log-item">
<div class="log-dot" style="background:#1677ff"></div>
<div class="log-body">
<div class="log-text">创建企业客户 <b>启航教育咨询</b>，标记为合伙人客户</div>
<div class="log-time">今天 09:45</div>
</div>
</div>
<div class="log-item">
<div class="log-dot" style="background:#fa8c16"></div>
<div class="log-body">
<div class="log-text">发放介绍人奖励 ¥50 给 <b>陈晓</b>（启航教育首单）</div>
<div class="log-time">昨天 16:30</div>
</div>
</div>
<div class="log-item">
<div class="log-dot" style="background:#531dab"></div>
<div class="log-body">
<div class="log-text">批量审核渠道管理员佣金 <b>8 条</b>，2026-05 月份</div>
<div class="log-time">昨天 14:11</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 弹窗1：分配对接人 -->
<div class="modal-overlay" id="modal-assign">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#fa8c16"><i class="ti ti-arrows-exchange"></i>分配对接人</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-assign')"></i>
</div>
<div class="modal-body">
<div style="background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:8px 12px;font-size:12px;color:#613400;margin-bottom:14px;display:flex;gap:6px">
<i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
<span>请根据商机类型，从该产品配置的对接人中选择合适人员，分配后对接人将收到跟单通知。</span>
</div>
<div class="form-row">
<div class="form-item">
<label>客户名称</label>
<input type="text" value="锦绣餐饮集团" readonly style="background:#fafafa;color:#8c8c8c">
</div>
<div class="form-item">
<label>商机类型</label>
<input type="text" value="三节福利采购" readonly style="background:#fafafa;color:#8c8c8c">
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>合伙人</label>
<input type="text" value="华盛机构" readonly style="background:#fafafa;color:#8c8c8c">
</div>
<div class="form-item">
<label>报备时间</label>
<input type="text" value="2026-06-23 14:05" readonly style="background:#fafafa;color:#8c8c8c">
</div>
</div>
<div class="form-item">
<label>选择对接人 <span class="req">*</span><span style="font-size:11px;color:#8c8c8c;margin-left:4px">（范围：该产品配置的对接人）</span></label>
<select>
<option value="">请选择...</option>
<option>赵磊 · 综合服务部</option>
<option>刘婷 · 综合服务部</option>
<option>李明 · 销售部</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-assign')">取消</button>
<button class="btn btn-primary" onclick="closeModal('modal-assign')"><i class="ti ti-check"></i>确认分配</button>
</div>
</div>
</div>
<!-- 弹窗2：创建企业客户 -->
<div class="modal-overlay" id="modal-create-enterprise">
<div class="modal" style="width:540px">
<div class="modal-header">
<span class="modal-title" style="color:#1677ff"><i class="ti ti-building-plus"></i>创建企业客户</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-create-enterprise')"></i>
</div>
<div class="modal-body">
<div class="step-indicator">
<div class="step-ind active">① 基本信息</div>
<div class="step-ind">② 合伙人关联</div>
<div class="step-ind">③ 联系人</div>
</div>
<div class="form-row">
<div class="form-item">
<label>企业全称 <span class="req">*</span></label>
<input type="text" value="锦绣餐饮集团" placeholder="请输入">
</div>
<div class="form-item">
<label>统一社会信用代码</label>
<input type="text" placeholder="请输入">
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>客户来源类型 <span class="req">*</span></label>
<select>
<option value="partner" selected>合伙人客户</option>
<option value="direct">直销客户</option>
</select>
</div>
<div class="form-item">
<label>关联合伙人 <span class="req">*</span></label>
<select>
<option>华盛机构</option>
<option>张伟</option>
<option>王芳</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>介绍人</label>
<select>
<option value="">请选择（内部员工）</option>
<option>李明</option>
<option>市场部</option>
</select>
</div>
<div class="form-item">
<label>注册地所属城市</label>
<input type="text" placeholder="省/市">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-create-enterprise')">取消</button>
<button class="btn" style="border-color:#1677ff;color:#1677ff">下一步</button>
<button class="btn btn-primary" onclick="closeModal('modal-create-enterprise')"><i class="ti ti-check"></i>快速创建</button>
</div>
</div>
</div>
<!-- 弹窗3：添加服务购买记录 -->
<div class="modal-overlay" id="modal-service-record">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#389e0d"><i class="ti ti-clipboard-plus"></i>添加服务购买记录</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-service-record')"></i>
</div>
<div class="modal-body">
<div class="form-row">
<div class="form-item">
<label>选择企业 <span class="req">*</span></label>
<select>
<option>锦绣餐饮集团</option>
<option>新桥律师事务所</option>
</select>
</div>
<div class="form-item">
<label>产品分类 <span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>异地用工</option>
<option>财税服务</option>
<option>人事代理</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>产品名称 <span class="req">*</span></label>
<select>
<option value="">请先选择产品分类</option>
</select>
</div>
<div class="form-item">
<label>对接人 <span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>赵磊</option>
<option>李明</option>
<option>刘婷</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>订购时间 <span class="req">*</span></label>
<input type="date">
</div>
<div class="form-item">
<label>状态</label>
<select>
<option>服务中</option>
<option>已终止</option>
</select>
</div>
</div>
<div class="form-item">
<label>备注</label>
<textarea placeholder="选填"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-service-record')">取消</button>
<button class="btn btn-primary" onclick="closeModal('modal-service-record')"><i class="ti ti-check"></i>确认添加</button>
</div>
</div>
</div>
<!-- 弹窗4：设置订单对接人 -->
<div class="modal-overlay" id="modal-set-assignee">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#cf1322"><i class="ti ti-user-plus"></i>设置订单对接人</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-set-assignee')"></i>
</div>
<div class="modal-body">
<div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:8px 12px;font-size:12px;color:#820014;margin-bottom:14px;display:flex;gap:6px">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>未设置对接人的订单无法触发佣金计算，请尽快完成设置。</span>
</div>
<div class="form-row">
<div class="form-item">
<label>订单编号</label>
<input type="text" value="1356657" readonly style="background:#fafafa;color:#8c8c8c">
</div>
<div class="form-item">
<label>产品名称</label>
<input type="text" value="企业员工社保代缴" readonly style="background:#fafafa;color:#8c8c8c">
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>所属企业</label>
<input type="text" value="张情测试合伙人企业" readonly style="background:#fafafa;color:#8c8c8c">
</div>
<div class="form-item">
<label>佣金规则</label>
<input type="text" value="比例 5% · 成交额" readonly style="background:#fafafa;color:#8c8c8c">
</div>
</div>
<div class="form-item">
<label>选择对接人 <span class="req">*</span><span style="font-size:11px;color:#8c8c8c;margin-left:4px">（范围：该产品已配置的对接人）</span></label>
<select>
<option value="">请选择...</option>
<option>李明 · 销售部</option>
<option>赵磊 · 销售部</option>
<option>刘婷 · 综合服务部</option>
<option>王芳 · 财税部</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-set-assignee')">取消</button>
<button class="btn btn-primary" onclick="closeModal('modal-set-assignee')"><i class="ti ti-check"></i>确认设置</button>
</div>
</div>
</div>
<script>
function openModal(id) { document.getElementById(id).classList.add('show'); }
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
document.querySelectorAll('.nav-item').forEach(function(n) {
n.addEventListener('click', function() {
document.querySelectorAll('.nav-item').forEach(function(x){ x.classList.remove('active'); });
n.classList.add('active');
});
});
</script>
</body>
</html>
HTML原型/commission_pages.html deleted 100644 → 0
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>佣金结算管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
.layout{display:flex;height:100vh}
/* 侧边栏 */
.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;line-height:1.4}
.nav-item:hover{background:#f5f5f5;color:#1677ff}
.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
/* 主区 */
.main{flex:1;display:flex;flex-direction:column;min-height:0}
.page{display:none;flex:1;flex-direction:column}.page.active{display:flex}
.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
.page-title{font-size:15px;font-weight:600}
.header-btns{display:flex;gap:8px}
/* 品牌Tab */
.brand-tabs{display:flex;gap:0;padding:0 20px;background:#fff;border-bottom:1px solid #e8e8e8;flex-shrink:0}
.brand-tab{padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer;color:#8c8c8c;border-bottom:2px solid transparent;margin-bottom:-1px}
.brand-tab.active{color:#1677ff;border-bottom-color:#1677ff}
/* 筛选 */
.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 20px;flex-shrink:0}
.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.filter-item{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.filter-item label{color:#8c8c8c;flex-shrink:0}
.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:120px}
.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
.filter-btns{margin-left:auto;display:flex;gap:8px}
/* 内容区 */
.content{padding:16px 20px;flex:1;overflow-y:auto}
/* 状态Tab */
.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
.status-tab{padding:8px 14px;font-size:13px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
/* 汇总提示 */
.summary-bar{background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:8px 14px;font-size:12px;color:#d46b08;margin:10px 0;display:flex;align-items:center;justify-content:space-between}
.summary-bar b{color:#ad4e00}
/* 表格 */
.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
tbody tr:hover{background:#fafcff}
tbody tr:last-child{border-bottom:none}
td{padding:9px 10px;vertical-align:middle}
.cb{width:36px}
/* 通用 */
.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:#1677ff;color:#1677ff}
.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-primary:hover{background:#0958d9}
.btn-sm{padding:2px 8px;font-size:11px;border-radius:4px}
.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer;white-space:nowrap}
.btn-link:hover{color:#0958d9}
.btn-link+.btn-link{margin-left:8px}
.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
.muted{color:#bfbfbf}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
/* 弹窗 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:8px;width:460px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden}
.modal-header{padding:14px 18px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:14px;font-weight:600}
.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
.modal-body{padding:16px 18px}
.modal-footer{padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
.form-item{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.form-item label{font-size:12px;color:#595959}
.form-item select,.form-item input{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
.form-item select:focus,.form-item input:focus{border-color:#1677ff}
.info-row{display:flex;font-size:13px;margin-bottom:8px}
.info-label{width:90px;color:#8c8c8c;flex-shrink:0}
</style>
</head>
<body>
<div class="layout">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-item">产品分类管理</div>
<div class="nav-item">产品管理</div>
<div class="nav-item">合伙人申请管理列表</div>
<div class="nav-item">合伙人管理列表</div>
<div class="nav-group">佣金结算</div>
<div class="nav-item active" onclick="switchPage('partner',this)">合伙人佣金结算管理</div>
<div class="nav-item" onclick="switchPage('channel',this)">渠道管理员佣金结算</div>
<div class="nav-item" onclick="switchPage('assignee',this)">对接人佣金结算</div>
<div class="nav-group">其他</div>
<div class="nav-item">服务商结算</div>
<div class="nav-item">结算服务商付款管理</div>
<div class="nav-item">业务服务商付款管理</div>
<div class="nav-item">其他付款管理</div>
</div>
<!-- ===== 合伙人佣金结算管理 ===== -->
<div id="page-partner" class="page active">
<div class="page-header">
<span class="page-title">合伙人佣金结算管理</span>
<div class="header-btns">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn">视图管理</button>
<button class="btn">超管工具</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="brand-tabs">
<div class="brand-tab active">亲亲企服</div>
<div class="brand-tab">亲亲小保</div>
</div>
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>用户类型</label><select><option value="">请选择</option><option>企业用户</option><option>个人用户</option></select></div>
<div class="filter-item"><label>订单编号</label><input type="text" placeholder="可输入订单编号或业务单号"></div>
<div class="filter-item"><label>个人用户手机号</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>合伙人</label><input type="text" placeholder="请选择"></div>
<div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
<div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
<div class="filter-item"><label>状态</label><select><option value="">请选择</option><option>待审核</option><option>已审核</option><option>已取消</option></select></div>
<div class="filter-btns">
<button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
<button class="btn"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<div class="status-tabs">
<div class="status-tab active">待审核 (195)</div>
<div class="status-tab">已审核待入账 (2)</div>
<div class="status-tab">已审核 (7)</div>
<div class="status-tab">已取消 (1)</div>
<div class="status-tab">全部 (205)</div>
</div>
<div class="summary-bar">
<span>共 195 条订单，佣金总金额 <b>¥3,764.11</b>，正向佣金 <b>¥3,764.11</b>，负向佣金 <b>¥0</b></span>
<button class="btn btn-sm btn-primary">批量审核</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th class="cb"><input type="checkbox"></th>
<th>业务订单编号</th>
<th>产品类型</th>
<th>产品名称</th>
<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 class="cb"><input type="checkbox"></td>
<td style="color:#1677ff;cursor:pointer">1356660</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>劳务派遣</td>
<td>企业用户</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="tag tag-blue">李明</span></td>
<td>张情</td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d">¥18.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox"></td>
<td style="color:#1677ff;cursor:pointer">1356657</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>企业员工社保代缴</td>
<td>企业用户</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="muted">—</span></td>
<td>张情</td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d">¥18.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox"></td>
<td style="color:#1677ff;cursor:pointer">1356654</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>岗位外包</td>
<td>企业用户</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="tag tag-blue">赵磊</span></td>
<td>张情</td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d">¥18.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox"></td>
<td style="color:#1677ff;cursor:pointer">1356658</td>
<td><span class="tag tag-purple">财税服务</span></td>
<td>代理记账</td>
<td>企业用户</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="tag tag-blue">赵磊</span></td>
<td>张情</td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d">¥18.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
<td><span class="tag tag-green">已审核</span></td>
<td><button class="btn-link">操作记录</button><button class="btn-link">更多</button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<span>共 205 条 &nbsp; <select style="height:26px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px"><option>20条/页</option><option>50条/页</option></select></span>
<div style="display:flex;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn">2</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== 渠道管理员佣金结算 ===== -->
<div id="page-channel" class="page">
<div class="page-header">
<span class="page-title">渠道管理员佣金结算管理</span>
<div class="header-btns">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn">视图管理</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="brand-tabs">
<div class="brand-tab active">亲亲企服</div>
<div class="brand-tab">亲亲小保</div>
</div>
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>订单编号</label><input type="text" placeholder="请输入"></div>
<div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
<div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
<div class="filter-btns">
<button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
<button class="btn"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<div class="status-tabs">
<div class="status-tab active" id="ch-tab-pending" onclick="chSwitchTab('pending',this)">待审核 (12)</div>
<div class="status-tab" id="ch-tab-done" onclick="chSwitchTab('done',this)">已审核 (6)</div>
<div class="status-tab" id="ch-tab-all" onclick="chSwitchTab('all',this)">全部 (21)</div>
</div>
<div class="summary-bar" id="ch-summary">
<span>共 12 条订单，待发放佣金合计 <b>¥240.00</b></span>
<button class="btn btn-sm btn-primary" id="ch-batch-btn" onclick="openBatchModal()">批量审核</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th class="cb"><input type="checkbox" id="ch-check-all" onchange="chToggleAll(this)"></th>
<th>业务订单编号</th>
<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 id="ch-tbody">
<tr>
<td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356660</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>劳务派遣</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff;font-weight:500">王利娟</td>
<td><span class="tag tag-blue">李明</span></td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
<td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356657</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>企业员工社保代缴</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff;font-weight:500">王利娟</td>
<td><span class="muted">—</span></td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
<td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356654</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>岗位外包</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff;font-weight:500">王利娟</td>
<td><span class="tag tag-blue">赵磊</span></td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
<td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356655</td>
<td><span class="tag tag-purple">财税服务</span></td>
<td>代理记账</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff;font-weight:500">王利娟</td>
<td><span class="tag tag-blue">刘婷</span></td>
<td>800.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="16.00">¥16.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
<td><span class="tag tag-green">已审核</span></td>
<td><button class="btn-link">操作记录</button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<span id="ch-sel-tip" style="color:#1677ff;font-size:12px"></span>
<div style="display:flex;align-items:center;gap:8px">
<span style="color:#8c8c8c">共 21 条</span>
<div style="display:flex;gap:4px">
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 批量审核弹窗 -->
<div class="modal-overlay" id="modal-batch">
<div class="modal" style="width:440px">
<div class="modal-header">
<span class="modal-title"><i class="ti ti-checks" style="color:#1677ff;margin-right:4px"></i>批量审核确认</span>
<i class="ti ti-x" style="font-size:16px;color:#8c8c8c;cursor:pointer" onclick="closeBatchModal()"></i>
</div>
<div class="modal-body" style="padding:16px 18px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
<div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:22px;font-weight:600;color:#1677ff" id="batch-count">0</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
</div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:22px;font-weight:600;color:#389e0d" id="batch-amount">¥0.00</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">总计佣金金额</div>
</div>
</div>
<div style="margin-bottom:14px">
<div style="font-size:12px;color:#595959;margin-bottom:6px">业绩所属月份 <span style="color:#cf1322">*</span></div>
<input type="month" id="batch-month" style="height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;width:100%" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
<div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择该批佣金对应的业绩归属月份</div>
</div>
<div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:9px 12px;font-size:12px;color:#613400;display:flex;gap:6px;align-items:flex-start">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>审核通过后，佣金将按工资结算方式在次月发放给渠道管理员。请确认数据无误后再提交。</span>
</div>
</div>
<div style="padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0">
<button class="btn" onclick="closeBatchModal()">取消</button>
<button class="btn btn-primary" onclick="confirmBatch()"><i class="ti ti-check"></i>确认审核通过</button>
</div>
</div>
</div>
<!-- ===== 对接人佣金结算 ===== -->
<div id="page-assignee" class="page">
<div class="page-header">
<span class="page-title">对接人佣金结算管理</span>
<div class="header-btns">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn">视图管理</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="brand-tabs">
<div class="brand-tab active">亲亲企服</div>
<div class="brand-tab">亲亲小保</div>
</div>
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>订单编号</label><input type="text" placeholder="请输入"></div>
<div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
<div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
<div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
<div class="filter-btns">
<button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
<button class="btn"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<div class="status-tabs">
<div class="status-tab active" onclick="asSwitchTab('pending',this)">待审核 (8)</div>
<div class="status-tab" onclick="asSwitchTab('done',this)">已审核 (6)</div>
<div class="status-tab" onclick="asSwitchTab('unset',this)">未设置对接人 (3)</div>
<div class="status-tab" onclick="asSwitchTab('all',this)">全部 (17)</div>
</div>
<div class="summary-bar" id="as-summary">
<span id="as-summary-text">共 8 条订单，待审核佣金合计 <b>¥43.00</b></span>
<button class="btn btn-sm btn-primary" id="as-batch-btn" onclick="openAsBatchModal()">批量审核</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th class="cb"><input type="checkbox" id="as-check-all" onchange="asToggleAll(this)"></th>
<th>业务订单编号</th>
<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 style="background:#fffbe6">
<td class="cb"><input type="checkbox" class="as-row-cb" disabled></td>
<td style="color:#1677ff;cursor:pointer">1356657</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>企业员工社保代缴</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td>
<span class="muted" style="margin-right:6px">未设置</span>
<button class="btn btn-sm" style="color:#d46b08;border-color:#ffd591;background:#fff7e6" onclick="showModal('modal-assign','1356657')">设置对接人</button>
</td>
<td>60.00</td>
<td class="muted">待定</td>
<td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
<td><span class="tag tag-red">未设置对接人</span></td>
<td><button class="btn-link">操作记录</button></td>
</tr>
<tr style="background:#fffbe6">
<td class="cb"><input type="checkbox" class="as-row-cb" disabled></td>
<td style="color:#1677ff;cursor:pointer">1356656</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>劳务派遣</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td>
<span class="muted" style="margin-right:6px">未设置</span>
<button class="btn btn-sm" style="color:#d46b08;border-color:#ffd591;background:#fff7e6" onclick="showModal('modal-assign','1356656')">设置对接人</button>
</td>
<td>60.00</td>
<td class="muted">待定</td>
<td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
<td><span class="tag tag-red">未设置对接人</span></td>
<td><button class="btn-link">操作记录</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356660</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>劳务派遣</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="tag tag-blue">李明</span></td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="3.00">¥3.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356654</td>
<td><span class="tag tag-blue">异地用工</span></td>
<td>岗位外包</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="tag tag-blue">赵磊</span></td>
<td>60.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="3.00">¥3.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
<td><span class="tag tag-orange">待审核</span></td>
<td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
</tr>
<tr>
<td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
<td style="color:#1677ff;cursor:pointer">1356658</td>
<td><span class="tag tag-purple">财税服务</span></td>
<td>代理记账</td>
<td>张情测试合伙人企业</td>
<td>15011348374</td>
<td style="color:#1677ff">王利娟</td>
<td><span class="tag tag-blue">赵磊</span></td>
<td>800.00</td>
<td style="font-weight:500;color:#389e0d" data-comm="40.00">¥40.00</td>
<td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
<td><span class="tag tag-green">已审核</span></td>
<td><button class="btn-link">操作记录</button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<span id="as-sel-tip" style="color:#1677ff;font-size:12px"></span>
<div style="display:flex;align-items:center;gap:8px">
<span style="color:#8c8c8c">共 17 条</span>
<div style="display:flex;gap:4px">
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 对接人批量审核弹窗 -->
<div class="modal-overlay" id="modal-as-batch">
<div class="modal" style="width:440px">
<div class="modal-header">
<span class="modal-title"><i class="ti ti-checks" style="color:#1677ff;margin-right:4px"></i>批量审核确认</span>
<i class="ti ti-x" style="font-size:16px;color:#8c8c8c;cursor:pointer" onclick="closeAsBatchModal()"></i>
</div>
<div class="modal-body" style="padding:16px 18px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
<div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:22px;font-weight:600;color:#1677ff" id="as-batch-count">0</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
</div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:22px;font-weight:600;color:#389e0d" id="as-batch-amount">¥0.00</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">总计佣金金额</div>
</div>
</div>
<div style="margin-bottom:14px">
<div style="font-size:12px;color:#595959;margin-bottom:6px">业绩所属月份 <span style="color:#cf1322">*</span></div>
<input type="month" id="as-batch-month" style="height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;width:100%" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
<div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择该批佣金对应的业绩归属月份</div>
</div>
<div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:9px 12px;font-size:12px;color:#613400;display:flex;gap:6px;align-items:flex-start">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>审核通过后，佣金将按工资结算方式在次月发放给对接人。请确认数据无误后再提交。</span>
</div>
</div>
<div style="padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0">
<button class="btn" onclick="closeAsBatchModal()">取消</button>
<button class="btn btn-primary" onclick="confirmAsBatch()"><i class="ti ti-check"></i>确认审核通过</button>
</div>
</div>
</div>
<!-- 设置对接人弹窗 -->
<div class="modal-overlay" id="modal-assign">
<div class="modal">
<div class="modal-header">
<span class="modal-title">设置对接人</span>
<i class="ti ti-x modal-close" onclick="hideModal('modal-assign')"></i>
</div>
<div class="modal-body">
<div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:8px 12px;font-size:12px;color:#0958d9;margin-bottom:14px;display:flex;gap:6px;align-items:center">
<i class="ti ti-info-circle"></i>设置后将按产品对应规则自动计算该订单的对接人佣金。
</div>
<div class="info-row"><span class="info-label">订单编号</span><span id="assign-order-id" style="font-weight:500">—</span></div>
<div class="info-row"><span class="info-label">产品名称</span><span>企业员工社保代缴</span></div>
<div class="info-row"><span class="info-label">佣金规则</span><span style="color:#8c8c8c;font-size:12px">比例 5% · 成交额</span></div>
<div class="form-item" style="margin-top:12px">
<label>选择对接人 <span style="color:#cf1322">*</span></label>
<select>
<option value="">请选择（范围：该产品配置的对接人）</option>
<option>李明 · 销售部</option>
<option>赵磊 · 销售部</option>
<option>刘婷 · 综合服务部</option>
<option>王芳 · 财税部</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal('modal-assign')">取消</button>
<button class="btn btn-primary" onclick="hideModal('modal-assign')"><i class="ti ti-check"></i>确认设置</button>
</div>
</div>
</div>
<script>
function switchPage(id, el) {
document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
document.getElementById('page-' + id).classList.add('active');
if (el) el.classList.add('active');
}
function chSwitchTab(type, el) {
document.querySelectorAll('#page-channel .status-tab').forEach(function(t) { t.classList.remove('active'); });
el.classList.add('active');
var batchBtn = document.getElementById('ch-batch-btn');
var summary = document.getElementById('ch-summary');
if (type === 'pending') {
summary.style.display = 'flex';
batchBtn.style.display = '';
} else {
batchBtn.style.display = 'none';
}
document.querySelectorAll('.ch-row-cb').forEach(function(cb) { cb.checked = false; });
document.getElementById('ch-check-all').checked = false;
chUpdateSel();
}
function chToggleAll(master) {
document.querySelectorAll('.ch-row-cb').forEach(function(cb) { cb.checked = master.checked; });
chUpdateSel();
}
function chUpdateSel() {
var cbs = document.querySelectorAll('.ch-row-cb:checked');
var total = 0;
cbs.forEach(function(cb) {
var commTd = cb.closest('tr').querySelector('[data-comm]');
if (commTd) total += parseFloat(commTd.dataset.comm);
});
var tip = document.getElementById('ch-sel-tip');
if (cbs.length > 0) {
tip.textContent = '已选 ' + cbs.length + ' 条，合计佣金 ¥' + total.toFixed(2);
} else {
tip.textContent = '';
}
}
function openBatchModal() {
var cbs = document.querySelectorAll('.ch-row-cb:checked');
if (cbs.length === 0) { alert('请先勾选需要审核的记录'); return; }
var total = 0;
cbs.forEach(function(cb) {
var commTd = cb.closest('tr').querySelector('[data-comm]');
if (commTd) total += parseFloat(commTd.dataset.comm);
});
document.getElementById('batch-count').textContent = cbs.length;
document.getElementById('batch-amount').textContent = '¥' + total.toFixed(2);
document.getElementById('batch-month').value = '';
document.getElementById('batch-month').style.borderColor = '#d9d9d9';
document.getElementById('modal-batch').classList.add('show');
}
function closeBatchModal() {
document.getElementById('modal-batch').classList.remove('show');
}
function confirmBatch() {
var m = document.getElementById('batch-month').value;
if (!m) {
document.getElementById('batch-month').style.borderColor = '#ff4d4f';
document.getElementById('batch-month').focus();
return;
}
closeBatchModal();
}
function asSwitchTab(type, el) {
document.querySelectorAll('#page-assignee .status-tab').forEach(function(t) { t.classList.remove('active'); });
el.classList.add('active');
var batchBtn = document.getElementById('as-batch-btn');
var summary = document.getElementById('as-summary');
var summaryText = document.getElementById('as-summary-text');
if (type === 'pending') {
summary.style.display = 'flex';
batchBtn.style.display = '';
summaryText.innerHTML = '共 8 条订单，待审核佣金合计 <b>¥43.00</b>';
} else if (type === 'unset') {
summary.style.display = 'flex';
batchBtn.style.display = 'none';
summaryText.innerHTML = '共 3 条订单未设置对接人，<b style="color:#cf1322">需手动分配后方可计算佣金</b>';
} else {
summary.style.display = 'none';
}
document.querySelectorAll('.as-row-cb:not([disabled])').forEach(function(cb) { cb.checked = false; });
document.getElementById('as-check-all').checked = false;
asUpdateSel();
}
function asToggleAll(master) {
document.querySelectorAll('.as-row-cb:not([disabled])').forEach(function(cb) { cb.checked = master.checked; });
asUpdateSel();
}
function asUpdateSel() {
var cbs = document.querySelectorAll('.as-row-cb:not([disabled]):checked');
var total = 0;
cbs.forEach(function(cb) {
var commTd = cb.closest('tr').querySelector('[data-comm]');
if (commTd) total += parseFloat(commTd.dataset.comm);
});
var tip = document.getElementById('as-sel-tip');
if (cbs.length > 0) {
tip.textContent = '已选 ' + cbs.length + ' 条，合计佣金 ¥' + total.toFixed(2);
} else {
tip.textContent = '';
}
}
function openAsBatchModal() {
var cbs = document.querySelectorAll('.as-row-cb:not([disabled]):checked');
if (cbs.length === 0) { alert('请先勾选需要审核的记录'); return; }
var total = 0;
cbs.forEach(function(cb) {
var commTd = cb.closest('tr').querySelector('[data-comm]');
if (commTd) total += parseFloat(commTd.dataset.comm);
});
document.getElementById('as-batch-count').textContent = cbs.length;
document.getElementById('as-batch-amount').textContent = '¥' + total.toFixed(2);
document.getElementById('as-batch-month').value = '';
document.getElementById('as-batch-month').style.borderColor = '#d9d9d9';
document.getElementById('modal-as-batch').classList.add('show');
}
function closeAsBatchModal() {
document.getElementById('modal-as-batch').classList.remove('show');
}
function confirmAsBatch() {
var m = document.getElementById('as-batch-month').value;
if (!m) {
document.getElementById('as-batch-month').style.borderColor = '#ff4d4f';
document.getElementById('as-batch-month').focus();
return;
}
closeAsBatchModal();
}
function showModal(id, orderId) {
document.getElementById(id).classList.add('show');
if (orderId) {
var el = document.getElementById('assign-order-id');
if (el) el.textContent = orderId;
}
}
function hideModal(id) {
document.getElementById(id).classList.remove('show');
}
document.querySelectorAll('.brand-tab').forEach(function(t) {
t.addEventListener('click', function() {
t.closest('.brand-tabs').querySelectorAll('.brand-tab').forEach(function(x) { x.classList.remove('active'); });
t.classList.add('active');
});
});
</script>
</body>
</html>
HTML原型/partner_detail (1).html deleted 100644 → 0
<!DOCTYPE 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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; color: #1a1a1a; background: #f5f6f8; }
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 180px; background: #fff; border-right: 1px solid #e8e8e8; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-logo { padding: 14px 16px; font-size: 13px; font-weight: 600; color: #1677ff; border-bottom: 1px solid #f0f0f0; }
.nav-group { padding: 8px 0; }
.nav-group-title { padding: 6px 16px 4px; font-size: 11px; color: #999; }
.nav-item { padding: 7px 16px; font-size: 13px; color: #595959; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-item:hover { background: #f5f5f5; color: #1677ff; }
.nav-item.active { background: #e8f0fe; color: #1677ff; font-weight: 500; }
.main { flex: 1; overflow-y: auto; }
.page-header { background: #fff; border-bottom: 1px solid #e8e8e8; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 52px; position: sticky; top: 0; z-index: 10; }
.page-title-row { display: flex; align-items: center; gap: 8px; }
.page-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.status-badge { font-size: 11px; padding: 2px 8px; border-radius: 100px; background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
.header-btns { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: 1px solid #d9d9d9; background: #fff; font-size: 12px; cursor: pointer; color: #595959; transition: all .15s; white-space: nowrap; }
.btn:hover { border-color: #1677ff; color: #1677ff; }
.btn-danger { border-color: #ffa39e; color: #cf1322; }
.btn-danger:hover { background: #fff1f0; border-color: #ff4d4f; }
.btn-primary { background: #1677ff; color: #fff; border-color: #1677ff; }
.btn-primary:hover { background: #0958d9; border-color: #0958d9; }
.btn-success { background: #52c41a; color: #fff; border-color: #52c41a; }
.btn-success:hover { background: #389e0d; }
.btn-warning { background: #fa8c16; color: #fff; border-color: #fa8c16; font-weight: 500; }
.btn-warning:hover { background: #d46b08; border-color: #d46b08; }
.btn-locked { background: #f0f0f0; color: #bfbfbf; border-color: #d9d9d9; cursor: not-allowed; pointer-events: none; }
.content { padding: 16px 24px 32px; }
.card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.card-header { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; background: #fafafa; display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 13px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
.card-title i { color: #1677ff; font-size: 15px; }
.card-body { padding: 14px 16px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; }
.field-row { display: flex; align-items: baseline; padding: 5px 0; }
.field-label { width: 84px; flex-shrink: 0; font-size: 13px; color: #8c8c8c; text-align: right; padding-right: 10px; white-space: nowrap; }
.field-val { font-size: 13px; color: #1a1a1a; flex: 1; }
.intro-block { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.intro-header { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; background: #fafafa; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.intro-header i { color: #1677ff; font-size: 15px; }
.intro-body { display: flex; align-items: stretch; }
.intro-field { flex: 1; padding: 14px 16px; display: flex; align-items: center; }
.intro-field + .intro-field { border-left: 1px solid #f0f0f0; }
.intro-label { width: 90px; flex-shrink: 0; font-size: 13px; color: #8c8c8c; text-align: right; padding-right: 10px; white-space: nowrap; }
.intro-val { flex: 1; display: flex; align-items: center; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 8px; border-radius: 100px; border: 1px solid; white-space: nowrap; }
.tag-gray { background: #fafafa; color: #595959; border-color: #d9d9d9; }
.tag-green { background: #f6ffed; color: #389e0d; border-color: #b7eb8f; }
.tag-orange { background: #fff7e6; color: #d46b08; border-color: #ffd591; }
.tag-blue { background: #e8f4ff; color: #1677ff; border-color: #91caff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-item { background: #f8f9fc; border-radius: 6px; padding: 10px 14px; }
.stat-label { font-size: 12px; color: #8c8c8c; margin-bottom: 4px; }
.stat-val { font-size: 20px; font-weight: 600; color: #1a1a1a; }
.tabs { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.tab-nav { display: flex; border-bottom: 1px solid #f0f0f0; padding: 0 16px; background: #fafafa; }
.tab-item { padding: 10px 14px; font-size: 13px; color: #8c8c8c; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab-item.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 500; }
.tab-body { padding: 32px 16px; text-align: center; color: #bfbfbf; font-size: 13px; }
.tab-body i { font-size: 28px; display: block; margin-bottom: 8px; }
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 8px; width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.15); overflow: hidden; }
.modal-header { padding: 14px 16px 12px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 14px; font-weight: 600; }
.modal-close { font-size: 16px; color: #8c8c8c; cursor: pointer; }
.modal-close:hover { color: #1a1a1a; }
.modal-body { padding: 16px; }
.modal-row { display: flex; align-items: center; margin-bottom: 12px; font-size: 13px; }
.modal-row-label { width: 80px; color: #8c8c8c; text-align: right; padding-right: 10px; flex-shrink: 0; }
.modal-tip { background: #fffbe6; border: 1px solid #ffe58f; border-radius: 6px; padding: 10px 12px; font-size: 12px; color: #613400; line-height: 1.7; margin-top: 4px; display: flex; gap: 6px; }
.modal-footer { padding: 10px 16px 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #f0f0f0; }
</style>
</head>
<body>
<div class="layout">
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-group">
<div class="nav-group-title">企业管理</div>
<div class="nav-item"><i class="ti ti-building"></i>企业客户</div>
</div>
<div class="nav-group">
<div class="nav-group-title">合伙人</div>
<div class="nav-item active"><i class="ti ti-users"></i>合伙人管理</div>
<div class="nav-item"><i class="ti ti-clipboard-list"></i>合伙人订单</div>
<div class="nav-item"><i class="ti ti-coin"></i>佣金结算</div>
<div class="nav-item"><i class="ti ti-settings"></i>功能配置</div>
</div>
</div>
<div class="main">
<div class="page-header">
<div class="page-title-row">
<span class="page-title">合伙人管理详情</span>
<span class="status-badge">正常</span>
</div>
<div class="header-btns">
<button class="btn btn-danger"><i class="ti ti-ban"></i>禁用</button>
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn"><i class="ti ti-tool"></i>管理工具</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="content">
<div class="card">
<div class="card-header">
<span class="card-title"><i class="ti ti-id-badge"></i>基本信息</span>
</div>
<div class="card-body">
<div class="info-grid">
<div>
<div class="field-row"><span class="field-label">合伙人类型</span><span class="field-val">个人</span></div>
<div class="field-row"><span class="field-label">身份类型</span><span class="field-val">财务</span></div>
<div class="field-row"><span class="field-label">来源方式</span><span class="field-val">对接人后台添加</span></div>
<div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-22 14:22</span></div>
</div>
<div>
<div class="field-row"><span class="field-label">合伙人姓名</span><span class="field-val">李鹏飞</span></div>
<div class="field-row"><span class="field-label">合伙人用户</span><span class="field-val">158****0129</span></div>
<div class="field-row"><span class="field-label">所在城市</span><span class="field-val">福建省厦门市</span></div>
<div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-22 14:22</span></div>
</div>
</div>
</div>
</div>
<!-- 介绍人信息区块 -->
<div class="intro-block">
<div class="intro-header">
<i class="ti ti-user-check"></i>介绍人信息
</div>
<div class="intro-body">
<div class="intro-field">
<span class="intro-label">介绍人</span>
<div class="intro-val">
<span style="color:#1677ff;cursor:pointer;font-size:13px">李鹏飞</span>
</div>
</div>
<div class="intro-field">
<span class="intro-label">是否已成单</span>
<div class="intro-val">
<span style="font-size:13px;color:#1a1a1a">未成单</span>
</div>
</div>
<div class="intro-field">
<span class="intro-label">是否已发放奖励</span>
<div class="intro-val" id="reward-area">
<span id="reward-tag" style="font-size:13px;color:#1a1a1a">无奖励</span>
<button class="btn btn-warning" id="reward-btn" onclick="openModal()">
<i class="ti ti-check"></i>标记已发放
</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<span class="card-title"><i class="ti ti-chart-bar"></i>实时统计</span>
</div>
<div class="card-body">
<div class="stats-grid">
<div class="stat-item"><div class="stat-label">推广客户数</div><div class="stat-val">0</div></div>
<div class="stat-item"><div class="stat-label">产生业务客户数</div><div class="stat-val">0</div></div>
<div class="stat-item"><div class="stat-label">累计佣金</div><div class="stat-val">0.00</div></div>
<div class="stat-item"><div class="stat-label">可提现金额</div><div class="stat-val">0.00</div></div>
</div>
</div>
</div>
<div class="tabs">
<div class="tab-nav">
<div class="tab-item active">个人企业推广记录</div>
<div class="tab-item">企业CRM推广记录</div>
<div class="tab-item">成单记录</div>
<div class="tab-item">备注</div>
<div class="tab-item">操作日志</div>
</div>
<div class="tab-body">
<i class="ti ti-inbox"></i>暂无数据
</div>
</div>
<!-- 演示切换区 -->
<div style="margin-top:16px;padding:12px 16px;background:#fff;border-radius:8px;border:1px dashed #d9d9d9;font-size:12px;color:#8c8c8c;display:flex;align-items:center;gap:10px">
<span>演示奖励状态切换：</span>
<button class="btn" onclick="setReward('none')" style="font-size:11px;padding:3px 10px">无奖励</button>
<button class="btn" onclick="setReward('pending')" style="font-size:11px;padding:3px 10px">待发放（按钮激活）</button>
<button class="btn" onclick="setReward('done')" style="font-size:11px;padding:3px 10px">已发放（按钮锁定）</button>
</div>
</div>
</div>
</div>
<!-- 弹窗 -->
<div class="modal-overlay" id="modal">
<div class="modal">
<div class="modal-header">
<span class="modal-title">标记奖励已发放</span>
<i class="ti ti-x modal-close" onclick="closeModal()"></i>
</div>
<div class="modal-body">
<div class="modal-row">
<span class="modal-row-label">介绍人</span>
<span>李鹏飞</span>
</div>
<div class="modal-row">
<span class="modal-row-label">奖励金额</span>
<span style="font-size:15px;font-weight:600;color:#d46b08">¥50.00</span>
</div>
<div class="modal-tip">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>确认发放后，将标记为已发放。请确保已完成线下发放后再操作。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal()">取消</button>
<button class="btn btn-success" onclick="confirmReward()"><i class="ti ti-check"></i>确认已发放</button>
</div>
</div>
</div>
<script>
function openModal() { document.getElementById('modal').classList.add('show'); }
function closeModal() { document.getElementById('modal').classList.remove('show'); }
function setReward(state) {
const tag = document.getElementById('reward-tag');
const btn = document.getElementById('reward-btn');
if (state === 'none') {
tag.className = ''; tag.style = 'font-size:13px;color:#1a1a1a'; tag.textContent = '无奖励';
btn.className = 'btn btn-warning'; btn.innerHTML = '<i class="ti ti-check"></i>标记已发放';
} else if (state === 'pending') {
tag.className = ''; tag.style = 'font-size:13px;color:#1a1a1a'; tag.textContent = '待发放';
btn.className = 'btn btn-warning'; btn.innerHTML = '<i class="ti ti-check"></i>标记已发放';
} else if (state === 'done') {
tag.className = 'tag tag-green'; tag.style = ''; tag.innerHTML = '<i class="ti ti-check" style="font-size:10px"></i>已发放';
btn.className = 'btn btn-locked'; btn.innerHTML = '<i class="ti ti-lock"></i>已发放';
}
}
function confirmReward() {
closeModal();
setReward('done');
}
document.querySelectorAll('.tab-item').forEach(t => {
t.addEventListener('click', () => {
document.querySelectorAll('.tab-item').forEach(x => x.classList.remove('active'));
t.classList.add('active');
});
});
</script>
</body>
</html>
HTML原型/product_pages.html deleted 100644 → 0
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>产品目录管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f5f6f8}
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:#1677ff;color:#1677ff}
.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-primary:hover{background:#0958d9}
.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
.btn-link.danger{color:#cf1322}
.tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
.view{display:none}.view.active{display:block}
/* 列表 */
.list-page{padding:20px 24px}
.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.list-title{font-size:16px;font-weight:600}
.tabs-nav{display:flex;border-bottom:1px solid #e8e8e8;margin-bottom:16px}
.tab-nav-item{padding:8px 16px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-nav-item.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
tbody tr{border-bottom:1px solid #f5f5f5}
tbody tr:hover{background:#fafcff}
td{padding:9px 10px;vertical-align:middle}
.comm-cell{font-size:12px;line-height:1.7}
.comm-cell .role{color:#8c8c8c;font-size:11px}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
.page-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
/* 详情 */
.detail-page{padding:20px 24px}
.detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.detail-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:12px;overflow:hidden}
.card-header{padding:10px 16px;border-bottom:1px solid #f0f0f0;background:#fafafa;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.card-header i{color:#1677ff;font-size:15px}
.card-body{padding:14px 16px}
/* 基本信息：固定左列宽，左右对齐 */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.field-row{display:flex;padding:5px 0}
.field-label{width:90px;flex-shrink:0;font-size:13px;color:#8c8c8c;text-align:right;padding-right:12px;line-height:1.6}
.field-val{font-size:13px;color:#1a1a1a;flex:1;line-height:1.6}
.field-val.muted{color:#bfbfbf}
/* 图文介绍 */
.richtext-preview{border:1px solid #f0f0f0;border-radius:6px;padding:12px;min-height:60px;font-size:13px;color:#595959;line-height:1.8;background:#fafafa}
/* 附件 */
.attachment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.attachment-item{border:1px dashed #91caff;border-radius:6px;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#1677ff;font-size:12px;background:#e8f4ff}
.attachment-item i{font-size:22px;color:#bfbfbf}
.attachment-filled{border:1px solid #e8e8e8;background:#f0f7ff;color:#1677ff}
.attachment-filled i{color:#1677ff}
/* 分佣 */
.commission-block{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.comm-role-card{border:1px solid #e8e8e8;border-radius:6px;padding:12px 14px}
.comm-role-title{font-size:12px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:4px}
.comm-field{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;border-bottom:1px solid #f5f5f5}
.comm-field:last-child{border-bottom:none}
.comm-field-label{color:#8c8c8c}
.comm-field-val{color:#1a1a1a;font-weight:500}
/* 对接人 */
.person-tags{display:flex;flex-wrap:wrap;gap:6px}
.person-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:#f0f7ff;border:1px solid #b6d9ff;border-radius:100px;font-size:12px;color:#0958d9}
/* detail tabs */
.detail-tabs{display:flex;border-bottom:1px solid #f0f0f0;padding:0 16px;background:#fafafa}
.detail-tab{padding:10px 14px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.detail-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
.empty-state{text-align:center;padding:40px;color:#bfbfbf;font-size:13px}
.empty-state i{font-size:28px;display:block;margin-bottom:8px}
/* 弹窗 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:flex-start;justify-content:center;overflow-y:auto;padding:32px 0}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:8px;width:740px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden;margin:auto}
.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modal-title{font-size:15px;font-weight:600}
.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
.modal-body{padding:20px;max-height:76vh;overflow-y:auto}
.modal-footer{padding:12px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0;position:sticky;bottom:0;background:#fff}
/* 表单 */
.form-section{margin-bottom:22px}
.form-section-title{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:6px}
.form-section-title i{color:#1677ff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.form-row.full{grid-template-columns:1fr}
.form-row.tri{grid-template-columns:1fr 1fr 1fr}
.form-item{display:flex;flex-direction:column;gap:4px}
.form-item label{font-size:12px;color:#595959}
.req{color:#cf1322;margin-left:2px}
.form-item input,.form-item select,.form-item textarea{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;color:#1a1a1a;outline:none;background:#fff;width:100%}
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1677ff}
.form-item textarea{height:80px;padding:8px 10px;resize:vertical}
/* 富文本模拟 */
.rich-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border:1px solid #d9d9d9;border-bottom:none;border-radius:6px 6px 0 0;background:#fafafa}
.rich-btn{padding:2px 6px;border-radius:4px;border:1px solid transparent;font-size:12px;cursor:pointer;color:#595959}
.rich-btn:hover{background:#e8e8e8}
.rich-area{border:1px solid #d9d9d9;border-radius:0 0 6px 6px;min-height:100px;padding:10px;font-size:13px;color:#8c8c8c;background:#fff}
/* 附件上传 */
.upload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.upload-box{border:1px dashed #91caff;border-radius:6px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#1677ff;font-size:11px;background:#e8f4ff;cursor:pointer}
.upload-box:hover{border-color:#1677ff;color:#1677ff}
.upload-box i{font-size:20px}
.upload-label{font-size:11px;color:#8c8c8c;margin-top:6px}
/* 分佣规则 */
.comm-rule-block{border:1px solid #e8e8e8;border-radius:6px;overflow:hidden;margin-bottom:10px}
.comm-rule-header{padding:8px 12px;background:#fafafa;border-bottom:1px solid #f0f0f0;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.comm-rule-body{padding:12px}
.comm-fields-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.comm-fields-row .form-item{min-width:120px;flex:1}
/* 对接人搜索 */
.person-search-wrap{position:relative}
.person-search-input{width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px 0 30px;font-size:13px;outline:none}
.person-search-input:focus{border-color:#1677ff}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#8c8c8c;font-size:14px}
.person-dropdown{border:1px solid #d9d9d9;border-radius:6px;margin-top:4px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.person-option{padding:7px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px}
.person-option:hover{background:#f0f7ff}
.person-option input[type=checkbox]{accent-color:#1677ff}
.selected-persons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:20px}
.sel-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:#f0f7ff;border:1px solid #b6d9ff;border-radius:100px;font-size:12px;color:#0958d9}
.sel-tag .rm{cursor:pointer;color:#8c8c8c;margin-left:2px;font-size:11px}
.sel-tag .rm:hover{color:#cf1322}
</style>
</head>
<body>
<!-- ========== 列表页 ========== -->
<div id="view-list" class="view active">
<div class="list-page">
<div class="list-header">
<span class="list-title">产品目录管理</span>
<div style="display:flex;gap:8px">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn">超管工具</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
<button class="btn btn-primary" onclick="showModal()"><i class="ti ti-plus"></i>新增合伙人推广产品</button>
</div>
</div>
<div class="tabs-nav">
<div class="tab-nav-item active">亲亲企服 (12)</div>
<div class="tab-nav-item">亲亲小保 (4)</div>
</div>
<div class="table-card">
<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><th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>异地用工</td>
<td><span style="color:#1677ff;cursor:pointer" onclick="showDetail()">岗位外包</span></td>
<td>李玲玲</td>
<td><span class="tag tag-blue">李明</span> <span class="tag tag-blue">赵磊</span></td>
<td>—</td><td>61元/人/月</td>
<td><div class="comm-cell"><div><span class="role">渠道：</span>比例 2%·续费</div><div><span class="role">对接人：</span>比例 5%·续费</div><div><span class="role">合伙人：</span>比例 30%·续费</div></div></td>
<td><span class="tag tag-green">已上架</span></td><td>是</td><td>0</td><td>0</td>
<td><button class="btn-link danger">下架</button> <button class="btn-link" onclick="showDetail()">详情</button></td>
</tr>
<tr>
<td>财税服务</td>
<td><span style="color:#1677ff;cursor:pointer" onclick="showDetail()">测试固定返佣产品</span></td>
<td>李玲玲</td>
<td><span class="tag tag-blue">刘婷</span></td>
<td>—</td><td>1000-14000元/人</td>
<td><div class="comm-cell"><div><span class="role">渠道：</span>固定 ¥60·一次性</div><div><span class="role">对接人：</span>固定 ¥150·一次性</div><div><span class="role">合伙人：</span>固定 ¥300·一次性</div></div></td>
<td><span class="tag tag-green">已上架</span></td><td>是</td><td>0</td><td>0</td>
<td><button class="btn-link danger">下架</button> <button class="btn-link" onclick="showDetail()">详情</button></td>
</tr>
<tr>
<td>人事代理</td>
<td><span style="color:#1677ff;cursor:pointer">社保公积金托管</span></td>
<td>郭欢</td>
<td><span style="color:#bfbfbf;font-size:12px">未配置</span></td>
<td>—</td><td>1-5人 1,000元/年…</td>
<td><div class="comm-cell"><div><span class="role">渠道：</span>比例 2%·续费</div><div><span class="role">对接人：</span>比例 5%·续费</div><div><span class="role">合伙人：</span>比例 30%·续费</div></div></td>
<td><span class="tag tag-green">已上架</span></td><td>否</td><td>0</td><td>0</td>
<td><button class="btn-link danger">下架</button> <button class="btn-link">详情</button></td>
</tr>
<tr>
<td>财税服务</td>
<td><span style="color:#1677ff;cursor:pointer">测测试</span></td>
<td>问贝</td>
<td><span style="color:#bfbfbf;font-size:12px">未配置</span></td>
<td>—</td><td>33</td>
<td><div class="comm-cell"><div><span class="role">渠道：</span>固定 ¥200·一次性</div><div><span class="role">对接人：</span>固定 ¥400·一次性</div><div><span class="role">合伙人：</span>固定 ¥800·一次性</div></div></td>
<td><span class="tag tag-gray">草稿</span></td><td>否</td><td>0</td><td>0</td>
<td><button class="btn-link">上架</button> <button class="btn-link">详情</button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<span>共 12 条</span>
<div style="display:flex;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
<!-- ========== 详情页 ========== -->
<div id="view-detail" class="view">
<div class="detail-page">
<div class="detail-header">
<div style="display:flex;align-items:center;gap:10px">
<button class="btn" onclick="showList()"><i class="ti ti-arrow-left"></i>返回列表</button>
<span class="detail-title">合伙人推广产品详情 <span class="tag tag-green">已上架</span></span>
</div>
<div style="display:flex;gap:8px">
<button class="btn btn-primary" onclick="showModal()"><i class="ti ti-edit"></i>编辑</button>
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn">管理工具</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<!-- 基本信息：左右各7行均衡 -->
<div class="card">
<div class="card-header"><i class="ti ti-info-circle"></i>基本信息</div>
<div class="card-body">
<div class="info-grid">
<div>
<div class="field-row"><span class="field-label">产品分类</span><span class="field-val">异地用工</span></div>
<div class="field-row"><span class="field-label">产品名称</span><span class="field-val">岗位外包</span></div>
<div class="field-row"><span class="field-label">订单类型</span><span class="field-val">企业岗位外包</span></div>
<div class="field-row"><span class="field-label">产品介绍</span><span class="field-val">为企业异地用工提供员工社保、薪酬、个税一站式管理服务，解决异地注册分公司流程繁琐问题。</span></div>
<div class="field-row"><span class="field-label">价格区间</span><span class="field-val">61元/人/月</span></div>
</div>
<div>
<div class="field-row"><span class="field-label">是否主推</span><span class="field-val">是</span></div>
<div class="field-row"><span class="field-label">推广标语</span><span class="field-val">解决异地用工问题</span></div>
<div class="field-row"><span class="field-label">优先级</span><span class="field-val">0</span></div>
<div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-12 16:26:08</span></div>
<div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-23 14:34:12</span></div>
<div class="field-row"><span class="field-label">返佣方式</span><span class="field-val">续费持续返佣</span></div>
</div>
</div>
</div>
</div>
<!-- 对接人 & 业务负责人 -->
<div class="card">
<div class="card-header"><i class="ti ti-users"></i>对接人 &amp; 业务负责人</div>
<div class="card-body">
<div class="info-grid">
<div>
<div class="field-row">
<span class="field-label">对接人</span>
<span class="field-val">
<div class="person-tags">
<span class="person-tag"><i class="ti ti-user" style="font-size:11px"></i>李明</span>
<span class="person-tag"><i class="ti ti-user" style="font-size:11px"></i>赵磊</span>
<span class="person-tag"><i class="ti ti-user" style="font-size:11px"></i>刘婷</span>
</div>
</span>
</div>
</div>
<div>
<div class="field-row">
<span class="field-label">业务负责人</span>
<span class="field-val">李玲玲</span>
</div>
</div>
</div>
</div>
</div>
<!-- 分佣规则 -->
<div class="card">
<div class="card-header"><i class="ti ti-coin"></i>分佣规则配置</div>
<div class="card-body">
<div class="commission-block">
<div class="comm-role-card">
<div class="comm-role-title" style="color:#1677ff"><i class="ti ti-building"></i>渠道管理员分佣规则</div>
<div class="comm-field"><span class="comm-field-label">计算方式</span><span class="comm-field-val">比例</span></div>
<div class="comm-field"><span class="comm-field-label">计算基准</span><span class="comm-field-val">成交额</span></div>
<div class="comm-field"><span class="comm-field-label">比例设置</span><span class="comm-field-val">2%</span></div>
</div>
<div class="comm-role-card">
<div class="comm-role-title" style="color:#389e0d"><i class="ti ti-user-check"></i>对接人分佣规则</div>
<div class="comm-field"><span class="comm-field-label">计算方式</span><span class="comm-field-val">比例</span></div>
<div class="comm-field"><span class="comm-field-label">计算基准</span><span class="comm-field-val">成交额</span></div>
<div class="comm-field"><span class="comm-field-label">比例设置</span><span class="comm-field-val">5%</span></div>
</div>
<div class="comm-role-card">
<div class="comm-role-title" style="color:#d46b08"><i class="ti ti-users"></i>合伙人分佣规则</div>
<div class="comm-field"><span class="comm-field-label">计算方式</span><span class="comm-field-val">比例</span></div>
<div class="comm-field"><span class="comm-field-label">计算基准</span><span class="comm-field-val">成交额</span></div>
<div class="comm-field"><span class="comm-field-label">比例设置</span><span class="comm-field-val">30%</span></div>
</div>
</div>
</div>
</div>
<!-- 产品图文介绍 -->
<div class="card">
<div class="card-header"><i class="ti ti-file-text"></i>产品图文介绍</div>
<div class="card-body">
<div class="richtext-preview" style="color:#bfbfbf">暂无图文内容</div>
</div>
</div>
<!-- 附件 -->
<div class="card">
<div class="card-header"><i class="ti ti-paperclip"></i>落地页 &amp; 海报模板</div>
<div class="card-body">
<div class="attachment-grid">
<div><div class="attachment-item"><i class="ti ti-photo"></i><span>用户落地页</span></div></div>
<div><div class="attachment-item attachment-filled"><i class="ti ti-photo"></i><span>合伙人落地页</span></div></div>
<div><div class="attachment-item"><i class="ti ti-photo"></i><span>对接人海报模板</span></div></div>
<div><div class="attachment-item"><i class="ti ti-photo"></i><span>合伙人海报模板</span></div></div>
</div>
</div>
</div>
<!-- Tabs -->
<div class="card">
<div class="detail-tabs">
<div class="detail-tab active">物料管理</div>
<div class="detail-tab">备注</div>
<div class="detail-tab">操作日志</div>
</div>
<div class="empty-state"><i class="ti ti-inbox"></i>暂无数据</div>
</div>
</div>
</div>
<!-- ========== 新增/编辑弹窗 ========== -->
<div class="modal-overlay" id="modal">
<div class="modal">
<div class="modal-header">
<span class="modal-title">新增合伙人推广产品</span>
<i class="ti ti-x modal-close" onclick="hideModal()"></i>
</div>
<div class="modal-body">
<!-- 基本信息 -->
<div class="form-section">
<div class="form-section-title"><i class="ti ti-info-circle"></i>基本信息</div>
<div class="form-row">
<div class="form-item"><label>产品类型<span class="req">*</span></label>
<select><option value="">请选择</option><option>异地用工</option><option>财税服务</option><option>人事代理</option></select></div>
<div class="form-item"><label>产品名称<span class="req">*</span></label>
<input type="text" placeholder="请输入产品名称"></div>
</div>
<div class="form-row full">
<div class="form-item"><label>产品介绍<span class="req">*</span></label>
<textarea placeholder="请输入产品介绍"></textarea></div>
</div>
<div class="form-row">
<div class="form-item"><label>订单类型<span class="req">*</span></label>
<select><option value="">请选择</option><option>企业岗位外包</option><option>劳务派遣</option></select></div>
<div class="form-item"><label>价格区间<span class="req">*</span></label>
<input type="text" placeholder="如：61元/人/月"></div>
</div>
<div class="form-row">
<div class="form-item"><label>业务负责人<span class="req">*</span></label>
<input type="text" placeholder="请输入"></div>
<div class="form-item"><label>返佣方式<span class="req">*</span></label>
<select><option value="">请选择</option><option>续费持续返佣</option><option>一次性返佣</option></select></div>
</div>
<div class="form-row">
<div class="form-item"><label>推广标语</label>
<input type="text" placeholder="请输入推广标语"></div>
<div class="form-item"><label>是否主推<span class="req">*</span></label>
<select><option>否</option><option>是</option></select></div>
</div>
<div class="form-row">
<div class="form-item"><label>优先级（越小越靠前）</label>
<input type="number" placeholder="0" value="0"></div>
<div class="form-item"></div>
</div>
</div>
<!-- 对接人配置 -->
<div class="form-section">
<div class="form-section-title"><i class="ti ti-users"></i>对接人配置</div>
<div class="form-item">
<label>选择对接人（支持搜索、多选）</label>
<div class="person-search-wrap">
<i class="ti ti-search search-icon"></i>
<input class="person-search-input" type="text" placeholder="搜索员工姓名..." id="personSearch"
oninput="filterPersons(this.value)" onfocus="showDropdown()" onblur="setTimeout(hideDropdown,200)">
</div>
<div class="person-dropdown" id="personDropdown" style="display:none">
<div class="person-option" onclick="togglePerson('李明','cb-lm')"><input type="checkbox" id="cb-lm"><label for="cb-lm" style="cursor:pointer">李明 · 销售部</label></div>
<div class="person-option" onclick="togglePerson('赵磊','cb-zl')"><input type="checkbox" id="cb-zl"><label for="cb-zl" style="cursor:pointer">赵磊 · 销售部</label></div>
<div class="person-option" onclick="togglePerson('刘婷','cb-lt')"><input type="checkbox" id="cb-lt"><label for="cb-lt" style="cursor:pointer">刘婷 · 综合服务部</label></div>
<div class="person-option" onclick="togglePerson('王芳','cb-wf')"><input type="checkbox" id="cb-wf"><label for="cb-wf" style="cursor:pointer">王芳 · 财税部</label></div>
<div class="person-option" onclick="togglePerson('陈晓','cb-cx')"><input type="checkbox" id="cb-cx"><label for="cb-cx" style="cursor:pointer">陈晓 · 人事部</label></div>
</div>
<div class="selected-persons" id="selectedPersons"></div>
</div>
</div>
<!-- 分佣规则 -->
<div class="form-section">
<div class="form-section-title"><i class="ti ti-coin"></i>分佣规则配置</div>
<div class="comm-rule-block">
<div class="comm-rule-header" style="color:#1677ff"><i class="ti ti-building"></i>渠道管理员分佣规则</div>
<div class="comm-rule-body">
<div class="comm-fields-row">
<div class="form-item" style="min-width:130px;max-width:150px">
<label>计算方式<span class="req">*</span></label>
<select onchange="toggleComm('ch',this.value)">
<option value="">请选择</option><option value="ratio">比例</option><option value="fixed">固定金额</option>
</select>
</div>
<div class="form-item" id="ch-base" style="display:none">
<label>佣金计算基准<span class="req">*</span></label>
<select><option value="">请选择</option><option>成交额</option><option>服务费</option><option>利润</option></select>
</div>
<div class="form-item" id="ch-ratio" style="display:none;max-width:120px">
<label>比例设置<span class="req">*</span></label>
<input type="number" placeholder="如：2" style="padding-right:24px">
</div>
<div class="form-item" id="ch-amount" style="display:none;max-width:140px">
<label>金额（元）<span class="req">*</span></label>
<input type="number" placeholder="如：60">
</div>
</div>
</div>
</div>
<div class="comm-rule-block">
<div class="comm-rule-header" style="color:#389e0d"><i class="ti ti-user-check"></i>对接人分佣规则</div>
<div class="comm-rule-body">
<div class="comm-fields-row">
<div class="form-item" style="min-width:130px;max-width:150px">
<label>计算方式<span class="req">*</span></label>
<select onchange="toggleComm('as',this.value)">
<option value="">请选择</option><option value="ratio">比例</option><option value="fixed">固定金额</option>
</select>
</div>
<div class="form-item" id="as-base" style="display:none">
<label>佣金计算基准<span class="req">*</span></label>
<select><option value="">请选择</option><option>成交额</option><option>服务费</option><option>利润</option></select>
</div>
<div class="form-item" id="as-ratio" style="display:none;max-width:120px">
<label>比例设置<span class="req">*</span></label>
<input type="number" placeholder="如：5">
</div>
<div class="form-item" id="as-amount" style="display:none;max-width:140px">
<label>金额（元）<span class="req">*</span></label>
<input type="number" placeholder="如：150">
</div>
</div>
</div>
</div>
<div class="comm-rule-block">
<div class="comm-rule-header" style="color:#d46b08"><i class="ti ti-users"></i>合伙人分佣规则</div>
<div class="comm-rule-body">
<div class="comm-fields-row">
<div class="form-item" style="min-width:130px;max-width:150px">
<label>计算方式<span class="req">*</span></label>
<select onchange="toggleComm('pt',this.value)">
<option value="">请选择</option><option value="ratio">比例</option><option value="fixed">固定金额</option>
</select>
</div>
<div class="form-item" id="pt-base" style="display:none">
<label>佣金计算基准<span class="req">*</span></label>
<select><option value="">请选择</option><option>成交额</option><option>服务费</option><option>利润</option></select>
</div>
<div class="form-item" id="pt-ratio" style="display:none;max-width:120px">
<label>比例设置<span class="req">*</span></label>
<input type="number" placeholder="如：30">
</div>
<div class="form-item" id="pt-amount" style="display:none;max-width:140px">
<label>金额（元）<span class="req">*</span></label>
<input type="number" placeholder="如：300">
</div>
</div>
</div>
</div>
</div>
<!-- 产品图文介绍 -->
<div class="form-section">
<div class="form-section-title"><i class="ti ti-file-text"></i>产品图文介绍</div>
<div class="rich-toolbar">
<button class="rich-btn">正文▾</button>
<button class="rich-btn"><b>B</b></button>
<button class="rich-btn"><u>U</u></button>
<button class="rich-btn"><i>I</i></button>
<button class="rich-btn">A▾</button>
<button class="rich-btn">字号▾</button>
<button class="rich-btn">字体▾</button>
<button class="rich-btn">行高▾</button>
<button class="rich-btn">≡</button>
<button class="rich-btn">有序列表</button>
<button class="rich-btn">对齐▾</button>
<button class="rich-btn">↩</button>
<button class="rich-btn">↪</button>
<button class="rich-btn">表格▾</button>
<button class="rich-btn">🖼 上传图片</button>
<button class="rich-btn">更多▾</button>
</div>
<div class="rich-area" contenteditable="true">请输入内容...</div>
</div>
<!-- 附件上传 -->
<div class="form-section">
<div class="form-section-title"><i class="ti ti-paperclip"></i>落地页 &amp; 海报模板</div>
<div class="upload-grid">
<div>
<div class="upload-box"><i class="ti ti-plus"></i></div>
<div class="upload-label">用户落地页</div>
</div>
<div>
<div class="upload-box"><i class="ti ti-plus"></i></div>
<div class="upload-label">合伙人落地页</div>
</div>
<div>
<div class="upload-box"><i class="ti ti-plus"></i></div>
<div class="upload-label">对接人海报模板</div>
</div>
<div>
<div class="upload-box"><i class="ti ti-plus"></i></div>
<div class="upload-label">合伙人海报模板</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal()">取消</button>
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
<script>
function showList(){ document.getElementById('view-list').classList.add('active'); document.getElementById('view-detail').classList.remove('active'); }
function showDetail(){ document.getElementById('view-detail').classList.add('active'); document.getElementById('view-list').classList.remove('active'); }
function showModal(){ document.getElementById('modal').classList.add('show'); }
function hideModal(){ document.getElementById('modal').classList.remove('show'); }
function toggleComm(prefix, val) {
['base','ratio','amount'].forEach(f => {
const el = document.getElementById(prefix+'-'+f);
if (!el) return;
if (val === 'ratio') el.style.display = f==='amount' ? 'none' : '';
else if (val === 'fixed') el.style.display = f==='amount' ? '' : 'none';
else el.style.display = 'none';
});
}
const selected = new Set();
function togglePerson(name, cbId) {
if (selected.has(name)) selected.delete(name); else selected.add(name);
const cb = document.getElementById(cbId);
if (cb) cb.checked = selected.has(name);
renderSelected();
}
function renderSelected() {
document.getElementById('selectedPersons').innerHTML = [...selected].map(n =>
`<span class="sel-tag"><i class="ti ti-user" style="font-size:10px"></i>${n}<span class="rm" onclick="removePerson('${n}')">✕</span></span>`
).join('');
}
function removePerson(name) { selected.delete(name); renderSelected(); }
function showDropdown(){ document.getElementById('personDropdown').style.display='block'; }
function hideDropdown(){ document.getElementById('personDropdown').style.display='none'; }
function filterPersons(val) {
document.querySelectorAll('#personDropdown .person-option').forEach(o=>{
o.style.display = o.textContent.trim().includes(val) ? '' : 'none';
});
}
document.querySelectorAll('.detail-tab').forEach(t=>{
t.addEventListener('click',()=>{ document.querySelectorAll('.detail-tab').forEach(x=>x.classList.remove('active')); t.classList.add('active'); });
});
document.querySelectorAll('.tab-nav-item').forEach(t=>{
t.addEventListener('click',()=>{ document.querySelectorAll('.tab-nav-item').forEach(x=>x.classList.remove('active')); t.classList.add('active'); });
});
</script>
</body>
</html>
HTML原型/referrer_reward.html deleted 100644 → 0
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>介绍人奖励记录</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
.layout{display:flex;height:100vh;overflow:hidden}
.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
.nav-item:hover{background:#f5f5f5;color:#1677ff}
.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
.page-title{font-size:15px;font-weight:600}
.header-btns{display:flex;gap:8px}
.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 24px;flex-shrink:0}
.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.filter-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
.filter-item label{color:#8c8c8c;font-size:13px}
.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:130px}
.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
.filter-btns{margin-left:auto;display:flex;gap:8px}
.content{padding:16px 24px;flex:1}
.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
.status-tab{padding:8px 16px;font-size:13px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
.summary-bar{background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:8px 14px;font-size:12px;color:#0958d9;margin:10px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.summary-bar .nums{display:flex;gap:24px}
.summary-num{display:flex;flex-direction:column;align-items:center;gap:1px}
.summary-num .val{font-size:18px;font-weight:600;color:#1677ff}
.summary-num .lbl{font-size:11px;color:#8c8c8c}
.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
th{padding:10px 12px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
tbody tr:hover{background:#fafcff}
tbody tr:last-child{border-bottom:none}
td{padding:10px 12px;vertical-align:middle}
.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:#1677ff;color:#1677ff}
.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-primary:hover{background:#0958d9}
.btn-warning{background:#fa8c16;color:#fff;border-color:#fa8c16;font-weight:500}
.btn-warning:hover{background:#d46b08}
.btn-sm{padding:2px 8px;font-size:11px;border-radius:4px}
.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
.btn-link:hover{color:#0958d9}
.tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;border-radius:100px;border:1px solid;white-space:nowrap}
.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
.avatar{width:26px;height:26px;border-radius:50%;background:#1677ff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
/* 弹窗 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:8px;width:420px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden}
.modal-header{padding:14px 18px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:14px;font-weight:600}
.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
.modal-body{padding:16px 18px}
.modal-footer{padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
.info-row{display:flex;font-size:13px;margin-bottom:10px;align-items:center}
.info-label{width:80px;color:#8c8c8c;flex-shrink:0;text-align:right;padding-right:10px}
.warn-box{background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:10px 12px;font-size:12px;color:#cf1322;line-height:1.7;display:flex;gap:6px;margin-top:4px}
</style>
</head>
<body>
<div class="layout">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-group">佣金结算</div>
<div class="nav-item">合伙人佣金结算管理</div>
<div class="nav-item">渠道管理员佣金结算</div>
<div class="nav-item">对接人佣金结算</div>
<div class="nav-item active">介绍人奖励记录</div>
<div class="nav-group">其他</div>
<div class="nav-item">服务商结算</div>
<div class="nav-item">结算服务商付款管理</div>
</div>
<div class="main">
<div class="page-header">
<span class="page-title">介绍人奖励记录</span>
<div class="header-btns">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<!-- 筛选 -->
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>介绍人</label><input type="text" placeholder="搜索姓名"></div>
<div class="filter-item"><label>合伙人</label><input type="text" placeholder="搜索姓名/手机号"></div>
<div class="filter-item"><label>所属客户</label><input type="text" placeholder="搜索企业名称"></div>
<div class="filter-item"><label>触发时间</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="date" style="min-width:120px">
<span style="color:#bfbfbf">至</span>
<input type="date" style="min-width:120px">
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
<button class="btn"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<!-- 状态Tab -->
<div class="status-tabs">
<div class="status-tab" onclick="switchTab(this,'pending')">待发放 (4)</div>
<div class="status-tab" onclick="switchTab(this,'done')">已发放 (6)</div>
<div class="status-tab active" onclick="switchTab(this,'all')">全部 (10)</div>
</div>
<!-- 待发放时显示批量操作栏 -->
<div id="batch-action-bar" style="display:none;padding:10px 0 8px;display:none;align-items:center;justify-content:space-between">
<div style="display:flex;align-items:center;gap:8px">
<input type="checkbox" id="check-all" onchange="toggleAll(this)" style="width:14px;height:14px;accent-color:#1677ff">
<span style="font-size:13px;color:#595959">全选</span>
<span id="sel-tip" style="font-size:12px;color:#fa8c16;font-weight:500;margin-left:8px"></span>
</div>
<button class="btn btn-warning" onclick="openBatchConfirm()">
<i class="ti ti-checks"></i>批量标记已发放
</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th style="width:36px"></th>
<th>介绍人</th>
<th>部门</th>
<th>合伙人</th>
<th>所属客户（首单）</th>
<th>奖励金额</th>
<th>首单触发时间</th>
<th>状态</th>
<th>发放时间</th>
<th>发放备注</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<div class="pagination">
<div style="display:flex;align-items:center;gap:12px">
<span>共 10 条 &nbsp;
<select style="height:26px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px">
<option>20条/页</option><option>50条/页</option>
</select>
</span>
<span id="sel-tip" style="color:#fa8c16;font-size:12px;font-weight:500"></span>
</div>
<div style="display:flex;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 单条发放确认弹窗 -->
<div class="modal-overlay" id="modal-confirm" style="z-index:9999">
<div class="modal">
<div class="modal-header">
<span class="modal-title">确认发放奖励</span>
<i class="ti ti-x modal-close" onclick="hideModal('modal-confirm')"></i>
</div>
<div class="modal-body">
<div class="info-row"><span class="info-label">介绍人</span><span id="m-name" style="font-weight:500">—</span></div>
<div class="info-row"><span class="info-label">合伙人</span><span id="m-partner">—</span></div>
<div class="info-row"><span class="info-label">所属客户</span><span id="m-customer">—</span></div>
<div class="info-row">
<span class="info-label">奖励金额</span>
<span id="m-amount" style="font-size:16px;font-weight:600;color:#d46b08">¥50.00</span>
</div>
<div class="warn-box">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>确认发放后将标记为「已发放」，请确保已完成线下转账后再操作。此操作不可撤销。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal('modal-confirm')">取消</button>
<button class="btn btn-warning" onclick="confirmPay()"><i class="ti ti-check"></i>确认已发放</button>
</div>
</div>
</div>
<!-- 批量发放确认弹窗 -->
<div class="modal-overlay" id="modal-batch" style="z-index:9999">
<div class="modal" style="width:420px">
<div class="modal-header">
<span class="modal-title"><i class="ti ti-checks" style="color:#fa8c16;margin-right:4px"></i>批量标记已发放</span>
<i class="ti ti-x modal-close" onclick="hideModal('modal-batch')"></i>
</div>
<div class="modal-body">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
<div style="background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:24px;font-weight:600;color:#d46b08" id="batch-count">0</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
</div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:24px;font-weight:600;color:#389e0d" id="batch-amount">¥0.00</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">总奖励金额</div>
</div>
</div>
<div style="margin-bottom:14px">
<div style="font-size:12px;color:#595959;margin-bottom:6px">发放时间 <span style="color:#cf1322">*</span></div>
<input type="date" id="batch-pay-date" style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none"
onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
<div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择实际完成线下发放的日期</div>
</div>
<div style="margin-bottom:14px">
<div style="font-size:12px;color:#595959;margin-bottom:6px">发放备注</div>
<input type="text" id="batch-pay-remark" placeholder="如：微信转账、企业转账等（选填）"
style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none"
onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
</div>
<div class="warn-box">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>批量确认后将全部标记为「已发放」，此操作不可撤销。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal('modal-batch')">取消</button>
<button class="btn btn-warning" onclick="confirmBatchPay()"><i class="ti ti-check"></i>确认全部已发放</button>
</div>
</div>
</div>
<script>
var data = [
{ name:'李明', dept:'销售部', partner:'张伟 / 138****5566', customer:'远航科技有限公司', amount:50, triggerTime:'2026-06-05 10:22', status:'done', payTime:'2026-06-06 09:00', remark:'微信转账' },
{ name:'陈晓', dept:'行政部', partner:'王芳 / 139****8822', customer:'启航教育咨询', amount:50, triggerTime:'2026-06-08 14:35', status:'done', payTime:'2026-06-09 10:15', remark:'微信转账' },
{ name:'张美玉', dept:'人事部', partner:'李强 / 136****4411', customer:'锦绣餐饮集团', amount:50, triggerTime:'2026-06-10 09:18', status:'done', payTime:'2026-06-11 11:00', remark:'企业转账' },
{ name:'赵磊', dept:'销售部', partner:'刘敏 / 150****7878', customer:'新桥律师事务所', amount:50, triggerTime:'2026-06-12 16:40', status:'done', payTime:'2026-06-13 09:30', remark:'微信转账' },
{ name:'郭欢', dept:'服务部', partner:'陈涛 / 134****7950', customer:'华盛机构', amount:50, triggerTime:'2026-06-15 11:05', status:'done', payTime:'2026-06-16 10:00', remark:'微信转账' },
{ name:'刘婷', dept:'综合部', partner:'周磊 / 151****2216', customer:'某某科技有限公司', amount:50, triggerTime:'2026-06-18 15:22', status:'done', payTime:'2026-06-19 09:45', remark:'微信转账' },
{ name:'王芳', dept:'财税部', partner:'孙杰 / 136****8541', customer:'蓝海投资管理公司', amount:50, triggerTime:'2026-06-20 10:10', status:'pending', payTime:'—', remark:'—' },
{ name:'李鹏飞', dept:'销售部', partner:'赵琳 / 151****2215', customer:'中兴建材集团', amount:50, triggerTime:'2026-06-21 13:30', status:'pending', payTime:'—', remark:'—' },
{ name:'赛晓丽', dept:'渠道部', partner:'吴伟 / 137****3269', customer:'顺达物流有限公司', amount:50, triggerTime:'2026-06-22 09:55', status:'pending', payTime:'—', remark:'—' },
{ name:'张情', dept:'市场部', partner:'黄磊 / 166****8880', customer:'云端科技股份公司', amount:50, triggerTime:'2026-06-23 14:48', status:'pending', payTime:'—', remark:'—' },
];
var currentFilter = 'all';
var confirmIdx = -1;
function avatarColor(name) {
var colors = ['#1677ff','#389e0d','#d46b08','#531dab','#cf1322','#085041'];
var h = 0;
for (var i = 0; i < name.length; i++) h += name.charCodeAt(i);
return colors[h % colors.length];
}
function nowTs() {
var n = new Date();
return n.getFullYear() + '-'
+ String(n.getMonth()+1).padStart(2,'0') + '-'
+ String(n.getDate()).padStart(2,'0') + ' '
+ String(n.getHours()).padStart(2,'0') + ':'
+ String(n.getMinutes()).padStart(2,'0');
}
function isPending() { return currentFilter === 'pending'; }
function render(filter) {
currentFilter = filter;
var list = filter === 'all' ? data : data.filter(function(d){ return d.status === filter; });
var showCb = filter === 'pending';
var bar = document.getElementById('batch-action-bar');
var checkAll = document.getElementById('check-all');
bar.style.display = showCb ? 'flex' : 'none';
if (checkAll) checkAll.checked = false;
document.getElementById('sel-tip').textContent = '';
var tbody = document.getElementById('table-body');
tbody.innerHTML = list.map(function(d) {
var idx = data.indexOf(d);
var cbCell = showCb
? '<td style="text-align:center"><input type="checkbox" class="row-cb" data-idx="' + idx + '" onchange="updateSel()"></td>'
: '<td></td>';
return '<tr>'
+ cbCell
+ '<td><div style="display:flex;align-items:center;gap:8px"><div class="avatar" style="background:' + avatarColor(d.name) + '">' + d.name[0] + '</div><span style="font-weight:500">' + d.name + '</span></div></td>'
+ '<td style="color:#8c8c8c">' + d.dept + '</td>'
+ '<td>' + d.partner + '</td>'
+ '<td style="font-weight:500">' + d.customer + '</td>'
+ '<td style="font-size:14px;font-weight:600;color:#d46b08">¥' + d.amount + '.00</td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.triggerTime + '</td>'
+ '<td>' + (d.status === 'done'
? '<span class="tag tag-green"><i class="ti ti-check" style="font-size:10px"></i>已发放</span>'
: '<span class="tag tag-orange">待发放</span>') + '</td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.payTime + '</td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.remark + '</td>'
+ '<td>' + (d.status === 'pending'
? '<button class="btn btn-warning btn-sm" onclick="openConfirm(' + idx + ')"><i class="ti ti-coin"></i>标记已发放</button>'
: '<span style="color:#bfbfbf;font-size:12px">—</span>') + '</td>'
+ '</tr>';
}).join('');
}
function updateSel() {
var cbs = document.querySelectorAll('.row-cb:checked');
var total = 0;
cbs.forEach(function(cb) { total += data[parseInt(cb.dataset.idx)].amount; });
var tip = document.getElementById('sel-tip');
tip.textContent = cbs.length > 0 ? '已选 ' + cbs.length + ' 条，合计 ¥' + total.toFixed(2) : '';
}
function toggleAll(master) {
document.querySelectorAll('.row-cb').forEach(function(cb) { cb.checked = master.checked; });
updateSel();
}
function switchTab(el, filter) {
document.querySelectorAll('.status-tab').forEach(function(t) { t.classList.remove('active'); });
el.classList.add('active');
render(filter);
}
function openConfirm(idx) {
confirmIdx = idx;
var d = data[idx];
document.getElementById('m-name').textContent = d.name + '（' + d.dept + '）';
document.getElementById('m-partner').textContent = d.partner;
document.getElementById('m-customer').textContent = d.customer;
document.getElementById('m-amount').textContent = '¥' + d.amount + '.00';
document.getElementById('modal-confirm').classList.add('show');
}
function openBatchConfirm() {
var cbs = document.querySelectorAll('.row-cb:checked');
if (cbs.length === 0) { alert('请先勾选需要发放的记录'); return; }
var total = 0;
cbs.forEach(function(cb) { total += data[parseInt(cb.dataset.idx)].amount; });
document.getElementById('batch-count').textContent = cbs.length;
document.getElementById('batch-amount').textContent = '¥' + total.toFixed(2);
document.getElementById('batch-pay-date').value = '';
document.getElementById('batch-pay-date').style.borderColor = '#d9d9d9';
document.getElementById('batch-pay-remark').value = '';
document.getElementById('modal-batch').classList.add('show');
}
function hideModal(id) { document.getElementById(id).classList.remove('show'); }
function confirmPay() {
if (confirmIdx >= 0) {
var ts = nowTs();
data[confirmIdx].status = 'done';
data[confirmIdx].payTime = ts;
data[confirmIdx].remark = '线下发放';
}
hideModal('modal-confirm');
render(currentFilter);
}
function confirmBatchPay() {
var dateVal = document.getElementById('batch-pay-date').value;
if (!dateVal) {
document.getElementById('batch-pay-date').style.borderColor = '#ff4d4f';
document.getElementById('batch-pay-date').focus();
return;
}
var cbs = document.querySelectorAll('.row-cb:checked');
var remarkVal = document.getElementById('batch-pay-remark').value.trim() || '线下批量发放';
cbs.forEach(function(cb) {
var d = data[parseInt(cb.dataset.idx)];
d.status = 'done';
d.payTime = dateVal;
d.remark = remarkVal;
});
hideModal('modal-batch');
render(currentFilter);
}
render('all');
</script>
</body>
</html>
后台HTML原型/亲亲创客管理/产品管理.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
.layout{display:flex;height:100vh}
/* 侧边栏 */
.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;line-height:1.4}
.nav-item:hover{background:#f5f5f5;color:#1677ff}
.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
/* 主区 */
.main{flex:1;display:flex;flex-direction:column;min-height:0}
.page{display:none;flex:1;flex-direction:column;overflow-y:auto;background:#f0f2f5}.page.active{display:flex}
/* 通用 */
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:#1677ff;color:#1677ff}
.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-primary:hover{background:#0958d9}
.btn-sm{padding:3px 9px;font-size:11px}
.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
.btn-link+.btn-link{margin-left:8px}
.btn-danger{border-color:#ffa39e;color:#cf1322}
.btn-danger:hover{background:#fff1f0}
/* 页面头 */
.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
.page-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.header-btns{display:flex;gap:8px}
/* brand tabs */
.brand-tabs{display:flex;gap:0;padding:0 20px;background:#fff;border-bottom:1px solid #e8e8e8;flex-shrink:0}
.brand-tab{padding:10px 16px;font-size:13px;font-weight:500;cursor:pointer;color:#8c8c8c;border-bottom:2px solid transparent;margin-bottom:-1px}
.brand-tab.active{color:#1677ff;border-bottom-color:#1677ff}
/* 筛选 */
.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 20px;flex-shrink:0}
.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.filter-item{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.filter-item label{color:#8c8c8c;flex-shrink:0}
.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:120px}
.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
.filter-btns{margin-left:auto;display:flex;gap:8px}
/* 内容 */
.content{padding:16px 20px;flex:1;overflow-y:auto}
/* 表格 */
.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
tbody tr:hover{background:#fafcff}
tbody tr:last-child{border-bottom:none}
td{padding:9px 10px;vertical-align:middle;line-height:1.4}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
.page-size-select{height:26px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;outline:none;background:#fff}
/* 标签 */
.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
.tag-cyan{background:#e6fffb;color:#08979c;border-color:#87e8de}
.muted{color:#bfbfbf;font-size:11px}
/* 分佣规则 */
.rule-cell{font-size:11px;line-height:1.7;color:#595959}
.rule-row{display:flex;gap:4px}
.rule-who{color:#8c8c8c;width:42px;flex-shrink:0}
/* 对接人标签 */
.person-tag{display:inline-flex;align-items:center;gap:3px;background:#e8f4ff;color:#1677ff;border:1px solid #91caff;padding:1px 7px;border-radius:100px;font-size:11px;margin:1px 2px}
/* ── 产品详情页 ── */
.detail-page{background:#fff}
.detail-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
.section-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:12px}
.section-title{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:6px;color:#1a1a1a}
.section-body{padding:14px 16px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.info-row{display:flex;padding:6px 0;font-size:13px;align-items:flex-start}
.info-label{width:88px;flex-shrink:0;color:#8c8c8c;text-align:right;padding-right:12px}
.info-val{flex:1;color:#1a1a1a;line-height:1.5}
/* 三栏分佣 */
.rule-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.rule-block{background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:12px 14px}
.rule-block-title{font-size:12px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f0f0}
.rule-block-title.channel{color:#1677ff}
.rule-block-title.assignee{color:#389e0d}
.rule-block-title.partner{color:#d46b08}
.rule-detail-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:#595959}
.rule-detail-val{color:#1a1a1a;font-weight:500}
/* 落地页上传区 */
.upload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.upload-box{border:1.5px dashed #d9d9d9;border-radius:8px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .15s;background:#fafafa}
.upload-box:hover{border-color:#1677ff;background:#f0f7ff}
.upload-box .ti{font-size:22px;color:#d9d9d9}
.upload-box:hover .ti{color:#1677ff}
.upload-label{font-size:11px;color:#8c8c8c;margin-top:4px}
/* 物料tabs */
.tab-bar2{display:flex;gap:0;border-bottom:1px solid #e8e8e8;padding:0 0 0 0;margin:0}
.tab2{padding:8px 14px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab2.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
/* ── 新增产品页 ── */
.add-page{background:#fff}
.add-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;height:50px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.add-body{flex:1;overflow-y:auto;padding:20px}
.add-section{margin-bottom:24px}
.add-section-title{font-size:13px;font-weight:600;color:#1677ff;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:6px}
.add-section-title.green{color:#389e0d}
.add-section-title.orange{color:#d46b08}
.add-section-title.black{color:#1a1a1a}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-row-3{grid-template-columns:160px 1fr 160px}
.form-row-1{grid-template-columns:1fr}
.form-item{display:flex;flex-direction:column;gap:4px}
.form-item label{font-size:12px;color:#595959;display:flex;align-items:center;gap:2px}
.req{color:#cf1322}
.form-item input,.form-item select,.form-item textarea{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
.form-item input:focus,.form-item select:focus{border-color:#1677ff;box-shadow:0 0 0 2px rgba(22,119,255,.1)}
.form-item textarea{height:76px;padding:7px 10px;resize:vertical}
.form-hint{font-size:11px;color:#bfbfbf;margin-top:2px}
.rule-sub-card{border:1px solid #f0f0f0;border-radius:6px;padding:12px 14px;margin-bottom:10px;background:#fafafa}
.rule-sub-title{font-size:12px;font-weight:500;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #f0f0f0}
/* 富文本工具栏 */
.rte-toolbar{border:1px solid #d9d9d9;border-bottom:none;border-radius:6px 6px 0 0;padding:6px 10px;background:#fafafa;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.rte-btn{padding:2px 7px;border:1px solid transparent;border-radius:3px;font-size:12px;cursor:pointer;color:#595959;background:none}
.rte-btn:hover{background:#e8e8e8;border-color:#d9d9d9}
.rte-sep{width:1px;height:14px;background:#d9d9d9;margin:0 3px}
.rte-body{border:1px solid #d9d9d9;border-radius:0 0 6px 6px;min-height:100px;padding:10px;font-size:13px;color:#bfbfbf;cursor:text}
/* 上传区(新增) */
.upload-grid-add{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.upload-box-add{border:1.5px dashed #d9d9d9;border-radius:6px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;background:#f5f8ff;transition:all .15s}
.upload-box-add:hover{border-color:#1677ff}
.upload-box-add .ti{font-size:20px;color:#91caff}
.upload-box-add-label{font-size:11px;color:#8c8c8c;text-align:center;padding:0 6px}
.add-footer{background:#fff;border-top:1px solid #e8e8e8;padding:10px 20px;display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
/* 状态筛选tab */
.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
.status-tab{padding:7px 14px;font-size:12px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
</style>
</head>
<body>
<div class="layout">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-group">产品管理</div>
<div class="nav-item active" id="nav-category" onclick="showPage('category',this)">产品分类</div>
<div class="nav-item" id="nav-product" onclick="showPage('product',this)">产品管理列表</div>
<div class="nav-group">合伙人管理</div>
<div class="nav-item">合伙人申请审核列表</div>
<div class="nav-item">合伙人管理列表</div>
<div class="nav-group">商机管理</div>
<div class="nav-item">商机管理列表</div>
<div class="nav-item">对接人分配表</div>
<div class="nav-group">佣金结算</div>
<div class="nav-item">合伙人佣金结算</div>
<div class="nav-item">渠道管理员佣金结算</div>
<div class="nav-item">对接人佣金结算</div>
<div class="nav-item">介绍人奖励金列表</div>
</div>
<div class="main">
<!-- ═══════════════════════════════════════════
1. 产品分类管理
═══════════════════════════════════════════ -->
<div id="page-category" class="page active">
<div class="page-header">
<span class="page-title">产品分类管理</span>
<div class="header-btns">
<button class="btn btn-primary btn-sm" onclick="openAddCategory()"><i class="ti ti-plus"></i>新增产品分类</button>
<button class="btn btn-sm"><i class="ti ti-category"></i>产品大类管理</button>
<button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
<button class="btn btn-sm">视图管理</button>
<button class="btn btn-sm">超管工具</button>
<button class="btn btn-sm"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item">
<label>产品大类</label>
<select style="min-width:160px">
<option value="">请选择（可搜索）</option>
<option>用工合规</option><option>法财税+</option>
<option>人才发展</option><option>员工关怀</option>
</select>
</div>
<div class="filter-item">
<label>产品分类</label>
<div style="display:flex">
<input type="text" placeholder="请输入内容" style="border-radius:6px 0 0 6px;border-right:none;min-width:140px">
<button class="btn btn-sm" style="border-radius:0 6px 6px 0;height:30px">精确</button>
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary btn-sm"><i class="ti ti-search"></i>查询</button>
<button class="btn btn-sm"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="brand-tabs" style="border-top:1px solid #f0f0f0">
<div class="brand-tab active" onclick="switchCatTab(this)">亲亲企服(19)</div>
<div class="brand-tab" onclick="switchCatTab(this)">亲亲小保(4)</div>
</div>
<div class="content">
<div class="table-card">
<table>
<thead><tr>
<th>id</th><th>产品大类</th><th>产品分类名称</th><th>状态</th><th>包含产品数量</th><th>操作</th>
</tr></thead>
<tbody>
<tr><td>22</td><td>人才发展</td><td>智能工资条</td><td><span class="tag tag-green">正常</span></td><td>1</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>19</td><td>用工合规</td><td>测试名称</td><td><span class="tag tag-gray">已删除</span></td><td>0</td><td><button class="btn-link">编辑</button></td></tr>
<tr><td>10</td><td>法财税+</td><td>工商服务</td><td><span class="tag tag-green">正常</span></td><td>2</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>8</td><td>人才发展</td><td>AI数字员工</td><td><span class="tag tag-green">正常</span></td><td>0</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>6</td><td>员工关怀</td><td>企业员工福利</td><td><span class="tag tag-green">正常</span></td><td>0</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>1</td><td>用工合规</td><td>异地用工</td><td><span class="tag tag-green">正常</span></td><td>5</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>3</td><td>用工合规</td><td>人事代理</td><td><span class="tag tag-green">正常</span></td><td>1</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>11</td><td>法财税+</td><td>财税服务</td><td><span class="tag tag-green">正常</span></td><td>2</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>9</td><td>人才发展</td><td>人才招聘</td><td><span class="tag tag-green">正常</span></td><td>0</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
<tr><td>7</td><td>员工关怀</td><td>员工健康&amp;保障</td><td><span class="tag tag-green">正常</span></td><td>0</td><td><button class="btn-link btn-danger" style="color:#cf1322">删除</button><button class="btn-link" style="margin-left:8px">编辑</button></td></tr>
</tbody>
</table>
<div class="pagination">
<span>共 19 条</span>
<div style="display:flex;align-items:center;gap:6px">
<select class="page-size-select"><option>10条/页</option><option>20条/页</option></select>
<div class="page-btn"><i class="ti ti-chevron-left" style="font-size:11px"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn">2</div>
<div class="page-btn"><i class="ti ti-chevron-right" style="font-size:11px"></i></div>
<span style="display:flex;align-items:center;gap:4px">前往 <input type="number" value="1" style="width:40px;height:26px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;text-align:center;outline:none"> 页</span>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════
2. 产品目录管理列表
═══════════════════════════════════════════ -->
<div id="page-product" class="page">
<div class="page-header">
<span class="page-title">产品目录管理</span>
<div class="header-btns">
<button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
<button class="btn btn-sm">超管工具</button>
<button class="btn btn-sm"><i class="ti ti-share"></i>分享</button>
<button class="btn btn-primary btn-sm" onclick="showPage('add',document.getElementById('nav-product'))"><i class="ti ti-plus"></i>新增合伙人推广产品</button>
</div>
</div>
<div class="brand-tabs">
<div class="brand-tab active" onclick="switchProdTab(this,'qiqi-ent')">亲亲企服(13)</div>
<div class="brand-tab" onclick="switchProdTab(this,'qiqi-ind')">亲亲小保(5)</div>
</div>
<div class="content" style="padding-top:12px">
<div class="table-card">
<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>
<th>操作</th>
</tr></thead>
<tbody id="prod-tbody">
</tbody>
</table>
<div class="pagination">
<span id="prod-count">共 13 条</span>
<div style="display:flex;align-items:center;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left" style="font-size:11px"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right" style="font-size:11px"></i></div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════
3. 新增合伙人推广产品
═══════════════════════════════════════════ -->
<div id="page-add" class="page">
<div class="add-header">
<div class="page-title">
<button class="btn btn-sm" onclick="showPage('product',document.getElementById('nav-product'))"><i class="ti ti-arrow-left"></i>返回列表</button>
新增合伙人推广产品
</div>
</div>
<div class="add-body">
<!-- 基本信息 -->
<div class="add-section">
<div class="add-section-title black"><i class="ti ti-info-circle" style="color:#1677ff"></i>基本信息</div>
<div class="form-row">
<div class="form-item">
<label>产品类型<span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>用工合规 / 异地用工</option><option>用工合规 / 人事代理</option>
<option>法财税+ / 财税服务</option><option>法财税+ / 工商服务</option>
<option>人才发展 / 智能工资条</option><option>人才发展 / AI数字员工</option>
<option>员工关怀 / 企业员工福利</option>
</select>
</div>
<div class="form-item">
<label>产品名称<span class="req">*</span></label>
<input type="text" placeholder="请输入产品名称">
</div>
</div>
<div class="form-row form-row-1">
<div class="form-item">
<label>产品介绍<span class="req">*</span></label>
<textarea placeholder="请输入产品介绍"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>订单类型<span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>企业岗位外包</option><option>企业社保公积金代理</option>
<option>个体工商户注册托管</option><option>个人社保代理</option>
<option>专项业务</option>
</select>
</div>
<div class="form-item">
<label>价格区间<span class="req">*</span></label>
<input type="text" placeholder="如：61元/人/月">
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>业务负责人<span class="req">*</span></label>
<input type="text" placeholder="请输入">
</div>
<div class="form-item">
<label>返佣方式<span class="req">*</span></label>
<select>
<option value="">选择</option>
<option>续费持续返佣</option>
<option>一次性返佣</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-item">
<label>推广标语</label>
<input type="text" placeholder="请输入推广标语">
</div>
<div class="form-item">
<label>是否主推<span class="req">*</span></label>
<select>
<option>否</option>
<option>是</option>
</select>
</div>
</div>
<div class="form-row form-row-1">
<div class="form-item" style="max-width:280px">
<label>优先级（越小越靠前）</label>
<input type="number" value="0" style="max-width:200px">
</div>
</div>
</div>
<!-- 对接人配置 -->
<div class="add-section">
<div class="add-section-title black"><i class="ti ti-users" style="color:#1677ff"></i>对接人配置</div>
<div class="form-item">
<label>选择对接人（支持搜索、多选）</label>
<input type="text" placeholder="搜索员工姓名..." style="max-width:600px">
<div class="form-hint">支持搜索、多选</div>
</div>
</div>
<!-- 分佣规则配置 -->
<div class="add-section">
<div class="add-section-title black"><i class="ti ti-coin" style="color:#1677ff"></i>分佣规则配置</div>
<!-- 渠道管理员 -->
<div class="rule-sub-card">
<div class="rule-sub-title" style="color:#1677ff"><i class="ti ti-checkbox"></i> 渠道管理员分佣规则</div>
<div class="form-row form-row-3">
<div class="form-item">
<label>计算方式<span class="req">*</span></label>
<select id="ch-method" onchange="updateRuleFields('ch')">
<option value="ratio">比例</option>
<option value="fixed">固定金额</option>
</select>
</div>
<div class="form-item" id="ch-basis-wrap">
<label>佣金计算基准<span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>成交额</option><option>利润</option><option>服务费</option>
</select>
</div>
<div class="form-item" id="ch-ratio-wrap">
<label>比例设置<span class="req">*</span></label>
<input type="number" placeholder="如：2">
</div>
<div class="form-item" id="ch-amount-wrap" style="display:none">
<label>金额（元）<span class="req">*</span></label>
<input type="number" placeholder="如：60">
</div>
</div>
</div>
<!-- 对接人 -->
<div class="rule-sub-card">
<div class="rule-sub-title" style="color:#389e0d"><i class="ti ti-checkbox"></i> 对接人分佣规则</div>
<div class="form-row form-row-3">
<div class="form-item">
<label>计算方式<span class="req">*</span></label>
<select id="as-method" onchange="updateRuleFields('as')">
<option value="ratio">比例</option>
<option value="fixed">固定金额</option>
</select>
</div>
<div class="form-item" id="as-basis-wrap">
<label>佣金计算基准<span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>成交额</option><option>利润</option><option>服务费</option>
</select>
</div>
<div class="form-item" id="as-ratio-wrap">
<label>比例设置<span class="req">*</span></label>
<input type="number" placeholder="如：5">
</div>
<div class="form-item" id="as-amount-wrap" style="display:none">
<label>金额（元）<span class="req">*</span></label>
<input type="number" placeholder="如：150">
</div>
</div>
</div>
<!-- 合伙人 -->
<div class="rule-sub-card">
<div class="rule-sub-title" style="color:#d46b08"><i class="ti ti-checkbox"></i> 合伙人分佣规则</div>
<div class="form-row form-row-3">
<div class="form-item">
<label>计算方式<span class="req">*</span></label>
<select id="pt-method" onchange="updateRuleFields('pt')">
<option value="ratio">比例</option>
<option value="fixed">固定金额</option>
</select>
</div>
<div class="form-item" id="pt-basis-wrap">
<label>佣金计算基准<span class="req">*</span></label>
<select>
<option value="">请选择</option>
<option>成交额</option><option>利润</option><option>服务费</option>
</select>
</div>
<div class="form-item" id="pt-ratio-wrap">
<label>比例设置<span class="req">*</span></label>
<input type="number" placeholder="如：30">
</div>
<div class="form-item" id="pt-amount-wrap" style="display:none">
<label>金额（元）<span class="req">*</span></label>
<input type="number" placeholder="如：300">
</div>
</div>
</div>
</div>
<!-- 产品图文介绍 -->
<div class="add-section">
<div class="add-section-title black"><i class="ti ti-photo" style="color:#1677ff"></i>产品图文介绍</div>
<div class="rte-toolbar">
<span class="rte-btn" style="font-size:12px">正文 ▾</span><div class="rte-sep"></div>
<span class="rte-btn"><b>B</b></span>
<span class="rte-btn"><u>U</u></span>
<span class="rte-btn"><i>I</i></span>
<span class="rte-btn">A▾</span>
<div class="rte-sep"></div>
<span class="rte-btn">字号 ▾</span>
<span class="rte-btn">字体 ▾</span>
<span class="rte-btn">行高 ▾</span>
<div class="rte-sep"></div>
<span class="rte-btn"><i class="ti ti-list"></i></span>
<span class="rte-btn">有序列表</span>
<span class="rte-btn">对齐 ▾</span>
<div class="rte-sep"></div>
<span class="rte-btn"><i class="ti ti-link"></i></span>
<span class="rte-btn"><i class="ti ti-table"></i> 表格 ▾</span>
<span class="rte-btn"><i class="ti ti-photo"></i> 上传图片</span>
<span class="rte-btn">更多 ▾</span>
</div>
<div class="rte-body">请输入内容...</div>
</div>
<!-- 落地页 & 海报模板 -->
<div class="add-section">
<div class="add-section-title black"><i class="ti ti-layout" style="color:#1677ff"></i>落地页 &amp; 海报模板</div>
<div class="upload-grid-add">
<div class="upload-box-add">
<i class="ti ti-plus" style="font-size:22px;color:#91caff"></i>
<div class="upload-box-add-label">用户落地页</div>
</div>
<div class="upload-box-add">
<i class="ti ti-plus" style="font-size:22px;color:#91caff"></i>
<div class="upload-box-add-label">合伙人落地页</div>
</div>
<div class="upload-box-add">
<i class="ti ti-plus" style="font-size:22px;color:#91caff"></i>
<div class="upload-box-add-label">对接人海报模板</div>
</div>
<div class="upload-box-add">
<i class="ti ti-plus" style="font-size:22px;color:#91caff"></i>
<div class="upload-box-add-label">合伙人海报模板</div>
</div>
</div>
</div>
<!-- 高级折叠 -->
<div style="margin-bottom:20px">
<button class="btn-link" style="color:#8c8c8c;font-size:12px">高级 <i class="ti ti-chevron-down" style="font-size:11px"></i></button>
</div>
</div>
<div class="add-footer">
<button class="btn" onclick="showPage('product',document.getElementById('nav-product'))">取消</button>
<button class="btn btn-primary"><i class="ti ti-check"></i>确定</button>
</div>
</div>
<!-- ═══════════════════════════════════════════
4. 产品详情
═══════════════════════════════════════════ -->
<div id="page-detail" class="page">
<div class="detail-header">
<div class="page-title">
<button class="btn btn-sm" onclick="showPage('product',document.getElementById('nav-product'))"><i class="ti ti-arrow-left"></i>返回列表</button>
合伙人推广产品详情
<span class="tag tag-green" style="font-size:11px">已上架</span>
</div>
<div class="header-btns">
<button class="btn btn-primary btn-sm" onclick="showPage('add',document.getElementById('nav-product'))"><i class="ti ti-pencil"></i>编辑</button>
<button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
<button class="btn btn-sm">管理工具</button>
<button class="btn btn-sm"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div style="flex:1;overflow-y:auto;padding:16px 20px;background:#f0f2f5">
<!-- 基本信息 -->
<div class="section-card">
<div class="section-title"><i class="ti ti-info-circle" style="color:#1677ff"></i>基本信息</div>
<div class="section-body">
<div class="info-grid">
<div>
<div class="info-row"><span class="info-label">产品分类</span><span class="info-val">异地用工</span></div>
<div class="info-row"><span class="info-label">产品名称</span><span class="info-val" style="font-weight:500">岗位外包</span></div>
<div class="info-row"><span class="info-label">订单类型</span><span class="info-val" style="color:#1677ff">企业岗位外包</span></div>
<div class="info-row"><span class="info-label">产品介绍</span><span class="info-val" style="color:#595959;line-height:1.6">为企业异地用工提供员工社保、薪酬、个税一站式管理服务，解决异地注册分公司流程繁琐问题。</span></div>
<div class="info-row"><span class="info-label">价格区间</span><span class="info-val">61元/人/月</span></div>
</div>
<div>
<div class="info-row"><span class="info-label">是否主推</span><span class="info-val">是</span></div>
<div class="info-row"><span class="info-label">推广标语</span><span class="info-val">解决异地用工问题</span></div>
<div class="info-row"><span class="info-label">优先级</span><span class="info-val">0</span></div>
<div class="info-row"><span class="info-label">返佣方式</span><span class="info-val">续费持续返佣</span></div>
<div class="info-row"><span class="info-label">创建时间</span><span class="info-val" style="color:#8c8c8c">2026-06-12 16:26:08</span></div>
<div class="info-row"><span class="info-label">修改时间</span><span class="info-val" style="color:#8c8c8c">2026-06-23 14:34:12</span></div>
</div>
</div>
</div>
</div>
<!-- 对接人 & 业务负责人 -->
<div class="section-card">
<div class="section-title"><i class="ti ti-users" style="color:#1677ff"></i>对接人 &amp; 业务负责人</div>
<div class="section-body">
<div style="display:flex;align-items:flex-start;gap:60px">
<div style="display:flex;align-items:center;gap:8px;font-size:13px">
<span style="color:#8c8c8c;width:56px;text-align:right">对接人</span>
<span class="person-tag"><i class="ti ti-checkbox" style="font-size:11px"></i>李明</span>
<span class="person-tag"><i class="ti ti-checkbox" style="font-size:11px"></i>赵磊</span>
<span class="person-tag"><i class="ti ti-checkbox" style="font-size:11px"></i>刘婷</span>
</div>
<div style="display:flex;align-items:center;gap:8px;font-size:13px">
<span style="color:#8c8c8c">业务负责人</span>
<span>李玲玲</span>
</div>
</div>
</div>
</div>
<!-- 分佣规则配置 -->
<div class="section-card">
<div class="section-title"><i class="ti ti-coin" style="color:#1677ff"></i>分佣规则配置</div>
<div class="section-body">
<div class="rule-3col">
<div class="rule-block">
<div class="rule-block-title channel"><i class="ti ti-checkbox"></i> 渠道管理员分佣规则</div>
<div class="rule-detail-row"><span>计算方式</span><span class="rule-detail-val">比例</span></div>
<div class="rule-detail-row"><span>计算基准</span><span class="rule-detail-val">成交额</span></div>
<div class="rule-detail-row"><span>比例设置</span><span class="rule-detail-val">2%</span></div>
</div>
<div class="rule-block">
<div class="rule-block-title assignee"><i class="ti ti-checkbox"></i> 对接人分佣规则</div>
<div class="rule-detail-row"><span>计算方式</span><span class="rule-detail-val">比例</span></div>
<div class="rule-detail-row"><span>计算基准</span><span class="rule-detail-val">成交额</span></div>
<div class="rule-detail-row"><span>比例设置</span><span class="rule-detail-val">5%</span></div>
</div>
<div class="rule-block">
<div class="rule-block-title partner"><i class="ti ti-checkbox"></i> 合伙人分佣规则</div>
<div class="rule-detail-row"><span>计算方式</span><span class="rule-detail-val">比例</span></div>
<div class="rule-detail-row"><span>计算基准</span><span class="rule-detail-val">成交额</span></div>
<div class="rule-detail-row"><span>比例设置</span><span class="rule-detail-val">30%</span></div>
</div>
</div>
</div>
</div>
<!-- 产品图文介绍 -->
<div class="section-card">
<div class="section-title"><i class="ti ti-photo" style="color:#1677ff"></i>产品图文介绍</div>
<div class="section-body" style="min-height:60px;color:#bfbfbf;font-size:13px">暂无图文内容</div>
</div>
<!-- 落地页 & 海报模板 -->
<div class="section-card">
<div class="section-title"><i class="ti ti-layout" style="color:#1677ff"></i>落地页 &amp; 海报模板</div>
<div class="section-body">
<div class="upload-grid">
<div class="upload-box">
<i class="ti ti-file-type-html"></i>
<div class="upload-label">用户落地页</div>
</div>
<div class="upload-box">
<i class="ti ti-file-type-html"></i>
<div class="upload-label">合伙人落地页</div>
</div>
<div class="upload-box">
<i class="ti ti-photo"></i>
<div class="upload-label">对接人海报模板</div>
</div>
<div class="upload-box">
<i class="ti ti-photo"></i>
<div class="upload-label">合伙人海报模板</div>
</div>
</div>
</div>
</div>
<!-- 物料管理 Tabs -->
<div class="section-card">
<div class="tab-bar2" style="padding:0 14px">
<div class="tab2 active" onclick="switchDetailTab(this,'mat')">物料管理</div>
<div class="tab2" onclick="switchDetailTab(this,'note')">备注</div>
<div class="tab2" onclick="switchDetailTab(this,'log')">操作日志</div>
</div>
<div id="detail-tab-mat" style="padding:14px 16px">
<div style="display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px">
<button class="btn btn-primary btn-sm"><i class="ti ti-plus"></i>添加物料</button>
<button class="btn btn-sm">权限配置</button>
<button class="btn btn-sm">模型分析</button>
<button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
</div>
<table>
<thead><tr><th>物料分类</th><th>内容类型</th><th>内容</th><th>使用场景</th><th>状态</th></tr></thead>
<tbody><tr><td colspan="5" style="text-align:center;color:#bfbfbf;padding:30px 0">暂无数据</td></tr></tbody>
</table>
</div>
<div id="detail-tab-note" style="display:none;padding:14px 16px;color:#bfbfbf;text-align:center;padding:30px">暂无备注</div>
<div id="detail-tab-log" style="display:none;padding:14px 16px;color:#bfbfbf;text-align:center;padding:30px">暂无操作日志</div>
</div>
</div>
</div>
</div><!-- /main -->
</div><!-- /layout -->
<script>
/* ===== 页面切换 ===== */
function showPage(key, navEl) {
document.querySelectorAll('.page').forEach(function(p){ p.classList.remove('active'); });
document.getElementById('page-' + key).classList.add('active');
document.querySelectorAll('.nav-item').forEach(function(n){ n.classList.remove('active'); });
if (navEl) navEl.classList.add('active');
if (key === 'product') renderProducts();
}
function switchCatTab(el) {
document.querySelectorAll('#page-category .brand-tab').forEach(function(t){ t.classList.remove('active'); });
el.classList.add('active');
}
function switchProdTab(el) {
document.querySelectorAll('#page-product .brand-tab').forEach(function(t){ t.classList.remove('active'); });
el.classList.add('active');
renderProducts();
}
function switchDetailTab(el, key) {
document.querySelectorAll('.tab2').forEach(function(t){ t.classList.remove('active'); });
el.classList.add('active');
['mat','note','log'].forEach(function(k){ document.getElementById('detail-tab-'+k).style.display = k===key?'':'none'; });
}
/* ===== 产品数据 ===== */
var PRODUCTS = [
{ cat:'异地用工', name:'岗位外包', owner:'李玲玲', assignees:['李明','赵磊'], rel:'—', price:'61元/人/月',
rules:['渠道：比例 2% 续费','对接人：比例 5% 续费','合伙人：比例 30% 续费'], status:'on', main:true, priority:0, mat:0 },
{ cat:'财税服务', name:'测试固定返佣产品', owner:'李玲玲', assignees:['刘婷'], rel:'—', price:'1000-14000元/人',
rules:['渠道：固定 ¥60 一次性','对接人：固定 ¥150 一次性','合伙人：固定 ¥300 一次性'], status:'on', main:true, priority:0, mat:0 },
{ cat:'资质许可', name:'资质认证许可证代办', owner:'Candy Gao', assignees:[], rel:'资质认证', price:'100',
rules:['渠道：固定 ¥0 一次性','对接人：固定 ¥0 一次性','合伙人：固定 ¥120 一次性'], status:'on', main:true, priority:0, mat:0 },
{ cat:'智能工资条', name:'智能工资条', owner:'张美玉', assignees:[], rel:'—', price:'1-50人 0.80元...',
rules:['渠道：固定 ¥0 续费','对接人：固定 ¥0 续费','合伙人：固定 ¥20.14 续费'], status:'on', main:true, priority:0, mat:0 },
{ cat:'异地用工', name:'ben01', owner:'孙彬彬', assignees:['黄慧慧','刘铭阳','徐露','楚冠军','...'], rel:'—', price:'60/人',
rules:['渠道：比例 10%(成交额) 续费','对接人：比例 5%(服务费) 续费','合伙人：固定 ¥200 续费'], status:'draft', main:true, priority:0, mat:0 },
{ cat:'异地用工', name:'劳务派遣', owner:'李玲玲', assignees:[], rel:'—', price:'60元/人/月',
rules:['渠道：固定 ¥0 续费','对接人：固定 ¥0 续费','合伙人：比例 30%(成交额) 续费'], status:'on', main:false, priority:0, mat:0 },
{ cat:'人事代理', name:'社保公积金托管', owner:'郭欢', assignees:[], rel:'—', price:'1-5人 1,000元/年...',
rules:['渠道：固定 ¥0 续费','对接人：固定 ¥0 续费','合伙人：比例 30%(成交额) 续费'], status:'on', main:false, priority:0, mat:0 },
{ cat:'工商服务', name:'财税风险规划方案', owner:'毕潇然', assignees:[], rel:'中小微企业T...', price:'一单一议',
rules:['渠道：固定 ¥0 续费','对接人：固定 ¥0 续费','合伙人：比例 10%(成交额) 续费'], status:'on', main:false, priority:0, mat:0 },
{ cat:'财税服务', name:'测测试', owner:'问贝', assignees:[], rel:'—', price:'33',
rules:['渠道：固定 ¥200 一次性','对接人：固定 ¥400 一次性','合伙人：固定 ¥800 一次性'], status:'draft', main:false, priority:0, mat:0 },
];
function renderProducts() {
var statusMap = { on:'<span class="tag tag-green">已上架</span>', draft:'<span class="tag tag-gray">草稿</span>', off:'<span class="tag tag-orange">已下架</span>' };
var html = PRODUCTS.map(function(d){
var assigneeHtml = d.assignees.length
? d.assignees.map(function(a){ return '<span class="person-tag">'+a+'</span>'; }).join('')
: '<span class="muted">未配置</span>';
var rulesHtml = '<div class="rule-cell">' + d.rules.map(function(r){ return r; }).join('<br>') + '</div>';
var opOn = d.status==='on' ? '<button class="btn-link" style="color:#cf1322">下架</button>' : '<button class="btn-link" style="color:#389e0d">上架</button>';
return '<tr>'
+ '<td>'+d.cat+'</td>'
+ '<td><a class="btn-link" onclick="showPage(\'detail\',document.getElementById(\'nav-product\'))">'+d.name+'</a></td>'
+ '<td>'+d.owner+'</td>'
+ '<td>'+assigneeHtml+'</td>'
+ '<td><span class="muted">'+(d.rel||'—')+'</span></td>'
+ '<td>'+d.price+'</td>'
+ '<td>'+rulesHtml+'</td>'
+ '<td>'+statusMap[d.status]+'</td>'
+ '<td>'+(d.main?'是':'否')+'</td>'
+ '<td>'+d.priority+'</td>'
+ '<td>'+d.mat+'</td>'
+ '<td>'+opOn+' <button class="btn-link" onclick="showPage(\'detail\',document.getElementById(\'nav-product\'))">详情</button></td>'
+ '</tr>';
}).join('');
document.getElementById('prod-tbody').innerHTML = html;
document.getElementById('prod-count').textContent = '共 ' + PRODUCTS.length + ' 条';
}
/* ===== 分佣规则联动 ===== */
function updateRuleFields(prefix) {
var method = document.getElementById(prefix+'-method').value;
var isFixed = method === 'fixed';
document.getElementById(prefix+'-basis-wrap').style.display = isFixed ? 'none' : '';
document.getElementById(prefix+'-ratio-wrap').style.display = isFixed ? 'none' : '';
document.getElementById(prefix+'-amount-wrap').style.display = isFixed ? '' : 'none';
}
/* ===== 新增分类 ===== */
function openAddCategory() { alert('新增产品分类弹窗（待实现）'); }
/* 初始化 */
renderProducts();
</script>
</body>
</html>
HTML原型/commission_pages (1).html → 后台HTML原型/亲亲创客管理/佣金管理.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>佣金结算管理</title> <title>佣金管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style> <style>
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
...@@ -100,6 +100,11 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -100,6 +100,11 @@ td{padding:9px 10px;vertical-align:middle}
.form-item select:focus,.form-item input:focus{border-color:#1677ff} .form-item select:focus,.form-item input:focus{border-color:#1677ff}
.info-row{display:flex;font-size:13px;margin-bottom:8px} .info-row{display:flex;font-size:13px;margin-bottom:8px}
.info-label{width:90px;color:#8c8c8c;flex-shrink:0} .info-label{width:90px;color:#8c8c8c;flex-shrink:0}
/* 介绍人奖励 */
.avatar{width:26px;height:26px;border-radius:50%;background:#1677ff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.btn-warning{background:#fa8c16;color:#fff;border-color:#fa8c16;font-weight:500}
.btn-warning:hover{background:#d46b08;border-color:#d46b08}
</style> </style>
</head> </head>
<body> <body>
...@@ -108,19 +113,20 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -108,19 +113,20 @@ td{padding:9px 10px;vertical-align:middle}
<!-- 侧边栏 --> <!-- 侧边栏 -->
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div> <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-item">产品分类管理</div> <div class="nav-group">产品管理</div>
<div class="nav-item">产品管理</div> <div class="nav-item">产品分类</div>
<div class="nav-item">合伙人申请管理列表</div> <div class="nav-item">产品管理列表</div>
<div class="nav-group">合伙人管理</div>
<div class="nav-item">合伙人申请审核列表</div>
<div class="nav-item">合伙人管理列表</div> <div class="nav-item">合伙人管理列表</div>
<div class="nav-group">商机管理</div>
<div class="nav-item">商机管理列表</div>
<div class="nav-item">对接人分配表</div>
<div class="nav-group">佣金结算</div> <div class="nav-group">佣金结算</div>
<div class="nav-item active" onclick="switchPage('partner',this)">合伙人佣金结算管理</div> <div class="nav-item active" onclick="switchPage('partner',this)">合伙人佣金结算</div>
<div class="nav-item" onclick="switchPage('channel',this)">渠道管理员佣金结算</div> <div class="nav-item" onclick="switchPage('channel',this)">渠道管理员佣金结算</div>
<div class="nav-item" onclick="switchPage('assignee',this)">对接人佣金结算</div> <div class="nav-item" onclick="switchPage('assignee',this)">对接人佣金结算</div>
<div class="nav-group">其他</div> <div class="nav-item" onclick="switchPage('referrer',this)">介绍人奖励金列表</div>
<div class="nav-item">服务商结算</div>
<div class="nav-item">结算服务商付款管理</div>
<div class="nav-item">业务服务商付款管理</div>
<div class="nav-item">其他付款管理</div>
</div> </div>
<!-- ===== 合伙人佣金结算管理 ===== --> <!-- ===== 合伙人佣金结算管理 ===== -->
...@@ -406,6 +412,100 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -406,6 +412,100 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
<!-- 批量审核弹窗 --> <!-- 批量审核弹窗 -->
<!-- ===== 介绍人奖励列表 ===== -->
<div id="page-referrer" class="page">
<div class="page-header">
<span class="page-title">介绍人奖励记录</span>
<div class="header-btns">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<!-- 筛选 -->
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>介绍人</label><input type="text" placeholder="搜索姓名"></div>
<div class="filter-item"><label>合伙人</label><input type="text" placeholder="搜索姓名/手机号"></div>
<div class="filter-item"><label>所属客户</label><input type="text" placeholder="搜索企业名称"></div>
<div class="filter-item"><label>触发时间</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="date" style="min-width:120px">
<span style="color:#bfbfbf">至</span>
<input type="date" style="min-width:120px">
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
<button class="btn"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<!-- 状态Tab -->
<div class="status-tabs">
<div class="status-tab" onclick="switchTab(this,'pending')">待发放 (4)</div>
<div class="status-tab" onclick="switchTab(this,'done')">已发放 (6)</div>
<div class="status-tab active" onclick="switchTab(this,'all')">全部 (10)</div>
</div>
<!-- 待发放时显示批量操作栏 -->
<div id="batch-action-bar" style="display:none;padding:10px 0 8px;display:none;align-items:center;justify-content:space-between">
<div style="display:flex;align-items:center;gap:8px">
<input type="checkbox" id="check-all" onchange="toggleAll(this)" style="width:14px;height:14px;accent-color:#1677ff">
<span style="font-size:13px;color:#595959">全选</span>
<span id="sel-tip" style="font-size:12px;color:#fa8c16;font-weight:500;margin-left:8px"></span>
</div>
<button class="btn btn-warning" onclick="openBatchConfirm()">
<i class="ti ti-checks"></i>批量标记已发放
</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th style="width:36px"></th>
<th>介绍人</th>
<th>部门</th>
<th>合伙人</th>
<th>所属客户（首单）</th>
<th>奖励金额</th>
<th>首单触发时间</th>
<th>状态</th>
<th>发放时间</th>
<th>发放备注</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<div class="pagination">
<div style="display:flex;align-items:center;gap:12px">
<span>共 10 条 &nbsp;
<select style="height:26px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px">
<option>20条/页</option><option>50条/页</option>
</select>
</span>
<span id="sel-tip" style="color:#fa8c16;font-size:12px;font-weight:500"></span>
</div>
<div style="display:flex;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
<!-- 单条发放确认弹窗 -->
</div>
<div class="modal-overlay" id="modal-batch"> <div class="modal-overlay" id="modal-batch">
<div class="modal" style="width:440px"> <div class="modal" style="width:440px">
<div class="modal-header"> <div class="modal-header">
...@@ -662,11 +762,81 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -662,11 +762,81 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
</div> </div>
<div class="modal-overlay" id="modal-ref-confirm" style="z-index:9999">
<div class="modal">
<div class="modal-header">
<span class="modal-title">确认发放奖励</span>
<i class="ti ti-x modal-close" onclick="hideModal('modal-ref-confirm')"></i>
</div>
<div class="modal-body">
<div class="info-row"><span class="info-label">介绍人</span><span id="m-name" style="font-weight:500">—</span></div>
<div class="info-row"><span class="info-label">合伙人</span><span id="m-partner">—</span></div>
<div class="info-row"><span class="info-label">所属客户</span><span id="m-customer">—</span></div>
<div class="info-row">
<span class="info-label">奖励金额</span>
<span id="m-amount" style="font-size:16px;font-weight:600;color:#d46b08">¥50.00</span>
</div>
<div class="warn-box">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>确认发放后将标记为「已发放」，请确保已完成线下转账后再操作。此操作不可撤销。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal('modal-ref-confirm')">取消</button>
<button class="btn btn-warning" onclick="confirmPay()"><i class="ti ti-check"></i>确认已发放</button>
</div>
</div>
</div>
<!-- 批量发放确认弹窗 -->
<div class="modal-overlay" id="modal-ref-batch" style="z-index:9999">
<div class="modal" style="width:420px">
<div class="modal-header">
<span class="modal-title"><i class="ti ti-checks" style="color:#fa8c16;margin-right:4px"></i>批量标记已发放</span>
<i class="ti ti-x modal-close" onclick="hideModal('modal-ref-batch')"></i>
</div>
<div class="modal-body">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
<div style="background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:24px;font-weight:600;color:#d46b08" id="batch-count">0</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
</div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
<div style="font-size:24px;font-weight:600;color:#389e0d" id="batch-amount">¥0.00</div>
<div style="font-size:12px;color:#8c8c8c;margin-top:2px">总奖励金额</div>
</div>
</div>
<div style="margin-bottom:14px">
<div style="font-size:12px;color:#595959;margin-bottom:6px">发放时间 <span style="color:#cf1322">*</span></div>
<input type="date" id="batch-pay-date" style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none"
onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
<div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择实际完成线下发放的日期</div>
</div>
<div style="margin-bottom:14px">
<div style="font-size:12px;color:#595959;margin-bottom:6px">发放备注</div>
<input type="text" id="batch-pay-remark" placeholder="如：微信转账、企业转账等（选填）"
style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none"
onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
</div>
<div class="warn-box">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>批量确认后将全部标记为「已发放」，此操作不可撤销。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal('modal-ref-batch')">取消</button>
<button class="btn btn-warning" onclick="confirmBatchPay()"><i class="ti ti-check"></i>确认全部已发放</button>
</div>
</div>
</div>
<script> <script>
function switchPage(id, el) { function switchPage(id, el) {
document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); }); document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); }); document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
document.getElementById('page-' + id).classList.add('active'); document.getElementById('page-' + id).classList.add('active');
if (id === 'referrer' && typeof render === 'function') render(currentFilter || 'all');
if (el) el.classList.add('active'); if (el) el.classList.add('active');
} }
...@@ -824,6 +994,154 @@ document.querySelectorAll('.brand-tab').forEach(function(t) { ...@@ -824,6 +994,154 @@ document.querySelectorAll('.brand-tab').forEach(function(t) {
t.classList.add('active'); t.classList.add('active');
}); });
}); });
/* ===== 介绍人奖励 ===== */
var data = [
{ name:'李明', dept:'销售部', partner:'张伟 / 138****5566', customer:'远航科技有限公司', amount:50, triggerTime:'2026-06-05 10:22', status:'done', payTime:'2026-06-06 09:00', remark:'微信转账' },
{ name:'陈晓', dept:'行政部', partner:'王芳 / 139****8822', customer:'启航教育咨询', amount:50, triggerTime:'2026-06-08 14:35', status:'done', payTime:'2026-06-09 10:15', remark:'微信转账' },
{ name:'张美玉', dept:'人事部', partner:'李强 / 136****4411', customer:'锦绣餐饮集团', amount:50, triggerTime:'2026-06-10 09:18', status:'done', payTime:'2026-06-11 11:00', remark:'企业转账' },
{ name:'赵磊', dept:'销售部', partner:'刘敏 / 150****7878', customer:'新桥律师事务所', amount:50, triggerTime:'2026-06-12 16:40', status:'done', payTime:'2026-06-13 09:30', remark:'微信转账' },
{ name:'郭欢', dept:'服务部', partner:'陈涛 / 134****7950', customer:'华盛机构', amount:50, triggerTime:'2026-06-15 11:05', status:'done', payTime:'2026-06-16 10:00', remark:'微信转账' },
{ name:'刘婷', dept:'综合部', partner:'周磊 / 151****2216', customer:'某某科技有限公司', amount:50, triggerTime:'2026-06-18 15:22', status:'done', payTime:'2026-06-19 09:45', remark:'微信转账' },
{ name:'王芳', dept:'财税部', partner:'孙杰 / 136****8541', customer:'蓝海投资管理公司', amount:50, triggerTime:'2026-06-20 10:10', status:'pending', payTime:'—', remark:'—' },
{ name:'李鹏飞', dept:'销售部', partner:'赵琳 / 151****2215', customer:'中兴建材集团', amount:50, triggerTime:'2026-06-21 13:30', status:'pending', payTime:'—', remark:'—' },
{ name:'赛晓丽', dept:'渠道部', partner:'吴伟 / 137****3269', customer:'顺达物流有限公司', amount:50, triggerTime:'2026-06-22 09:55', status:'pending', payTime:'—', remark:'—' },
{ name:'张情', dept:'市场部', partner:'黄磊 / 166****8880', customer:'云端科技股份公司', amount:50, triggerTime:'2026-06-23 14:48', status:'pending', payTime:'—', remark:'—' },
];
var currentFilter = 'all';
var confirmIdx = -1;
function avatarColor(name) {
var colors = ['#1677ff','#389e0d','#d46b08','#531dab','#cf1322','#085041'];
var h = 0;
for (var i = 0; i < name.length; i++) h += name.charCodeAt(i);
return colors[h % colors.length];
}
function nowTs() {
var n = new Date();
return n.getFullYear() + '-'
+ String(n.getMonth()+1).padStart(2,'0') + '-'
+ String(n.getDate()).padStart(2,'0') + ' '
+ String(n.getHours()).padStart(2,'0') + ':'
+ String(n.getMinutes()).padStart(2,'0');
}
function isPending() { return currentFilter === 'pending'; }
function render(filter) {
currentFilter = filter;
var list = filter === 'all' ? data : data.filter(function(d){ return d.status === filter; });
var showCb = filter === 'pending';
var bar = document.getElementById('batch-action-bar');
var checkAll = document.getElementById('check-all');
bar.style.display = showCb ? 'flex' : 'none';
if (checkAll) checkAll.checked = false;
document.getElementById('sel-tip').textContent = '';
var tbody = document.getElementById('table-body');
tbody.innerHTML = list.map(function(d) {
var idx = data.indexOf(d);
var cbCell = showCb
? '<td style="text-align:center"><input type="checkbox" class="row-cb" data-idx="' + idx + '" onchange="updateSel()"></td>'
: '<td></td>';
return '<tr>'
+ cbCell
+ '<td><div style="display:flex;align-items:center;gap:8px"><div class="avatar" style="background:' + avatarColor(d.name) + '">' + d.name[0] + '</div><span style="font-weight:500">' + d.name + '</span></div></td>'
+ '<td style="color:#8c8c8c">' + d.dept + '</td>'
+ '<td>' + d.partner + '</td>'
+ '<td style="font-weight:500">' + d.customer + '</td>'
+ '<td style="font-size:14px;font-weight:600;color:#d46b08">¥' + d.amount + '.00</td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.triggerTime + '</td>'
+ '<td>' + (d.status === 'done'
? '<span class="tag tag-green"><i class="ti ti-check" style="font-size:10px"></i>已发放</span>'
: '<span class="tag tag-orange">待发放</span>') + '</td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.payTime + '</td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.remark + '</td>'
+ '<td>' + (d.status === 'pending'
? '<button class="btn btn-warning btn-sm" onclick="openConfirm(' + idx + ')"><i class="ti ti-coin"></i>标记已发放</button>'
: '<span style="color:#bfbfbf;font-size:12px">—</span>') + '</td>'
+ '</tr>';
}).join('');
}
function updateSel() {
var cbs = document.querySelectorAll('.row-cb:checked');
var total = 0;
cbs.forEach(function(cb) { total += data[parseInt(cb.dataset.idx)].amount; });
var tip = document.getElementById('sel-tip');
tip.textContent = cbs.length > 0 ? '已选 ' + cbs.length + ' 条，合计 ¥' + total.toFixed(2) : '';
}
function toggleAll(master) {
document.querySelectorAll('.row-cb').forEach(function(cb) { cb.checked = master.checked; });
updateSel();
}
function switchTab(el, filter) {
document.querySelectorAll('.status-tab').forEach(function(t) { t.classList.remove('active'); });
el.classList.add('active');
render(filter);
}
function openConfirm(idx) {
confirmIdx = idx;
var d = data[idx];
document.getElementById('m-name').textContent = d.name + '（' + d.dept + '）';
document.getElementById('m-partner').textContent = d.partner;
document.getElementById('m-customer').textContent = d.customer;
document.getElementById('m-amount').textContent = '¥' + d.amount + '.00';
document.getElementById('modal-ref-confirm').classList.add('show');
}
function openBatchConfirm() {
var cbs = document.querySelectorAll('.row-cb:checked');
if (cbs.length === 0) { alert('请先勾选需要发放的记录'); return; }
var total = 0;
cbs.forEach(function(cb) { total += data[parseInt(cb.dataset.idx)].amount; });
document.getElementById('batch-count').textContent = cbs.length;
document.getElementById('batch-amount').textContent = '¥' + total.toFixed(2);
document.getElementById('batch-pay-date').value = '';
document.getElementById('batch-pay-date').style.borderColor = '#d9d9d9';
document.getElementById('batch-pay-remark').value = '';
document.getElementById('modal-ref-batch').classList.add('show');
}
function confirmPay() {
if (confirmIdx >= 0) {
var ts = nowTs();
data[confirmIdx].status = 'done';
data[confirmIdx].payTime = ts;
data[confirmIdx].remark = '线下发放';
}
hideModal('modal-ref-confirm');
render(currentFilter);
}
function confirmBatchPay() {
var dateVal = document.getElementById('batch-pay-date').value;
if (!dateVal) {
document.getElementById('batch-pay-date').style.borderColor = '#ff4d4f';
document.getElementById('batch-pay-date').focus();
return;
}
var cbs = document.querySelectorAll('.row-cb:checked');
var remarkVal = document.getElementById('batch-pay-remark').value.trim() || '线下批量发放';
cbs.forEach(function(cb) {
var d = data[parseInt(cb.dataset.idx)];
d.status = 'done';
d.payTime = dateVal;
d.remark = remarkVal;
});
hideModal('modal-ref-batch');
render(currentFilter);
}
render('all');
</script> </script>
</body> </body>
</html> </html>
HTML原型/partner_detail_leads.html → 后台HTML原型/亲亲创客管理/合伙人管理.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>合伙人详情 - 商机列表</title> <title>合伙人管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<style> <style>
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5} body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
...@@ -108,14 +109,150 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -108,14 +109,150 @@ td{padding:9px 10px;vertical-align:middle}
.status-flow{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:10px} .status-flow{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:10px}
.sf-node{padding:4px 12px;border-radius:100px;font-size:12px;border:1px solid} .sf-node{padding:4px 12px;border-radius:100px;font-size:12px;border:1px solid}
.sf-arrow{color:#bfbfbf;font-size:14px} .sf-arrow{color:#bfbfbf;font-size:14px}
/* ===== 布局框架 ===== */
.layout{display:flex;height:100vh}
.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
.nav-item:hover{background:#f5f5f5;color:#1677ff}
.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
.main-wrap{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.page{display:none;flex:1;flex-direction:column;overflow-y:auto;background:#f0f2f5}
.page.active{display:flex}
</style> </style>
</head> </head>
<body> <body>
<div style="background:#f0f2f5;min-height:100vh"> <div class="layout">
<div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-group">产品管理</div>
<div class="nav-item">产品分类</div>
<div class="nav-item">产品管理列表</div>
<div class="nav-group">合伙人管理</div>
<div class="nav-item active" onclick="switchPage('apply',this)">合伙人申请审核列表</div>
<div class="nav-item" onclick="switchPage('partner',this)">合伙人管理列表</div>
<div class="nav-group">商机管理</div>
<div class="nav-item">商机管理列表</div>
<div class="nav-item">对接人分配表</div>
<div class="nav-group">佣金结算</div>
<div class="nav-item">合伙人佣金结算</div>
<div class="nav-item">渠道管理员佣金结算</div>
<div class="nav-item">对接人佣金结算</div>
<div class="nav-item">介绍人奖励金列表</div>
</div>
<div class="main-wrap">
<!-- ===== 合伙人申请审核列表 ===== -->
<div id="page-apply" class="page active">
<div class="page-header">
<span class="page-title">合伙人申请管理列表</span>
<div class="header-btns">
<button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
<button class="btn btn-sm">视图管理</button>
<button class="btn btn-sm">超管工具</button>
<button class="btn btn-sm"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="filter-bar" style="border-bottom:1px solid #e8e8e8">
<div class="filter-item"><label>申请人信息</label>
<div style="display:flex">
<input type="text" id="fa-kw" placeholder="姓名/手机号/身份证" style="border-radius:6px 0 0 6px;border-right:none">
<button class="btn btn-sm" style="border-radius:0 6px 6px 0;height:28px">精确</button>
</div>
</div>
<div class="filter-item"><label>申请时间</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="date" style="min-width:118px"><span style="color:#bfbfbf">至</span><input type="date" style="min-width:118px">
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary btn-sm" onclick="renderApply()"><i class="ti ti-search"></i>查询</button>
<button class="btn btn-sm" onclick="resetApplyFilter()"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
<div class="status-tabs" id="apply-tabs" style="background:#fff;padding:0 24px">
<div class="status-tab" onclick="renderApply('pending',this)">待审核(<span id="cnt-pending">0</span>)</div>
<div class="status-tab active" onclick="renderApply('passed',this)">审核通过(<span id="cnt-passed">2</span>)</div>
<div class="status-tab" onclick="renderApply('rejected',this)">审核不通过(<span id="cnt-rejected">0</span>)</div>
</div>
<div class="content">
<div class="table-card">
<table>
<thead><tr><th>姓名</th><th>手机号</th><th>身份证号</th><th>身份类别</th><th>所在城市</th><th>申请时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody id="apply-tbody"></tbody>
</table>
<div class="pagination"><span id="apply-count">共 2 条</span><div style="display:flex;gap:4px"><div class="page-btn active">1</div></div></div>
</div>
</div>
</div>
<!-- ===== 合伙人管理列表 ===== -->
<div id="page-partner" class="page">
<div class="page-header"> <div class="page-header">
<span class="page-title">合伙人管理列表</span>
<div class="header-btns">
<button class="btn btn-primary btn-sm" onclick="openModal('modal-add-partner')"><i class="ti ti-plus"></i>新增合伙人</button>
<button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
<button class="btn btn-sm">视图管理</button>
<button class="btn btn-sm">超管工具</button>
<button class="btn btn-sm"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="filter-bar" style="border-bottom:1px solid #e8e8e8">
<div class="filter-item"><label>介绍人</label><input type="text" id="fp-asgn" placeholder="请选择"></div>
<div class="filter-item"><label>介绍人奖励发放状态</label>
<select id="fp-reward"><option value="">全部</option><option value="none">无奖励</option><option value="pending">待发放</option><option value="paid">已发放</option></select>
</div>
<div class="filter-item"><label>状态</label>
<select id="fp-status"><option value="">请选择</option><option>审核通过</option><option>待审核</option><option>已禁用</option></select>
</div>
<div class="filter-item"><label>合伙人</label>
<div style="display:flex">
<input type="text" id="fp-kw" placeholder="姓名/手机号" style="border-radius:6px 0 0 6px;border-right:none">
<button class="btn btn-sm" style="border-radius:0 6px 6px 0;height:28px">精确</button>
</div>
</div>
<div class="filter-item"><label>客户数</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="number" placeholder="最小值" style="min-width:76px;width:76px"><span style="color:#bfbfbf">~</span><input type="number" placeholder="最大值" style="min-width:76px;width:76px">
<button class="btn btn-sm" style="height:28px">切换</button>
</div>
</div>
<div class="filter-item"><label>累计佣金</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="number" placeholder="最小值" style="min-width:76px;width:76px"><span style="color:#bfbfbf">~</span><input type="number" placeholder="最大值" style="min-width:76px;width:76px">
<button class="btn btn-sm" style="height:28px">切换</button>
</div>
</div>
<div class="filter-item"><label>合作时间</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="date" style="min-width:118px"><span style="color:#bfbfbf">至</span><input type="date" style="min-width:118px">
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary btn-sm" onclick="renderPartner()"><i class="ti ti-search"></i>查询</button>
<button class="btn btn-sm" onclick="resetPartnerFilter()"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
<div style="padding:8px 24px 0;font-size:12px;color:#f5222d">当前推广客户数、业务客户、佣金、提现金额均为昨日 24 点统计结果，实时数据可点击详情查看。</div>
<div class="content" style="padding-top:10px">
<div class="table-card">
<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><th>状态</th><th>操作</th></tr></thead>
<tbody id="partner-tbody"></tbody>
</table>
<div class="pagination"><span id="partner-count">共 8 条</span><div style="display:flex;gap:4px"><div class="page-btn active">1</div></div></div>
</div>
</div>
</div>
<!-- ===== 合伙人详情（原 partner_detail_leads）===== -->
<div id="page-partner-detail" class="page">
<div class="page-header">
<div class="page-title"> <div class="page-title">
<button class="btn" onclick="history.back()" style="border:none;background:none;padding:0;color:#595959;cursor:pointer"><i class="ti ti-arrow-left"></i></button> <button class="btn" onclick="backToPartnerList()" style="border:none;background:none;padding:0;color:#595959;cursor:pointer"><i class="ti ti-arrow-left"></i></button>
合伙人管理详情 合伙人管理详情
<span class="tag tag-green" style="font-size:11px">正常</span> <span class="tag tag-green" style="font-size:11px">正常</span>
</div> </div>
...@@ -131,12 +268,12 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -131,12 +268,12 @@ td{padding:9px 10px;vertical-align:middle}
<div> <div>
<div class="field-row"><span class="field-label">合伙人类型</span><span class="field-val">个人</span></div> <div class="field-row"><span class="field-label">合伙人类型</span><span class="field-val">个人</span></div>
<div class="field-row"><span class="field-label">身份类型</span><span class="field-val">财务</span></div> <div class="field-row"><span class="field-label">身份类型</span><span class="field-val">财务</span></div>
<div class="field-row"><span class="field-label">来源方式</span><span class="field-val">对接人后台添加</span></div> <div class="field-row"><span class="field-label">来源方式</span><span class="field-val" id="pd-source">介绍人后台添加</span></div>
<div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-22 14:22</span></div> <div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-22 14:22</span></div>
</div> </div>
<div> <div>
<div class="field-row"><span class="field-label">合伙人姓名</span><span class="field-val">李鹏飞</span></div> <div class="field-row"><span class="field-label">合伙人姓名</span><span class="field-val" id="pd-name">李鹏飞</span></div>
<div class="field-row"><span class="field-label">合伙人用户</span><span class="field-val">158****0129</span></div> <div class="field-row"><span class="field-label">合伙人用户</span><span class="field-val" id="pd-phone">158****0129</span></div>
<div class="field-row"><span class="field-label">所在城市</span><span class="field-val">福建省厦门市</span></div> <div class="field-row"><span class="field-label">所在城市</span><span class="field-val">福建省厦门市</span></div>
<div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-22 14:22</span></div> <div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-22 14:22</span></div>
</div> </div>
...@@ -146,17 +283,25 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -146,17 +283,25 @@ td{padding:9px 10px;vertical-align:middle}
<div class="channel-block"> <div class="channel-block">
<div class="ch-field"> <div class="ch-field">
<span class="ch-label">介绍人</span> <span class="ch-label">介绍人</span>
<div class="ch-val"><span style="color:#1677ff;cursor:pointer">王利娟</span></div> <div class="ch-val"><span style="color:#1677ff;cursor:pointer" id="pd-intro">—</span></div>
</div> </div>
<div class="ch-field"> <div class="ch-field">
<span class="ch-label">是否已成单</span> <span class="ch-label">是否已成单</span>
<div class="ch-val">已成单</div> <div class="ch-val" id="pd-deal">未成单</div>
</div> </div>
<div class="ch-field"> <div class="ch-field">
<span class="ch-label">是否已发放奖励</span> <span class="ch-label">是否已发放奖励</span>
<div class="ch-val"> <div class="ch-val" id="pd-reward-wrap" style="display:flex;align-items:center;gap:8px"></div>
<span class="tag tag-green">已发放</span> </div>
</div> </div>
<div style="background:#fff;border:1px solid #e8e8e8;border-radius:6px;margin:10px 24px 0;overflow:hidden">
<div style="padding:9px 14px;border-bottom:1px solid #f0f0f0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px"><i class="ti ti-chart-bar" style="color:#1677ff"></i>实时统计</div>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px 14px">
<div style="background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:12px 14px"><div style="font-size:12px;color:#8c8c8c;margin-bottom:6px">推广客户数</div><div style="font-size:22px;font-weight:600" id="pd-cust">0</div></div>
<div style="background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:12px 14px"><div style="font-size:12px;color:#8c8c8c;margin-bottom:6px">产生业务客户数</div><div style="font-size:22px;font-weight:600" id="pd-bizcust">0</div></div>
<div style="background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:12px 14px"><div style="font-size:12px;color:#8c8c8c;margin-bottom:6px">累计佣金</div><div style="font-size:22px;font-weight:600" id="pd-comm">0.00</div></div>
<div style="background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:12px 14px"><div style="font-size:12px;color:#8c8c8c;margin-bottom:6px">可提现金额</div><div style="font-size:22px;font-weight:600" id="pd-withdraw">0.00</div></div>
</div> </div>
</div> </div>
...@@ -235,7 +380,104 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -235,7 +380,104 @@ td{padding:9px 10px;vertical-align:middle}
<div id="tab-log" class="content" style="display:none"> <div id="tab-log" class="content" style="display:none">
<div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div> <div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div>
</div> </div>
</div>
</div>
</div>
<!-- 申请详情弹窗 -->
<div class="modal-overlay" id="modal-apply-detail">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#1677ff"><i class="ti ti-user"></i>申请详情</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-apply-detail')"></i>
</div>
<div class="modal-body" id="apply-detail-body"></div>
<div class="modal-footer" id="apply-detail-footer">
<button class="btn" onclick="closeModal('modal-apply-detail')">关闭</button>
</div>
</div>
</div>
<!-- 申请审核不通过弹窗 -->
<div class="modal-overlay" id="modal-apply-reject">
<div class="modal" style="width:420px">
<div class="modal-header">
<span class="modal-title" style="color:#cf1322"><i class="ti ti-x"></i>审核不通过</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-apply-reject')"></i>
</div>
<div class="modal-body">
<div class="form-item">
<label>不通过原因<span class="req">*</span></label>
<textarea id="reject-reason" placeholder="请填写审核不通过的原因，将通知申请人" style="width:100%;height:70px;border:1px solid #d9d9d9;border-radius:6px;padding:7px 10px;font-size:13px;resize:none;outline:none"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-apply-reject')">取消</button>
<button class="btn btn-danger" onclick="confirmReject()"><i class="ti ti-x"></i>确认不通过</button>
</div>
</div>
</div>
<!-- 新增合伙人弹窗 -->
<div class="modal-overlay" id="modal-add-partner">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#1677ff"><i class="ti ti-plus"></i>新增合伙人</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-add-partner')"></i>
</div>
<div class="modal-body">
<div class="form-row">
<div class="form-item"><label>选择用户<span class="req">*</span></label>
<select><option value="">请搜索/选择用户</option><option>张伟 / 138****5566</option><option>刘敏 / 150****7878</option><option>孙杰 / 136****8541</option></select>
</div>
<div class="form-item"><label>介绍人<span class="req">*</span></label>
<select><option>张倩</option><option>李鹏飞</option><option>张美玉</option><option>赛晓丽</option><option>肖玲枝</option><option>杨泽辉</option></select>
</div>
</div>
<div class="form-row full" style="grid-template-columns:1fr">
<div class="form-item"><label>来源方式<span class="req">*</span></label>
<select><option value="backend" selected>介绍人后台添加</option><option value="invite">介绍人邀请</option><option value="self">自主申请</option></select>
</div>
</div>
<div class="form-row">
<div class="form-item"><label>合伙人身份类型</label>
<select><option value="">请选择</option><option>HR</option><option>财务</option><option>猎头</option><option>博主</option><option>老板</option></select>
</div>
<div class="form-item"><label>合伙人所在城市</label><input type="text" placeholder="省/市"></div>
</div>
<div style="margin-top:4px"><button class="btn-link">高级 <i class="ti ti-chevron-down" style="font-size:11px"></i></button></div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-add-partner')">取消</button>
<button class="btn btn-primary" onclick="closeModal('modal-add-partner')"><i class="ti ti-check"></i>确定</button>
</div>
</div>
</div>
<!-- 标记奖励已发放确认弹窗 -->
<div class="modal-overlay" id="modal-mark-paid">
<div class="modal" style="width:420px">
<div class="modal-header">
<span class="modal-title" style="color:#fa8c16"><i class="ti ti-check"></i>确认发放介绍人奖励</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-mark-paid')"></i>
</div>
<div class="modal-body">
<div class="detail-rows">
<div class="detail-row"><span class="detail-label">合伙人</span><span class="detail-val" id="mp-partner" style="font-weight:500">—</span></div>
<div class="detail-row"><span class="detail-label">介绍人</span><span class="detail-val" id="mp-intro" style="color:#1677ff">—</span></div>
<div class="detail-row"><span class="detail-label">奖励金额</span><span class="detail-val" style="font-size:15px;font-weight:600;color:#d46b08">¥50.00</span></div>
</div>
<div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:8px 12px;font-size:12px;color:#820014;display:flex;gap:6px;margin-top:10px">
<i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
<span>请确保已完成线下发放后再操作，此操作不可撤销。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-mark-paid')">取消</button>
<button class="btn" style="background:#fa8c16;color:#fff;border-color:#fa8c16" onclick="confirmMarkPaid()"><i class="ti ti-check"></i>确认已发放</button>
</div>
</div>
</div> </div>
<!-- 商机详情弹窗 --> <!-- 商机详情弹窗 -->
...@@ -381,7 +623,222 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -381,7 +623,222 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
</div> </div>
<script> <script>
function openModal(id) { document.getElementById(id).classList.add('show'); }
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
/* ===== 页面切换 ===== */
function switchPage(key, el) {
document.querySelectorAll('.page').forEach(function(p){ p.classList.remove('active'); });
document.getElementById('page-' + key).classList.add('active');
if (el) {
document.querySelectorAll('.nav-item').forEach(function(n){ n.classList.remove('active'); });
el.classList.add('active');
}
if (key === 'apply') renderApply();
if (key === 'partner') renderPartner();
}
function backToPartnerList() {
document.querySelectorAll('.page').forEach(function(p){ p.classList.remove('active'); });
document.getElementById('page-partner').classList.add('active');
}
/* ===== 合伙人申请数据（截图还原 + 1条待审核演示数据）===== */
var Q = String.fromCharCode(39);
var APPLY_DATA = [
{ id: 1, name: '徐露', phone: '18482044404', idcard: '51**************1', idtype: 'HR,博主', city: '', applyTime: '2026-06-22', status: 'passed', auditTime: '2026-06-22 15:10', auditor: '王利娟' },
{ id: 2, name: '', phone: '18812345678', idcard: '', idtype: '财务,猎头', city: '', applyTime: '2026-06-22', status: 'passed', auditTime: '2026-06-22 16:02', auditor: '王利娟' },
{ id: 3, name: '王磊', phone: '13700009988', idcard: '11**************3', idtype: '老板', city: '上海市', applyTime: '2026-06-24', status: 'pending', auditTime: '', auditor: '' }
];
var APPLY_ST = { pending: ['待审核','tag-orange'], passed: ['审核通过','tag-green'], rejected: ['审核不通过','tag-red'] };
var curApplyTab = 'passed';
var curApplyId = -1;
function renderApply(tab, el) {
if (tab !== undefined) curApplyTab = tab;
if (el) {
document.querySelectorAll('#apply-tabs .status-tab').forEach(function(t){ t.classList.remove('active'); });
el.classList.add('active');
}
['pending','passed','rejected'].forEach(function(k){
document.getElementById('cnt-' + k).textContent = APPLY_DATA.filter(function(d){ return d.status === k; }).length;
});
var kw = (document.getElementById('fa-kw').value || '').trim();
var list = APPLY_DATA.filter(function(d){
if (d.status !== curApplyTab) return false;
if (kw && (d.name + d.phone + d.idcard).indexOf(kw) < 0) return false;
return true;
});
document.getElementById('apply-count').textContent = '共 ' + list.length + ' 条';
document.getElementById('apply-tbody').innerHTML = list.map(function(d){
var st = APPLY_ST[d.status];
return '<tr>'
+ '<td>' + (d.name || '<span style="color:#bfbfbf">—</span>') + '</td>'
+ '<td>' + d.phone + '</td>'
+ '<td>' + (d.idcard || '<span style="color:#bfbfbf">—</span>') + '</td>'
+ '<td>' + (d.idtype || '—') + '</td>'
+ '<td>' + (d.city || '<span style="color:#bfbfbf">—</span>') + '</td>'
+ '<td style="color:#8c8c8c">' + d.applyTime + '</td>'
+ '<td><span class="tag ' + st[1] + '">' + st[0] + '</span></td>'
+ '<td><button class="btn-link" onclick="openApplyDetail(' + d.id + ')">详情</button></td>'
+ '</tr>';
}).join('') || '<tr><td colspan="8" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
}
function resetApplyFilter() {
document.getElementById('fa-kw').value = '';
renderApply();
}
function openApplyDetail(id) {
var d = APPLY_DATA.find(function(x){ return x.id === id; });
if (!d) return;
curApplyId = id;
var st = APPLY_ST[d.status];
var html = '<div class="detail-rows">'
+ '<div class="detail-row"><span class="detail-label">姓名</span><span class="detail-val" style="font-weight:500">' + (d.name || '—') + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">手机号</span><span class="detail-val">' + d.phone + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">身份证号</span><span class="detail-val">' + (d.idcard || '—') + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">身份类别</span><span class="detail-val">' + (d.idtype || '—') + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">所在城市</span><span class="detail-val">' + (d.city || '—') + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">申请时间</span><span class="detail-val" style="color:#8c8c8c">' + d.applyTime + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">状态</span><span class="detail-val"><span class="tag ' + st[1] + '">' + st[0] + '</span></span></div>';
if (d.status !== 'pending') {
html += '<div class="detail-row"><span class="detail-label">审核时间</span><span class="detail-val" style="color:#8c8c8c">' + (d.auditTime || '—') + '</span></div>'
+ '<div class="detail-row"><span class="detail-label">审核人</span><span class="detail-val">' + (d.auditor || '—') + '</span></div>';
}
if (d.status === 'rejected' && d.reason) {
html += '<div class="detail-row"><span class="detail-label">不通过原因</span><span class="detail-val">' + d.reason + '</span></div>';
}
html += '</div>';
document.getElementById('apply-detail-body').innerHTML = html;
var ft = document.getElementById('apply-detail-footer');
if (d.status === 'pending') {
ft.innerHTML = '<button class="btn" onclick="closeModal(' + Q + 'modal-apply-detail' + Q + ')">关闭</button>'
+ '<button class="btn btn-danger" onclick="closeModal(' + Q + 'modal-apply-detail' + Q + ');openModal(' + Q + 'modal-apply-reject' + Q + ')">审核不通过</button>'
+ '<button class="btn btn-primary" onclick="confirmPass()"><i class="ti ti-check"></i>审核通过</button>';
} else {
ft.innerHTML = '<button class="btn" onclick="closeModal(' + Q + 'modal-apply-detail' + Q + ')">关闭</button>';
}
openModal('modal-apply-detail');
}
function confirmPass() {
var d = APPLY_DATA.find(function(x){ return x.id === curApplyId; });
if (d) { d.status = 'passed'; d.auditTime = nowStr(); d.auditor = '王利娟'; }
closeModal('modal-apply-detail');
renderApply();
}
function confirmReject() {
var r = (document.getElementById('reject-reason').value || '').trim();
if (!r) { document.getElementById('reject-reason').style.borderColor = '#ff4d4f'; return; }
var d = APPLY_DATA.find(function(x){ return x.id === curApplyId; });
if (d) { d.status = 'rejected'; d.reason = r; d.auditTime = nowStr(); d.auditor = '王利娟'; }
document.getElementById('reject-reason').value = '';
closeModal('modal-apply-reject');
renderApply();
}
function nowStr() {
var n = new Date();
function p(x){ return String(x).padStart(2, '0'); }
return n.getFullYear() + '-' + p(n.getMonth()+1) + '-' + p(n.getDate()) + ' ' + p(n.getHours()) + ':' + p(n.getMinutes());
}
/* ===== 合伙人管理数据（截图还原）===== */
var PARTNER_DATA = [
{ id: 1, name: '李鹏飞', phone: '155****0414', type: '个人', intro: '李鹏飞', reward: 'none', idtype: '财务', city: '福建省厦门市', source: '介绍人后台添加', cust: 2, bizCust: 1, comm: '0.88', withdraw: '0.88', status: '审核通过' },
{ id: 2, name: '测试', phone: '199****5678', type: '个人', intro: '张倩', reward: 'none', idtype: 'HR,财务,猎头,博主', city: '北京市北京市', source: '介绍人后台添加', cust: 0, bizCust: 0, comm: '0.00', withdraw: '0.00', status: '审核通过' },
{ id: 3, name: '', phone: '166****8389', type: '个人', intro: '李鹏飞', reward: 'pending', idtype: '', city: '', source: '介绍人邀请', cust: 0, bizCust: 0, comm: '0.00', withdraw: '0.00', status: '审核通过' },
{ id: 4, name: '徐露', phone: '184****4404', type: '个人', intro: '赛晓丽', reward: 'none', idtype: 'HR,博主', city: '', source: '自主申请', cust: 0, bizCust: 0, comm: '0.00', withdraw: '0.00', status: '审核通过' },
{ id: 5, name: '测试', phone: '150****8374', type: '个人', intro: '张倩', reward: 'paid', idtype: '', city: '', source: '介绍人邀请', cust: 1, bizCust: 1, comm: '0.00', withdraw: '1.44', status: '审核通过' },
{ id: 6, name: '李佳威', phone: '134****6618', type: '个人', intro: '肖玲枝', reward: 'pending', idtype: '', city: '', source: '介绍人邀请', cust: 0, bizCust: 0, comm: '0.00', withdraw: '0.00', status: '审核通过' },
{ id: 7, name: '', phone: '188****5678', type: '个人', intro: '赛晓丽', reward: 'none', idtype: '财务,猎头', city: '', source: '自主申请', cust: 0, bizCust: 0, comm: '0.00', withdraw: '0.00', status: '审核通过' },
{ id: 8, name: '王雷', phone: '', type: '个人', intro: '杨泽辉', reward: 'paid', idtype: '', city: '', source: '介绍人邀请', cust: 0, bizCust: 0, comm: '0.00', withdraw: '0.00', status: '审核通过' }
];
var REWARD_TAG = {
none: '<span style="color:#8c8c8c">无奖励</span>',
pending: '<span class="tag tag-orange">待发放</span>',
paid: '<span class="tag tag-green">已发放</span>'
};
function renderPartner() {
var kw = (document.getElementById('fp-kw').value || '').trim();
var fa = (document.getElementById('fp-asgn').value || '').trim();
var fs = document.getElementById('fp-status').value;
var fr = document.getElementById('fp-reward').value;
var list = PARTNER_DATA.filter(function(d){
if (kw && (d.name + d.phone).indexOf(kw) < 0) return false;
if (fa && d.intro.indexOf(fa) < 0) return false;
if (fs && d.status !== fs) return false;
if (fr && d.reward !== fr) return false;
return true;
});
document.getElementById('partner-count').textContent = '共 ' + list.length + ' 条';
document.getElementById('partner-tbody').innerHTML = list.map(function(d){
var nm = (d.name ? d.name + ' ' : '') + d.phone;
return '<tr>'
+ '<td style="font-weight:500;color:#1677ff;cursor:pointer" onclick="openPartnerDetail(' + d.id + ')">' + (nm.trim() || '—') + '</td>'
+ '<td>' + d.type + '</td>'
+ '<td>' + d.intro + '</td>'
+ '<td>' + REWARD_TAG[d.reward] + '</td>'
+ '<td>' + (d.idtype || '—') + '</td>'
+ '<td>' + (d.city || '—') + '</td>'
+ '<td><span class="tag tag-blue">' + d.source + '</span></td>'
+ '<td>' + d.cust + '</td>'
+ '<td>' + d.bizCust + '</td>'
+ '<td>' + d.comm + '</td>'
+ '<td>' + d.withdraw + '</td>'
+ '<td><span class="tag tag-green">' + d.status + '</span></td>'
+ '<td><button class="btn-link" onclick="openPartnerDetail(' + d.id + ')">详情</button></td>'
+ '</tr>';
}).join('') || '<tr><td colspan="13" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
}
function resetPartnerFilter() {
['fp-kw','fp-asgn','fp-status','fp-reward'].forEach(function(id){
var el = document.getElementById(id); if (el) el.value = '';
});
renderPartner();
}
var curPartnerId = -1;
function openPartnerDetail(id) {
var d = PARTNER_DATA.find(function(x){ return x.id === id; });
if (!d) return;
curPartnerId = id;
document.getElementById('pd-name').textContent = d.name || '—';
document.getElementById('pd-phone').textContent = d.phone || '—';
document.getElementById('pd-source').textContent = d.source;
document.getElementById('pd-intro').textContent = d.intro || '—';
document.getElementById('pd-deal').textContent = d.bizCust > 0 ? '已成单' : '未成单';
document.getElementById('pd-cust').textContent = d.cust;
document.getElementById('pd-bizcust').textContent = d.bizCust;
document.getElementById('pd-comm').textContent = d.comm;
document.getElementById('pd-withdraw').textContent = d.withdraw;
renderRewardWrap(d);
document.querySelectorAll('.page').forEach(function(p){ p.classList.remove('active'); });
document.getElementById('page-partner-detail').classList.add('active');
}
function renderRewardWrap(d) {
var w = document.getElementById('pd-reward-wrap');
var h = REWARD_TAG[d.reward];
if (d.reward === 'pending') {
h += '<button class="btn btn-sm" style="background:#fa8c16;color:#fff;border-color:#fa8c16" onclick="openMarkPaid()"><i class="ti ti-check"></i>标记已发放</button>';
}
w.innerHTML = h;
}
function openMarkPaid() {
var d = PARTNER_DATA.find(function(x){ return x.id === curPartnerId; });
if (!d) return;
document.getElementById('mp-partner').textContent = ((d.name ? d.name + ' ' : '') + d.phone).trim() || '—';
document.getElementById('mp-intro').textContent = d.intro || '—';
openModal('modal-mark-paid');
}
function confirmMarkPaid() {
var d = PARTNER_DATA.find(function(x){ return x.id === curPartnerId; });
if (d) { d.reward = 'paid'; renderRewardWrap(d); renderPartner(); }
closeModal('modal-mark-paid');
}
renderApply();
renderPartner();
/* ===== 详情页原有逻辑 ===== */
var LEADS = [ var LEADS = [
{ id:'LM001', created:'2026-06-22 09:14', updated:'2026-06-23 10:05', customer:'远航科技有限公司', contact:'张总/138****5566', catg:'异地用工', product:'岗位外包', source:'合伙人添加', assignee:'李明', channel:'王利娟', status:'跟进中' }, { id:'LM001', created:'2026-06-22 09:14', updated:'2026-06-23 10:05', customer:'远航科技有限公司', contact:'张总/138****5566', catg:'异地用工', product:'岗位外包', source:'合伙人添加', assignee:'李明', channel:'王利娟', status:'跟进中' },
{ id:'LM002', created:'2026-06-23 14:05', updated:'2026-06-23 14:05', customer:'锦绣餐饮集团', contact:'王总/139****2211', catg:'员工关怀', product:'三节福利采购', source:'落地页扫码', assignee:'—', channel:'王利娟', status:'待分配' }, { id:'LM002', created:'2026-06-23 14:05', updated:'2026-06-23 14:05', customer:'锦绣餐饮集团', contact:'王总/139****2211', catg:'员工关怀', product:'三节福利采购', source:'落地页扫码', assignee:'—', channel:'王利娟', status:'待分配' },
...@@ -500,8 +957,6 @@ function openStatus(id) { ...@@ -500,8 +957,6 @@ function openStatus(id) {
openModal('modal-status'); openModal('modal-status');
} }
function openModal(id) { document.getElementById(id).classList.add('show'); }
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
function switchTab(key, el) { function switchTab(key, el) {
document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); }); document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); });
...@@ -515,6 +970,7 @@ function switchTab(key, el) { ...@@ -515,6 +970,7 @@ function switchTab(key, el) {
renderLeads(); renderLeads();
switchTab('lead', document.querySelector('.tab:first-child')); switchTab('lead', document.querySelector('.tab:first-child'));
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
HTML原型/lead_management_v2.html → 后台HTML原型/亲亲创客管理/商机管理.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -92,20 +92,29 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -92,20 +92,29 @@ td{padding:9px 10px;vertical-align:middle}
.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;background:#1677ff} .log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;background:#1677ff}
.log-text{font-size:13px;color:#1a1a1a;line-height:1.6} .log-text{font-size:13px;color:#1a1a1a;line-height:1.6}
.log-meta{font-size:11px;color:#bfbfbf;margin-top:2px} .log-meta{font-size:11px;color:#bfbfbf;margin-top:2px}
/* 对接人分配表 */
.info-bar{background:#e8f4ff;border:1px solid #91caff;border-radius:6px;padding:9px 14px;font-size:12px;color:#0958d9;margin-bottom:12px;display:flex;gap:6px}
</style> </style>
</head> </head>
<body> <body>
<div class="layout"> <div class="layout">
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div> <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
<div class="nav-group">产品管理</div>
<div class="nav-item">产品分类</div>
<div class="nav-item">产品管理列表</div>
<div class="nav-group">合伙人管理</div> <div class="nav-group">合伙人管理</div>
<div class="nav-item">合伙人申请审核列表</div>
<div class="nav-item">合伙人管理列表</div> <div class="nav-item">合伙人管理列表</div>
<div class="nav-group">商机管理</div> <div class="nav-group">商机管理</div>
<div class="nav-item active" onclick="switchPage('leads',this)">商机管理列表</div> <div class="nav-item active" onclick="switchPage('leads',this)">商机管理列表</div>
<div class="nav-item" onclick="switchPage('assignee-table',this)">对接人分配表</div>
<div class="nav-group">佣金结算</div> <div class="nav-group">佣金结算</div>
<div class="nav-item">合伙人佣金结算</div> <div class="nav-item">合伙人佣金结算</div>
<div class="nav-item">渠道管理员佣金结算</div> <div class="nav-item">渠道管理员佣金结算</div>
<div class="nav-item">对接人佣金结算</div> <div class="nav-item">对接人佣金结算</div>
<div class="nav-item">介绍人奖励金列表</div>
</div> </div>
<div class="main"> <div class="main">
...@@ -164,10 +173,90 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -164,10 +173,90 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
</div> </div>
</div> </div>
<!-- ===== 对接人分配表 ===== -->
<div id="page-assignee-table" class="page">
<div class="page-header">
<span class="page-title">对接人分配表</span>
<div style="display:flex;gap:8px">
<button class="btn"><i class="ti ti-download"></i>导出</button>
<button class="btn"><i class="ti ti-share"></i>分享</button>
</div>
</div>
<div class="filter-wrap">
<div class="filter-grid">
<div class="filter-item"><label>企业名称</label><input type="text" id="f-ent" placeholder="请输入"></div>
<div class="filter-item"><label>产品名称</label><input type="text" id="f-prod" placeholder="请输入"></div>
<div class="filter-item"><label>对接人</label>
<select id="f-asgn">
<option value="">全部</option>
<option>李明</option><option>赵磊</option><option>刘婷</option><option>王芳</option>
</select>
</div>
<div class="filter-item"><label>渠道管理员</label>
<select id="f-channel">
<option value="">全部</option>
<option>王利娟</option>
</select>
</div>
<div class="filter-item"><label>合伙人</label><input type="text" id="f-partner" placeholder="姓名/手机号"></div>
<div class="filter-item"><label>写入时间</label>
<div style="display:flex;align-items:center;gap:4px">
<input type="date" style="min-width:118px"><span style="color:#bfbfbf">至</span><input type="date" style="min-width:118px">
</div>
</div>
<div class="filter-btns">
<button class="btn btn-primary btn-sm" onclick="renderTable()"><i class="ti ti-search"></i>查询</button>
<button class="btn btn-sm" onclick="resetFilter()"><i class="ti ti-refresh"></i>重置</button>
</div>
</div>
</div>
<div class="content">
<div class="info-bar">
<i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
<span>本表记录商机<b>已分配对接人且已关联企业</b>后自动写入的数据。新建商机时系统将查询此表，按「企业名称 + 产品名称」匹配，若有记录则自动带入对接人。</span>
</div>
<div class="table-card">
<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 id="main-tbody"></tbody>
</table>
<div class="pagination">
<span id="row-count">共 4 条</span>
<div style="display:flex;gap:4px">
<div class="page-btn"><i class="ti ti-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn"><i class="ti ti-chevron-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- 新增商机弹窗（后台添加模式） --> <!-- 新增商机弹窗（后台添加模式） -->
<div class="modal-overlay" id="modal-add"> <div class="modal-overlay" id="modal-add">
<div class="modal"> <div class="modal">
<div class="modal-header"> <div class="modal-header">
...@@ -176,7 +265,24 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -176,7 +265,24 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-sec"> <div class="form-sec">
<div class="form-sec-title"><i class="ti ti-building"></i>关联企业（必填）</div> <div class="form-sec-title"><i class="ti ti-apps"></i>用户类型（必填）</div>
<div class="form-row full">
<div class="form-item">
<label>选择用户类型<span class="req">*</span></label>
<select id="add-user-type" onchange="onUserTypeChange(this.value)">
<option value="">请选择</option>
<option value="xiaobao">亲亲小保</option>
<option value="qifu">亲亲企服</option>
</select>
</div>
</div>
</div>
<div class="form-sec" id="sec-link-hint">
<div class="form-sec-title"><i class="ti ti-link"></i>关联用户（必填）</div>
<div style="font-size:12px;color:#bfbfbf;padding:2px 0 4px">请先选择用户类型，将根据类型关联企业或个人用户</div>
</div>
<div class="form-sec" id="sec-link-ent" style="display:none">
<div class="form-sec-title"><i class="ti ti-building"></i>关联企业用户（必填）</div>
<div class="form-row full"> <div class="form-row full">
<div class="form-item"> <div class="form-item">
<label>选择企业<span class="req">*</span></label> <label>选择企业<span class="req">*</span></label>
...@@ -190,14 +296,28 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -190,14 +296,28 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
</div> </div>
</div> </div>
<div class="form-sec" id="sec-link-person" style="display:none">
<div class="form-sec-title"><i class="ti ti-user"></i>关联个人用户（必填）</div>
<div class="form-row full">
<div class="form-item">
<label>选择个人用户<span class="req">*</span></label>
<select id="add-person">
<option value="">请搜索/选择已有个人用户</option>
<option value="张伟">张伟 / 138****5566</option>
<option value="刘敏">刘敏 / 150****7878</option>
<option value="孙杰">孙杰 / 136****8541</option>
<option value="赵琳">赵琳 / 151****2215</option>
</select>
</div>
</div>
</div>
<div class="form-sec"> <div class="form-sec">
<div class="form-sec-title"><i class="ti ti-package"></i>产品信息</div> <div class="form-sec-title"><i class="ti ti-package"></i>产品信息</div>
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label>产品分类<span class="req">*</span></label> <label>产品分类<span class="req">*</span></label>
<select onchange="updateProductsAdd(this.value)"> <select id="add-catg-sel" onchange="updateProductsAdd(this.value)">
<option value="">请选择</option> <option value="">请先选择用户类型</option>
<option>异地用工</option><option>财税服务</option><option>人事代理</option><option>AI获客</option>
</select> </select>
</div> </div>
<div class="form-item"> <div class="form-item">
...@@ -391,6 +511,20 @@ td{padding:9px 10px;vertical-align:middle} ...@@ -391,6 +511,20 @@ td{padding:9px 10px;vertical-align:middle}
</div> </div>
</div> </div>
<div class="modal-overlay" id="modal-at-detail">
<div class="modal">
<div class="modal-header">
<span class="modal-title" style="color:#1677ff"><i class="ti ti-table"></i>分配记录详情</span>
<i class="ti ti-x modal-close" onclick="closeModal('modal-at-detail')"></i>
</div>
<div class="modal-body" id="at-detail-body"></div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('modal-at-detail')">关闭</button>
</div>
</div>
</div>
<script> <script>
var LEADS = [ var LEADS = [
{ id:'LM001', created:'2026-06-22 09:14', updated:'2026-06-23 10:05', { id:'LM001', created:'2026-06-22 09:14', updated:'2026-06-23 10:05',
...@@ -496,7 +630,35 @@ var ASSIGN_TABLE = { ...@@ -496,7 +630,35 @@ var ASSIGN_TABLE = {
'顺达物流有限公司_社保公积金托管':'王芳', '顺达物流有限公司_社保公积金托管':'王芳',
'云端科技股份公司_AI获客工具':'刘婷', '云端科技股份公司_AI获客工具':'刘婷',
}; };
var PRODUCTS = {'异地用工':['岗位外包','劳务派遣','企业员工社保代缴'],'财税服务':['代理记账','税务筹划'],'人事代理':['社保公积金托管','人事外包'],'AI获客':['AI获客工具']}; var PRODUCTS = {'异地用工':['岗位外包','劳务派遣','企业员工社保代缴'],'财税服务':['代理记账','税务筹划'],'人事代理':['社保公积金托管','人事外包'],'AI获客':['AI获客工具'],'个人社保':['个人社保代缴','社保补缴'],'个人公积金':['个人公积金代缴'],'个人财税':['个税申报服务']};
/* 联动映射：用户类型→产品分类（开发按实际配置调整） */
var CATG_BY_UT = { qifu: ['异地用工','财税服务','人事代理','AI获客'], xiaobao: ['个人社保','个人公积金','个人财税'] };
function fillSelect(sel, placeholder, items) {
sel.innerHTML = '';
var o0 = document.createElement('option'); o0.value=''; o0.textContent = placeholder; sel.appendChild(o0);
(items||[]).forEach(function(it){
var o = document.createElement('option');
if (Array.isArray(it)) { o.value = it[0]; o.textContent = it[1]; }
else { o.value = it; o.textContent = it; }
sel.appendChild(o);
});
}
function onUserTypeChange(v) {
var catg = document.getElementById('add-catg-sel');
var prod = document.getElementById('add-product-sel');
var hint = document.getElementById('sec-link-hint');
var secEnt = document.getElementById('sec-link-ent');
var secPerson = document.getElementById('sec-link-person');
hint.style.display = v ? 'none' : '';
secEnt.style.display = v === 'qifu' ? '' : 'none';
secPerson.style.display = v === 'xiaobao' ? '' : 'none';
if (v !== 'qifu') document.getElementById('add-enterprise').value = '';
if (v !== 'xiaobao') document.getElementById('add-person').value = '';
if (!v) { fillSelect(catg,'请先选择用户类型',[]); }
else { fillSelect(catg,'请选择',CATG_BY_UT[v]||[]); }
fillSelect(prod,'请先选择分类',[]);
checkBackendDup();
}
var curFilter = ''; var curFilter = '';
function renderLeads(status, el) { function renderLeads(status, el) {
...@@ -654,8 +816,101 @@ function switchPage(key,el){ ...@@ -654,8 +816,101 @@ function switchPage(key,el){
document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');}); document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});
document.getElementById('page-'+key).classList.add('active'); document.getElementById('page-'+key).classList.add('active');
el.classList.add('active'); el.classList.add('active');
if (key === 'assignee-table' && typeof renderTable === 'function') renderTable();
} }
renderLeads('待审核'); renderLeads('待审核');
/* ===== 对接人分配表 ===== */
var ATDATA = [
{ id:1, enterprise:'远航科技有限公司', product:'岗位外包', catg:'异地用工',
partner:'李鹏飞 / 158****0129', assignee:'李明', channel:'王利娟',
leadStatus:'跟进中', writtenAt:'2026-06-22 15:30', leadId:'LM001' },
{ id:2, enterprise:'启航教育咨询', product:'代理记账', catg:'财税服务',
partner:'李鹏飞 / 158****0129', assignee:'赵磊', channel:'王利娟',
leadStatus:'已成单', writtenAt:'2026-06-20 13:50', leadId:'LM003' },
{ id:3, enterprise:'顺达物流有限公司', product:'社保公积金托管', catg:'人事代理',
partner:'赛晓丽 / 137****3269', assignee:'王芳', channel:'王利娟',
leadStatus:'已成单', writtenAt:'2026-06-15 11:00', leadId:'LM005' },
{ id:4, enterprise:'云端科技股份公司', product:'AI获客工具', catg:'AI获客',
partner:'张情 / 166****8880', assignee:'刘婷', channel:'王利娟',
leadStatus:'跟进中', writtenAt:'2026-06-17 13:00', leadId:'LM008' },
{ id:5, enterprise:'蓝海投资管理公司', product:'劳务派遣', catg:'异地用工',
partner:'李鹏飞 / 158****0129', assignee:'李明', channel:'王利娟',
leadStatus:'暂时挂起', writtenAt:'2026-06-18 15:50', leadId:'LM004' },
];
var ATLS = {
'跟进中':'tag-cyan','已成单':'tag-green','待分配':'tag-blue',
'待审核':'tag-orange','暂时挂起':'tag-gold','已作废':'tag-gray'
};
function renderTable() {
var fe = document.getElementById('f-ent').value.trim();
var fp = document.getElementById('f-prod').value.trim();
var fa = document.getElementById('f-asgn').value;
var fc = document.getElementById('f-channel').value;
var fpar = document.getElementById('f-partner').value.trim();
var list = ATDATA.filter(function(d) {
if (fe && d.enterprise.indexOf(fe) < 0) return false;
if (fp && d.product.indexOf(fp) < 0) return false;
if (fa && d.assignee !== fa) return false;
if (fc && d.channel !== fc) return false;
if (fpar && d.partner.indexOf(fpar) < 0) return false;
return true;
});
document.getElementById('row-count').textContent = '共 ' + list.length + ' 条';
document.getElementById('main-tbody').innerHTML = list.map(function(d) {
return '<tr>'
+ '<td><span style="font-weight:500;cursor:pointer;color:#1677ff" onclick="openATDetail(' + d.id + ')">' + d.enterprise + '</span></td>'
+ '<td>' + d.product + '</td>'
+ '<td style="color:#8c8c8c">' + d.catg + '</td>'
+ '<td style="font-size:12px">' + d.partner + '</td>'
+ '<td><span style="color:#1677ff;font-weight:500">' + d.assignee + '</span></td>'
+ '<td style="color:#1677ff">' + d.channel + '</td>'
+ '<td><span class="tag ' + (ATLS[d.leadStatus]||'tag-gray') + '">' + d.leadStatus + '</span></td>'
+ '<td style="color:#8c8c8c;font-size:12px">' + d.writtenAt + '</td>'
+ '<td><button class="btn-link">' + d.leadId + '</button></td>'
+ '<td><button class="btn-link" onclick="openATDetail(' + d.id + ')">详情</button></td>'
+ '</tr>';
}).join('') || '<tr><td colspan="10" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
}
function openATDetail(id) {
var d = ATDATA.find(function(x) { return x.id === id; });
if (!d) return;
var html = '<div class="sec-title" style="margin-top:0">企业 &amp; 产品信息</div>'
+ '<div class="detail-row"><span class="dl">企业名称</span><span class="dv" style="font-weight:500;color:#1677ff">' + d.enterprise + '</span></div>'
+ '<div class="detail-row"><span class="dl">产品名称</span><span class="dv">' + d.product + '</span></div>'
+ '<div class="detail-row"><span class="dl">产品分类</span><span class="dv">' + d.catg + '</span></div>'
+ '<div class="sec-title">关联人员</div>'
+ '<div class="detail-row"><span class="dl">合伙人</span><span class="dv">' + d.partner + '</span></div>'
+ '<div class="detail-row"><span class="dl">对接人</span><span class="dv" style="color:#1677ff;font-weight:500">' + d.assignee + '</span></div>'
+ '<div class="detail-row"><span class="dl">渠道管理员</span><span class="dv" style="color:#1677ff">' + d.channel + '</span></div>'
+ '<div class="sec-title">来源信息</div>'
+ '<div class="detail-row"><span class="dl">来源商机</span><span class="dv"><button class="btn-link">' + d.leadId + '</button></span></div>'
+ '<div class="detail-row"><span class="dl">商机状态</span><span class="dv"><span class="tag ' + (ATLS[d.leadStatus]||'tag-gray') + '">' + d.leadStatus + '</span></span></div>'
+ '<div class="detail-row"><span class="dl">写入时间</span><span class="dv">' + d.writtenAt + '</span></div>'
+ '<div class="sec-title">写入规则说明</div>'
+ '<div style="background:#f5f5f5;border-radius:6px;padding:10px 12px;font-size:12px;color:#595959;line-height:1.8">'
+ '· 触发条件：商机分配对接人 <b>且</b> 已关联企业，两者同时满足<br>'
+ '· 查询逻辑：新建商机时以「企业名称 + 产品名称」为 Key 查询本表<br>'
+ '· 命中则自动带入对接人，跳过手动分配步骤<br>'
+ '· 本表与企业详情的「对接人分配表」Tab 为同一数据源'
+ '</div>';
document.getElementById('at-detail-body').innerHTML = html;
openModal('modal-at-detail');
}
function resetFilter() {
['f-ent','f-prod','f-asgn','f-channel','f-partner'].forEach(function(id) {
var el = document.getElementById(id); if (el) el.value = '';
});
renderTable();
}
renderTable();
</script> </script>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment