You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

674 lines
23 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="__CSS__/weui.min.css">
<script src="__JS__/flex.min.js"></script>
<script type="text/javascript" src="__JS__/jquery.js"></script>
<title>支付中心</title>
</head>
<style>
html,
body {
background-color: #F5F5F5;
min-height: 100vh;
}
.weui-cells {
border-radius: .2rem;
box-shadow: 0px 0px .05rem rgba(0, 0, 0, .2);
margin-top: 0px;
}
.weui-cell {
height: 0.85rem;
font-size: .28rem;
color: #292929;
padding: 0px .3rem;
}
.bottombutton {
height: 1rem;
background-color: #21B1EB;
color: #ffffff;
font-size: .32rem;
text-align: center;
line-height: 1rem;
bottom: 0px;
}
img {
width: .72rem;
height: .72rem;
margin-right: .2rem;
/* margin: .3rem; */
}
.paylist .weui-cell {
padding: .2rem .3rem;
height: 1rem;
}
.paylist .weui-cell__hd {
display: flex;
}
.weui-cells:after {
border: 0px;
}
.weui-cells:before {
border: 0px;
}
/**/
.weui-label {
font-size: .32rem;
}
.weui-cell__bd{
padding-right: .2rem;
}
.weui-input {
background-color: #EDEDED;
height: .6rem;
border-radius: .1rem;
padding-left: .2rem;
}
.weui-cell {
margin: .3rem 0rem;
/* padding:0 .3rem; */
}
.weui-cell:before {
height: 0px;
content: none;
}
.redtxt.weui-cell__ft {
color: red;
font-size: .28rem;
margin-left: .17rem;
}
.paymoney:after{
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
left: .3rem;
right:.3rem;
z-index: 2;
}
.paypage{
padding: 0 .3rem .5rem;margin-top:-1.8rem;
}
.bottombutton{
height:1rem;background-color: #21B1EB;color: #ffffff;font-size: .32rem;text-align: center;line-height:1rem;bottom: 0px;
}
@media screen and (orientation: landscape) {
body{
line-height: 0;
}
.weui-footer_fixed-bottom{
position: relative;
bottom: 0px;
}
.paypage{
padding: 0 .3rem .3rem;margin-top:-1.8rem;
}
.bottombutton{
width: 100%;
}
}
@media screen and (orientation:portrait) {
.weui-footer_fixed-bottom{
position: relative;
bottom: 0px;
border-radius:35px;
}
.bottombutton{
width:5rem;
margin: auto;
}
}
.weui-dialog{
border-radius: 15px;
}
.dialogcodebtn{
border-bottom: 1px solid #a9a9a9;
margin:0 .3rem;
padding: 0px;
}
.dialogcodebtn .weui-input{
background-color:rgba(0,0,0,0);
padding-left: 0px;
}
.dialogcodebtn .weui-btn:after{
border:0px;
}
.dialogcodebtn .weui-btn{
padding: 0px;
text-align: center;
}
.weui-btn:after{
content: none;
border: 0px !important;
}
/* new */
</style>
<body>
<!--加载提示框-->
<div class="js_dialog" id="Dialog" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog" style="width: 4.5rem;max-width: 4.5rem;display: flex;flex-direction:column;padding:.4rem .2rem;">
<!-- <div id="close_doalog" style="width: 100%;text-align: left;height: .6rem;display: flex;">
<img src="__IMG__/close-black.png" style="width: .3rem;height: .3rem;margin: .3rem 0 0 .3rem;">
</div> -->
<div style="width: 100%;text-align: center;">
<img src="__IMG__/load.gif" style="width:2.18rem;height:2.04rem;">
</div>
<p style="text-align: center;font-size: .24rem;margin:auto;line-height: 1.5;color:#292929;margin-top: -.3rem;">
加载中……
<!-- 支付结果将在两分钟内反馈<br/>请稍后在游戏内查看 -->
</p>
<!-- <div style="width: 100%;text-align: center;display: flex;justify-content:center;margin-top:.5rem;">
<div style="width: 3.3rem;height: .6rem;background-color: #21B1EB;color: #ffffff;font-size: .28rem;border-radius:30px;line-height: .6rem;">
返回游戏
</div>
</div> -->
</div>
</div>
<!--提醒信息弹窗-->
<div class="js_dialog" id="msgdialog" style="display: none">
<div class="weui-mask"></div>
<div class="weui-dialog" style="width: 4.5rem;max-width: 4.5rrem;display: flex;flex-direction:column;padding-bottom: .3rem;">
<div id="close_tip" style="width: 100%;text-align: left;height: .6rem;display: flex;">
<img src="__IMG__/close-black.png" style="width: .3rem;height: .3rem;margin: .3rem 0 0 .3rem;">
</div>
<div style="width: 100%;text-align: center;">
<img src="__IMG__/txicon.png" style="width: 2.44rem;height: 1.46rem;">
</div>
<p id="tipmsg" style="text-align: center;font-size: .24rem;margin: .35rem auto;">
提示内容提示内容
</p>
<div style="width: 100%;text-align: center;display: flex;justify-content:center;">
<div id="tipok" style="width: 3.3rem;height: .6rem;background-color: #21B1EB;color: #ffffff;font-size: .28rem;border-radius:30px;line-height: .6rem;">
确认
</div>
</div>
</div>
</div>
<!--签约提示弹窗-->
<div class="js_dialog" id="bankdialog" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog" style="width: 6.3rem;max-width: 6.3rem;display: flex;flex-direction:column;padding-bottom: .3rem;">
<div id="" style="width: 100%;text-align: left;height: .6rem;display: flex;">
<img id="close_img" src="__IMG__/close-black.png" style="width: .3rem;height: .3rem;margin: .3rem 0 0 .3rem;">
<div style="font-size: .28rem;margin-top: .3rem; flex-grow:1;text-align: center;">银行卡签约</div>
</div>
<div style="margin:.3rem .3rem;text-align: left;">
<p style="font-size: .24rem;color:#A9A9A9; line-height: 1.2;">该银行卡未签约,无法进行充值,请获取短信验证进行签约</p>
<p style="font-size: .24rem;color:#292929;margin-top: .3rem;">手机:<span id="sign_mibile" style="margin-left:10px;"></span></p>
</div>
<div class="weui-cell weui-cell_vcode dialogcodebtn">
<div class="weui-cell__bd">
<input id="sign_code" class="weui-input" type="number" placeholder="请输入验证码">
</div>
<div class="weui-cell__ft ">
<a id="sign_sms" onclick="getSignSms()" href="javascript:;" class="weui-btn" style="width: 1.5rem;font-size: .24rem;background-color: #21B1EB;color: #fff;border-radius: .1rem;height: .5rem;line-height:.5rem;">获取验证码</a>
</div>
</div>
<div id="close" style="width: 100%;text-align: center;display: flex;justify-content:center;margin-top: .3rem;">
<div onclick="signcontract();" id="sign_contract" style="width: 5.3rem;height: .6rem;background-color: #21B1EB;color: #ffffff;font-size: .28rem;border-radius:5px;line-height: .6rem;">
确认
</div>
</div>
</div>
</div>
<div
style="height: 3.1rem;background-color: #21B1EB;color: #fff;border-bottom-left-radius:30%;border-bottom-right-radius:30%;padding: .43rem .3rem .6rem;line-height: 1.5;">
<p style="font-size: .4rem;">待支付……</p>
<!-- <p style="font-size: .24rem;margin-top:.3rem;">订单超过30分钟自动取消请在20分钟18秒内完成支付</p> -->
<p style="font-size: .28rem;margin-top:.3rem;">支付结果将在一分钟内反馈,请稍后在游戏内查看</p>
</div>
<form id="wfform" name="wfform" method="post" action="{:U('WapPay/shortcut_pay')}" target="_parent" >
<input type="hidden" id="wfddll" name="wfddll" value="wfddll" />
<input type="hidden" name="user_id" id="user_id" value="{$user_id}" />
<input type="hidden" name="game_id" id="game_id" value="{$game_id}" />
<input type="hidden" name="extend" id="extend" value="{$extend}" />
<div class="paypage">
<div class="weui-cells weui-cells_form" style="padding: .3rem 0 0;">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">姓名:</label></div>
<div class="weui-cell__bd">
<input id="custName" name="custName" class="weui-input" type="text">
</div>
<div class="redtxt weui-cell__ft">
*
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">银行卡号:</label></div>
<div class="weui-cell__bd">
<input id="cardNo" name="cardNo" class="weui-input" type="text">
</div>
<div class="redtxt weui-cell__ft">
*
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">身份证号:</label></div>
<div class="weui-cell__bd">
<input id="idNo" name="idNo" class="weui-input" type="text">
</div>
<div class="redtxt weui-cell__ft">
*
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">手机号:</label></div>
<div class="weui-cell__bd">
<input id="phoneNo" name="phoneNo" class="weui-input" type="text">
</div>
<div class="redtxt weui-cell__ft">
*
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">验证码:</label></div>
<div class="weui-cell__bd">
<input id="smsCode" name="smsCode" class="weui-input" type="number" oninput="if(value.length>6)value=value.slice(0,6)">
</div>
<div class="weui-cell__ft" style="margin-right: .24rem;margin-left:.3rem;">
<a id="sms" onclick="getSms()" href="javascript:;" class="weui-btn" style="font-size: .28rem;;background-color: #21B1EB;color: #fff;border-radius: .1rem;height: .6rem;line-height:.6rem;">获取验证码</a>
</div>
</div>
<div class="weui-cell paymoney" style="height:1.4rem;">
<div class="weui-cell__bd" >
<p style="font-size: .32rem;">支付金额:</p>
</div>
<div class="weui-cell__ft" style="font-size: .48rem;color: red;">{$pay_amount}</div>
</div>
</div>
</div>
<!-- -->
<div id="wfsubmit" style="border: 0;" class="weui-footer_fixed-bottom bottombutton">
立即提交订单
</div>
</form>
</body>
<script type="text/javascript">
var validCode=true;
var smsstatus = true;
function getSms() {
// if ($("#custName").val() == '' || $("#idNo").val() == '' || $("#phoneNo").val() == '') {
// $("#tipmsg").html('参数不能为空');
// $("#msgdialog").show();
// return ;
// }
if(Check.trim($("#custName").val()) == ''){
Tip.msgShow('名字不能为空');
return ;
}
if(!Check.idcardCheck($("#idNo").val())){
return;
}
if(!Check.mobileCheck($("#phoneNo").val())){
return;
}
if (!smsstatus) return;
$("#sms").html("请求中");
smsstatus = false;
var sms=document.getElementById("sms");
//获取短信验证码
$.ajax({
type: "POST",
url: "/sdk.php/WapPay/shortcut_pay",
dataType:'json',
data: {
'user_id' : $("#user_id").val(),
'game_id' : $("#game_id").val(),
'custName' : $("#custName").val(),
'cardNo' : $("#cardNo").val(),
'idNo' : $("#idNo").val(),
'phoneNo' : $("#phoneNo").val(),
'extend' : $("#extend").val(),
},
success:function(res){
// 返回列表数组,构造数据流模块
if(res.status == 0){
$("#tipmsg").html(res.info);
$("#msgdialog").show();
sms.innerText="获取验证码";
smsstatus = true;
return ;
}
if (res.status == 1) {
var time=60;
if (validCode) {
validCode=false;
var t=setInterval(function () {
time--;
sms.innerText=time+"秒"
if (time==0) {
clearInterval(t);
sms.innerText="获取验证码";
validCode=true;
smsstatus = true;
}
},1000);
}
}
if (res.status == 2) {
// 未签约
// 展示未签约页面
$("#sign_mibile").html($("#phoneNo").val());
Tip.bankShow();
sms.innerText="获取验证码";
smsstatus = true;
}
}
});
}
var signsmsstatus = true;
function getSignSms() {
if ($("#custName").val() == '' || $("#idNo").val() == '' || $("#phoneNo").val() == '') {
$("#tipmsg").html('参数不能为空.');
$("#bankdialog").hide();
$("#msgdialog").show();
$("#tipok").click(function(){
$("#msgdialog").hide();
Tip.bankShow();
$(this).off("click");
});
return ;
}
if (!signsmsstatus) return;
$("#sign_sms").html("请求中");
signsmsstatus = false;
//获取短信验证码
$.ajax({
type: "POST",
url: "/sdk.php/WapPay/sign_contract",
dataType:'json',
data: {
'user_id' : $("#user_id").val(),
'game_id' : $("#game_id").val(),
'custName' : $("#custName").val(),
'cardNo' : $("#cardNo").val(),
'idNo' : $("#idNo").val(),
'phoneNo' : $("#phoneNo").val()
},
success:function(res){
// 返回列表数组,构造数据流模块
if (res.status == 1) {
var time=60;
if (validCode) {
validCode=false;
var sms=document.getElementById("sign_sms");
var t=setInterval(function () {
time--;
sms.innerText=time+"秒"
if (time==0) {
clearInterval(t);
sms.innerText="获取验证码";
validCode=true;
signsmsstatus = true;
}
},1000);
}
}
else {
tiptype = 2;
$("#tipmsg").html(res.info);
$("#msgdialog").show();
$("#bankdialog").hide();
$("#sign_sms").html("获取验证码");
signsmsstatus = true;
}
}
});
}
var signflag = true;
function signcontract() {
if (!signflag) return ;
signflag = false;
var code = $("#sign_code").val();
if (!code) {
$("#tipmsg").html('参数不能为空');
$("#bankdialog").hide();
$("#msgdialog").show();
tiptype = 2;
signflag = true;
return ;
}
$.ajax({
type: "POST",
url: "/sdk.php/WapPay/sign_contract",
dataType:'json',
data: {
'user_id' : $("#user_id").val(),
'game_id' : $("#game_id").val(),
'custName' : $("#custName").val(),
'cardNo' : $("#cardNo").val(),
'idNo' : $("#idNo").val(),
'phoneNo' : $("#phoneNo").val(),
'signCode' : code,
},
success:function(res){
if (res.status == 1) {
$("#tipmsg").html('签约成功');
$("#bankdialog").hide();
$("#msgdialog").show();
tiptype = 1;
} else {
$("#tipmsg").html(res.info);
$("#bankdialog").hide();
$("#msgdialog").show();
tiptype = 2;
signflag = true;
}
}
});
}
function submit_check() {
return false;
return true;
}
var btnpay = false;
$("#wfsubmit").click(function(){
if (btnpay == true) return ;
var isok = true;
//名字
if(Check.trim($("#custName").val()) == ''){
isok = false;
Tip.msgShow('名字不能为空');
return ;
}
if(!Check.bankcardCheck($("#cardNo").val())){
isok = false;
return;
}
if(!Check.idcardCheck($("#idNo").val())){
isok = false;
return;
}
if(!Check.mobileCheck($("#phoneNo").val())){
isok = false;
return;
}
if(!Check.codeCheck($("#smsCode").val())){
isok = false;
return;
}
if(isok){
btnpay = true;
Tip.loadShow();
$.ajax({
type: "POST",
dataType: "json",
url: "{:U('WapPay/shortcut_pay')}" ,
data: $('#wfform').serialize(),
success: function (result) {
btnpay = false;
//处理结果
if(result.status == 0){
Tip.msgShow(result.info);
}else if(result.status == 1){
window.location.href = result.url;
}else{
Tip.msgShow('未知信息');
}
},
error: function() {
btnpay = false;
Tip.msgShow('网络请求异常,请稍后再试');
}
});
// $("#wfform").submit();
}
})
var tiptype = 0;
$(function() {
/* $("#close_tip").click(function() {
$("#msgdialog").hide();
}); */
$("#close_img").click(function() {
$("#msgdialog").hide();
$("#bankdialog").hide();
});
$("#tipok,#close_tip").click(function() {
if (tiptype == 0) {
$("#msgdialog").hide();
}
if (tiptype == 1) {
$("#msgdialog").hide();
$("#bankdialog").hide();
$("#sign_sms").html("获取验证码");
signsmsstatus = true;
tiptype = 0;
}
if (tiptype == 2) {
$("#msgdialog").hide();
Tip.bankShow();
}
});
$("#close_doalog").click(function(){
$("#Dialog").hide();
})
});
// 提示类
var Tip = {
showDom:false,
msgShow:function(str){
//信息提示
Tip._hideShow();
$("#tipmsg").html(str);
window.scrollTo(0, document.documentElement.clientHeight);
$("#msgdialog").show();
Tip.showDom = $("#msgdialog");
},
loadShow:function(){
Tip._hideShow();
window.scrollTo(0, document.documentElement.clientHeight);
$("#Dialog").show();
Tip.showDom = $("#Dialog");
},
bankShow:function(){
//自行处理
window.scrollTo(0, document.documentElement.clientHeight);
$("#bankdialog").show();
},
tipHide(){
Tip._hideShow();
},
_hideShow:function(){
if(Tip.showDom){
Tip.showDom.hide();
}
}
}
//验证类
var Check={
trim(val){
//去除全部空白
return val.replace(/\s+/g, "");
},
mobileCheck(mobile){
mobile = Check.trim(mobile);
if(!(/^1[3456789]\d{9}$/.test(mobile))){
Tip.msgShow("手机号码有误,请重填");
return false;
}
return mobile;
},
bankcardCheck(bankcard){
bankcard = Check.trim(bankcard);
if(!(/^([1-9]{1})(\d{15}|\d{18})$/.test(bankcard))){
Tip.msgShow("银行卡格式错误,请重新填写");
return false;
}
return bankcard;
},
idcardCheck(idcard){
idcard = Check.trim(idcard);
if(!(/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(idcard))){
Tip.msgShow("身份证格式错误,请重新填写");
return false;
}
return idcard;
},
codeCheck(code){
code = Check.trim(code);
if(!(/^\d{6}$/.test(code))){
Tip.msgShow("验证码格式错误应为6位数字");
return false;
}
return code;
}
};
</script>
</html>