113 lines
3.5 KiB
HTML
113 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'>
|
|
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
<title>支付测试</title>
|
|
<style>
|
|
* {
|
|
margin: 10px auto;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<input type="number" name="num" id="num" placeholder="输入金额">
|
|
<button onclick="getPayQr()">获取二维码</button>
|
|
<div class="imgs"></div>
|
|
|
|
|
|
<script src='https://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
|
|
|
|
<script>
|
|
/**
|
|
* 获取支付二维码<br>
|
|
* 自动开启轮询，检查支付是否成功
|
|
*
|
|
* @param {*} n 金额
|
|
* @param {*} t 备注
|
|
*/
|
|
async function getPayQr() {
|
|
var n = $('#num').val();
|
|
if (n <= 0 || n > 2000) {
|
|
alert("金额错误0~2000");
|
|
return;
|
|
}
|
|
|
|
let response = await fetch('./createOrder?n=' + n + '&t=test');
|
|
let res = JSON.parse(await response.text());
|
|
|
|
if (res.code == 1) {
|
|
|
|
var id = res.out_trade_no;
|
|
var img = res.qrimg;
|
|
var code = res.qrcode;
|
|
if (id == null || id.length < 1) {
|
|
alert('获取订单失败');
|
|
return;
|
|
}
|
|
if (img == null || img.length < 1) {
|
|
alert('获取二维码失败');
|
|
return;
|
|
}
|
|
$('.imgs').html("<img src='data:image/jpg;base64," + img + "'><br><a href='alipays://platformapi/startapp?saId=10000007&qrcode=" + code + "'>手机点这里打开支付宝APP</a><br>使用支付宝扫一扫<br><button onclick='selectPay(" + id + ")'>查询支付状态</button> <button onclick='getPayQr()'>刷新二维码</button>");
|
|
subscribe(id);
|
|
|
|
} else alert('遇到错误 ' + res.msg);
|
|
}
|
|
|
|
/**
|
|
*轮询检查支付状态
|
|
*/
|
|
async function subscribe(id) {
|
|
let response = await fetch("./queryPay?id=" + id);
|
|
|
|
if (response.status == 502) {
|
|
// 连接超时，重新连接
|
|
await subscribe(id);
|
|
} else if (response.status != 200) {
|
|
// 一个 error —— 让我们显示它
|
|
alert(response.statusText);
|
|
// 一秒后重新连接
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
await subscribe(id);
|
|
} else {
|
|
// 获取并显示消息
|
|
let message = JSON.parse(await response.text());
|
|
|
|
// 再次调用 subscribe() 以获取下一条消息
|
|
if (message.msg == "已支付") {
|
|
$('.imgs').html('支付成功<br>');
|
|
return okPay();
|
|
}
|
|
await subscribe(id);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* 手动查询支付状态
|
|
*/
|
|
async function selectPay(id) {
|
|
let response = await fetch('./queryPay?id=' + id);
|
|
let res = JSON.parse(await response.text());
|
|
|
|
if (response.status == 200 && res.msg == "已支付") {
|
|
return okPay();
|
|
} else alert(res.msg);
|
|
}
|
|
|
|
/**
|
|
* 支付成功后的逻辑处理
|
|
*/
|
|
function okPay() {
|
|
console.log('支付成功后要做的事');
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |