协议单 · 新增 / 编辑表单美化

面向 销售专员 / 地区经理（mobile-oa-h5 市场模块）。 字段与分区顺序：协议信息 → 采集信息 → 客户信息 → 样本及运输 → 缴费 → 附件 → 提交确认（最后）。 Token 使用三墙绿 #0a9f6d，不混用管理端薄荷主色。

工程 mobile-oa-h5 入口 市场 · 协议单 模式 新增 / 编辑
现状问题：白卡片 + 细描边扁平，长表单缺乏节奏
现状问题：label 灰色过淡，字段堆叠一列，滚动过长
现状问题：客户区母亲/父亲/新生儿无分组，扫读成本高
现状问题：底栏与内容粘连感弱，主按钮不够醒目

当前样式

AS-IS
新增协议单

协议信息

业务来源*
协议编号
请输入
登记日期
请选择
采集专员
请选择
协议总金额
请输入
备注
请输入

采集信息

市场专员
张专员
采集地区
请选择
采集医院
请选择

客户信息

母亲姓名*
王女士
联系电话
请输入
父亲姓名
请输入
新生儿姓名
请输入

方案 A · 软填充

推荐
‹
新增协议单
专员
1协议 2采集 3客户 4样本 5缴费 6附件 7确认
1

协议信息

业务来源*
协议编号
选填 / 可自动
登记日期
2026-10-15 ›
采集专员
请选择 ›
协议总金额元
128000.00
备注
客户要求加急入库说明…
2

采集信息

市场专员
张专员 ›
采集地区
合肥 ›
采集医院
请选择 ›
地区经理
李经理 ›
样本采集时间
请选择 ›
母血采集时间
请选择 ›
3

客户信息

可搜索客户档案回填；身份证可自动推算出生年月

母亲
母亲姓名*
王女士 🔍
联系电话
138****8899
出生年月
1992-06
母亲身份证号
3401**********1234
家庭住址
合肥市蜀山区××路××号
父亲
父亲姓名
搜索档案 🔍
父亲电话
请输入
新生儿
新生儿姓名
请输入
性别
预产期
请选择 ›
分娩方式
请选择 ›
胎次
请输入
体重(克)
请输入
评分 1分钟
请输入
评分 5分钟
请输入
4

样本及运输

规则与管理端一致

☐ YB20261015001 已采集
脐带血 优惠价 ¥68,000 顺丰 · ¥120 ETA 10-18
5

缴费信息

样本合同合计 ¥68,000.00
YB20261015001 · 脐带血 分期
样本合同金额
68000
期数
3
间隔(月)
3
6

附件

协议附件
＋上传
协议扫描.pdf 删除
知情同意书
＋上传
健康调查表
＋上传
7

提交确认

请核对协议、样本、缴费与附件后再勾选

✓ 我已核对以上信息，确认无误后保存
文件路径：mobile-ui/zkxw-mobile-oa-protocol-form-beautify-demo.html · 浏览器直接打开即可预览。确认方案后，可再落到 mobile-oa-h5/src/styles/market.css 与协议相关 Panel 组件。 业务字段不改，仅样式与信息层级。
样本运输 / 缴费明细专项深化： mobile-ui/zkxw-mobile-oa-protocol-sample-pay-beautify-demo.html