给 UI · 取款「确认收款 / 放币」设计调整

整理:starbucks · 2026-09-01 · 群里 00:28 老板问「哪个要拿设计」→ 定案:系统提示一样样式,不要居中白弹窗 / 不要底部红底 Sheet。
你看三列就够:怎么点进来 → 现在长什么样 → 你要改成什么样

设计任务 1:点「确认收款」之后,不要用弹窗,改聊天里的「系统提示」

关联 BUG#191 #192 #143 · 09-01【05】【06】

① 怎么进入
  1. 打开收银台 → 点顶栏 「取款」
  2. 筛选 「进行中」
  3. 在订单卡片上点蓝色按钮 「确认收款」
  4. 应进入「取款聊天室」整页(不是停在列表上弹窗)
入口
点这里
「确认收款」
先切「取款」
实页截图 · 老板 09-01 圈图
② 现在什么样(要改掉)
现网有两种错误样式,都要淘汰。UI 不要在此基础上微调,要换成右侧「调整后」那种 IM 内消息。

错误 A · 在列表上弹「放币确认」白窗

现网弹窗A
删除这种居中弹窗

错误 B · 进聊天室后底部 Sheet「温馨提示」

现网Sheet
删除这种底部 Sheet

错误 C · 放币过程红底/红字提示

现网红窗
删除红底错误态
以上均为实页截图 · 禁止延续
③ 调整后(你要出的稿)
点「确认收款」→ 进入聊天室(背景布局参考下方实页 photo_391)→ 在聊天区域按时间顺序插入 2 条「系统提示」(白卡片 + 左侧「官」头像),不要全屏遮罩弹窗。

实页参考 · 聊天室长什么样(订单卡、底栏保持不变):

聊天室基准

↓ 在此布局上,插入系统提示后的目标效果(示意 mock,请出 Figma 终稿)

‹   取款
系统提示 · 步骤 1
温馨提示:请确认已收到买家付款后再放币,谨防诈骗。
系统提示 · 步骤 2
确认放币:到账金额 ¥200.00,确认后将完成订单。
200
支付宝取款
等待对方付款中…
要查收到钱,否则不要轻易确认收款
发送常用语句
UI 要交付:
1)系统提示组件 1 套(白卡片 / 圆角 / 字号 / 与「官」头像间距)
2)全屏 mock 1 张:聊天室 + 步骤1 + 步骤2 + 原有订单卡(与 photo_391 同结构)
3)可选:错误文案仍用同一组件,不要红底 Modal
右侧 mock = 产品示意 · 请 UI 按设计规范出终稿

设计任务 2:「系统提示」组件规范(单独出 1 页 Component)

存款/取款 IM 里已有类似消息;本次统一组件,放币确认/错误都复用

不要像(弹窗 / Sheet / 红底)
居中 Modal
底部 Sheet
要像(IM 内嵌白卡片)
系统提示
正文示例:多行文字、14px 以上、#333,可带换行。

← UI 标注:左右间距、圆角 8、阴影
带按钮态
确认放币:到账金额 ¥200.00…
主按钮:高 49 · 圆角 8 · 蓝紫渐变(与收银台其他主按钮一致)
按钮放在卡片内部底部,不要单独再弹一层

交互(UI 不用画流程图,知道即可)

1. 用户点「确认收款」→ 页面跳转到取款聊天室(不是弹窗盖住列表)。

2. 聊天室里先后出现两条系统提示(步骤1 温馨提示 → 步骤2 确认放币)。

3. 用户在步骤2 卡片里点「确认放币」→ 成功则订单完成;失败则在聊天里再插一条系统提示(仍白卡片,不要 photo_389 红窗)。

4. 底部「申诉 / 确认发货」、订单卡、输入 dock 保持现网(见 photo_391),只改提示的呈现方式。

实页截图(老板圈图) 产品示意 mock(UI 出终稿替换) 要删除的现网样式