WPF 从选品到扫码付 支付链路与 异步实践

引言

自助零售柜的支付流程表层逻辑简洁，仅包含选品、展示支付二维码、用户扫码支付三个步骤，但实际落地过程中，需应对订单创建异常、网络波动、用户中途离场、UI线程阻塞等各类终端场景问题。本文基于.NET 8 + WPF架构的NLStar AISales自助购系统源码，完整拆解购物车结算至支付完成的全链路流程，详细阐述WPF框架下的异步调度机制与业务状态管理实战方案。

整体支付时序在这里插入图片描述

participant User as 用户 participant Home as 首页(HomePage) participant Cart as 购物车窗口 participant Pay as 支付页(PayPage) participant BLL as 业务层(ViewBll) participant API as 后端服务 User->>Home: 商品选品、加入购物车 User->>Home: 点击结算按钮 Home->>Cart: 弹出购物车确认窗口 Cart-->>Home: 确认订单，返回成功状态 Home->>Pay: 页面跳转至支付页 Pay->>BLL: 调用订单创建方法 BLL->>API: 请求创建销售订单 API-->>BLL: 返回订单唯一标识(bill_id) Pay->>BLL: 依据订单ID获取支付链接 BLL->>API: 请求聚合支付地址接口 API-->>BLL: 返回支付URL Pay->>Pay: 工具类生成支付二维码 loop 每5秒轮询，最大12次 Pay->>BLL: 校验当前订单支付状态 BLL->>API: 查询订单支付日志 API-->>BLL: 返回交易流水号 end Pay->>Home: 支付成功，跳转回首页```

第一步：购物车订单确认

系统在首页视图模型的结算点击事件中，优先弹出模态购物车窗口，仅当用户主动确认订单后，才会跳转至支付页面，从源头规避无效订单创建，减少接口资源浪费。

shoppingCart = new ShoppingCartWindow(); if (shoppingCart.ShowDialog() == true) { UIController.Navigate(new PayPage()); }

模态弹窗的交互方式，可有效拦截用户误操作，确保进入支付流程的订单信息完整、有效，保障业务流程严谨性。

第二步：后台异步创建订单

页面跳转至支付页并完成加载后，通过页面加载命令在后台线程执行订单创建逻辑，彻底规避耗时业务阻塞UI渲染的问题，保证终端触控操作流畅度。

Function.DoWork(() => { var bill_id = Global.viewBll.CreatePayOrder(); // 后续业务逻辑 });

通用工具方法 DoWork 封装了标准化异步业务模板：展示加载动画、执行核心业务逻辑、最终统一关闭加载状态，是WPF自助终端场景下，异步业务与加载状态联动的通用最佳实践。

订单创建方法会遍历全局购物车商品集合，组装商品明细、数量、金额等核心数据，封装为请求参数后调用后端订单创建接口。

foreach (var p in Global.ShoppingCartList) { l.Add(new { id = p.ProductID, amount = p.Count, fee = p.Count * p.SellPrice, date, open_date = date, model = "", }); } var data = proxy.CreatePayOrder( Global.ShoppingCartData.Count, Global.ShoppingCartData.TotalSellPrice, Global.device.SN, l); return data.data.id.ToString();

系统通过渠道标识定义自助购业务场景，同时将设备唯一SN码写入订单信息，便于后端完成订单归类、账务核对与问题溯源。

第三步：获取支付链接并渲染二维码

成功获取订单ID后，系统调用后端支付接口拉取聚合支付地址，通过UI调度器切回主线程，完成支付二维码的刷新与渲染，严格遵循WPF跨线程UI更新规范。

Application.Current.Dispatcher.Invoke(() => { PayModel.QRCodeImg = null; PayModel.QRCodeImg = QRCodeHelper.CreateQRCode(url); PayModel.QRCodeLogo = Function.UnicodeToFontStr(""); // 微信图标 });

二维码生成工具基于QRCoder组件实现位图生成，同时适配WPF图像资源类型完成视图绑定；项目集成ZXing.Net组件，可灵活拓展条码解析、生成等拓展能力。

支付页面支持微信、支付宝双支付渠道切换，通过专属命令触发切换逻辑，搭配图标字体实现二维码中心Logo与按钮高亮状态联动切换，优化用户视觉感知。

第四步：定时轮询校验支付结果

订单创建完成后，系统启动后台循环轮询任务，定时查询订单支付状态，无需用户手动刷新。

Task.Run(async () => { for (int i = 0; i <= 12; i++) { await Task.Delay(5000); if (Global.viewBll.ChkPayOk(bill_id)) { Function.GoBack(); break; } } });

支付状态校验接口以交易流水号是否存在作为支付成功的判定依据。轮询间隔5秒，最大轮询12次，整体超时时长60秒，与支付页110秒的全局空闲超时机制形成互补，适配网络延迟、用户扫码延迟等各类场景，保障业务闭环。

支付成功后系统自动跳转回首页；若超时未完成支付，页面空闲倒计时机制将自动触发页面复位，避免终端页面卡死。

支付页面状态管控机制

系统通过全局状态变量与超时参数联动，实现支付流程的状态锁定与终端自助复位，规避重复下单、页面卡死等异常问题，核心管控变量如下：

进入支付页面时，系统会初始化状态与超时参数，将支付页空闲时长设置为110秒，相较于首页90秒预留更长操作时间，适配用户扫码、付款的操作耗时。

Global.IsPaying = true; Global.MaxSecond = 110; Global.BackSecond = 110;

API通信层统一设计

系统通过Proxy代理类统一封装后端REST接口调用，所有请求基于设备本地配置的API域名动态拼接，标准化接口请求格式：{ApiUrl}/api/{controller}/{action}。

GET请求通过通用工具方法自动拼接请求地址与参数，依托反射机制匹配参数名称，杜绝手工拼接参数导致的格式错误。

string api_name = "pay/GetPayLogInfo"; string url = WPF.Common.Function.GetWebMethodUrl(Global.device.ApiUrl, api_name, new object[] { id }); dynamic ri = Function.HttpGetRtnInfo(url);

订单创建等写入类业务统一使用POST请求，将参数序列化为JSON格式通过请求体传输。所有接口响应统一校验状态字段，异常信息由全局异常捕获机制统一处理、记录日志并展示友好提示。同时通用工具层适配专网、内网场景，完成HTTPS证书兼容处理，保障设备端接口调用稳定性。

WPF数据绑定与UI状态适配

项目依托WPF值转换器实现数据与UI状态的自动联动，无需冗余后台逻辑，核心自定义转换器能力如下：

• CountToVisibiltyConvert：控制购物车商品数量角标显示与隐藏

• DecimalToVisibiltyConvert：动态控制会员价、折扣价等差异化价格展示

• BoolToBackgroundConverter：实现分类选项选中高亮状态切换

商品列表采用集合视图数据源实现按分类分组展示，适配长列表触控浏览场景；点击左侧分类导航时，自动滚动视图至对应商品分组位置，优化终端操作体验。

.NET 8 版本迁移适配要点

项目从旧版本框架升级至.NET 8 + WPF过程中，核心适配要点如下，可作为同类项目迁移参考：

• 框架配置：指定目标框架为net8.0-windows，保留WPF启用配置，保障桌面控件正常兼容

• 依赖适配：统一校验QRCoder、Microsoft.Xaml.Behaviors.Wpf等核心NuGet包与.NET 8框架的兼容性，完成版本适配

• 网络请求：原生HttpWebRequest可正常兼容，长期迭代建议迁移至HttpClient，依托连接池机制提升异步请求性能与稳定性

• 异常日志：.NET 8对全局未捕获异常的监听机制无变更，原有日志捕获、异常处理逻辑无需改造

优化改进方向与实践思考

基于当前落地实现，结合自助终端业务场景特性，后续可从以下维度迭代优化，提升系统稳定性与用户体验：

• 通信机制升级：将客户端轮询改造为WebSocket服务端推送模式，减少无效接口请求，提升支付结果响应速度

• 异常体验优化：支付超时后增加明确的弹窗提示，告知用户支付失败，引导用户重新下单，替代原有静默回退逻辑

• 订单幂等优化：新增订单幂等校验机制，规避网络重试、重复点击导致的重复下单问题

• 购物车数据持久化：页面超时复位前增加二次确认，支持保留当前购物车数据，避免用户重新选品

• 网络组件优化：重构网络请求逻辑，实现HttpClient单例复用，替代传统同步请求方式，提升并发能力与代码可维护性

小结

NLStar AISales自助购系统的支付链路，采用「订单确认-异步下单-二维码渲染-状态轮询-页面复位」的标准化自助终端业务模式。通过工具类封装异步加载逻辑、UI调度器隔离界面与后台线程、业务层统一管控订单与支付接口、全局状态变量锁定支付流程，实现了无人值守场景下的稳定可控运行。整套方案完全适配.NET 8 + WPF技术栈，架构轻量化、逻辑清晰、扩展性强，可为同类自助终端、无人零售设备的支付模块开发提供成熟的实践参考。

（注：部分内容可能由 AI 生成）