PRODUCT REVIEW / 页面与交互说明

先看全貌，再沿着一笔业务看细节。

本轮将企业网页、小程序和管理后台拆成独立界面。三端使用相同模拟业务数据，在同一浏览器来源下可联动演示。

01 / 页面地图

使用场景	页面清单	设计重点
企业网页 · 16 个页面状态	首页、服务大厅、服务详情、三步申请、提交结果、企业工作台、我的申请、申请详情、服务券包、我的订单、订单详情、企业资料、消息中心、办理指南、服务机构、服务预约	完整介绍服务，支持较长表单、明细与办理记录。
小程序 · 18 个页面状态	首页、服务大厅、服务详情、两步申请、提交结果、服务券包、服务券详情、确认订单、企业中心、我的申请、申请详情、服务订单、订单详情、企业资料、消息通知、服务预约、办理指南、服务机构	四个底部入口：首页、服务、服务券、我的；详情逐层进入，关键操作固定在底部。
管理后台 · 9 个功能区	工作台概览、申请审核与发券、订单与交付、结算台账、服务产品管理、供应商档案、企业档案、预约需求、操作记录	审核和订单使用详情抽屉；运营与供应商按场景切换。

页面状态按独立内容视图计算，申请步骤和弹窗不额外计数；不是已开发上线的正式页面数量。

企业提交需求运营审核与公示服务券到账企业领券下单供应商交付企业确认核销登记结算结果

顺序	在哪操作	业务说明
1	小程序：首页 → 算力服务 → 申请服务支持	填需求、添加示例材料，核对后提交。额度和材料都只是演示。
2	后台：申请审核与发券 → 审核申请	可退回要求补充；通过后进入公示。确认模拟公示完成后发券。
3	小程序：申请详情 → 查看服务券 → 使用服务券下单	券不是现金；下单会冻结指定服务的额度。
4	后台切换供应商：我的服务订单 → 受理订单 → 提交交付	服务商提供成果说明；企业能看到服务是否已经完成。
5	小程序：订单详情 → 确认交付	不符合要求可退回补充；确认后才核销并进入待结算。
6	后台切回运营：结算台账 → 结算登记	填模拟付款参考号。这里是登记演示，不会实际付款。

企业网页继续按 Vue 方案设计；后端继续采用 Spring Boot。小程序可考虑基于 Vue 的跨端方案，具体框架在核对现有项目版本和微信端能力后选定。后台负责审核、交付和结算，两种企业入口读取同一笔申请、同一张券、同一笔订单。

企业网页（Vue）微信小程序（独立移动端界面）运营 / 供应商后台统一 Spring Boot 业务接口业务数据与附件存储

此次原型使用本地 Vue 脚本和浏览器存储，离线可查看页面；没有连接 Spring Boot 服务。生产实现必须在服务端处理权限、事务、额度冻结、幂等及审计，不能把原型中的浏览器逻辑当成资金系统使用。

参考图片用于理解政企服务平台的类型；这版另行组织布局，不直接套用参考平台的知识产权栏目。

单页看效果可直接打开 HTML。跨端联动请从同一 HTTP 地址打开网页、小程序及后台；不同浏览器、不同端口、file:// 路径之间不保证共享数据。

在交付文件夹运行：python3 -m http.server 8765 --bind 127.0.0.1，浏览器访问 http://127.0.0.1:8765/。

小程序原型右侧可直接跳转主要页面；手机宽度下隐藏展示外框，保留移动端布局。重置示例场景会清除本次模拟操作。不要填入真实个人资料或业务机密。

网页、小程序与后台的实际渲染截图，可直接查看和对照。