Skip to content

qqxb-qqqf / qqck-project

Go to a project
Commit 19c530be by 张倩
Options

小程序原型更新

parent 581adddf
Inline Side-by-side
Showing with 250 additions and 29 deletions
小程序HTML原型/01-登录及申请.dc.html → 小程序HTML原型/01-登录及申请.dc (2).html
<!DOCTYPE html>
<!DOCTYPE html>
......@@ -1434,6 +1434,193 @@
<div class="lc-sub">同一用户驳回后可无限次重新申请；系统会记录申请历史与驳回原因，避免重复提交同类问题</div>
</div>
<!-- ================================================================
▼▼▼ 新增流程 · 扫码邀请合伙人 ▼▼▼
================================================================ -->
<div style="position:absolute;left:80px;top:1428px;font:800 22px/1 'Noto Sans SC',sans-serif;color:#0E5A30;letter-spacing:-.4px">扫码邀请合伙人流程</div>
<div style="position:absolute;left:80px;top:1460px;display:flex;align-items:center;gap:10px;font:500 12px/1 'Noto Sans SC',sans-serif;color:rgba(20,80,50,.7)">
<span style="display:inline-block;width:18px;height:2px;background:#16A55A"></span>
<span>扫描介绍人二维码 · 邀请落地页 · 点击申请引导登录 · 登录后实名认证提示（P3c） · 完成实名后绑定「介绍人 ↔ 合伙人」关系</span>
</div>
<!-- ================================================================
Q1 · 扫码邀请落地页（含底部「申请成为合伙人」按钮）
================================================================ -->
<div style="position:absolute;left:80px;top:1500px;width:375px">
<div data-drags-parent="1" class="label">Q1 · 扫码邀请落地页</div>
<div class="phone" style="height:812px">
<div class="statusbar">
<span class="stime">9:41</span>
<div class="sicons"><svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><circle cx="2" cy="9.5" r="1.5"></circle><circle cx="6.5" cy="9.5" r="1.5"></circle><circle cx="11" cy="9.5" r="1.5"></circle></svg><svg width="16" height="11" viewBox="0 0 16 11" fill="none"><circle cx="8" cy="9.5" r="1" fill="currentColor"></circle></svg><svg width="26" height="13" viewBox="0 0 26 13" fill="none"><rect x=".5" y="1.5" width="22" height="10" rx="2.5" stroke="currentColor" stroke-opacity=".4"></rect><rect x="2" y="3" width="19" height="7" rx="1.2" fill="currentColor"></rect></svg></div>
</div>
<div class="navbar">
<div class="back-ic"><svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M14 5l-6 6 6 6" stroke="#1A1A2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div class="navtitle" style="padding-right:0">邀请成为合伙人</div>
<div class="capsule"><svg width="18" height="4" viewBox="0 0 18 4"><circle cx="3" cy="2" r="1.5" fill="#1A1A2E"></circle><circle cx="9" cy="2" r="1.5" fill="#1A1A2E"></circle><circle cx="15" cy="2" r="1.5" fill="#1A1A2E"></circle></svg><div style="width:.5px;height:14px;background:rgba(0,0,0,.15)"></div><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.5" stroke="#1A1A2E" stroke-width="1.1" fill="none"></circle><circle cx="8" cy="8" r="2.2" fill="#1A1A2E"></circle></svg></div>
</div>
<div class="scroll" style="padding:0 16px 112px">
<!-- 介绍人邀请卡 -->
<div style="margin:8px 0 14px;background:linear-gradient(135deg,#E5F7EC 0%,#D1F0DC 55%,#C7EFE2 100%);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;border:1.5px solid rgba(22,165,90,.2);box-shadow:0 6px 18px rgba(22,165,90,.1)">
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6CD3A4,#16A55A);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid #fff;box-shadow:0 4px 12px rgba(22,165,90,.28)"><span style="color:#fff;font-size:20px;font-weight:700">杨</span></div>
<div style="flex:1">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:3px"><span style="font-size:15px;font-weight:700;color:#0E5A30">杨恒宇</span><span style="background:linear-gradient(135deg,#6CD3A4,#16A55A);color:#fff;font-size:10px;padding:1px 7px;border-radius:8px;font-weight:600">介绍人</span></div>
<div style="font-size:12px;color:#1A8C4D;line-height:1.5">邀请你加入亲亲创客 · 成为合伙人</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none"><rect x="1" y="1" width="10" height="10" rx="1.5" stroke="#16A55A" stroke-width="1.4"></rect><rect x="1" y="15" width="10" height="10" rx="1.5" stroke="#16A55A" stroke-width="1.4"></rect><rect x="15" y="1" width="10" height="10" rx="1.5" stroke="#16A55A" stroke-width="1.4"></rect><rect x="4" y="18" width="4" height="4" fill="#16A55A"></rect><rect x="4" y="4" width="4" height="4" fill="#16A55A"></rect><rect x="18" y="4" width="4" height="4" fill="#16A55A"></rect><rect x="15" y="15" width="4" height="4" fill="#16A55A"></rect><rect x="21" y="21" width="4" height="4" fill="#16A55A"></rect></svg>
<span style="font-size:9px;color:#1A8C4D">扫码而来</span>
</div>
</div>
<!-- Hero · 合伙人计划 -->
<div style="background:linear-gradient(135deg,#5B7CFA 0%,#3651DB 60%,#7B5FE8 100%);border-radius:18px;padding:20px;color:#fff;position:relative;overflow:hidden;margin-bottom:14px">
<div style="position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1)"></div>
<div style="position:absolute;right:14px;bottom:-30px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.08)"></div>
<div style="position:relative">
<div style="display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.22);border-radius:10px;padding:3px 9px;font-size:11px;margin-bottom:10px">🚀 合伙人招募中</div>
<div style="font-size:23px;font-weight:800;line-height:1.25;margin-bottom:8px">推荐企业客户<br>最高享 <span style="color:#FFD86B">30%</span> 持续返佣</div>
<div style="font-size:12.5px;color:rgba(255,255,255,.88);line-height:1.65">订单成交即得佣金 · 续费持续分润 · 小程序秒提现</div>
</div>
</div>
<!-- 价值点 -->
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px">
<div style="background:#fff;border-radius:12px;padding:12px 8px;text-align:center;box-shadow:0 2px 8px rgba(60,55,120,.05)">
<div style="font-size:22px;line-height:1;margin-bottom:6px">💰</div>
<div style="font-size:12px;font-weight:600;color:#1A1A2E">最高 30% 返佣</div>
<div style="font-size:10px;color:#888;margin-top:3px">续费持续分润</div>
</div>
<div style="background:#fff;border-radius:12px;padding:12px 8px;text-align:center;box-shadow:0 2px 8px rgba(60,55,120,.05)">
<div style="font-size:22px;line-height:1;margin-bottom:6px">⚡</div>
<div style="font-size:12px;font-weight:600;color:#1A1A2E">小程序秒提现</div>
<div style="font-size:10px;color:#888;margin-top:3px">结算公开透明</div>
</div>
<div style="background:#fff;border-radius:12px;padding:12px 8px;text-align:center;box-shadow:0 2px 8px rgba(60,55,120,.05)">
<div style="font-size:22px;line-height:1;margin-bottom:6px">🎓</div>
<div style="font-size:12px;font-weight:600;color:#1A1A2E">零门槛可推</div>
<div style="font-size:10px;color:#888;margin-top:3px">介绍人带教</div>
</div>
</div>
<!-- 加入三步 -->
<div style="background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 16px rgba(60,55,120,.06)">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:14px"><div class="section-bar"></div><span style="font-size:14px;font-weight:700;color:#1A1A2E">3 步成为合伙人</span></div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px">
<div style="width:24px;height:24px;border-radius:50%;background:#EAF0FE;color:#3651DB;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0">1</div>
<div style="font-size:13px;color:#1A1A2E;font-weight:600">登录亲亲创客</div>
<div style="margin-left:auto;font-size:11px;color:#999">手机号一键登录</div>
</div>
<div style="display:flex;align-items:center;gap:10px">
<div style="width:24px;height:24px;border-radius:50%;background:#EAF0FE;color:#3651DB;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0">2</div>
<div style="font-size:13px;color:#1A1A2E;font-weight:600">完成实名认证</div>
<div style="margin-left:auto;font-size:11px;color:#999">合规前置 · 最快 10 秒</div>
</div>
<div style="display:flex;align-items:center;gap:10px">
<div style="width:24px;height:24px;border-radius:50%;background:#EAF0FE;color:#3651DB;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0">3</div>
<div style="font-size:13px;color:#1A1A2E;font-weight:600">提交合伙人申请</div>
<div style="margin-left:auto;font-size:11px;color:#999">审核通过即开通</div>
</div>
</div>
</div>
</div>
<!-- 底部 CTA · 申请成为合伙人 -->
<div style="position:absolute;left:0;right:0;bottom:34px;padding:12px 16px 10px;background:linear-gradient(180deg,transparent,#F4F1FA 34%);z-index:2">
<div class="btn-primary">申请成为合伙人</div>
<div style="text-align:center;margin-top:7px;font-size:11px;color:#888">经 <b style="color:#16A55A;font-weight:600">杨恒宇</b> 邀请 · 成功加入后自动绑定介绍关系</div>
</div>
<div class="home"><div class="home-bar"></div></div>
</div>
</div>
<!-- ================================================================
Q2 · 点击「申请」→ 登录提示（底部授权登录浮层）
================================================================ -->
<div style="position:absolute;left:555px;top:1500px;width:375px">
<div data-drags-parent="1" class="label">Q2 · 点击申请 · 登录提示</div>
<div class="phone" style="height:812px">
<!-- 底层：落地页（暗化） -->
<div style="position:absolute;inset:0;filter:brightness(.9)">
<div class="statusbar">
<span class="stime">9:41</span>
<div class="sicons"><svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><circle cx="2" cy="9.5" r="1.5"></circle><circle cx="6.5" cy="9.5" r="1.5"></circle><circle cx="11" cy="9.5" r="1.5"></circle></svg><svg width="16" height="11" viewBox="0 0 16 11" fill="none"><circle cx="8" cy="9.5" r="1" fill="currentColor"></circle></svg><svg width="26" height="13" viewBox="0 0 26 13" fill="none"><rect x=".5" y="1.5" width="22" height="10" rx="2.5" stroke="currentColor" stroke-opacity=".4"></rect><rect x="2" y="3" width="19" height="7" rx="1.2" fill="currentColor"></rect></svg></div>
</div>
<div class="navbar"><div class="back-ic"><svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M14 5l-6 6 6 6" stroke="#1A1A2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><div class="navtitle" style="padding-right:0">邀请成为合伙人</div><div class="capsule"><svg width="18" height="4" viewBox="0 0 18 4"><circle cx="3" cy="2" r="1.5" fill="#1A1A2E"></circle><circle cx="9" cy="2" r="1.5" fill="#1A1A2E"></circle><circle cx="15" cy="2" r="1.5" fill="#1A1A2E"></circle></svg><div style="width:.5px;height:14px;background:rgba(0,0,0,.15)"></div><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.5" stroke="#1A1A2E" stroke-width="1.1" fill="none"></circle><circle cx="8" cy="8" r="2.2" fill="#1A1A2E"></circle></svg></div></div>
<div style="padding:8px 16px 0">
<div style="background:linear-gradient(135deg,#E5F7EC,#D1F0DC);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;border:1.5px solid rgba(22,165,90,.2)">
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6CD3A4,#16A55A);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid #fff"><span style="color:#fff;font-size:20px;font-weight:700">杨</span></div>
<div style="flex:1"><div style="font-size:15px;font-weight:700;color:#0E5A30;margin-bottom:3px">杨恒宇 邀请你</div><div style="font-size:12px;color:#1A8C4D">加入亲亲创客 · 成为合伙人</div></div>
</div>
<div style="margin-top:14px;background:linear-gradient(135deg,#5B7CFA,#3651DB);border-radius:18px;padding:20px;color:#fff"><div style="font-size:23px;font-weight:800;line-height:1.25;margin-bottom:8px">推荐企业客户<br>最高享 30% 持续返佣</div><div style="font-size:12.5px;color:rgba(255,255,255,.88)">订单成交即得佣金 · 秒提现</div></div>
</div>
</div>
<!-- 遮罩 -->
<div style="position:absolute;inset:0;background:rgba(20,15,45,.5)"></div>
<!-- 底部登录浮层 -->
<div style="position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:10px 24px 30px;box-shadow:0 -12px 40px rgba(20,15,45,.25)">
<div style="width:38px;height:4px;background:#E4E1F0;border-radius:2px;margin:0 auto 20px"></div>
<div style="display:flex;flex-direction:column;align-items:center;margin-bottom:18px">
<div style="width:60px;height:60px;background:linear-gradient(135deg,#5B7CFA,#3651DB);border-radius:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(77,111,245,.34);margin-bottom:14px"><span style="color:#fff;font-size:30px;font-weight:800">创</span></div>
<div style="font-size:18px;font-weight:800;color:#1A1A2E;margin-bottom:6px">登录后申请成为合伙人</div>
<div style="font-size:12.5px;color:#888;text-align:center;line-height:1.6">申请合伙人需先登录亲亲创客账号<br>登录后将保留 <b style="color:#16A55A;font-weight:600">杨恒宇</b> 的邀请关系</div>
</div>
<div style="height:50px;background:linear-gradient(135deg,#5B7CFA,#3651DB);border-radius:25px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 22px rgba(77,111,245,.35);margin-bottom:12px">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.1 3.57 2.82 4.66l-.7 2.1 2.43-1.3c.62.17 1.27.27 1.95.27.2 0 .4-.01.6-.03-.13-.4-.2-.83-.2-1.27 0-2.66 2.6-4.83 5.8-4.83.18 0 .36.01.54.02C14.8 6.36 12.4 4 9.5 4z"></path><path d="M22 14.83c0-2.21-2.13-4-4.75-4S12.5 12.62 12.5 14.83c0 2.22 2.13 4 4.75 4 .5 0 .98-.07 1.43-.18l1.82.97-.5-1.57c.93-.78 1.5-1.83 1.5-3.02z"></path></svg>
<span style="color:#fff;font-size:16px;font-weight:600">微信一键登录</span>
</div>
<div style="display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:#888;line-height:1.6;padding:0 4px">
<div style="width:15px;height:15px;border-radius:50%;border:1.5px solid #C8C5DE;flex-shrink:0;margin-top:1px"></div>
<span>我已阅读并同意<span style="color:#1A1A2E">《用户使用协议》</span>和<span style="color:#1A1A2E">《隐私政策》</span></span>
</div>
<div style="text-align:center;margin-top:16px;font-size:13px;color:#999">暂不登录</div>
</div>
<div class="home"><div class="home-bar"></div></div>
</div>
</div>
<!-- ================================================================
Q3 · 登录后 · 实名认证提示（复用 P3c）
================================================================ -->
<!-- ================================================================
Q4 · 完成实名 · 绑定「介绍人 ↔ 合伙人」关系
================================================================ -->
<!-- ===== Flow Q · 逻辑说明卡 ===== -->
<div class="logic-card" style="left:80px;top:2342px">
<div class="lc-title"><span class="lc-dot" style="background:#16A55A"></span>Q1 · 扫码邀请落地页 · 关键逻辑<span class="lc-tag" style="background:#E5F7EC;color:#16A55A">扫码入口</span></div>
<ul>
<li><b>入口</b>：介绍人在「邀请合伙人」页生成专属二维码 / 海报，被邀请人扫码进入本落地页</li>
<li><b>邀请人识别</b>：链接携带介绍人 ID，顶部展示介绍人头像 / 姓名 / 「介绍人」徽章，明确来源</li>
<li><b>核心内容</b>：合伙人计划权益（最高 30% 返佣）+ 3 步加入路径，建立信任与动机</li>
<li><b>底部 CTA</b>：常驻「申请成为合伙人」按钮，点击进入 Q2 登录引导</li>
</ul>
<div class="lc-sub">介绍人 ID 随访问全程携带，无论用户是否已登录，最终成单时都归属到该介绍人名下</div>
</div>
<div class="logic-card" style="left:555px;top:2342px">
<div class="lc-title"><span class="lc-dot" style="background:#16A55A"></span>Q2 · 点击申请 · 登录引导 · 关键逻辑<span class="lc-tag" style="background:#E5F7EC;color:#16A55A">登录前置</span></div>
<ul>
<li><b>触发时机</b>：未登录用户点击落地页「申请成为合伙人」→ 跳转到登录授权页面</li>
<li><b>登录方式</b>：微信一键登录（小程序授权）；需勾选协议后方可发起</li>
<li><b>关系保留</b>：登录浮层明确提示将保留介绍人邀请关系，介绍人 ID 暂存于会话，登录成功后写入用户档案</li>
<li><b>登录成功</b>：判断实名状态 —— 未实名 → P3c页面，进行实名认证，后续流程与自主申请一致，但扫码邀请的需要记录介绍人和合伙人的关系<br></li>
</ul>
<div class="lc-sub">已登录用户点击申请将跳过本浮层；「暂不登录」关闭浮层回到落地页，介绍人 ID 仍保留</div>
</div>
</x-dc>
</body>
</html>
小程序HTML原型/03-介绍人视图.dc.html → 小程序HTML原型/03-介绍人视图.dc (2).html
<!DOCTYPE html>
<!DOCTYPE html>
......@@ -283,7 +283,7 @@
P3 · 合伙人详情
================================================================ -->
<div style="position:absolute;left:1030px;top:120px;width:375px">
<div data-drags-parent="1" class="label">P3 · 合伙人详情</div>
<div data-drags-parent="1" class="label">P3 · 合伙人详情（暂时不做）</div>
<div class="phone" style="height: 812px">
<div class="statusbar">
<span class="stime">9:41</span>
......
小程序HTML原型/04-对接人视图.dc.html → 小程序HTML原型/04-对接人视图.dc (2).html
<!DOCTYPE html>
<!DOCTYPE html>
......@@ -604,31 +604,48 @@
</div>
<div class="navbar"><div class="back-ic"><svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M14 5l-6 6 6 6" stroke="#1A1A2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><div class="navtitle" style="padding-right:0">我的订单</div><div class="capsule"><svg width="18" height="4" viewBox="0 0 18 4"><circle cx="3" cy="2" r="1.5" fill="#1A1A2E"></circle><circle cx="9" cy="2" r="1.5" fill="#1A1A2E"></circle><circle cx="15" cy="2" r="1.5" fill="#1A1A2E"></circle></svg><div style="width:.5px;height:14px;background:rgba(0,0,0,.15)"></div><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.5" stroke="#1A1A2E" stroke-width="1.1" fill="none"></circle><circle cx="8" cy="8" r="2.2" fill="#1A1A2E"></circle></svg></div></div>
<div style="background:#fff;border-radius:12px;padding:4px;margin:6px 16px 12px;display:flex;flex-shrink:0">
<div style="margin:6px 16px 12px;display:flex;gap:8px;flex-shrink:0">
<div style="flex:1;background:#fff;border-radius:12px;padding:4px;display:flex">
<div style="flex:1;background:linear-gradient(135deg,#5B7CFA,#3651DB);color:#fff;font-size:13px;font-weight:600;padding:8px;text-align:center;border-radius:10px">本月</div>
<div style="flex:1;color:#888;font-size:13px;padding:8px;text-align:center">上月</div>
<div style="flex:1;color:#888;font-size:13px;padding:8px;text-align:center">全部</div>
</div>
<div style="background:#fff;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:5px;font-size:13px;color:#666;font-weight:500">
<svg width="15" height="15" viewBox="0 0 18 18" fill="none"><rect x="2.5" y="3.5" width="13" height="12" rx="2" stroke="#5B7CFA" stroke-width="1.4"></rect><path d="M2.5 7h13" stroke="#5B7CFA" stroke-width="1.4"></path><path d="M6 2v3M12 2v3" stroke="#5B7CFA" stroke-width="1.4" stroke-linecap="round"></path></svg>
<span>按月</span>
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5l3 3 3-3" stroke="#999" stroke-width="1.4" stroke-linecap="round"></path></svg>
</div>
</div>
<div style="margin:0 16px 12px;background:#fff;border-radius:12px;padding:12px 14px;flex-shrink:0">
<div style="display:flex;align-items:stretch">
<div style="flex:0.85"><div style="font-size:10.5px;color:#888;margin-bottom:4px">订单数量</div><div style="font-size:18px;font-weight:800;color:#1A1A2E">3<span style="font-size:11px;font-weight:500;color:#888;margin-left:2px">单</span></div></div>
<div style="width:1px;background:#EEE;margin:2px 0"></div>
<div style="flex:1.1;padding-left:12px"><div style="font-size:10.5px;color:#888;margin-bottom:4px">待审核佣金</div><div style="font-size:18px;font-weight:800;color:#FF7A2E">¥250</div></div>
</div>
<div style="margin-top:10px;padding-top:9px;border-top:1px dashed #EEE;font-size:10.5px;color:#999;line-height:1.55">注：仅展示<b style="color: rgb(102, 102, 102); font-weight: 600;">已扣费/已核定订单</b>，并按<b style="color: rgb(102, 102, 102); font-weight: 600;">订单扣费/核定时间</b>筛选。</div>
</div>
<div style="display:flex;align-items:center;gap:8px;margin:2px 16px 10px;flex-shrink:0"><div class="section-bar"></div><span style="font-size:15px;font-weight:700;color:#1A1A2E">明细列表</span></div>
<div class="scroll" style="padding:0 16px 16px">
<div class="card" style="padding:14px 16px;margin-bottom:10px">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
<div style="flex:1"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:14px;font-weight:700;color:#1A1A2E">北京卓思教育集团</span></div><div style="display:flex;gap:5px"><span class="tag-qfu">岗位外包</span><span style="font-size:11px;color:#888">· 订单号 QQ2026061501</span></div></div>
<span class="chip-done">已结算</span>
<span class="chip-done">佣金已审核</span>
</div>
<div style="background:#F8F8FC;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between"><div><span style="font-size:11px;color:#888">订单金额</span><span style="font-size:13px;font-weight:600;color:#1A1A2E;margin-left:6px">¥12,000</span></div><div><span style="font-size:11px;color:#888">我的佣金 (5%)</span><span style="font-size:14px;font-weight:700;color:#FF6B35;margin-left:6px">¥600</span></div></div>
</div>
<div class="card" style="padding:14px 16px;margin-bottom:10px">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
<div style="flex:1"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:14px;font-weight:700;color:#1A1A2E">杭州新一代网络技术</span></div><div style="display:flex;gap:5px"><span class="tag-qbao">员工福利</span><span style="font-size:11px;color:#888">· 订单号 QQ2026061202</span></div></div>
<span class="chip-done">已结算</span>
<span class="chip-done">佣金已审核</span>
</div>
<div style="background:#F8F8FC;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between"><div><span style="font-size:11px;color:#888">订单金额</span><span style="font-size:13px;font-weight:600;color:#1A1A2E;margin-left:6px">¥8,000</span></div><div><span style="font-size:11px;color:#888">我的佣金 (5%)</span><span style="font-size:14px;font-weight:700;color:#FF6B35;margin-left:6px">¥400</span></div></div>
</div>
<div class="card" style="padding:14px 16px;margin-bottom:10px">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
<div style="flex:1"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:14px;font-weight:700;color:#1A1A2E">南京博涵信息服务</span></div><div style="display:flex;gap:5px"><span class="tag-qfu">公司注册</span><span style="font-size:11px;color:#888">· 订单号 QQ2026060803</span></div></div>
<span class="chip-pending">待结算</span>
<span class="chip-pending">佣金待审核</span>
</div>
<div style="background:#F8F8FC;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between"><div><span style="font-size:11px;color:#888">订单金额</span><span style="font-size:13px;font-weight:600;color:#1A1A2E;margin-left:6px">¥5,000</span></div><div><span style="font-size:11px;color:#888">我的佣金 (5%)</span><span style="font-size:14px;font-weight:700;color:#FF6B35;margin-left:6px">¥250</span></div></div>
</div>
......@@ -652,7 +669,7 @@
<div class="scroll" style="padding:0 16px 16px">
<div style="background:linear-gradient(135deg,#E5F7EC,#D1F0DC);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:12px">
<div style="width:42px;height:42px;background:linear-gradient(135deg,#6CD3A4,#16A55A);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="20" height="16" viewBox="0 0 20 16" fill="none"><path d="M1.5 8l6 6.5 11-14" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div><div style="font-size:16px;font-weight:700;color:#0E5A30">订单已结算</div><div style="font-size:11.5px;color:#1A8C4D;margin-top:2px">佣金 ¥600 已通过 6 月工资发放</div></div>
<div><div style="font-size:16px;font-weight:700;color:#0E5A30">订单佣金已审核</div><div style="font-size:11.5px;color:#1A8C4D;margin-top:2px">佣金 ¥600 通过次月工资发放</div></div>
</div>
<div class="card" style="margin-bottom:10px;padding:16px">
......@@ -663,7 +680,7 @@
<div style="display:flex;justify-content:space-between"><span style="color:#888">客户</span><span style="color:#1A1A2E;font-weight:600">北京卓思教育集团</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#888">产品</span><span style="color:#1A1A2E">岗位外包（人力外包）</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#888">订单金额</span><span style="color:#1A1A2E;font-weight:700;font-size:14px">¥ 12,000.00</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#888">下单时间</span><span style="color:#1A1A2E">2026-06-15 14:30</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#888">下单时间</span><span style="color:#1A1A2E">2026-06-15 14:30</span></div><div style="display:flex;justify-content:space-between"><span style="color:#888">扣费时间</span><span style="color:#1A1A2E">2026-06-18 12:10</span></div>
</div>
</div>
......@@ -675,7 +692,7 @@
<div style="font-size:24px;font-weight:800;color:#FF6B35">¥ 600.00</div>
</div>
<div style="display:flex;flex-direction:column;gap:8px;font-size:12px">
<div style="display:flex;justify-content:space-between"><span style="color:#888">结算状态</span><span style="color:#16A55A;font-weight:500">已结算</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#888">佣金所属月份</span><span style="color:#16A55A;font-weight:500">2026-06</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#888">结算方式</span><span style="color:#1A1A2E">次月通过工资发放</span></div>
</div>
</div>
......@@ -716,42 +733,59 @@
<div style="background:linear-gradient(135deg,#5B7CFA 0%,#3651DB 60%,#7B5FE8 100%);border-radius:16px;padding:18px;color:#fff;position:relative;overflow:hidden;margin-bottom:12px">
<div style="position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1)"></div>
<div style="position:relative">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="font-size:12px;color:rgba(255,255,255,.85)">本月待结算佣金（元）</span><span style="background:rgba(255,255,255,.22);font-size:10px;padding:2px 7px;border-radius:8px">💼 工资发放</span></div>
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="font-size:12px;color:rgba(255,255,255,.85)">本月已审核佣金（元）</span></div>
<div style="font-size:38px;font-weight:800;line-height:1;letter-spacing:-.5px">5,600<span style="font-size:18px;font-weight:600">.00</span></div>
<div style="display:flex;gap:32px;margin-top:18px;font-size:11px;color:rgba(255,255,255,.85);padding-top:14px;border-top:1px solid rgba(255,255,255,.18)">
<div><div>已结算订单</div><div style="color:#fff;font-size:18px;font-weight:700;margin-top:3px">12 单</div></div>
<div><div>累计已发放</div><div style="color:#fff;font-size:18px;font-weight:700;margin-top:3px">¥ 38,400.00</div></div>
<div style="margin-top:12px;display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:rgba(255,255,255,.9);line-height:1.5"><span>注：对接人佣金次月通过工资结算，无需提现</span></div>
</div>
</div>
<div class="card" style="padding:14px 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;cursor:pointer">
<div style="display:flex;align-items:center;gap:12px">
<div style="width:38px;height:38px;border-radius:10px;background:#FFF1E8;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.5" stroke="#FF7A2E" stroke-width="1.6"></circle><path d="M10 6v4.2l2.8 1.6" stroke="#FF7A2E" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div><div style="font-size:12px;color:#888;margin-bottom:3px">待审核佣金</div><div style="font-size:20px;font-weight:800;color:#FF7A2E;line-height:1">¥250</div></div>
</div>
<div style="display:flex;align-items:center;gap:3px;font-size:12px;color:#FF7A2E;font-weight:600"><span>到订单中查看</span><svg width="13" height="13" viewBox="0 0 12 12" fill="none"><path d="M4.5 2.5l3.5 3.5-3.5 3.5" stroke="#FF7A2E" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
</div>
<div style="background:#EAF0FE;border-radius:10px;padding:10px 14px;display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;font-size:11.5px;color:#1F3FB3;line-height:1.5"><span style="font-size:14px">💡</span><span>对接人佣金次月通过工资结算，无需提现 · 点击卡片查看产生佣金的订单</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px"><div style="display:flex;align-items:center;gap:8px"><div class="section-bar"></div><span style="font-size:15px;font-weight:700;color:#1A1A2E">已审核佣金明细</span></div><span style="font-size:10.5px;color:#999;line-height:1.4;text-align:right">仅统计已审核佣金 · 按佣金所属月份筛选</span></div><div style="display:flex;gap:8px;margin-bottom:12px">
<div style="flex:1;background:#fff;border-radius:12px;padding:4px;display:flex">
<div style="flex:1;background:linear-gradient(135deg,#5B7CFA,#3651DB);color:#fff;font-size:13px;font-weight:600;padding:8px;text-align:center;border-radius:10px">本月</div>
<div style="flex:1;color:#888;font-size:13px;padding:8px;text-align:center">上月</div>
<div style="flex:1;color:#888;font-size:13px;padding:8px;text-align:center">全部</div>
</div>
<div style="background:#fff;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:5px;font-size:13px;color:#666;font-weight:500">
<svg width="15" height="15" viewBox="0 0 18 18" fill="none"><rect x="2.5" y="3.5" width="13" height="12" rx="2" stroke="#5B7CFA" stroke-width="1.4"></rect><path d="M2.5 7h13" stroke="#5B7CFA" stroke-width="1.4"></path><path d="M6 2v3M12 2v3" stroke="#5B7CFA" stroke-width="1.4" stroke-linecap="round"></path></svg>
<span>按月</span>
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5l3 3 3-3" stroke="#999" stroke-width="1.4" stroke-linecap="round"></path></svg>
</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px"><span style="font-size:15px;font-weight:700;color:#1A1A2E">佣金明细</span><div style="background:#fff;border-radius:18px;padding:6px 14px;display:flex;align-items:center;gap:6px;font-size:12px;color:#666">本月<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5l3 3 3-3" stroke="#999" stroke-width="1.4" stroke-linecap="round"></path></svg></div></div>
<div style="background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:14px">
<div style="display:flex;align-items:stretch">
<div style="flex:0.85"><div style="font-size:10.5px;color:#888;margin-bottom:4px">已审核订单</div><div style="font-size:18px;font-weight:800;color:#1A1A2E">2<span style="font-size:11px;font-weight:500;color:#888;margin-left:2px">单</span></div></div>
<div style="width:1px;background:#EEE;margin:2px 0"></div>
<div style="flex:1.1;padding-left:12px"><div style="font-size:10.5px;color:#888;margin-bottom:4px">已审核佣金</div><div style="font-size:18px;font-weight:800;color:#16A55A">¥5,600</div></div>
</div>
</div>
<!-- 明细卡片 · 与订单列表 P7 格式一致 -->
<div style="display:flex;flex-direction:column;gap:10px">
<!-- 明细卡片 · 与订单列表 P7 格式一致（作为「佣金明细」的分项，用轻量小标题区分层级） -->
<div style="display:flex;align-items:center;gap:10px;margin:18px 0 10px"><span style="font-size:12px;color:#999;font-weight:500;white-space:nowrap">明细列表</span><div style="flex:1;height:1px;background:#EAE8F2"></div></div><div style="display:flex;flex-direction:column;gap:10px">
<div class="card" style="padding:14px 16px">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
<div style="flex:1"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:14px;font-weight:700;color:#1A1A2E">北京卓思教育集团</span></div><div style="display:flex;gap:5px"><span class="tag-qfu">岗位外包</span><span style="font-size:11px;color:#888">· 订单号 QQ2026061501</span></div></div>
<span class="chip-done">已结算</span>
<span class="chip-done">佣金已审核</span>
</div>
<div style="background:#F8F8FC;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between"><div><span style="font-size:11px;color:#888">订单金额</span><span style="font-size:13px;font-weight:600;color:#1A1A2E;margin-left:6px">¥12,000</span></div><div><span style="font-size:11px;color:#888">我的佣金 (5%)</span><span style="font-size:14px;font-weight:700;color:#FF6B35;margin-left:6px">¥600</span></div></div>
</div>
<div class="card" style="padding:14px 16px">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
<div style="flex:1"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:14px;font-weight:700;color:#1A1A2E">杭州新一代网络技术</span></div><div style="display:flex;gap:5px"><span class="tag-qbao">员工福利</span><span style="font-size:11px;color:#888">· 订单号 QQ2026061202</span></div></div>
<span class="chip-done">已结算</span>
<span class="chip-done">佣金已审核</span>
</div>
<div style="background:#F8F8FC;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between"><div><span style="font-size:11px;color:#888">订单金额</span><span style="font-size:13px;font-weight:600;color:#1A1A2E;margin-left:6px">¥8,000</span></div><div><span style="font-size:11px;color:#888">我的佣金 (5%)</span><span style="font-size:14px;font-weight:700;color:#FF6B35;margin-left:6px">¥400</span></div></div>
</div>
<div class="card" style="padding:14px 16px">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
<div style="flex:1"><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px"><span style="font-size:14px;font-weight:700;color:#1A1A2E">南京博涵信息服务</span></div><div style="display:flex;gap:5px"><span class="tag-qfu">公司注册</span><span style="font-size:11px;color:#888">· 订单号 QQ2026060803</span></div></div>
<span class="chip-pending">待结算</span>
</div>
<div style="background:#F8F8FC;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between"><div><span style="font-size:11px;color:#888">订单金额</span><span style="font-size:13px;font-weight:600;color:#1A1A2E;margin-left:6px">¥5,000</span></div><div><span style="font-size:11px;color:#888">我的佣金 (5%)</span><span style="font-size:14px;font-weight:700;color:#FF6B35;margin-left:6px">¥250</span></div></div>
</div>
</div>
</div>
<div class="home"><div class="home-bar"></div></div>
......@@ -1140,7 +1174,7 @@
<div class="logic-card" style="left:3880px">
<div class="lc-title"><span class="lc-dot"></span>P8 · 订单详情<span class="lc-tag">详情</span></div>
<ul>
<li><b>头部状态</b>：结算状态 + 佣金发放通道说明</li>
<li><b>头部状态</b>：结算但审核状态（佣金待审核/佣金已审核） + 佣金发放通道说明</li>
<li><b>订单信息</b>：订单号 / 客户 / 产品 / 金额 / 服务期</li>
<li><b>我的佣金</b>：订单 × 佣金比例 = 佣金；比例源自产品配置</li>
<li><b>分佣干系人</b>：显示介绍人 / 合伙人 / 对接人（我）/ 渠道管理员及各自分佣规则；不再走链路呈现</li>
......
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