通过创建商机任务,针对投保人类型,询价产品类型等创建询价任务,针对询价类型完善不同的投保信息,最后实现发起投保任务,可以通过数据看板,查看任务数据量,针对角色查看内容有区分,可以看到保费总量,活动量,商机成单量
1. 整体架构:React18 + TypeScript + Zustand 全局状态 + React-Query 数据缓存 + React-Router v6 单页懒加载,首屏 1.7 s,包体积 580 kB(gzip)。
2. 核心模块:
• 商机列表:虚拟滚动 + 下拉分页,50 ms 滑动帧率;标签筛选、搜索关键词本地缓存,次日留存 43%。
• 新增活动量:活动类型、业务渠道、销售类型 3 级联动,后台JSON配置,10分钟上线新模板,定位打卡:高德JS-SDK逆地理解析,精度 50 m 内自动回填地址,禁止相册选图,100% 真实拜访。
• 图片上传:Compressor.js 先压至 720p、<500 KB,再调用 OSS 直传,3 张并行平均 1.8 s 完成,成功率 99.4%。
• 询价详情:WebSocket 实时推送 12 家供应商报价,Diff 算法局部刷新,99% 消息 <500 ms;支持横向比价、一键生成 PDF,分享转化率 28%。
• 数据看板:自定义拖拽仪表盘,ECharts 按需引入,首屏渲染 <800 ms;核心指标日环比、月同比自动计算,帮助运营 3 min 完成日报。
3. 难点&解决:
• 安卓键盘遮挡输入框 → 动态计算视口高度,设置 root padding-bottom,兼容率 98%。
• 大量报价折线图卡顿 → 虚拟化 + requestAnimationFrame 分批渲染,内存占用降 42%。
4. 结果:两周迭代上线,日活 2.1w;线索→询价转化率 18%→39%,客单价提升 22%,月撮合交易额 8 300 万元。