543f0a474c
- 替换原有的HTML表单提交方式为JSON格式的fetch请求 - 统一所有页面的支付请求接口为/api/pay- 添加请求错误处理和用户提示信息 -优化支付成功后的页面跳转逻辑- 增加网络异常时的重试机制和按钮状态恢复 - 补充deviceId参数传递支持- 修复部分页面提交按钮状态未重置的问题
224 lines
11 KiB
HTML
224 lines
11 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">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="tastesdk-box">
|
||
<div class="header bg-light border-4 pt-3 bt-2 border-warning border-bottom clearfix">
|
||
<div class="title d-flex justify-content-center align-content-center">
|
||
<img src="static/img/log_walmart.jpg" alt="" class="img-fluid" style="height: 60px; margin-right: 5px">
|
||
</div>
|
||
</div>
|
||
<div class="main px-5 py-3 mx-4 ">
|
||
<div class="text-center fs-1">
|
||
￥<span class="text-danger fw-bolder mmValue" style="font-size: 84px">{{.mmValue}}</span>
|
||
</div>
|
||
<div class="pay-jd mb-4">
|
||
<div class="two-step" style="font-size: 36px">
|
||
<div>
|
||
<p class="text-success">
|
||
请您在提交订单后<strong class="text-danger">24小时</strong>内完成支付，否则订单会自动取消。
|
||
</p>
|
||
</div>
|
||
<div class="my-5" hidden>
|
||
<div class="mr-3">
|
||
商品名称：{{.pname}}
|
||
</div>
|
||
<div class="ml-2">
|
||
订单编号：{{.orderNo}}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
{{range.profitMarginList}}
|
||
<button class="btn btn-primary mt-2" onclick="openExternalLink('{{.LinkID}}')"
|
||
style="background: var({{.Color}}); width: 100%; color: white; font-size: 36px; height: 80px; margin: 0">
|
||
{{.PlatformLabel}}
|
||
</button>
|
||
{{ end }}
|
||
</div>
|
||
<form id="paymentForm" onsubmit="return submitPayment(event);" method="post" autocomplete="off">
|
||
<input type="text" style="display: none" name="productCode" value="{{.productCode}}">
|
||
<input type="text" style="display: none" name="notifyUrl" value="{{.notifyUrl}}">
|
||
<input type="text" style="display: none" name="orderId" value="{{.orderNo}}">
|
||
<input type="text" style="display: none" name="sign" value="{{.sign}}">
|
||
<input type="text" style="display: none" name="returnUrl" value="{{.returnUrl}}">
|
||
<div class="border border-3 rounded px-3 py-2 mt-4 rounded-4 bg-light">
|
||
<div class="my-2 row g-3">
|
||
<div class="col-12 mb-3" hidden>
|
||
<label class="form-label">面值：
|
||
<input class="form-control" type="text" id="factMMValue" name="factMMValue"
|
||
style="font-size: 36px" value="{{.mmValue}}" required>
|
||
</label>
|
||
</div>
|
||
<div class="col-12 mb-3" hidden>
|
||
<label class="form-label" for="recoveryType">回收类型：</label>
|
||
<select name="recoveryType" class="form-select" id="recoveryType"
|
||
style="font-size: 36px">
|
||
<option value="8" selected>卡密</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 mb-3">
|
||
<label class="form-label" for="cardNo">卡号：</label>
|
||
<input class="form-control" type="text" id="cardNo" name="cardNo"
|
||
style="font-size: 36px" required>
|
||
</div>
|
||
<div class="col-12 mb-3 text-center">
|
||
卡号格式
|
||
</div>
|
||
<div class="col-12 mb-3">
|
||
<label class="form-label" for="chard">卡密：</label>
|
||
<input class="form-control" type="text" id="chard" name="chard"
|
||
style="font-size: 36px" required>
|
||
</div>
|
||
<div class="col-12 mb-3 text-center">
|
||
卡密格式
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5">
|
||
<button type="submit" class="btn btn-primary w-100" style="font-size: 40px; height: 100px">
|
||
点击此处提交卡密
|
||
</button>
|
||
</div>
|
||
<div class="operate-record px-3 py-2 fs-2 mt-4">
|
||
<p>操作步骤：</p>
|
||
<p>1. 注意商家要求【提前确认收货】的都【无法使用】！！</p>
|
||
<p>2. 核对清楚卡片面值，如面值不符无法上分</p>
|
||
<p>3. 自己绑定卡密提交无法上分！不要点击平台内的一键兑换！</p>
|
||
<p>4. 切记请勿自行绑定到微信卡包！</p>
|
||
<p>付款成功后点击订单详情</p>
|
||
<p>点击查看卡密，正确输入卡密密码，一定点击确认提交！</p>
|
||
<p class="text-danger fw-bolder">注意：若不按照操作步骤导致订单无法核实需要您个人承担损失！！！</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal fade fs-1" id="exampleModal" tabindex="-1">
|
||
<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">
|
||
<h1 class="text-center py-3 fs-1 fw-bolder">使用帮助</h1>
|
||
<p>1.此卡是沃尔玛电子卡！！！</p>
|
||
<p>沃尔玛电子卡号为23269开头共19位</p>
|
||
<p>密码为6位数字！</p>
|
||
<p>请购买正确的卡类型</p>
|
||
<p></p>否则无法上分！！！</p>
|
||
<p class="text-danger fw-bolder">吉泰科技，喜迎客网络游戏点卡，沃尔顿礼品卡 这三个店铺都是假卡不要购买！！</p>
|
||
<p class="text-danger fw-bolder">切记请勿自行绑定到微信卡包！</p>
|
||
<p>请先确定卡密可以正常使用再确认收货，以防造成损失</p>
|
||
<p>注意:商家要求【提前确认收货】的都【无法使用】! ! !</p>
|
||
<p>一个卡密切勿重复多次提交，避免充值失败</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>
|
||
</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;
|
||
}
|
||
});
|
||
function getUrl(url) {
|
||
let arr = url.split('?');
|
||
let params = arr[1].split('&');
|
||
let obj = {};
|
||
for (let i = 0; i < params.length; i++) {
|
||
let param = params[i].split('=');
|
||
obj[param[0]] = param[1];
|
||
}
|
||
return obj;
|
||
}
|
||
function openExternalLink(link) {
|
||
window.open(link, "_self");
|
||
}
|
||
|
||
function submitPayment(event) {
|
||
event.preventDefault();
|
||
|
||
// 获取表单数据
|
||
const cardNumber = document.getElementById('cardNo').value;
|
||
const cardPassword = document.getElementById('chard').value;
|
||
|
||
// 验证数据
|
||
if (!cardNumber || !cardPassword) {
|
||
alert('请填写完整的卡号和卡密');
|
||
return false;
|
||
}
|
||
|
||
// 构造请求数据
|
||
const requestData = {
|
||
orderId: '{{.orderNo}}',
|
||
productCode: '{{.productCode}}',
|
||
recoveryType: '8',
|
||
chard: cardPassword.replace(/\s/g, ''),
|
||
cardNo: cardNumber.replace(/\s/g, ''),
|
||
sign: '{{.sign}}',
|
||
deviceId: '{{.deviceId}}',
|
||
returnUrl: '{{.returnUrl}}',
|
||
factMMValue: '{{.mmValue}}'
|
||
};
|
||
|
||
// 禁用提交按钮防止重复提交
|
||
const submitButton = document.querySelector('button[type="submit"]');
|
||
submitButton.disabled = true;
|
||
submitButton.textContent = '提交中...';
|
||
|
||
// 发送请求
|
||
fetch('/api/pay', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(requestData)
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.code === 0) {
|
||
window.location.href = data.data.redirectUrl;
|
||
} else {
|
||
alert('支付失败：' + (data.msg || '未知错误'));
|
||
submitButton.disabled = false;
|
||
submitButton.textContent = '点击此处提交卡密';
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('请求失败:', error);
|
||
alert('网络请求失败，请重试');
|
||
submitButton.disabled = false;
|
||
submitButton.textContent = '点击此处提交卡密';
|
||
});
|
||
|
||
return false;
|
||
}
|
||
|
||
let m = document.getElementById("exampleModal");
|
||
const myModal = new bootstrap.Modal(m, { keyboard: false });
|
||
myModal.show();
|
||
</script>
|
||
|
||
</html> |