543f0a474c
- 替换原有的HTML表单提交方式为JSON格式的fetch请求 - 统一所有页面的支付请求接口为/api/pay- 添加请求错误处理和用户提示信息 -优化支付成功后的页面跳转逻辑- 增加网络异常时的重试机制和按钮状态恢复 - 补充deviceId参数传递支持- 修复部分页面提交按钮状态未重置的问题
233 lines
10 KiB
HTML
233 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>{{.siteName}}</title>
|
||
<link rel="shortcut icon" type="tmpay/image/x-icon" href="../static/img/icon.ico">
|
||
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
|
||
<script src="../static/js/bootstrap.bundle.min.js"></script>
|
||
<link href="../static/css/cashier.css" rel="stylesheet">
|
||
<script src="../static/js/monitor.min.js" data-monitor="{{ .dynamicUrl }}"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="tastesdk-box">
|
||
<div class="header bg-light border-4 pt-3 bt-2 mb-4 border-warning border-bottom clearfix">
|
||
<div class="title d-flex justify-content-center align-content-center">
|
||
<img src="static/img/taobao/logo.png" alt="" class="img-fluid" style="height: 60px; margin-right: 5px">
|
||
<span>游戏充值卡</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-light p-3 fw-bolder" style="height: 100%; font-size: 36px">
|
||
<div class="my-4 bg-white py-4 px-5 rounded-5">
|
||
<div style="" class="text-warning-emphasis">
|
||
注意：请勿超时支付
|
||
</div>
|
||
<div class="fw-bolder">
|
||
订单号：{{.orderNo}}
|
||
</div>
|
||
</div>
|
||
<div class="my-4 bg-white py-4 px-5 rounded-5">
|
||
充值金额<span class="text-danger fw-bolder mmValue float-end">{{.mmValue}}</span>
|
||
</div>
|
||
<div class="my-4 bg-white py-4 px-5 rounded-5">
|
||
<div class="pay-jd mb-4">
|
||
<ul class="list-group">
|
||
<li class="text-success list-group-item border-0 d-flex align-items-center">
|
||
<span class="badge text-bg-warning text-white rounded-pill me-4">1</span>
|
||
点击下面复制按钮，粘贴到账号里
|
||
</li>
|
||
<li class="text-primary list-group-item border-0 d-flex align-items-center">
|
||
<span class="badge text-bg-warning text-white rounded-pill me-4">2</span>
|
||
区/服可随便写
|
||
</li>
|
||
<li class="text-danger list-group-item border-0 d-flex align-items-center">
|
||
<span class="badge text-bg-warning text-white rounded-pill me-4">3</span>
|
||
一定要复制下面的账号填写，否则不退不补
|
||
</li>
|
||
<li class="text-danger list-group-item border-0 d-flex align-items-center">
|
||
<span class="badge text-bg-warning text-white rounded-pill me-4">4</span>
|
||
<p>
|
||
重要！！！付款后，<span class="fw-bolder">[确认收货]</span>秒到账
|
||
</p>
|
||
</li>
|
||
<li class="list-group-item border-0" style="font-size: 40px">账号 {{.accountNumber}}</li>
|
||
</ul>
|
||
<div class="mt-5">
|
||
<button class="submit-order-tb btn btn-primary w-100 btn-warning text-white rounded-3"
|
||
style="font-size: 40px; height: 100px">
|
||
点击复制自动跳转淘宝
|
||
</button>
|
||
</div>
|
||
<div class="operate-record w-100 mt-3">
|
||
<div>
|
||
<img src="static/img/taobao/warning_v3.jpg" class="img-fluid w-100">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal fade fs-1" id="exampleModal2" tabindex="-1" ata-bs-backdrop="static" data-bs-keyboard="false"
|
||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" style="min-width: 80vw">
|
||
<div class="modal-content px-4 py-4">
|
||
<div class="modal-header">
|
||
<h1 class="modal-title">！！！注意！！！</h1>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="user-help-1"></p>
|
||
<p id="user-help-2"></p>
|
||
<h1 class="text-center py-3 fs-1 fw-bolder">使用帮助</h1>
|
||
<div class="w-100">
|
||
<img src="static/img/taobao/warning_v4.jpg" class="img-fluid w-100">
|
||
</div>
|
||
<p class="text-danger">注意：店铺消息不回</p>
|
||
<p></p>
|
||
<p class="text-danger">复制【本页面指定账号】</p>
|
||
<p></p>
|
||
<p></p>
|
||
<p><strong class="text-primary">不按规定填写充值账号，无法上分！！！</strong></p>
|
||
<p>区服随意填写</p>
|
||
<p>请在1小时内确认收货，否则损失自负</p>
|
||
<p class="text-danger fw-bolder">确认收货秒上分！！！</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
|
||
style="height: 80px; font-size: 40px">
|
||
我已知晓
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="toast-container p-3 top-25 start-50 translate-middle-x" id="toastPlacement">
|
||
<div class="toast bg-white w-100" id="copyToast" role="alert" aria-live="assertive" aria-atomic="true">
|
||
<div class="toast-header fs-4">
|
||
<strong class="me-auto">复制成功</strong>
|
||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||
</div>
|
||
<div class="toast-body fs-3">
|
||
账号 {{.accountNumber}} 已经复制到粘贴板上了！
|
||
</div>
|
||
</div>
|
||
<div class="toast align-items-center bg-white border-0 w-100" id="toastMessage" role="alert" aria-live="assertive"
|
||
aria-atomic="true">
|
||
<div class="d-flex">
|
||
<div class="toast-body fs-4">
|
||
<p class="toast-message-text"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="../static/js/base.js"></script>
|
||
<script type="text/javascript">
|
||
$("#amount").blur(function () {
|
||
var idBank = /([1-9]\d*\.?\d*)|(0\.\d*[1-9])/;
|
||
if ($("#amount").val().match(idBank) == null) {
|
||
$("#amount").val("");
|
||
return false;
|
||
}
|
||
});
|
||
$(".submit-order-tb").click(() => {
|
||
// 复制到剪贴板
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
navigator.clipboard.writeText("{{ .accountNumber }}").then(async () => {
|
||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(document.getElementById('copyToast'))
|
||
toastBootstrap.show()
|
||
// 发送JSON请求
|
||
const requestData = {
|
||
"orderId": "{{ .orderNo }}",
|
||
"productCode": "{{ .productCode }}",
|
||
"recoveryType": "1",
|
||
"chard": "{{ .accountNumber }}",
|
||
"cardNo": "",
|
||
"sign": "{{ .sign }}",
|
||
"deviceId": localStorage.getItem("deviceId"),
|
||
"returnUrl": "{{ .returnUrl }}",
|
||
"factMMValue": "{{ .mmValue }}"
|
||
};
|
||
const result = await $.ajax({
|
||
url: "/api/pay",
|
||
type: "POST",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(requestData),
|
||
})
|
||
if (result.code !== 0) {
|
||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(document.getElementById('toastMessage'))
|
||
const ele = document.getElementsByClassName('toast-message-text')
|
||
ele[0].innerText = result.msg
|
||
toastBootstrap.show()
|
||
return
|
||
}
|
||
openExternalLink("{{ (index .profitMarginList 0).LinkID }}");
|
||
})
|
||
} else {
|
||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(document.getElementById('copyToast'))
|
||
toastBootstrap.show()
|
||
// Use the 'out of viewport hidden text area' trick
|
||
const textArea = document.createElement("textarea");
|
||
textArea.value = "{{ .accountNumber }}";
|
||
// Move textarea out of the viewport so it's not visible
|
||
textArea.style.position = "absolute";
|
||
textArea.style.left = "-999999px";
|
||
document.body.prepend(textArea);
|
||
textArea.select();
|
||
try {
|
||
document.execCommand('copy');
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
textArea.remove();
|
||
}
|
||
// 发送JSON请求
|
||
const requestData = {
|
||
"orderId": "{{ .orderNo }}",
|
||
"productCode": "{{ .productCode }}",
|
||
"recoveryType": "1",
|
||
"chard": "{{ .accountNumber }}",
|
||
"cardNo": "",
|
||
"sign": "{{ .sign }}",
|
||
"deviceId": localStorage.getItem("deviceId"),
|
||
"returnUrl": "{{ .returnUrl }}",
|
||
"factMMValue": "{{ .mmValue }}"
|
||
};
|
||
$.ajax({
|
||
url: "/api/pay",
|
||
type: "POST",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(requestData),
|
||
}).then(result => {
|
||
if (result.code !== 0) {
|
||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(document.getElementById('toastMessage'))
|
||
const ele = document.getElementsByClassName('toast-message-text')
|
||
ele[0].innerText = result.msg
|
||
toastBootstrap.show()
|
||
}
|
||
openExternalLink("{{ (index .profitMarginList 0).LinkID }}");
|
||
})
|
||
}
|
||
})
|
||
|
||
function openExternalLink(link) {
|
||
window.open(link, "_self");
|
||
}
|
||
|
||
let m = document.getElementById("exampleModal2");
|
||
const myModal = new bootstrap.Modal(m, {keyboard: false});
|
||
myModal.show();
|
||
</script>
|
||
<script>
|
||
|
||
</script>
|
||
<style>
|
||
.top-25 {
|
||
top: 25% !important
|
||
}
|
||
</style>
|
||
|
||
</html> |