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.

670 lines
23 KiB
HTML

5 years ago
<!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{
5 years ago
padding: 0 .3rem .5rem;margin-top:-1.8rem;
}
5 years ago
.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;
}
5 years ago
.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;
}
5 years ago
/* new */
5 years ago
</style>
5 years ago
<body>
<!--加载提示框-->
5 years ago
<div class="js_dialog" id="Dialog" style="display: none;">
<div class="weui-mask"></div>
5 years ago
<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;">
5 years ago
<img src="__IMG__/close-black.png" style="width: .3rem;height: .3rem;margin: .3rem 0 0 .3rem;">
5 years ago
</div> -->
5 years ago
<div style="width: 100%;text-align: center;">
5 years ago
<img src="__IMG__/load.gif" style="width:2.18rem;height:2.04rem;">
5 years ago
</div>
5 years ago
<p style="text-align: center;font-size: .24rem;margin:auto;line-height: 1.5;color:#292929;margin-top: -.3rem;">
加载中……
<!-- 支付结果将在两分钟内反馈<br/>请稍后在游戏内查看 -->
5 years ago
</p>
5 years ago
<!-- <div style="width: 100%;text-align: center;display: flex;justify-content:center;margin-top:.5rem;">
5 years ago
<div style="width: 3.3rem;height: .6rem;background-color: #21B1EB;color: #ffffff;font-size: .28rem;border-radius:30px;line-height: .6rem;">
返回游戏
</div>
5 years ago
</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>
5 years ago
<div
5 years ago
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;">
5 years ago
<p style="font-size: .4rem;">待支付……</p>
5 years ago
<!-- <p style="font-size: .24rem;margin-top:.3rem;">订单超过30分钟自动取消请在20分钟18秒内完成支付</p> -->
<p style="font-size: .28rem;margin-top:.3rem;">支付结果将在两分钟内反馈,请稍后在游戏内查看</p>
5 years ago
5 years ago
</div>
<form id="wfform" name="wfform" method="post" action="{:U('WapPay/shortcut_pay')}" target="_parent" >
5 years ago
<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}" />
<div class="paypage">
5 years ago
<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)">
5 years ago
</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">
5 years ago
立即提交订单
</div>
5 years ago
</form>
</body>
<script type="text/javascript">
var validCode=true;
var smsstatus = true;
function getSms() {
5 years ago
// if ($("#custName").val() == '' || $("#idNo").val() == '' || $("#phoneNo").val() == '') {
// $("#tipmsg").html('参数不能为空');
// $("#msgdialog").show();
// return ;
// }
if(Check.trim($("#custName").val()) == ''){
Tip.msgShow('名字不能为空');
return ;
}
5 years ago
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()
},
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());
5 years ago
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();
5 years ago
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();
5 years ago
$.ajax({
type: "POST",
dataType: "json",
url: "{:U('WapPay/shortcut_pay')}" ,
data: $('#wfform').serialize(),
success: function (result) {
5 years ago
btnpay = false;
5 years ago
//处理结果
if(result.status == 0){
Tip.msgShow(result.info);
5 years ago
}else if(result.status == 1){
window.location.href = result.url;
}else{
Tip.msgShow('未知信息');
5 years ago
}
},
error: function() {
5 years ago
btnpay = false;
5 years ago
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();
5 years ago
Tip.bankShow();
}
});
$("#close_doalog").click(function(){
$("#Dialog").hide();
})
});
// 提示类
var Tip = {
showDom:false,
msgShow:function(str){
//信息提示
Tip._hideShow();
$("#tipmsg").html(str);
$("#msgdialog").show();
Tip.showDom = $("#msgdialog");
},
loadShow:function(){
Tip._hideShow();
$("#Dialog").show();
Tip.showDom = $("#Dialog");
},
5 years ago
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);
5 years ago
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;
}
5 years ago
};
</script>
5 years ago
</html>