未来之窗昭和仙君(七十八)收银台扫码支付轮询保护—东方仙盟练气

电子支付收银台状态查询功能说明书

未来之窗昭和仙君 - cyberwin_fairyalliance_webquery

一、功能概述

此支付状态查询功能用于轮询订单的支付状态。支持自定义查询接口地址、查询间隔、最大重试次数等参数，同时提供了支付成功、支付失败和其他错误的回调函数。在首次调用时会弹出等待进程对话框，可自定义对话框的样式和提示信息。此外，还支持在支付成功后关闭窗口的功能。

二、调用格式

$cq.wlzc_pay_polling_payment(options);

$cq.未来之窗_支付交互_收银台查询结果(options);

$cq.fams_paystatusquery(options);

$cq.fams_wppp(options);

三、参数说明

四、返回值

无

五、使用示例

示例 1

function test1() {
    $cq.wlzc_pay_polling_payment({
        apiUrl: 'https://www.baidu.com/',
        close: "Y",
        barbg: 'rgb(6 21 33)',
        interval: 2000,
        maxRetries: 10,
        wait_title: "等待支付完成，请勿着急",
        wait_tips: "耐心等待支付结果，可点击终止",
        onSuccess: function(result) {
            console.log('自定义成功逻辑:', result);
            alert('支付成功！订单号：' + result.current_order_id);
        },
        onFail: function(result) {
            console.log('自定义交易失败：:', result);
        },
        onError: function(result) {
            console.log('自定义错误，请刷新页面重试:', result);
        },
        onPoll: function(result) {
            console.log('自定义轮询:', result);
        }
    });
}
        

演示1

示例 2

function test2() {
    $cq.wlzc_pay_polling_payment({
        apiUrl: 'https://www.baidu.com/',
        close: "Y",
        barbg: 'rgb(255 102 0)',
        interval: 2000,
        maxRetries: 10,
        wait_title: "请耐心等待支付完成",
        wait_tips: "不要关闭窗口，等待支付结束，点击可终止",
        onSuccess: function(result) {
            console.log('自定义成功逻辑:', result);
            alert('支付成功！订单号：' + result.current_order_id);
        },
        onFail: function(result) {
            console.log('自定义交易失败：:', result);
        },
        onError: function(result) {
            console.log('自定义错误，请刷新页面重试:', result);
        },
        onPoll: function(result) {
            console.log('自定义轮询:', result);
        }
    });
}
        

演示

六、注意事项

• 当重试次数超过最大重试次数时，会终止查询并调用错误回调函数。
• 在首次调用时会弹出等待进程对话框，可通过相关参数自定义对话框的样式和提示信息。
• 若设置了 `close` 为 "Y"，可在等待进程对话框中点击进行终止操作。

七、云支付连锁查询模块核心作用

持续向指定接口查询订单支付状态，兼容微信、支付宝、扫码等多支付方式；
根据查询结果（成功 / 失败 / 等待 / 异常）触发不同的回调逻辑，完成订单状态更新、窗口关闭、用户提示等联动操作；
适配连锁场景下的批量订单处理，支持多终端（电视 / 机顶盒）的基础兼容（ES5 语法 + 低版本 Chrome 适配）。
简单来说，它是收银台支付流程中 “确认用户是否付款” 的核心环节，能自动、稳定地完成支付状态核验，并联动后续的订单收尾操作。

八、模块核心优势

1. 兼容性与适配性优势
语法 / 环境兼容：全程使用 ES5 语法，兼容 Chrome 53 等低版本浏览器，适配电视、机顶盒等非标准 Web 终端（这类设备往往内置老旧内核，ES6 + 语法易出问题）；
终端适配友好：代码中未依赖高版本 DOM API，调用的parent/window等全局方法、layer提示框均为传统前端方案，适配电视 / 机顶盒的交互逻辑（如窗口关闭、批量订单更新）。
2. 稳定性与鲁棒性优势
防无限轮询：通过maxRetries（最大重试次数）和interval（查询间隔）限制，避免高频请求压垮接口，也防止无限递归导致终端卡死；
边界校验完善：必传参数（订单 ID）校验、AJAX 请求失败重试、不同状态码的精准分流，覆盖 “参数缺失、网络异常、支付中、支付失败” 等全场景；
容错处理：对parent/art.dialog等跨窗口方法做存在性判断，避免终端环境无对应方法时代码崩溃。
3. 易用性与扩展性优势
配置化设计：通过options参数可自定义接口地址、查询间隔、提示主题色、是否关闭窗口等，无需修改核心代码即可适配不同收银台场景；
回调解耦：onSuccess/onFail/onError回调函数将 “状态查询” 与 “业务逻辑（如订单更新、用户提示）” 解耦，新手可快速替换回调内容适配自己的收银台；
多支付方式兼容：接口参数和状态码逻辑未绑定单一支付方式，可同时支持微信、支付宝、扫码支付的状态查询。

九、0 基础搭建自己的收银台（快速上手步骤）

1. 环境准备（0 基础友好）
无需复杂框架，只需准备：
一个文本编辑器（如 Notepad++、VS Code）；
引入依赖：jQuery（或代码中的$cq）、layer 弹窗插件（前端提示用）；
确保终端（电脑 / 电视 / 机顶盒）能运行 HTML+JS（大部分智能终端都支持）。
2. 核心步骤（复制 + 修改即可用）
引入依赖：在 HTML 中引入所需插件（示例）：
html

预览

<script src="未来之窗开源收银台.js"></script>
 
 

十适配终端：

电视 / 机顶盒：确保页面尺寸适配大屏（用百分比布局），去掉鼠标交互（改用遥控器焦点）；
无需修改核心查询函数，只需调整前端页面样式和交互逻辑。
四、初学者入门指南（从 0 到 1 掌握）
1. 先理解核心逻辑（不用先懂所有代码）
第一步：搞懂 “轮询” 的本质 —— 每隔一段时间问一次 “用户付款了吗？”，直到得到明确答案（成功 / 失败）或超时；
第二步：聚焦 3 个核心回调函数（onSuccess/onFail/onError），先学会修改这 3 个函数的内容，实现自己想要的提示 / 操作；
第三步：再逐步理解参数配置（如interval/maxRetries），调整查询频率和超时规则。
2. 入门实操建议
跑通基础示例：先复制上述代码，替换orderId和apiUrl为测试值，在浏览器中运行，看控制台是否打印 “查询中”；
修改提示逻辑：把layer.msg替换成自己能看懂的alert，直观看到不同状态的提示；
模拟测试：
模拟支付成功：让接口返回{status: 1}，看是否触发onSuccess；
模拟支付失败：让接口返回{status: 9417}，看是否触发onFail；
适配终端：先在电脑上调试通，再放到电视 / 机顶盒测试，遇到报错优先检查 “是否缺少依赖（如 layer）”“是否用了 ES6 语法”。
3. 避坑要点（初学者重点）
不要删除maxRetries：否则可能导致无限查询，终端卡死；
订单 ID 必须传：代码里有校验，不传会直接触发onError；
电视 / 机顶盒适配：优先用 ES5 语法，避免箭头函数、解构赋值等 ES6 特性，减少对鼠标事件的依赖。

东方仙盟：拥抱知识开源，共筑数字新生态

在全球化与数字化浪潮中，东方仙盟始终秉持开放协作、知识共享的理念，积极拥抱开源技术与开放标准。我们相信，唯有打破技术壁垒、汇聚全球智慧，才能真正推动行业的可持续发展。

开源赋能中小商户：通过将前端异常检测、跨系统数据互联等核心能力开源化，东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案，让更多商家能够平等享受数字转型的红利。
共建行业标准：我们积极参与国际技术社区，与全球开发者、合作伙伴共同制定开放协议与技术规范，推动跨境零售、文旅、餐饮等多业态的系统互联互通，构建更加公平、高效的数字生态。
知识普惠，共促发展：通过开源社区、技术文档与培训体系，东方仙盟致力于将前沿技术转化为可落地的行业实践，赋能全球合作伙伴，共同培育创新人才，推动数字经济 的普惠式增长

阿雪技术观

在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者 。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。

Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets , hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology