180 lines
7.1 KiB
HTML
180 lines
7.1 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title></title>
|
||
<style>
|
||
body {
|
||
font-family: 'Arial', sans-serif;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
h1 {
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
.item-info {
|
||
margin-bottom: 20px;
|
||
}
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.info-label {
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
.info-value {
|
||
color: #333;
|
||
text-align: right;
|
||
}
|
||
.recharge-btn {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 12px;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 5px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.recharge-btn:hover {
|
||
background-color: #45a049;
|
||
}
|
||
.price {
|
||
color: #e53935;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<script>
|
||
// 这些配置应该从服务器获取，这里只是演示
|
||
const itemConfig = {
|
||
name: "消消王者充值中心",
|
||
quantity: 1,
|
||
unitPrice: 30.00,
|
||
totalPrice: 30.00,
|
||
signData:"",
|
||
paySig:"",
|
||
signature:"",
|
||
openid:"",
|
||
time:0,
|
||
outTradeNo:null,
|
||
};
|
||
// 从地址栏获取参数
|
||
function getQueryParam(param) {
|
||
const hash = window.location.hash.substring(1); // 去掉 "#"
|
||
const params = new URLSearchParams(hash);
|
||
const data = params.get(param);
|
||
try { return data ? JSON.parse(data) : null; } catch { return null; }
|
||
}
|
||
// 页面加载时设置物品信息（实际应用中应该从服务器获取）
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const param = getQueryParam('data');
|
||
if(!param){
|
||
//alert("未获取到正确参数");
|
||
return;
|
||
}
|
||
//alert("开始充值");
|
||
itemConfig.name=param.name;
|
||
itemConfig.openid=param.openid;
|
||
itemConfig.outTradeNo=param.outTradeNo;
|
||
itemConfig.time=param.time;
|
||
itemConfig.quantity=param.quantity;
|
||
itemConfig.unitPrice=Number(param.price);
|
||
itemConfig.totalPrice=Number(param.quantity)*Number(param.price);
|
||
// 设置物品信息 - 这些值只能由开发者在代码中修改
|
||
// document.getElementById('itemName').textContent = itemConfig.name;
|
||
// document.getElementById('itemQuantity').textContent = itemConfig.quantity;
|
||
// document.getElementById('itemUnitPrice').textContent = `¥${(itemConfig.unitPrice/100).toFixed(2)}`;
|
||
// document.getElementById('itemTotalPrice').textContent = `¥${(itemConfig.totalPrice/100).toFixed(2)}`;
|
||
|
||
setTimeout(()=>{
|
||
let checkUrl;
|
||
try { checkUrl = new URL(param.checkUrl || 'https://q6rvwvtnga.sealoshzh.site/wx/checkIos'); }
|
||
catch { alert('支付地址无效，请重新下单'); return; }
|
||
if (checkUrl.protocol !== 'https:' || checkUrl.pathname !== '/wx/checkIos' || checkUrl.username || checkUrl.password) {
|
||
alert('支付地址无效，请重新下单'); return;
|
||
}
|
||
fetch(checkUrl.href, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
openid:itemConfig.openid,
|
||
time:itemConfig.time,
|
||
outTradeNo:itemConfig.outTradeNo,
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
//alert("开始充值")
|
||
//alert(data);
|
||
if(data !== true){
|
||
alert("该订单已过期,请重新下单");
|
||
return;
|
||
}
|
||
try{
|
||
function onBridgeReady() {
|
||
WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
||
"appId": param.body.appId, //公众号ID，由商户传入
|
||
"timeStamp": param.body.timeStamp, //时间戳，自1970年以来的秒数
|
||
"nonceStr": param.body.nonceStr, //随机串
|
||
"package": param.body.package,
|
||
"signType": "RSA", //微信签名方式：
|
||
"paySign": param.body.paySign, //微信签名
|
||
},
|
||
function(res) {
|
||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
|
||
}
|
||
});
|
||
}
|
||
if (typeof WeixinJSBridge == "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
|
||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
|
||
}
|
||
} else {
|
||
//alert("开始充值");
|
||
onBridgeReady();
|
||
}
|
||
}catch(e){
|
||
alert("充值异常"+e);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('请求错误:', error);
|
||
alert('请求失败，请重试');
|
||
});
|
||
},800)
|
||
|
||
//document.getElementById('rechargeBtn').addEventListener('click', function() {});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|