fix(merchant): 进件进度页对齐小程序视觉,并修掉四处呈现问题
这一页原来和商户端其它页面不是一个画风:说明文字被两侧裁掉、底部内容被视口切掉,
完成后还在让人「刷新」和「扫码」。除了视觉对齐,四处都是实际会误导或挡住信息的缺陷。
真实缺陷(不只是好不好看):
- 阶段说明被横向裁掉。所有说明都套在 .result-reason 上,而它写了 width:100% + text-align:center
——<text> 在小程序里是行内元素,于是排成一整行居中溢出、左右都被切。改成 display:block
正常换行(与进件表单的 .field-label 同一写法)。
- 底部内容被视口切掉。滚动区没有底部留白,最后一行贴着屏幕边缘。
误导性呈现:
- 授权已完成(实名阶段 confirmed)之后二维码还在显示,文案却是「请本人用微信扫码」——
已经授权完还让人去扫一次。通道查询在授权后仍会回传该码,所以由前端按状态收起
(qrVisible:有码且状态不是 confirmed 才显示)。
- 整单完成后仍显示「刷新进度」与「请再次刷新」。全部确认后已无可办理步骤,再摆一个橙色主按钮
等于暗示还有事没做完;已完成的商户本就不需要手动再核(通道能力由服务端定时刷新兜底)。
两者统一由 canRefresh(refreshable 且不是 approved)控制。
视觉对齐(沿用小程序既有设计语言,不新造色):
- 页面结构:状态头 → 一张白卡(34rpx 圆角 + 0 14rpx 34rpx rgba(49,55,66,0.06) 弥散阴影,
与首页 .setting-card 同一套)→ 操作区。
- 阶段改行式列表配 1rpx 分隔线,不再是六张各自浮起的白卡;卡头一行「开通进度 / 最后同步时间」。
- 阶段加状态色标:原来六个阶段长得一样,看状态得读文字。用页面已有的语义色——
已确认 #FF7625/#FFF0E4(与进件表单的步骤完成态同一 token)、待办 #B4520F/#FFF5EA、
失败 #F06A66/#FEF3F2、等待 #9AA4B3/#EDF0F4。
- 二维码居中放进浅色托板,补一行「请本人用微信扫码完成实名授权」(原来是一张图直接怼在卡片左侧、
没有任何说明)。
- 丢掉默认 <button>:微信默认按钮是灰底直角,是全页最跳的地方。换成与进件表单完全一致的胶囊样式
——主操作 90deg #FF8A24→#FF4B36 渐变、次要 #EDF0F4,处理中显示「处理中...」而不是转圈。
- 导航栏返回按钮对齐进件表单页(80rpx / left 18rpx / top 79rpx),原来两页间距不一致。
验证:用同一套 CSS 按 750 宽折算成 1:1 静态稿渲染核对了各状态(含全部未确认、待办理带二维码、
失败、以及 approved 全绿),确认长文案正常换行不再被裁、二维码按状态收起、完成态只留
「返回商户中心」。仅前端一个文件,接口与后端逻辑未动,后端全量测试未重跑。
未验证:微信开发者工具真机编译(本仓无 CLI 构建链)。样式用的都是页面/表单页已有的写法与色值,
没有引入新的样式能力。