本文是由Vue的SPA对接到外接设备的驱动进行交互，须要从后端接口获取领取链接传输到外接设备（大屏幕的智能设施）生成二维码。（当然也能够通过领取链接本人转成二维码）
首先定义一个单选组，有两种领取形式：“微信”，“支付宝”领取形式。paySucceed为true示意领取胜利，则提醒领取胜利，暗藏掉领取单选
<el-radio-group v-model="payWay" @change="payWayChange" v-if='paySucceed === false'> <el-radio label="wechat" >微信</el-radio> <el-radio label="ali">支付宝</el-radio> </el-radio-group>payWayChange校验
因为外接设备的电脑驱动服务次要是通过websocket进行数据交互的，所以须要在一开始通过webSocket.OPEN去验证websocket以后浏览器与驱动/设施是否失常连贯中，如没连贯上进行提醒并中断以后的操作。
当然在校验的时候须要重置（初始化）外接设备、领取状态、定时器。
开始领取
获取领取的一些参数并通过接口(getPayStatus)获取到领取的url链接，调用openQRcode传递链接到外接设备上,显示出二维码进行领取（这里能够应用qrcode的js库转成二维码图片跳转页面的模式显示出二维码）。
在这里是调用openQRcode办法只是个举例，外接设备个别都会有提供本人驱动以及对接驱动的js，依照本人的理论状况来。
领取中（轮询）
当二维码胜利显示后立刻调用queryStatus()利用获取到的订单号为参数进入一个领取状态的查问（应用setTimeout轮询）queryStatus外部是一个没通过包装的申请，当申请返回payStatus示意以后未领取实现，或在领取中，否则为领取胜利。
每隔3秒轮询一次（尾递归queryStatus获取领取状态 胜利 or 失败）:
window.pollTimer = setTimeout(() => { return queryStatus(); //轮询查问领取状态3s }, 3000)在queryStatus中的申请应用了axios，是因为这里的post包装申请pending过程中主动加上了“加载中。。。”的全屏界面动画，因为轮询是一直进行的不能显示加载动画，否则会造成每次获取状态都会始终呈现加载动画敞开/显示的闪屏成果，所以这里应用原生axios
领取实现
领取胜利后就进行提醒，达成递归终止条件，革除掉计时器，重置领取的状态。最初5s计时器是为了给个小提早，避免设施上领取胜利后就秒关掉了界面 ，没有显示领取胜利的问题
if ((res.payStatus == 2) || (res.payStatus == 1)) { //领取胜利，敞开弹窗 that.paySucceed = true; window.pollTimer && window.clearTimeout(window.pollTimer); //领取胜利后干些事件。。。 setTimeout(() => { that.common.cancelAll(); that.resetPay(); }, 5000) } payWayChange (val) { //革除计时器轮询状态 clearTimeout(window.pollTimer); window.pollTimer = null; if (webSocket.readyState != webSocket.OPEN) { this.$message({ message: '请正确连贯设施或设施驱动未启动，请查看', type: 'error' }); this.resetPay(); return; } this.common.cancelAll(); //敞开电子屏领取页 //参数 let params = { type: val === 'wechat' ? 'WeChatPay' : 'AliPay', data: { paymentType:1, id:'123', payMoney: '30.0', payWay: this.payWay, } } let that = this; function queryStatus () { window.clearTimeout(window.pollTimer) axios({//应用axios，不显示加载中提醒 method: 'post', url: 'getPayStatus', withCredentials: true, timeout: 0, hideLoading: true, headers: { "Content-Type": "application/json;charset=UTF-8", "token": sessionStorage.getItem('token') }, data: { typeCode: val === 'wechat' ? 'WeChat' : 'ali', token: sessionStorage.getItem('token'), data: { order: params.order, } }, }).then((res) => { if (res.payStatus == 0) { window.pollTimer = setTimeout(() => { return queryStatus(); //轮询查问领取状态3s }, 3000) } if ((res.payStatus == 2) || (res.payStatus == 1)) { //领取胜利，敞开弹窗 that.paySucceed = true; window.pollTimer && window.clearTimeout(window.pollTimer) //领取胜利后干些事件。。。 setTimeout(() => { that.common.cancelAll(); that.resetPay(); }, 5000) } }) } that.post({ params,//参数 }) .then(res => { //获取领取链接和订单信息 params = params.data; params.order = res.order; window.delayTimer = null; window.clearTimeout(window.delayTimer); window.delayTimer = setTimeout(() => { //关上领取二维码 this.common.openQRcode(encodeURI(JSON.stringify(params)) ,encodeURI(res.url)) }, 1000); queryStatus();//开始轮询领取的状态 }); }, resetPay () { this.paySucceed = false; window.pollTimer && window.clearTimeout(window.pollTimer); //革除计时器轮询状态 },