【九月打卡】第16天 Java支付全家桶 企业级各类支付手段一站式解决方案（6-4）

课程名称：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 按键退出重新支付即可，不会重重扣款；