81 lines
3.0 KiB
PHP
81 lines
3.0 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>获取支付状态</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
.loading {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center">
|
||
|
||
<div class="w-11/12 max-w-md bg-white rounded-xl shadow p-5 text-center space-y-3">
|
||
<!-- 蓝色提示 -->
|
||
<div id="msg-blue" class="bg-blue-100 text-blue-800 py-2 rounded">
|
||
若取码失败，可以尝试重新发起支付
|
||
</div>
|
||
|
||
<!-- 黄色提示 -->
|
||
<div id="msg-yellow" class="bg-yellow-100 text-yellow-800 py-2 rounded">
|
||
正在努力匹配订单中，已等待时间 <span id="waitTime">0</span> 秒
|
||
</div>
|
||
|
||
<!-- 红色提示 -->
|
||
<div id="msg-red" class="bg-red-100 text-red-800 py-2 rounded">
|
||
系统正在通过安全验证，取码时间较长，请您耐心等待，最长需要 <span id="maxTime">180</span> 秒。
|
||
</div>
|
||
|
||
<div class="flex justify-center pt-3">
|
||
<svg class="loading w-6 h-6 text-gray-400" fill="none" stroke="currentColor" stroke-width="2"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round"
|
||
d="M12 4v4m0 8v4m8-8h4M4 12H0m16.95 7.05l2.83 2.83M4.22 4.22l2.83 2.83m0 10.9l-2.83 2.83M19.78 4.22l-2.83 2.83" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let wait = 0;
|
||
const waitSpan = document.getElementById("waitTime");
|
||
const maxTime = document.getElementById("maxTime");
|
||
|
||
function updateWaitTime() {
|
||
wait++;
|
||
waitSpan.textContent = wait;
|
||
}
|
||
|
||
// 每秒计时
|
||
setInterval(updateWaitTime, 1000);
|
||
|
||
// 每3秒请求一次后端接口
|
||
setInterval(async () => {
|
||
try {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const rid = urlParams.get('rid');
|
||
const res = await fetch('/index/index/status?rid='+rid); // 后端返回 {status: "blue"|"yellow"|"red"|"success", payUrl: "xxx"}
|
||
let data = await res.json();
|
||
data = data.data;
|
||
// 根据status切换显示状态
|
||
// document.getElementById("msg-blue").style.display = data.status === "blue" ? "block" : "none";
|
||
// document.getElementById("msg-yellow").style.display = data.status === "yellow" ? "block" : "none";
|
||
// document.getElementById("msg-red").style.display = data.status === "red" ? "block" : "none";
|
||
|
||
// 若status为success，则跳转支付链接
|
||
if (data.url !== null && data.url !== undefined && data.url !== "") {
|
||
window.location.href = data.url;
|
||
}
|
||
} catch (e) {
|
||
console.error("请求失败", e);
|
||
}
|
||
}, 3000);
|
||
</script>
|
||
</body>
|
||
</html>
|