扫码绑定 · 测试环境真页面截图合集
机构端 + 家长端 · 2026-09-24
说明
- 这份图是在测试环境的真实页面上把新功能加进去后截的屏,页面样式就是现在线上的样子。
- 机构端用的是测试环境真实账号和真实数据;家长端测试环境没有家长账号,用演示数据打开真实页面(孩子名字是演示的)。机构端列表里的名字(如「顶顶顶顶」「12345」)是测试环境里的测试数据,不是真实用户。
- 云机网络打不开图片存储,列表头像换成了页面自带的默认头像,真机上会显示真实头像。
- 全程只打开页面和弹框看,没有提交任何数据。
- 看图顺序:按下面三条流程从上往下看,每张图上方写第几步,箭头上写点哪里到下一步;最后是改动前后对照和核对记录。
- 机构端和家长端的孩子年龄写法本来就不一样(机构端写「9岁」,家长端写「9岁3个月」),这是现在就有的,不是这次改的。
全部改动一览
| 序号 | 哪一端 | 页面 | 改了什么 | 在哪看 | 代码位置 |
|---|---|---|---|---|---|
| 1 | 机构端 | 视光档案页顶栏 | 「返回」左边加「机构码」白底小胶囊 | 流程三 第①步 | web/app/h5/store-refractive/page.tsx:223(白底边同搜索框)、web/app/h5/store-refractive/page.tsx:206-214(按钮本体照「返回」) |
| 2 | 机构端 | 点「绑定家长」 | 先弹两个选项:扫家长二维码 / 从本机构家长中选 | 流程一 第④步、流程二 第②步 | 居中写法照 web/app/h5/settings/components/SeatStoreCard.tsx:922-933;列表行/按钮沿用 web/app/h5/store-refractive/_components/bind-parent-sheet.tsx |
| 3 | 机构端 | 选孩子弹框(新) | 扫到家长码后选要绑定的孩子 | 流程一 第⑤步 | 居中写法照 web/app/h5/settings/components/SeatStoreCard.tsx:922-933;列表行/按钮沿用 web/app/h5/store-refractive/_components/bind-parent-sheet.tsx |
| 4 | 机构端 | 新建孩子档案 | 保持底部弹出;多一行「家长:王女士」;按钮改「保存并绑定」 | 流程一 分支 a | web/app/h5/store-refractive/_components/create-patient-sheet.tsx:262-286(现网弹层上只加一行) |
| 5 | 机构端 | 关联已有档案 | 居中弹框 | 流程一 分支 b | 居中写法照 web/app/h5/settings/components/SeatStoreCard.tsx:922-933;组件本体 web/app/h5/store-refractive/page.tsx:433-489;footer 沿用 web/app/h5/store-refractive/_components/bind-parent-sheet.tsx:180-208 |
| 6 | 机构端 | 选档案、选家长弹框 | 从底部弹出改为居中 | 流程二 第③④步 | 居中写法照 web/app/h5/settings/components/SeatStoreCard.tsx:922-933;③档案本体 web/app/h5/store-refractive/page.tsx:433-489,④家长本体 web/app/h5/store-refractive/_components/bind-parent-sheet.tsx |
| 7 | 机构端 | 档案详情页「绑定家长」 | 按钮不变,点开改为两个选项 | 流程一 另一个入口 | 与第2行同一个弹框;按钮本身不变 web/app/h5/store-refractive/[patientId]/page.tsx:514-529 |
| 8 | 机构端 | 机构二维码页(新) | 打印贴前台,家长扫码绑定 | 流程三 第②步 | web/app/h5/store-refractive/page.tsx:196-205(顶栏样式) |
| 9 | 家长端 | 个人档案页 | 「新建档案」下加「扫一扫」「我的二维码」 | 流程一 第①步、流程三 智脑内入口 | web/app/h5/family/page.tsx:139-150(新建档案按钮同高h40/13px/700) |
| 10 | 家长端 | 我的二维码页(新) | 到机构出示给工作人员扫 | 流程一 第②步 | web/app/h5/family/page.tsx:118-133(顶栏照搬) |
| 11 | 家长端 | 扫机构码后的页面(新) | 确认身份(没登录时)/ 选孩子 / 绑定成功,外加三种提示 | 流程三 第③-⑤步和异常 | web/app/h5/chat/components/seat-wx-auth-landing.tsx:40-42(真实组件,仅文案改) |
| 12 | 家长端 | 扫到的不是机构码 | 居中提示框 | 流程三 异常 | web/app/h5/settings/components/SeatStoreCard.tsx:922-933(居中壳 fixed inset-0 flex items-center justify-center) |
流程一:机构扫家长的二维码(最常用)
家长出示自己的码,机构工作人员扫码,选孩子,绑定。
① 家长端 · 个人档案页
→
点「我的二维码」
② 家长端 · 我的二维码
→
家长到机构,出示给工作人员
③ 机构端 · 视光档案
→
点「绑定家长」
④ 机构端 · 选绑定方式
→
点「扫描家长二维码」,调起微信扫一扫,扫家长的码
⑤ 机构端 · 选孩子
绑定完成:孩子进入本机构列表,家长端也能看到
第⑤步里的两种情况
a
家长名下还没有这个孩子 → 点「新建孩子档案」(保持底部弹出)
b
孩子在本机构已有档案 → 点「关联已有档案」
另一个入口
机构端 · 档案详情页
档案详情页点「绑定家长」,弹出和第④步同一个弹框；在这里点「扫描家长二维码」,扫完直接绑定当前这个档案,不用再选孩子
流程二:机构从本机构家长里选(现有功能,弹框改居中)
① 机构端 · 视光档案
→
点「绑定家长」
② 机构端 · 选绑定方式
→
点「从本机构家长中选择」
③ 机构端 · 选要绑定的档案
→
选中一个档案
④ 机构端 · 选家长
绑定完成
从档案详情页进来时档案已确定,点「从本机构家长中选择」后直接到第④步。
流程三:家长扫机构的二维码
机构把二维码打印贴在前台,家长用微信扫,选孩子,绑定;只绑定,不开账号。这个微信里登录过智脑的家长,直接用当前账号,跳过第③步。
① 机构端 · 视光档案
→
点「机构码」
② 机构端 · 机构二维码
→
打印贴前台;家长用微信扫
③ 家长端 · 确认身份(只有这个微信没登录过智脑时才出现)
→
点「确认」
④ 家长端 · 选孩子
→
点「确认绑定」
⑤ 家长端 · 绑定成功
智脑内入口
家长端 · 个人档案页
家长在智脑个人档案页点「扫一扫」,扫到机构码后直接到第④步
扫码后可能看到的四种提示
家长端 · 还没有账号
新家长还没开通账号:只有用微信扫前台的码才会遇到(在智脑里扫一定已有账号)
家长端 · 一个微信有多个账号
没登录智脑的家长用微信扫码,这个微信下有好几个智脑账号,系统不知道用哪个:先登录要绑定的账号,再扫一次
家长端 · 没有孩子档案
有账号但还没有孩子档案:点按钮自己新建,再回来绑定
家长端 · 扫到非机构码
在智脑里点「扫一扫」,扫到的不是机构二维码
改动前后对照
现在
现在顶栏只有「返回」,没有查机构码的入口。
改后
「返回」左边加一个白底小胶囊「机构码」,点开调出机构二维码。
顶栏放大
现在
详情页点「绑定家长」,弹出的是从底部弹出的老样式。
改后
改成和流程一/二一样的两个选项、居中弹框,风格统一。
现在
现在扫这个码,落地页是通用授权页,没有针对绑定场景的专门提示。
改后
扫码后先确认身份,点「确认」跳转微信授权页。
现在
现在个人档案页只有「新建档案」按钮,没有扫码相关入口。
改后
「新建档案」按钮下面新增一行两个按钮:扫一扫 / 我的二维码。
核对记录
| 核对项 | 结果 | 证据位置 |
|---|---|---|
| 页面来源 200 | 全部通过 —— 店端 8 次页面跳转、家长端 3 次页面跳转,返回状态码全部是 200(正常)。 | store/verify.txt [NAV] 各行(如 line1 S01-now status=200、line46 S04 status=200); parent/verify.txt [NAV] 各行(如 line1 /h5/family status=200、line20 /h5/brand-scan status=200) |
| 只读(非 GET 放行数) | 全部为 0 —— 店端会修改数据的请求放行次数是 0;家长端会修改数据的请求放行次数也是 0(只放行了 1 次真正查询用的请求,另外 2 次接口用演示数据顶替,没有打到真服务器)。 | store/verify.txt 106行[NONGET] allow=0 block=0、234行[NONGET] block=0 []、176行[NONGET] block=0 []; parent/verify.txt 74行[ROUTE-SUMMARY] stub=2 allow=1 block=0 nonGetAllow=0 |
| 字号对齐 | 一致 —— 「机构码」白底小胶囊与「返回」按钮上下对齐误差 0 像素;下方搜索框的位置没有跟着往下挪,误差也是 0 像素;「扫一扫/我的二维码」按钮与真实「新建档案」按钮字号、字重、圆角也完全一致;6 个居中弹框的标题字号字重同样统一(都是 20px/加粗)。 | store/verify.txt 376-382行[A3]「白底小胶囊」段(vCenterDiff/searchBoxTop); parent/verify.txt 9行[VERIFY-3] P08 |
| 弹框上下居中 | 一致 —— 6 个机构端居中弹框,上边留白和下边留白相差都是 0 像素;家长端弹框上下留白也相差 0 像素。 | store/verify.txt 243-252行REWORK3几何统一对照表(gapDiff 列全 0); parent/verify.txt 13行[VERIFY-4] P09c 上下间隙差 diff=0 |
| 横向溢出 | 全部为 0 —— 店端 14 次抽查、家长端 8 次抽查,画面超出屏幕宽度的元素数量全部是 0。 | store/verify.txt 多处[VERIFY-6]/[VERIFY-overflow]/[VERIFY] overflow(如25行、111-124行、195/202/209/216/224/231/241行均 count=0); parent/verify.txt 多处[VERIFY-5]/[VERIFY-OVERFLOW](如4/8/12/19/25/28/31/34/37/40行均 count=0) |
| 文案与方案图一致 | 一致 —— 店端 18 条新加文案逐条核对方案图,全部能找到,没有缺漏;家长端 18 条也逐条核对,全部能找到;另外故意打错一个字做对照测试,结果确实找不到,证明核对方法有效。 | store/verify.txt 56-82行[VERIFY-7]「全部 ≥1,0 命中条目数 = 0」; parent/verify.txt 41-59行[VERIFY-6](含57行故意打错字对照组=0) |
| 控制台报错 | 全部为 0 —— 店端 17 次采样、家长端 13 次采样,浏览器控制台新增报错次数全部是 0。 | store/verify.txt 多处[ERR] delta=0;parent/verify.txt 多处[ERR] delta=0 |
| 图标与官方图标库一致 | 一致 —— 店端的机构码图标、家长端的 6 个图标(二维码/关闭/扫码/刷新/提示/对勾)以及绑定成功用的对勾图标,逐字比对官方图标库源文件完全一样;另外故意改动一位数字做对照测试,比对结果确实不一样,证明比对方法有效。 | store/verify.txt 104行[VERIFY-9]、105行[VERIFY-9-CONTROL]; parent/verify.txt 60-68行[VERIFY-8]系列、139-141行[VERIFY-ICON]系列 |
| 豆腐块 | 两端都测过,均未见豆腐块 —— 店端 6 个非中文非英文的符号(书名号「」、箭头›、冒号：、间隔号·、逗号，)墨迹都正常,外观也和「空心方块」占位符基准不一样;家长端「，」「·」「：」三个标点也都有正常墨迹。两边各自的对照组汉字「中」墨迹面积都大于 0,证明测量方法有效。 | store/verify.txt 337-357行---TOFU---段;parent/verify.txt 69-73行[VERIFY-9]系列 |