优化
This commit is contained in:
Submodule libs/rnwalletman updated: f4bdf90948...732f4c90f3
File diff suppressed because it is too large
Load Diff
Submodule servers/walletman updated: 4ba972771c...e5299b7665
134
upi.html
134
upi.html
@@ -1,11 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UPI Pay Test</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: #f0f2f5;
|
||||
@@ -16,7 +22,12 @@
|
||||
padding: 32px 16px;
|
||||
gap: 20px;
|
||||
}
|
||||
h2 { color: #1a1a2e; font-size: 20px; }
|
||||
|
||||
h2 {
|
||||
color: #1a1a2e;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
@@ -28,8 +39,16 @@
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
label { font-size: 13px; color: #888; display: block; margin-bottom: 6px; }
|
||||
input, select {
|
||||
|
||||
label {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
border: 1.5px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
@@ -39,7 +58,12 @@
|
||||
background: #fafafa;
|
||||
appearance: none;
|
||||
}
|
||||
input:focus, select:focus { border-color: #5f259f; }
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
border-color: #5f259f;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
@@ -49,8 +73,17 @@
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.badge-biz { background: #e8f5e9; color: #2e7d32; }
|
||||
.badge-pers { background: #e3f2fd; color: #1565c0; }
|
||||
|
||||
.badge-biz {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.badge-pers {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.link-box {
|
||||
background: #f5f0ff;
|
||||
border-radius: 10px;
|
||||
@@ -61,6 +94,7 @@
|
||||
line-height: 1.7;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.warn-box {
|
||||
background: #fff3e0;
|
||||
border-radius: 10px;
|
||||
@@ -69,6 +103,7 @@
|
||||
color: #e65100;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -83,14 +118,42 @@
|
||||
text-decoration: none;
|
||||
transition: opacity .15s, transform .1s;
|
||||
}
|
||||
.pay-btn:active { opacity: .85; transform: scale(.98); }
|
||||
.c-paytm { background: linear-gradient(135deg, #002970, #00baf2); }
|
||||
.c-phonepe { background: linear-gradient(135deg, #5f259f, #7b3fc4); }
|
||||
.c-mobikwik { background: linear-gradient(135deg, #1565c0, #42a5f5); }
|
||||
.c-freecharge { background: linear-gradient(135deg, #00897b, #4db6ac); }
|
||||
.c-upi { background: linear-gradient(135deg, #37474f, #78909c); }
|
||||
.qr-wrap { text-align: center; }
|
||||
.qr-wrap p { font-size: 13px; color: #888; margin-bottom: 10px; }
|
||||
|
||||
.pay-btn:active {
|
||||
opacity: .85;
|
||||
transform: scale(.98);
|
||||
}
|
||||
|
||||
.c-paytm {
|
||||
background: linear-gradient(135deg, #002970, #00baf2);
|
||||
}
|
||||
|
||||
.c-phonepe {
|
||||
background: linear-gradient(135deg, #5f259f, #7b3fc4);
|
||||
}
|
||||
|
||||
.c-mobikwik {
|
||||
background: linear-gradient(135deg, #1565c0, #42a5f5);
|
||||
}
|
||||
|
||||
.c-freecharge {
|
||||
background: linear-gradient(135deg, #00897b, #4db6ac);
|
||||
}
|
||||
|
||||
.c-upi {
|
||||
background: linear-gradient(135deg, #37474f, #78909c);
|
||||
}
|
||||
|
||||
.qr-wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-wrap p {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
@@ -100,6 +163,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>UPI Pay Test</h2>
|
||||
@@ -144,7 +208,8 @@
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;font-size:13px;">
|
||||
<span style="color:#888;">UPI ID</span>
|
||||
<span id="info-pa" style="font-weight:600;color:#5f259f;font-size:12px;text-align:right;max-width:60%;word-break:break-all;"></span>
|
||||
<span id="info-pa"
|
||||
style="font-weight:600;color:#5f259f;font-size:12px;text-align:right;max-width:60%;word-break:break-all;"></span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;font-size:13px;">
|
||||
<span style="color:#888;">Amount</span>
|
||||
@@ -317,37 +382,18 @@
|
||||
new QRCode(el, { text: link, width: 200, height: 200, correctLevel: QRCode.CorrectLevel.M });
|
||||
}
|
||||
}
|
||||
document.getElementById('pay-btn').addEventListener('click', function (e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (!href || href === '#') return;
|
||||
e.preventDefault();
|
||||
try {
|
||||
window.location.href = href;
|
||||
} catch (_) { }
|
||||
});
|
||||
|
||||
let autoTimer = null;
|
||||
|
||||
function scheduleAutoClick() {
|
||||
if (autoTimer) clearTimeout(autoTimer);
|
||||
autoTimer = setTimeout(() => {
|
||||
const btn = document.getElementById('pay-btn');
|
||||
if (!btn.href || btn.href === '#' || btn.href.endsWith('#')) return;
|
||||
|
||||
const app = document.getElementById('app').value;
|
||||
if (app === 'freecharge') {
|
||||
// freechargeupi:// 不可用时 fallback 到 upi://
|
||||
const fallbackTimer = setTimeout(() => {
|
||||
const w = WALLETS[document.getElementById('wallet').value];
|
||||
const am = document.getElementById('amount').value || '51';
|
||||
const fallback = `upi://pay?pa=${w.pa}&pn=${encodeURIComponent(w.pn)}&am=${am}&cu=INR${w.extra()}`;
|
||||
window.location.href = fallback;
|
||||
}, 2500);
|
||||
window.location.href = btn.href;
|
||||
// 如果页面还在(没跳走),说明跳转失败,fallback 会触发
|
||||
window.addEventListener('blur', () => clearTimeout(fallbackTimer), { once: true });
|
||||
} else {
|
||||
btn.click();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
document.getElementById('wallet').addEventListener('change', () => { update(); scheduleAutoClick(); });
|
||||
document.getElementById('app').addEventListener('change', () => { update(); scheduleAutoClick(); });
|
||||
document.getElementById('amount').addEventListener('input', update);
|
||||
update();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user