优化游戏内支付方式

master
chenzhi 5 years ago
parent a3358167f2
commit 1430f61b47

@ -1,283 +1,291 @@
<!DOCTYPE html>
<html>
<html lang="en">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="__JS__/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="__CSS__/reset.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/payment.css" />
<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.75rem;
font-size: .28rem;
color: #292929;
padding: 0px .3rem;
}
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;
}
@media screen and (orientation: portrait) {
.box{
padding:.3rem;
}
.bottombutton{
height:1rem;background-color: #21B1EB;color: #ffffff;font-size: .32rem;text-align: center;line-height:1rem;bottom: 0px;
position: fixed;left: 0;right: 0;
}
.pay-info,.paylist{
margin-top: .3rem;
}
/* 隐藏横版更多 */
#h_showotherpay{
display: none;
}
}
@media screen and (orientation: landscape) {
/*横屏 css*/
.box{
padding:.24rem .5rem;
}
.pay-info,.paylist{
margin-top: .24rem;
}
.bottombutton{
height:1rem;background-color: #21B1EB;color: #ffffff;font-size: .32rem;text-align: center;line-height:1rem;
width: 7.5rem;border-radius: .2rem;position: absolute;left: 50%;margin: .5rem 0 .5rem -3.75rem;
}
body{
padding-bottom: .50rem;
}
.paylist-box{
display: flex;
height: auto;
flex-wrap:wrap;
}
.paylist-box .weui-cell{
min-width: 30%;
box-sizing: content-box;
margin-left: 3%;
padding: .16rem .0rem;
}
.paylist-box .weui-cell:before{
content: none;
}
/* 隐藏竖版更多 */
.showotherpay{
display: none;
}
}
.border-half-line{
width: 97%;
margin-left: 3%;
float:left;
height:1px;
background-color: #e5e5e5;
-webkit-transform:scale(1,0.5);
transform:scale(1,0.5);
-webkit-transform-origin:top center;
transform-origin: top center
}
.showotherpay{
width: 100%;height: .9rem;background-color: #ffffff;font-size: .28rem;text-align: center;color: #A9A9A9;line-height: .9rem;margin-top: .3rem;
}
.noborder.weui-cell:before{
height: 0px;
border: 0px;
}
.noborder{
margin-top: -.38rem;
}
</style>
<body>
<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 class="payment">
<!-- <div class="heard">
<div class="heard_box">
<a href="" style="background-image: url('__IMG__/pay_way/close.png');"></a>
支付中心
</div>
<div style="width: 100%;text-align: center;line-height: 1;">
<img src="__IMG__/txicon.png" style="width: 1.7rem;height: 1.7rem;">
</div> -->
<div class="containner">
<div class="indent">
<div class="indent_box">
<div>订单金额: <span>¥{$data['price']}元</span> </div>
<div>您的账户余额: <span>{$balance+$bind_balance}平台币</span> </div>
</div>
<p id="tipmsg" style="text-align: center;font-size: .24rem;margin: .25rem 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 class="documents">
<div class="documents_box">
<div><span>适用平台金额:</span> <span>-¥{$apply_money}</span> </div>
<div><span>还需支付:</span><span>¥{$pay_price}</span> </div>
</div>
</div>
<div class="select_pay">
<div class="select_pay_box">
<div>请选择支付方式:</div>
<div class="select_pay_info">
<img src="__IMG__/pay_way/zhifubao.png" alt="" class="slide">
<div>支付宝</div>
<img src="__IMG__/pay_way/blue_black.png" alt="" class="boult">
</div>
<input type="hidden" name="sdk_version" id="sdk_version" value="{$sdk_version}"/>
<input type="hidden" name="small_json" id="small_json" value='{$small_json}'/>
<div class="box">
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p style="font-size: .28rem;">订单金额: <span style="margin-left: .2rem;color: red;">¥{$data['price']}元</span></p>
</div>
<!-- <div class="weui-cell__ft" style="color: red">¥{$data['price']}元</div> -->
</div>
<div class="weui-cell noborder">
<div class="weui-cell__bd">
<p style="font-size: .24rem;color: #A9A9A9;">您的账户余额: <span style="margin-left: .2rem;">{$balance+$bind_balance}平台币</span></p>
<div class="payment_btn" >
<div>
支付金额 <span>¥{$pay_price}</span>
</div>
<!-- <div class="weui-cell__ft" style="color: #A9A9A9;">{$balance+$bind_balance}平台币</div> -->
<div class="confirm_pay">确认支付</div>
</div>
<div class="payment_rest" style="display: none;">
<div class="payment_rest_box">
<div class="title">
<div>请选择支付方式</div>
<img src="__IMG__/pay_way/dacha.png" alt="">
</div>
<div class="weui-cells pay-info">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>适用平台余额:</p>
<if condition="C('alipay.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.zfb') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.zfb') eq 1)">
<div class="payment_rest_way way_btn" data-type="alipay" data-url="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/zhifubao.png" alt="">
<span>支付宝</span>
</div>
<div class="weui-cell__ft" style="color: #292929">-¥{$apply_money}</div>
<img src="__IMG__/pay_way/dagou2.png" alt="">
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<p>还需支付:</p>
</if>
<if condition="!pay_limit('wx') and $money elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<div class="payment_rest_way way_btn" data-type="wxpay" data-url="{:U('PayH5/weixin_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/weixin.png" alt="">
<span>微信</span>
</div>
<div data-pay_price="{$pay_price}" id="pay_price" class="weui-cell__ft" style="color: red">¥{$pay_price}</div>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</if>
<if condition="C('sqpay.status') eq 1 and C('sqpay.shortcut') eq 1">
<div class="payment_rest_way way_btn" data-type="shorcut" data-url="{:U('Shortcut/wap_shortcut_pay', array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'code'=>1,'extend'=>I('extend'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/xianshang.png" alt="">
<span>快捷支付</span>
</div>
<div class="weui-cells paylist">
<div class="weui-cells__title" style="line-height: .64rem;color: #a9a9a9;font-size:.24rem;margin: 0px;">
请选择支付方式</div>
<div class="border-half-line" style="position: absolute;"></div>
<div class="paylist-box">
<if condition="C('alipay.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.zfb') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.zfb') eq 1)">
<a id="alipaybtn" class="weui-cell" href="javascript:;" data-url="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}" id="alipaybtn" class="recharge_way_btn recharge_way_btn_alipay">
<div class="weui-cell__hd"><img src="__IMG__/alipay.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">支付宝支付</p>
<p style="color: #a9a9a9;font-size:.2rem;">推荐支付宝用户使用</p>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</a>
</if>
</div>
</div>
<!-- <div class="payment_rest_btn">其他支付方式</div> -->
</div>
<!-- 未成年不许支付弹窗 -->
<div class="msgdialog" style="display: none">
<div class="forbid_model"></div>
<div class="forbid_window">
<div class="forbid_pay">
<img src="__IMG__/pay_way/forbid.png" alt="" style="margin-top: .5rem;">
<div class="tipmsg">未成年禁止支付哟</div>
</div>
<div class="forbid_confirm" style="margin: 0.45rem auto;">确认</div>
<div class="forbid_close"><img src="__IMG__/pay_way/close2.png" alt=""></div>
</div>
</div>
</div>
<if condition="C('sqpay.status') eq 1 and C('sqpay.shortcut') eq 1">
<a id="shorcut" class="weui-cell" data-url="{:U('Shortcut/wap_shortcut_pay', array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'code'=>1,'extend'=>I('extend'),'api_ver'=>2))}" class="recharge_way_btn recharge_way_btn_alipay">
<div class="weui-cell__hd"><img src="__IMG__/onlinepay.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">快捷支付</p>
<p style="color: #a9a9a9;font-size:.2rem;">可在线快捷支付</p>
<!-- 横屏 -->
<div class="payment_heng">
<!-- <div class="heard">
<div class="heard_box">
<a href="" style="background-image: url('__IMG__/pay_way/close.png');"></a>
支付中心
</div>
</div> -->
<div class="containner">
<div class="indent">
<div class="indent_box">
<div>订单金额: <span>¥{$data['price']}元</span> </div>
<div>您的账户余额: <span>{$balance+$bind_balance}平台币</span> </div>
</div>
</div>
<div class="documents">
<div class="documents_box">
<div><span>适用平台金额:</span> <span>-¥{$apply_money}</span> </div>
<div><span>还需支付:</span><span>¥{$pay_price}</span> </div>
</div>
</div>
<div class="select_pay">
<div class="select_pay_box">
<div>请选择支付方式:</div>
<div class="select_pay_info">
<img src="__IMG__/pay_way/zhifubao.png" alt="" class="slide">
<div>支付宝</div>
<img src="__IMG__/pay_way/blue_black.png" alt="" class="boult">
</div>
</div>
</div>
<div class="payment_btn" >
<div>
支付金额 <span>¥{$pay_price}</span>
</div>
<div class="confirm_pay">确认支付</div>
</div>
<div class="payment_rest" style="display: none;">
<div class="payment_rest_box">
<div class="title">
<div>请选择支付方式</div>
<img src="__IMG__/pay_way/dacha.png" alt="">
</div>
<if condition="C('alipay.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.zfb') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.zfb') eq 1)">
<div class="payment_rest_way way_btn" data-type="alipay" data-url="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/zhifubao.png" alt="">
<span>支付宝</span>
</div>
<img src="__IMG__/pay_way/dagou2.png" alt="">
</div>
</a>
</if>
<if condition="$pay_price elt C('WX_PAY_LIMIT')">
<if condition="!pay_limit('wx') and $money elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<a id="wxpay" style="display: none;" class="weui-cell" data-url="{:U('PayH5/weixin_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}" class="recharge_way_btn recharge_way_btn_wechat">
<div class="weui-cell__hd"><img src="__IMG__/wxpay.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">微信支付</p>
<p style="color: #a9a9a9;font-size:.2rem;">推荐微信用户使用</p>
</div>
</a>
<a id="h_showotherpay" class="weui-cell charge_way_btn recharge_way_btn_wechat">
<div class="weui-cell__hd"><img src="__IMG__/gengduo.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">其他支付方式</p>
<p style="color: #a9a9a9;font-size:.2rem;">显示其他支付方式</p>
</div>
</a>
<div class="payment_rest_way way_btn" data-type="wxpay" data-url="{:U('PayH5/weixin_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/weixin.png" alt="">
<span>微信</span>
</div>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</if>
<if condition="C('sqpay.status') eq 1 and C('sqpay.shortcut') eq 1">
<div class="payment_rest_way way_btn" data-type="shorcut" data-url="{:U('Shortcut/wap_shortcut_pay', array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'code'=>1,'extend'=>I('extend'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/xianshang.png" alt="">
<span>快捷支付</span>
</div>
</div>
<!---微信支付存在时有更多支付出现-->
<if condition="$pay_price elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<div class="showotherpay weui-cells">
其他支付方式
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</if>
</div>
</div>
<!-- 供上下滑动延长 -->
<div style="width: 100%;height: 3rem;"></div>
<!-- 未成年不许支付弹窗 -->
<div class="msgdialog" style="display: none">
<div class="forbid_model"></div>
<div class="forbid_window">
<div class="forbid_pay">
<img src="__IMG__/pay_way/forbid.png" alt="" style="margin-top: .25rem;">
<div class="tipmsg">未成年禁止支付哟</div>
</div>
<div class="forbid_confirm" style="margin: 0.2rem auto;">确认</div>
<div class="forbid_close"><img src="__IMG__/pay_way/close2.png" alt=""></div>
</div>
</div>
</div>
</div>
<botton id="platform_pay" class="bottombutton">
确认支付
</botton>
</body>
</html>
<script>
// 业务逻辑js
var payway='';
var payurl='';
function small_program(status) {
//alert(status);
if (status == "1") { // 小程序
if ($('#sdk_version').val() == 1) { // android
window.txyxsdk.getSmallRoutine($('#small_json').val());
} else {
window.webkit.messageHandlers.miniprogramPay.postMessage($('#small_json').val());
}
return false;
}
$(this).removeAttr("onclick", "");
return true;
}
//初始化选择
function defaultInit(){
try {
var pay_price = '{$pay_price}';
if (pay_price == 0) {
payway="platform_pay";
payurl = "{:U('PayH5/platform_coin_deduction',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'), 'api_ver' => 2))}";
$(".select_pay").hide();
} else {
payway="alipay";
payurl="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}";
}
} catch (error) {
alert("初始化错误");
}
}
defaultInit();
$(function() {
var timefun;
$(".select_pay_info").click(function(){
timefun = setTimeout(function(){
$(".tipmsg").html("切换支付失败");
$(".msgdialog").show();
},1000);
$(".payment_rest").show();
clearTimeout(timefun);
})
$(".payment_rest .title>img").click(function(){
$(".payment_rest").hide();
})
$(".payment_rest_way").on("click",function(){
$(this).children("img").attr("src","__IMG__/pay_way/dagou2.png");
$(this).siblings(".payment_rest_way").children("img").attr("src","__IMG__/pay_way/dagou1.png");
let img=$(this).children("div").children("img").attr("src");
let text = $(this).children("div").children("span").text();
//获取支付参数
payway = $(this).data("type");
payurl = $(this).data("url");
$(".select_pay_info").children(".slide").attr("src",img);
$(".select_pay_info").children("div").text(text);
$(".payment_rest").hide();
})
//拉起支付
var flag = false;
$("#shorcut").on('click', function() {
if (flag) return ;
$(".confirm_pay").on("click",function(){
if (flag){
$(".tipmsg").html("支付请求中,请勿重复提交");
$(".msgdialog").show();
return false;
};
flag = true;
var url = $(this).data('url');
window.location.href = url;
});
$("#wxpay").on('click', function() {
if (flag) return ;
flag = true;
if(payway == "wxpay"){
wxpay();
}
if(payway == "alipay"){
alipay();
}
if(payway == "shorcut"){
shorcut();
}
if(payway == "platform_pay"){
platform_pay();
}
})
//微信支付
function wxpay(){
$r = small_program("{:C('sqpay.wx_small')}");
if ($r) {
var url = $(this).data('url');
var url = payurl;
$.ajax({
type:'post',
dataType:'json',
@ -287,43 +295,22 @@ $(function() {
if(result.code==200) {
window.location.href = result.url;
} else {
$("#tipmsg").html(result.msg);
$("#msgdialog").show();
flag=false;
$(".tipmsg").html(result.msg);
$(".msgdialog").show();
}
},
error(){
flag=false;
$(".tipmsg").html("接口请求错误"+payurl);
$(".msgdialog").show();
}
});
//window.location.href = $(this).data('url');
}
});
$("#close_tip,#tipok").on("click",function() {
$("#msgdialog").hide();
});
if ($("#pay_price").data("pay_price") == 0) {
$("#platform_pay").show();
$(".paylist").hide();
$(".showotherpay").hide();
$("#h_showotherpay").hide();
} else {
$("#platform_pay").hide();
$(".paylist").show();
}
$(".showotherpay,#h_showotherpay").on("click",function(){
$("#wxpay").show();
$(".showotherpay").hide();
$("#h_showotherpay").hide();
})
$("#platform_pay").click(function() {
var url = "{:U('PayH5/platform_coin_deduction',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'), 'api_ver' => 2))}";
window.location.href = url;
});
$('#alipaybtn').on('click',function() {
if (flag) return ;
flag = true;
var url = $(this).data('url');
//支付宝支付
function alipay(){
var url = payurl;
$.ajax({
type:'post',
@ -334,16 +321,50 @@ $(function() {
if(result.code==200) {
window.location.href = result.url;
} else {
$("#tipmsg").html(result.msg);
$("#msgdialog").show();
flag=false;
$(".tipmsg").html(result.msg);
$(".msgdialog").show();
}
},
error(){
flag=false;
$(".tipmsg").html("接口请求错误"+payurl);
$(".msgdialog").show();
}
});
return false;
}
//快捷支付
function shorcut(){
window.location.href =payurl;
}
//平台币支付
function platform_pay(){
window.location.href = payurl;
}
return false;
});
});
$(".payment_rest_btn").click(function(){
$(".payment_rest_btn").hide();
$(".weixin").show();
})
$(".forbid_confirm,.forbid_close").click(function(){
$(".msgdialog").hide();
})
</script>
<script type="text/javascript">
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt,resize,false);
function resize(fals) {
if(window.orientation == 0 || window.orientation == 180) {
$(".payment").show();
$(".payment_heng").hide();
}else {
$(".payment").hide();
$(".payment_heng").show();
}
}
resize(true);
</script>
</html>

@ -0,0 +1,349 @@
<!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 src="__JS__/jquery-1.11.1.min.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.75rem;
font-size: .28rem;
color: #292929;
padding: 0px .3rem;
}
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;
}
@media screen and (orientation: portrait) {
.box{
padding:.3rem;
}
.bottombutton{
height:1rem;background-color: #21B1EB;color: #ffffff;font-size: .32rem;text-align: center;line-height:1rem;bottom: 0px;
position: fixed;left: 0;right: 0;
}
.pay-info,.paylist{
margin-top: .3rem;
}
/* 隐藏横版更多 */
#h_showotherpay{
display: none;
}
}
@media screen and (orientation: landscape) {
/*横屏 css*/
.box{
padding:.24rem .5rem;
}
.pay-info,.paylist{
margin-top: .24rem;
}
.bottombutton{
height:1rem;background-color: #21B1EB;color: #ffffff;font-size: .32rem;text-align: center;line-height:1rem;
width: 7.5rem;border-radius: .2rem;position: absolute;left: 50%;margin: .5rem 0 .5rem -3.75rem;
}
body{
padding-bottom: .50rem;
}
.paylist-box{
display: flex;
height: auto;
flex-wrap:wrap;
}
.paylist-box .weui-cell{
min-width: 30%;
box-sizing: content-box;
margin-left: 3%;
padding: .16rem .0rem;
}
.paylist-box .weui-cell:before{
content: none;
}
/* 隐藏竖版更多 */
.showotherpay{
display: none;
}
}
.border-half-line{
width: 97%;
margin-left: 3%;
float:left;
height:1px;
background-color: #e5e5e5;
-webkit-transform:scale(1,0.5);
transform:scale(1,0.5);
-webkit-transform-origin:top center;
transform-origin: top center
}
.showotherpay{
width: 100%;height: .9rem;background-color: #ffffff;font-size: .28rem;text-align: center;color: #A9A9A9;line-height: .9rem;margin-top: .3rem;
}
.noborder.weui-cell:before{
height: 0px;
border: 0px;
}
.noborder{
margin-top: -.38rem;
}
</style>
<body>
<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;line-height: 1;">
<img src="__IMG__/txicon.png" style="width: 1.7rem;height: 1.7rem;">
</div>
<p id="tipmsg" style="text-align: center;font-size: .24rem;margin: .25rem 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>
<input type="hidden" name="sdk_version" id="sdk_version" value="{$sdk_version}"/>
<input type="hidden" name="small_json" id="small_json" value='{$small_json}'/>
<div class="box">
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p style="font-size: .28rem;">订单金额: <span style="margin-left: .2rem;color: red;">¥{$data['price']}元</span></p>
</div>
<!-- <div class="weui-cell__ft" style="color: red">¥{$data['price']}元</div> -->
</div>
<div class="weui-cell noborder">
<div class="weui-cell__bd">
<p style="font-size: .24rem;color: #A9A9A9;">您的账户余额: <span style="margin-left: .2rem;">{$balance+$bind_balance}平台币</span></p>
</div>
<!-- <div class="weui-cell__ft" style="color: #A9A9A9;">{$balance+$bind_balance}平台币</div> -->
</div>
</div>
<div class="weui-cells pay-info">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>适用平台余额:</p>
</div>
<div class="weui-cell__ft" style="color: #292929">-¥{$apply_money}</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<p>还需支付:</p>
</div>
<div data-pay_price="{$pay_price}" id="pay_price" class="weui-cell__ft" style="color: red">¥{$pay_price}</div>
</div>
</div>
<div class="weui-cells paylist">
<div class="weui-cells__title" style="line-height: .64rem;color: #a9a9a9;font-size:.24rem;margin: 0px;">
请选择支付方式</div>
<div class="border-half-line" style="position: absolute;"></div>
<div class="paylist-box">
<if condition="C('alipay.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.zfb') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.zfb') eq 1)">
<a id="alipaybtn" class="weui-cell" href="javascript:;" data-url="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}" id="alipaybtn" class="recharge_way_btn recharge_way_btn_alipay">
<div class="weui-cell__hd"><img src="__IMG__/alipay.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">支付宝支付</p>
<p style="color: #a9a9a9;font-size:.2rem;">推荐支付宝用户使用</p>
</div>
</a>
</if>
<if condition="C('sqpay.status') eq 1 and C('sqpay.shortcut') eq 1">
<a id="shorcut" class="weui-cell" data-url="{:U('Shortcut/wap_shortcut_pay', array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'code'=>1,'extend'=>I('extend'),'api_ver'=>2))}" class="recharge_way_btn recharge_way_btn_alipay">
<div class="weui-cell__hd"><img src="__IMG__/onlinepay.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">快捷支付</p>
<p style="color: #a9a9a9;font-size:.2rem;">可在线快捷支付</p>
</div>
</a>
</if>
<if condition="$pay_price elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<a id="wxpay" style="display: none;" class="weui-cell" data-url="{:U('PayH5/weixin_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}" class="recharge_way_btn recharge_way_btn_wechat">
<div class="weui-cell__hd"><img src="__IMG__/wxpay.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">微信支付</p>
<p style="color: #a9a9a9;font-size:.2rem;">推荐微信用户使用</p>
</div>
</a>
<a id="h_showotherpay" class="weui-cell charge_way_btn recharge_way_btn_wechat">
<div class="weui-cell__hd"><img src="__IMG__/gengduo.png"></div>
<div class="weui-cell__bd">
<p style="color: #292929;font-size:.28rem;">其他支付方式</p>
<p style="color: #a9a9a9;font-size:.2rem;">显示其他支付方式</p>
</div>
</a>
</if>
</if>
</div>
</div>
<!---微信支付存在时有更多支付出现-->
<if condition="$pay_price elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<div class="showotherpay weui-cells">
其他支付方式
</div>
</if>
</if>
</div>
<botton id="platform_pay" class="bottombutton">
确认支付
</botton>
</body>
<script>
function small_program(status) {
//alert(status);
if (status == "1") { // 小程序
if ($('#sdk_version').val() == 1) { // android
window.txyxsdk.getSmallRoutine($('#small_json').val());
} else {
window.webkit.messageHandlers.miniprogramPay.postMessage($('#small_json').val());
}
return false;
}
$(this).removeAttr("onclick", "");
return true;
}
$(function() {
var flag = false;
$("#shorcut").on('click', function() {
if (flag) return ;
flag = true;
var url = $(this).data('url');
window.location.href = url;
});
$("#wxpay").on('click', function() {
if (flag) return ;
flag = true;
$r = small_program("{:C('sqpay.wx_small')}");
if ($r) {
var url = $(this).data('url');
$.ajax({
type:'post',
dataType:'json',
data:{},
url:url,
success:function(result) {
if(result.code==200) {
window.location.href = result.url;
} else {
$("#tipmsg").html(result.msg);
$("#msgdialog").show();
}
}
});
//window.location.href = $(this).data('url');
}
});
$("#close_tip,#tipok").on("click",function() {
$("#msgdialog").hide();
});
if ($("#pay_price").data("pay_price") == 0) {
$("#platform_pay").show();
$(".paylist").hide();
$(".showotherpay").hide();
$("#h_showotherpay").hide();
} else {
$("#platform_pay").hide();
$(".paylist").show();
}
$(".showotherpay,#h_showotherpay").on("click",function(){
$("#wxpay").show();
$(".showotherpay").hide();
$("#h_showotherpay").hide();
})
$("#platform_pay").click(function() {
var url = "{:U('PayH5/platform_coin_deduction',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'), 'api_ver' => 2))}";
window.location.href = url;
});
$('#alipaybtn').on('click',function() {
if (flag) return ;
flag = true;
var url = $(this).data('url');
$.ajax({
type:'post',
dataType:'json',
data:{},
url:url,
success:function(result) {
if(result.code==200) {
window.location.href = result.url;
} else {
$("#tipmsg").html(result.msg);
$("#msgdialog").show();
}
}
});
return false;
});
});
</script>
</html>

@ -1,343 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="__JS__/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="__CSS__/reset.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/payment.css" />
<title>支付中心</title>
</head>
<body>
<div class="payment">
<!-- <div class="heard">
<div class="heard_box">
<a href="" style="background-image: url('__IMG__/pay_way/close.png');"></a>
支付中心
</div>
</div> -->
<div class="containner">
<div class="indent">
<div class="indent_box">
<div>订单金额: <span>¥{$data['price']}元</span> </div>
<div>您的账户余额: <span>{$balance+$bind_balance}平台币</span> </div>
</div>
</div>
<div class="documents">
<div class="documents_box">
<div><span>适用平台金额:</span> <span>-¥{$apply_money}</span> </div>
<div><span>还需支付:</span><span>¥{$pay_price}</span> </div>
</div>
</div>
<div class="select_pay">
<div class="select_pay_box">
<div>请选择支付方式:</div>
<div class="select_pay_info">
<img src="__IMG__/pay_way/zhifubao.png" alt="" class="slide">
<div>支付宝</div>
<img src="__IMG__/pay_way/blue_black.png" alt="" class="boult">
</div>
</div>
</div>
<div class="payment_btn" >
<div>
支付金额 <span>¥{$pay_price}</span>
</div>
<div class="confirm_pay">确认支付</div>
</div>
<div class="payment_rest" style="display: none;">
<div class="payment_rest_box">
<div class="title">
<div>请选择支付方式</div>
<img src="__IMG__/pay_way/dacha.png" alt="">
</div>
<if condition="C('alipay.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.zfb') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.zfb') eq 1)">
<div class="payment_rest_way way_btn" data-type="alipay" data-url="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/zhifubao.png" alt="">
<span>支付宝</span>
</div>
<img src="__IMG__/pay_way/dagou2.png" alt="">
</div>
</if>
<if condition="!pay_limit('wx') and $money elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<div class="payment_rest_way way_btn" data-type="wxpay" data-url="{:U('PayH5/weixin_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/weixin.png" alt="">
<span>微信</span>
</div>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</if>
<if condition="C('sqpay.status') eq 1 and C('sqpay.shortcut') eq 1">
<div class="payment_rest_way way_btn" data-type="shorcut" data-url="{:U('Shortcut/wap_shortcut_pay', array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'code'=>1,'extend'=>I('extend'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/xianshang.png" alt="">
<span>快捷支付</span>
</div>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</div>
</div>
<!-- <div class="payment_rest_btn">其他支付方式</div> -->
</div>
<!-- 未成年不许支付弹窗 -->
<div class="msgdialog" style="display: none">
<div class="forbid_model"></div>
<div class="forbid_window">
<div class="forbid_pay">
<img src="__IMG__/pay_way/forbid.png" alt="" style="margin-top: .5rem;">
<div class="tipmsg">未成年禁止支付哟</div>
</div>
<div class="forbid_confirm" style="margin: 0.45rem auto;">确认</div>
<div class="forbid_close"><img src="__IMG__/pay_way/close2.png" alt=""></div>
</div>
</div>
</div>
<!-- 横屏 -->
<div class="payment_heng">
<!-- <div class="heard">
<div class="heard_box">
<a href="" style="background-image: url('__IMG__/pay_way/close.png');"></a>
支付中心
</div>
</div> -->
<div class="containner">
<div class="indent">
<div class="indent_box">
<div>订单金额: <span>¥{$data['price']}元</span> </div>
<div>您的账户余额: <span>{$balance+$bind_balance}平台币</span> </div>
</div>
</div>
<div class="documents">
<div class="documents_box">
<div><span>适用平台金额:</span> <span>-¥{$apply_money}</span> </div>
<div><span>还需支付:</span><span>¥{$pay_price}</span> </div>
</div>
</div>
<div class="select_pay">
<div class="select_pay_box">
<div>请选择支付方式:</div>
<div class="select_pay_info">
<img src="__IMG__/pay_way/zhifubao.png" alt="" class="slide">
<div>支付宝</div>
<img src="__IMG__/pay_way/blue_black.png" alt="" class="boult">
</div>
</div>
</div>
<div class="payment_btn" >
<div>
支付金额 <span>¥{$pay_price}</span>
</div>
<div class="confirm_pay">确认支付</div>
</div>
<div class="payment_rest" style="display: none;">
<div class="payment_rest_box">
<div class="title">
<div>请选择支付方式</div>
<img src="__IMG__/pay_way/dacha.png" alt="">
</div>
<if condition="C('alipay.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.zfb') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.zfb') eq 1)">
<div class="payment_rest_way way_btn" data-type="alipay" data-url="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/zhifubao.png" alt="">
<span>支付宝</span>
</div>
<img src="__IMG__/pay_way/dagou2.png" alt="">
</div>
</if>
<if condition="!pay_limit('wx') and $money elt C('WX_PAY_LIMIT')">
<if condition="C('wei_xin.status') eq 1 or C('weixin_gf.status') eq 1 or (C('goldpig.status') eq 1 and C('goldpig.wx') eq 1) or (C('heepay.status') eq 1) or (C('sqpay.status') eq 1 and C('sqpay.wx_small') eq 1)">
<div class="payment_rest_way way_btn" data-type="wxpay" data-url="{:U('PayH5/weixin_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/weixin.png" alt="">
<span>微信</span>
</div>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</if>
<if condition="C('sqpay.status') eq 1 and C('sqpay.shortcut') eq 1">
<div class="payment_rest_way way_btn" data-type="shorcut" data-url="{:U('Shortcut/wap_shortcut_pay', array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'code'=>1,'extend'=>I('extend'),'api_ver'=>2))}">
<div>
<img src="__IMG__/pay_way/xianshang.png" alt="">
<span>快捷支付</span>
</div>
<img src="__IMG__/pay_way/dagou1.png" alt="">
</div>
</if>
</div>
</div>
<!-- 供上下滑动延长 -->
<div style="width: 100%;height: 3rem;"></div>
<!-- 未成年不许支付弹窗 -->
<div class="msgdialog" style="display: none">
<div class="forbid_model"></div>
<div class="forbid_window">
<div class="forbid_pay">
<img src="__IMG__/pay_way/forbid.png" alt="" style="margin-top: .25rem;">
<div class="tipmsg">未成年禁止支付哟</div>
</div>
<div class="forbid_confirm" style="margin: 0.2rem auto;">确认</div>
<div class="forbid_close"><img src="__IMG__/pay_way/close2.png" alt=""></div>
</div>
</div>
</div>
</body>
</html>
<script>
// 业务逻辑js
var payway='';
var payurl='';
function small_program(status) {
if (status == "1") { // 小程序
if ($('#sdk_version').val() == 1) { // android
window.txyxsdk.getSmallRoutine($('#small_json').val());
} else {
window.webkit.messageHandlers.miniprogramPay.postMessage($('#small_json').val());
}
return false;
}
$(this).removeAttr("onclick", "");
return true;
}
//初始化选择
function defaultInit(){
var pay_price = {$pay_price};
if (pay_price == 0) {
payway="platform_pay";
payurl = "{:U('PayH5/platform_coin_deduction',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'), 'api_ver' => 2))}";
$(".select_pay").hide();
} else {
payway="alipay";
payurl="{:U('PayH5/ali_pay',array('user_id'=>I('user_id'),'game_id'=>I('game_id'),'user_token'=>I('user_token'),'api_ver'=>2))}";
}
}
defaultInit();
$(".select_pay_info").click(function(){
$(".payment_rest").show();
})
$(".payment_rest .title>img").click(function(){
$(".payment_rest").hide();
})
$(".payment_rest_way").click(function(){
$(this).children("img").attr("src","__IMG__/pay_way/dagou2.png");
$(this).siblings(".payment_rest_way").children("img").attr("src","__IMG__/pay_way/dagou1.png");
let img=$(this).children("div").children("img").attr("src");
let text = $(this).children("div").children("span").text();
//获取支付参数
payway = $(this).data("type");
payurl = $(this).data("url");
$(".select_pay_info").children(".slide").attr("src",img);
$(".select_pay_info").children("div").text(text);
$(".payment_rest").hide();
})
//拉起支付
var flag = false;
$(".confirm_pay").on("click",function(){
if (flag) return ;
flag = true;
if(payway == "wxpay"){
wxpay();
}
if(payway == "alipay"){
alipay();
}
if(payway == "shorcut"){
shorcut();
}
if(payway == "platform_pay"){
platform_pay();
}
})
//微信支付
function wxpay(){
$r = small_program("{:C('sqpay.wx_small')}");
if ($r) {
var url = payurl;
$.ajax({
type:'post',
dataType:'json',
data:{},
url:url,
success:function(result) {
if(result.code==200) {
window.location.href = result.url;
} else {
flag=false;
$(".tipmsg").html(result.msg);
$(".msgdialog").show();
}
}
});
}
}
//支付宝支付
function alipay(){
var url = payurl;
$.ajax({
type:'post',
dataType:'json',
data:{},
url:url,
success:function(result) {
if(result.code==200) {
window.location.href = result.url;
} else {
flag=false;
$(".tipmsg").html(result.msg);
$(".msgdialog").show();
}
}
});
return false;
}
//快捷支付
function shorcut(){
window.location.href =payurl;
}
//平台币支付
function platform_pay(){
window.location.href = payurl;
}
$(".payment_rest_btn").click(function(){
$(".payment_rest_btn").hide();
$(".weixin").show();
})
$(".forbid_confirm,.forbid_close").click(function(){
$(".msgdialog").hide();
})
</script>
<script type="text/javascript">
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt,resize,false);
function resize(fals) {
if(window.orientation == 0 || window.orientation == 180) {
$(".payment").show();
$(".payment_heng").hide();
}else {
$(".payment").hide();
$(".payment_heng").show();
}
}
resize(true);
</script>
Loading…
Cancel
Save