课程名称:Java支付全家桶 企业级各类支付手段一站式解决方案
课程章节:6-4 收银系统扫码收款
主讲老师:神思者
课程内容:
今天课程学习的主要知识点内容包括:
前端收款码付款页面付款操作的交互实现、监听键盘按键输入的技巧和注意事项。
课程收获:
1、在前端 config.js 文件配置对应的后端接口:
......
let wxUrl = {
......
scanCodePayOrder: baseUrl + "/app/wx/scanCodePayOrder"
}
2、前端 payment.js 付款接口调用的编码实现,其主要的核心代码如下:
$(".pay-btn").click(function(){
$(this).attr("disabled",true)
$(".message").text("扫码中,请不要做其他操作")
let authCode=""
$(document).bind("keydown",function(event){
if(event.keyCode==13){
let orderId=$(".pay-btn").data("order-id")
let url=null
if(/^1[0-5][0-9]{16}$/.test(authCode)){
url=wxUrl.scanCodePayOrder
}
else if(/^(25|26|27|28|29|30)[0-9]{14,22}$/.test(authCode)){
url=zfbUrl.scanCodePayOrder
}
else if(/^622[0-9]{16}$/.test(authCode)){
url=unionUrl.scanCodePayOrder
}
$.ajax({
url:url,
type:"post",
dataType:"json",
contentType:"application/json",
beforeSend: function(request) {
request.setRequestHeader("token", localStorage.getItem("token"));
},
data:JSON.stringify({
"orderId":orderId,
"authCode":authCode
}),
success:function(resp){
let msg=resp.msg
if(msg=="付款成功"){
$(document).unbind("keydown")
$(".message").text("付款成功")
setTimeout(function(){
location.reload()
},1000)
}
else{
$(".message").text("付款失败")
}
}
})
}
else if(event.keyCode==27){
$(document).unbind("keydown")
$(".message").text("支付设备已经准备好")
$(".pay-btn").removeAttr("disabled")
}
let ch=String.fromCharCode(event.keyCode)
authCode+=ch
})
})
3、监听键盘按键输入的技巧,遇到回车(码值为13),表示结束输入,主要代码如下:
$(document).bind("keydown",function(event){
if(event.keyCode==13){
// console.log(authCode)
}
let ch=String.fromCharCode(event.keyCode)
authCode+=ch
})
4、注意事项:当绑定了监听键盘按键输入的事件后,退出的时候(esc的码值为13)务必需要移除监听键盘按键输入的事件,否则再次点击进行付款操作的时候,就会存在两个键盘按键输入的监听事件。
$(document).unbind("keydown")
5、调试的时候需要,需要用主键盘输入,而不是使用小键盘;
6、遇到付款失败后,一般情况下为因短时间内多次二维码付款,需要客户输入密码验证,客户输入完密码验证后,按 esc 按键退出重新支付即可,不会重重扣款;
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦