<html lang="en">
<head>
<meta http-equiv="Content-Type" content="span/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="divport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<title>支付订单</title>
</head>
<style>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
spanarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
.pay_page {
width: 100%;
height: 100%;
background-color: #F4F4F4;
position: relative;
}
.pay_time {
width: 100%;
text-align: center;
font-size: 2rem;
color: #999999;
padding: 5rem 0 2rem 0;
}
.pay_time span {
margin-left: 1rem;
}
.pay_price {
font-size: 4rem;
width: 100%;
text-align: center;
}
.pay_price span:first-child {
font-size: 2rem;
}
.pay_quan {
margin: 2rem 0 0 0;
width: 100%;
text-align: center;
color: #999999;
font-size: 2rem;
}
.price_Top {
background-color: #fff;
}
.pay_zhifu {
width: 90%;
height: 10rem;
display: flex;
margin: 4rem auto;
align-items: center;
}
.pay_circle {
width: 3rem;
height: 3rem;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.pay_one {
width: 3rem;
height: 3rem;
}
.pay_two {
display: inline-block;
font-size: 2.5rem;
margin-left: 3rem;
width: 47rem;
}
.pay_three {
display: inline-block;
}
.pay_three img {
width: 3rem;
height: 3rem;
}
.pay_btndiv {
width: 100%;
position: absolute;
bottom: 4rem;
text-align: center;
}
.pay_btn {
width: 92%;
height: 8rem;
background-color: #EE4454;
color: #fff;
font-size: 2.5rem;
outline: none;
border: 0;
border-radius: 1.5rem;
}
.layui-layer-content {
font-size: 1.8rem!important;
padding: 2rem 1rem!important;
}
</style>
<body>
<div class="pay_page">
<div class="price_Top">
<div class="pay_time">
支付剩余时间<span class="daojishi"></span>
</div>
<div class="pay_price">
<span>¥</span> <span id="pay_money"></span>
</div>
<div class="pay_quan">
</div>
<div class="pay_zhifu">
<img class="pay_one" src="https://vt-im-bucket.oss-cn-chengdu.aliyuncs.com/activity/wechat.png" alt="" />
<span class="pay_two">微信支付</span>
<div class="pay_three">
<!-- <div class="pay_circle"></div> -->
<img src="https://vt-im-bucket.oss-cn-chengdu.aliyuncs.com/activity/checkbox.png" aly="" />
</div>
</div>
</div>
<div class="pay_btndiv">
<button class="pay_btn" onclick="pay()">立即支付</button>
</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/layer/layer.js"></script>
<script type="text/javascript" src="../js/mian.js"></script>
<script src="../js/md5.js"></script>
<script>
// $(function() {
// if (sessionStorage.getItem("payInfo")) {
// let msgList = JSON.parse(sessionStorage.getItem("payInfo"));
// $("#pay_money").html('0.01');
// $(".pay_quan").html('测试');
// }
// countdown();
// })
$("#pay_money").html('0.01');
$(".pay_quan").html('测试');
var second = 10000;
var payBtn = true;
var changesecond = '';
//倒计时
function countdown() {
if (second == 0) {
payBtn = false;
changesecond = '00:00';
$(".daojishi").html(changesecond);
$('.pay_btn').css({
'background-color': 'gray'
});
$(".pay_btn").attr("disabled", true);
setTimeout("goActive()", 2000);
return;
}
var time = setTimeout(function() {
let str = formatSeconds(second);
second = second - 1;
changesecond = str;
$(".daojishi").html(changesecond);
countdown();
}, 1000)
};
function formatSeconds(value) {
var theTime = parseInt(value); // 秒
var theTime1 = 0; // 分
if (theTime > 60) {
theTime1 = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
if (theTime1 > 60) {
theTime1 = parseInt(theTime1 % 60);
}
}
var result = "" + parseInt(theTime); //秒
if (10 > theTime > 0) {
result = "0" + parseInt(theTime); //秒
} else {
result = "" + parseInt(theTime); //秒
}
if (10 > theTime1 > 0) {
result = "0" + parseInt(theTime1) + ":" + result; //分，不足两位数，首位补充0，
} else {
result = "" + parseInt(theTime1) + ":" + result; //分
}
return result;
};
function goActive() {
window.location.href = 'https://activity.oytour.com/html/GT_activities.html';
// window.location.href = 'http://127.0.0.1:5500/html/paySuccess.html';
}
function pay() {
// if (!localStorage.openid) {
// window.location.href = 'https://activity.oytour.com/html/GT_activities.html';
// }
// if (!payBtn) {
// layer.msg('您已经超出支付时间！');
// return;
// }
var payMsg;
// if (sessionStorage.getItem("payInfo")) {
// payMsg = JSON.parse(sessionStorage.getItem("payInfo"));
// }
let msg = {
sOrderNo: '10012', //订单号
dTotalPrice: '0.01', //总价
sProductName: '测试',
sCurOpenID: 'wx44c35529819fc345'
}
$.ajax({
type: "POST",
url: `https://reborn.oytour.com/api/WeChatNotify/DoPay?sOrderNo=${'10012'}&sCurOpenID=${'o55qxs4qatsIlJT0ebHZIVMHWfz0'}`,
contentType: "application/json",
async: false,
success: function(res) {
if (res.resultCode === 1) {
let d = JSON.parse(res.data);
onBridgeReady(d.appId, d.timeStamp, d.nonceStr, d.package, d.sign);
} else {
layer.msg(res.message);
}
},
error: function(res) {
// layer.msg(res.message);
}
});
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 {
// onBridgeReady();
}
}
function onBridgeReady(id, ts, ns, pa, ps) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": id, //公众号名称，由商户传入
"timeStamp": ts, //时间戳，自1970年以来的秒数
"nonceStr": ns, //随机串
"package": pa,
"signType": "MD5", //微信签名方式：
"paySign": ps //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
window.location.href = 'https://activity.oytour.com/html/paySuccess.html';
}
});
}
</script>
</html>