Commit 9d68a028 by 李鹏飞

落地页流程图

parent 9bd800a9
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
:root{
--bg:#F8FAFC;--card:#fff;
--pri:#1B4F8A;--pri-l:#EBF2FC;
--grn:#15803D;--grn-l:#DCFCE7;
--org:#C2580A;--org-l:#FEF3C7;
--red:#B91C1C;--red-l:#FEE2E2;
--pur:#6D28D9;--pur-l:#EDE9FE;
--cyn:#0E7490;--cyn-l:#ECFEFF;
--gry:#64748B;--gry-l:#F1F5F9;--gry-b:#E2E8F0;
--text:#1E293B;--text2:#64748B;--text3:#94A3B8;
font-family:'PingFang SC','Microsoft YaHei',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);padding:14px;font-size:12px;color:var(--text)}
.pt{font-size:15px;font-weight:600;margin-bottom:2px}
.ps{font-size:11px;color:var(--text2);margin-bottom:12px}
.legend{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text2)}
.leg-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.two-col{display:grid;grid-template-columns:380px 1fr;gap:10px}
.section{background:var(--card);border:1px solid var(--gry-b);border-radius:10px;overflow:hidden}
.sh{padding:9px 13px;border-bottom:1px solid var(--gry-b);display:flex;align-items:center;gap:7px}
.sh-icon{font-size:17px}
.sh-t{font-size:12.5px;font-weight:600}
.sh-s{font-size:10.5px;font-weight:400;color:var(--gry);margin-top:1px}
.sb{padding:12px 13px;display:flex;flex-direction:column;gap:0}
.nd{padding:7px 10px;border-radius:6px;font-size:11.5px;line-height:1.45}
.nd-start{background:var(--grn);color:#fff;font-weight:600;text-align:center;border-radius:18px;padding:6px 14px;align-self:center;font-size:12px}
.nd-start-b{background:var(--pri);color:#fff;font-weight:600;text-align:center;border-radius:18px;padding:6px 14px;align-self:center;font-size:12px}
.nd-act{background:var(--pri-l);color:var(--pri);border:1px solid #C5D9F2}
.nd-dec{background:var(--org-l);color:var(--org);border:1px solid #F5D0A9;font-weight:500;text-align:center}
.nd-dec::before{content:'◆ ';font-size:9px;opacity:.7}
.nd-ok{background:var(--grn-l);color:var(--grn);border:1px solid #A7F3D0;text-align:center;font-weight:500}
.nd-sys{background:var(--gry-l);color:var(--gry);border:1px solid var(--gry-b)}
.nd-form{background:#F0F9FF;color:#0369A1;border:1px solid #BAE6FD}
.nd-warn{background:var(--org-l);color:var(--org);border:1px solid #F5D0A9;text-align:center}
.nd-qr{background:var(--cyn-l);color:var(--cyn);border:1px solid #A5F3FC}
.tip{border-radius:6px;padding:6px 9px;font-size:11px;line-height:1.55}
.tip-pur{background:var(--pur-l);color:var(--pur);border:1px solid #C4B5FD}
.tip-org{background:#FFF7ED;color:#92400E;border:1px solid #FDE68A}
.tip-grn{background:var(--grn-l);color:var(--grn);border:1px solid #A7F3D0}
.arr{text-align:center;color:var(--text3);height:15px;font-size:12px;display:flex;align-items:center;justify-content:center}
.br{display:flex;gap:6px;align-items:flex-start;margin:4px 0}
.bc{flex:1;display:flex;flex-direction:column;gap:0;min-width:0}
.bsep{width:1px;background:var(--gry-b);flex-shrink:0;margin-top:4px}
.bl{font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;margin-bottom:4px;align-self:flex-start;white-space:nowrap}
.bl-y{background:var(--grn-l);color:var(--grn)}
.bl-n{background:var(--red-l);color:var(--red)}
.bl-ind{background:var(--pri-l);color:var(--pri)}
.bl-ent{background:var(--pur-l);color:var(--pur)}
.bl-par{background:#FDF4FF;color:#86198F}
.bl-old{background:var(--org-l);color:var(--org)}
.bl-new{background:var(--grn-l);color:var(--grn)}
.bl-has{background:var(--cyn-l);color:var(--cyn)}
.bl-no{background:var(--gry-l);color:var(--gry)}
.jb{border:1px solid var(--gry-b);border-radius:6px;padding:7px 8px;margin-bottom:5px;display:flex;flex-direction:column;gap:3px;background:#fff}
.dashed{border-top:1px dashed var(--gry-b);padding-top:10px;margin-top:10px}
.reuse-box{border:1.5px dashed #A7F3D0;border-radius:7px;padding:6px 8px;background:#F0FFF4}
.reuse-label{font-size:10px;color:var(--grn);font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:4px}
.footer{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.fi{background:var(--card);border:1px solid var(--gry-b);border-radius:8px;padding:9px 11px;font-size:11px;line-height:1.6;color:var(--text2)}
.fi b{display:block;color:var(--text);margin-bottom:3px;font-size:11.5px}
/* 留资表单样式 - 突出显示两个字段 */
.form-fields{background:#fff;border:1px solid #BAE6FD;border-radius:5px;padding:6px 8px;margin-top:4px;display:flex;flex-direction:column;gap:4px}
.form-field{display:flex;align-items:center;gap:6px;font-size:11px;color:#0369A1}
.form-field-label{background:#E0F2FE;color:#0369A1;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600;white-space:nowrap}
.form-field-val{color:#64748B;font-size:10.5px}
</style>
</head>
<body>
<div class="pt">邀请码 &amp; 推广码落地页流程 v4</div>
<div class="ps">合伙人仅负责引流 · 服务跟进由平台客服负责 · 成交后系统自动计算返佣</div>
<div class="legend">
<div class="leg"><div class="leg-dot" style="background:var(--pri-l);border:1px solid #C5D9F2"></div>操作节点</div>
<div class="leg"><div class="leg-dot" style="background:var(--org-l);border:1px solid #F5D0A9"></div>判断节点</div>
<div class="leg"><div class="leg-dot" style="background:var(--grn-l);border:1px solid #A7F3D0"></div>成功结束</div>
<div class="leg"><div class="leg-dot" style="background:var(--cyn-l);border:1px solid #A5F3FC"></div>客户经理引导</div>
<div class="leg"><div class="leg-dot" style="background:var(--pur-l);border:1px solid #C4B5FD"></div>温馨提示</div>
<div class="leg"><div class="leg-dot" style="background:var(--gry-l);border:1px solid var(--gry-b)"></div>系统自动</div>
</div>
<div class="two-col">
<!-- ══════════════ 左:邀请码 ══════════════ -->
<div class="section">
<div class="sh" style="background:var(--pri-l)">
<div class="sh-icon">🔗</div>
<div>
<div class="sh-t" style="color:var(--pri)">邀请码流程(合伙人加入)</div>
<div class="sh-s">员工在合伙人小程序生成 → 分享给意向合伙人 → 扫码加入</div>
</div>
</div>
<div class="sb">
<div class="nd nd-start-b" style="margin-bottom:6px">员工在合伙人小程序生成邀请码</div>
<div class="arr"></div>
<div class="nd nd-act">意向合伙人扫邀请码 → 进入<b>合伙人小程序</b>落地页(携带 code)</div>
<div class="arr"></div>
<div class="nd nd-dec">是否已登录?</div>
<div class="br" style="margin-top:6px">
<div class="bc">
<div class="bl bl-y">✓ 已登录</div>
<div class="nd nd-dec" style="font-size:11px">是否已是合伙人?</div>
<div class="arr"></div>
<div class="br">
<div class="bc">
<div class="bl bl-y"></div>
<div class="nd nd-warn" style="font-size:11px">仅显示「返回首页」</div>
<div class="arr"></div>
<div class="nd nd-ok" style="font-size:10.5px">跳转首页</div>
</div>
<div class="bsep"></div>
<div class="bc">
<div class="bl bl-n"></div>
<div class="nd nd-act" style="font-size:11px">显示「加入合伙人」按钮</div>
<div class="arr"></div>
<div class="nd nd-sys" style="font-size:11px">调用绑定接口完成关系绑定</div>
<div class="arr"></div>
<div class="nd nd-ok" style="font-size:10.5px">跳转首页</div>
</div>
</div>
</div>
<div class="bsep"></div>
<div class="bc">
<div class="bl bl-n">✗ 未登录</div>
<div class="nd nd-act" style="font-size:11px">显示「加入合伙人」<br>点击携带 code → 跳登录页</div>
<div class="arr"></div>
<div class="nd nd-dec" style="font-size:11px">已注册 / 未注册?</div>
<div class="arr"></div>
<div class="br">
<div class="bc">
<div class="bl bl-y" style="font-size:9.5px">已注册</div>
<div class="nd nd-act" style="font-size:10.5px">完成登录</div>
</div>
<div class="bsep"></div>
<div class="bc">
<div class="bl bl-n" style="font-size:9.5px">未注册</div>
<div class="nd nd-act" style="font-size:10.5px">完成注册</div>
</div>
</div>
<div class="arr"></div>
<div class="nd nd-dec" style="font-size:11px">是否已是合伙人?</div>
<div class="arr"></div>
<div class="br">
<div class="bc">
<div class="bl bl-y" style="font-size:9.5px"></div>
<div class="nd nd-ok" style="font-size:10px">直接跳首页</div>
</div>
<div class="bsep"></div>
<div class="bc">
<div class="bl bl-n" style="font-size:9.5px"></div>
<div class="nd nd-sys" style="font-size:10px">绑定合伙人关系</div>
<div class="arr"></div>
<div class="nd nd-ok" style="font-size:10px">跳转首页</div>
</div>
</div>
</div>
</div>
<div class="dashed">
<div style="font-size:11.5px;font-weight:500;color:var(--text2);margin-bottom:6px">另一条路:用户自主申请</div>
<div class="nd nd-act" style="font-size:11px">登录后在小程序提交申请成为合伙人的表单</div>
<div class="arr"></div>
<div class="nd nd-sys" style="font-size:11px">后台生成申请记录,状态:待审核</div>
<div class="arr"></div>
<div class="tip tip-pur" style="font-size:11px">
<b style="display:block;margin-bottom:3px">蹇晓丽(市场部)审核通过</b>
默认对接人 = 蹇晓丽 · 来源标签 = 自主申请
</div>
</div>
</div>
</div>
<!-- ══════════════ 右:推广码 ══════════════ -->
<div class="section">
<div class="sh" style="background:#F0FDF4">
<div class="sh-icon">📲</div>
<div>
<div class="sh-t" style="color:var(--grn)">推广码流程(推广客户)</div>
<div class="sh-s">合伙人生成推广码 → 用户扫码进入<b>用户端 H5 落地页</b></div>
</div>
</div>
<div class="sb">
<div class="nd nd-start" style="margin-bottom:6px">合伙人在小程序生成推广码(通用 / 产品专属)</div>
<div class="arr"></div>
<div class="nd nd-act">用户扫码 → 进入<b>用户端 H5 落地页</b>(携带 code + 产品类型参数)</div>
<div class="arr"></div>
<div class="nd nd-dec">是否已登录?</div>
<div class="br" style="margin-top:6px">
<!-- ── 未登录 ── -->
<div class="bc">
<div class="bl bl-n">✗ 未登录</div>
<div class="nd nd-dec" style="font-size:11px">产品类型?</div>
<div class="arr"></div>
<div class="br">
<!-- 个人产品未登录 -->
<div class="bc">
<div class="bl bl-ind">个人产品</div>
<div class="nd nd-act" style="font-size:11px">展示产品介绍<br>「注册 / 登录」按钮<br>(code 全程携带)</div>
<div class="arr"></div>
<div class="nd nd-act" style="font-size:11px">完成注册或登录</div>
<div class="arr"></div>
<div class="reuse-box">
<div class="reuse-label">↓ 复用已登录·个人产品判断</div>
<div class="jb">
<div class="bl bl-par" style="font-size:9.5px">① 是合伙人</div>
<div class="tip tip-pur" style="padding:4px 7px;font-size:10px">您已是合伙人伙伴啦 🎉 快去分享您的推广码吧!</div>
</div>
<div class="jb">
<div class="bl bl-old" style="font-size:9.5px">② 老用户(有历史付费)</div>
<div class="tip tip-org" style="padding:4px 7px;font-size:10px">您已是忠实用户啦 🌟 无需重新绑定~</div>
</div>
<div class="jb" style="margin-bottom:0">
<div class="bl bl-new" style="font-size:9.5px">③ 新用户</div>
<div class="nd nd-sys" style="font-size:10px">自动绑定推广关系</div>
<div class="tip tip-grn" style="padding:4px 7px;font-size:10px;margin-top:3px">您是通过好友推荐来的 😊 平台客服将全程服务~</div>
<div class="nd nd-ok" style="font-size:10px;margin-top:3px">继续浏览 / 进入购买流程</div>
</div>
</div>
</div>
<div class="bsep"></div>
<!-- 企业产品未登录 -->
<div class="bc">
<div class="bl bl-ent">企业产品</div>
<div class="nd nd-form" style="font-size:11px">展示企业留资表单</div>
<!-- 留资字段高亮 -->
<div class="form-fields">
<div class="form-field">
<span class="form-field-label">必填</span>
<span class="form-field-val">联系电话</span>
</div>
<div class="form-field">
<span class="form-field-label">必填</span>
<span class="form-field-val">企业名称</span>
</div>
</div>
<div class="arr"></div>
<div class="nd nd-sys" style="font-size:11px">提交后创建企业<br>CRM 联系人记录<br>(含合伙人 ID)</div>
<div class="arr"></div>
<div class="nd nd-ok" style="font-size:11px">企微通知销售<br>「新企业线索待跟进」</div>
<div style="margin-top:5px;background:var(--gry-l);border-radius:5px;padding:5px 8px;font-size:10.5px;color:var(--text2);line-height:1.5">
企业留资<b>无需登录</b>,合伙人 ID 通过 code 写入 CRM。
</div>
</div>
</div>
</div>
<div class="bsep"></div>
<!-- ── 已登录 ── -->
<div class="bc">
<div class="bl bl-y">✓ 已登录</div>
<div class="nd nd-dec" style="font-size:11px">产品类型?</div>
<div class="arr"></div>
<div class="br">
<!-- 已登录·个人产品 -->
<div class="bc">
<div class="bl bl-ind">个人产品</div>
<div style="font-size:10.5px;color:var(--text2);margin-bottom:4px">三层身份判断:</div>
<div class="jb">
<div class="bl bl-par">① 是合伙人</div>
<div class="tip tip-pur" style="padding:5px 8px;font-size:11px">您已是亲亲的合伙人伙伴啦 🎉 感谢支持,快去分享您的推广码吧!</div>
<div class="nd nd-sys" style="font-size:10.5px;margin-top:3px">不做绑定,展示提示</div>
</div>
<div class="jb">
<div class="bl bl-old">② 非合伙人·有历史付费</div>
<div class="tip tip-org" style="padding:5px 8px;font-size:11px">您已是亲亲小保的忠实用户啦 🌟 现有业务由平台客服跟进,无需重新绑定~</div>
<div class="nd nd-sys" style="font-size:10.5px;margin-top:3px">不做绑定,可继续浏览</div>
</div>
<div class="jb" style="margin-bottom:0">
<div class="bl bl-new">③ 非合伙人·无历史业务</div>
<div class="nd nd-sys" style="font-size:11px">落地页加载后自动绑定推广关系</div>
<div class="tip tip-grn" style="padding:5px 8px;font-size:11px;margin-top:3px">您是通过好友推荐来到亲亲小保的 😊 有任何业务需要,平台客服将全程服务~</div>
<div class="nd nd-ok" style="font-size:10.5px;margin-top:3px;text-align:center">继续浏览 / 进入购买流程</div>
</div>
</div>
<div class="bsep"></div>
<!-- 已登录·企业产品 -->
<div class="bc">
<div class="bl bl-ent">企业产品</div>
<div class="nd nd-dec" style="font-size:11px">用户名下是否已有企业?</div>
<div class="arr"></div>
<div class="br">
<!-- 有企业 -->
<div class="bc">
<div class="bl bl-has">已有企业</div>
<div class="nd nd-qr" style="font-size:11px">获取该企业客户经理的企微二维码</div>
<div class="arr"></div>
<div class="nd nd-qr" style="font-size:11px">📱 展示企微二维码<br>引导用户扫码联系</div>
<div class="arr"></div>
<div class="tip" style="background:var(--cyn-l);color:var(--cyn);border:1px solid #A5F3FC;padding:6px 8px;font-size:11px">
<b style="display:block;margin-bottom:3px">💬 温馨提示</b>
您的企业已在平台服务中~ 扫描上方二维码联系您的专属客户经理,Ta 将为您跟进处理 😊
</div>
<div class="nd nd-sys" style="font-size:10.5px;margin-top:4px">不重复创建 CRM 记录</div>
</div>
<div class="bsep"></div>
<!-- 无企业 -->
<div class="bc">
<div class="bl bl-no">无企业</div>
<div class="nd nd-form" style="font-size:11px">展示企业留资表单</div>
<!-- 留资字段高亮 -->
<div class="form-fields">
<div class="form-field">
<span class="form-field-label">必填</span>
<span class="form-field-val">联系电话</span>
</div>
<div class="form-field">
<span class="form-field-label">必填</span>
<span class="form-field-val">企业名称</span>
</div>
</div>
<div class="arr"></div>
<div class="nd nd-sys" style="font-size:11px">创建企业 CRM<br>联系人记录<br>(含合伙人 ID)</div>
<div class="arr"></div>
<div class="nd nd-ok" style="font-size:11px">企微通知销售<br>「新企业线索待跟进」</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部约定 -->
<div class="footer">
<div class="fi">
<b>🔗 code 全程携带</b>
落地页 → 登录页 → 注册页每个跳转都必须传 code,注册/登录完成后用 code 查合伙人 ID 执行绑定。
</div>
<div class="fi">
<b>🔒 归属唯一(first-touch)</b>
用户已有推广绑定关系后,再扫其他推广码不会改变归属,避免合伙人之间的归属争议。
</div>
<div class="fi">
<b>🏢 企业留资两个字段</b>
留资表单只需<b>联系电话</b><b>企业名称</b>,降低填写门槛提升留资率。合伙人归属通过 code 参数自动写入 CRM,无需用户填写。
</div>
<div class="fi">
<b>💰 合伙人角色边界</b>
合伙人只负责引流,服务跟进由平台客服负责。用户成交后系统自动按规则计算返佣,入账合伙人奖励金账户。
</div>
</div>
</body>
</html>
\ No newline at end of file
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