公众号 H5 扫码下单系统（微信支付闭环 · 演示原型）

技术信息

语言技术
Python、HTML5、JavaScript系统类型
Web、H5行业分类
电商、生活旅游参考价格
1000演示地址
https://htmlpreview.github.io/?https://github.com/tony-zhangsan/works-demo/blob/main/h5-order.html

作品详情

行业场景

社区生鲜与门店自提类商家，客户在店内扫码或多渠道进入 H5 下单页，选品加购后走微信支付，支付成功后生成取货码，客户到店报尾号取货。适用于单店或多门店的轻量自提场景，不涉及外卖配送与骑手调度。

功能介绍

四个页面构成完整闭环：①进店与选品，按热销/分类浏览，显示单价与规格，支持加购与实时合计；②确认订单，选择自提门店、预计可取时间与取货方式，展示商品明细、包装费与新客立减后的实付；③支付结果，展示支付成功、订单号、取货码与后续节点（备货中→待自提）；④订单详情，按时间轴展示已下单/已支付/已备货/待自提，并提供申请退款与联系门店入口。

项目实现

前端为移动端单页，按 375 宽度适配，含购物车状态与金额计算；后端规划 Python（FastAPI）提供商品、下单、支付与订单查询接口；下单以业务单号（QW + 时间戳）做幂等，微信支付回调验签后置为已支付，退款走原路退回并按「是否已备货」分流到门店确认或店长审批。演示版为静态页面，接口与回调以注释说明分支。