265 lines
6.5 KiB
HTML
265 lines
6.5 KiB
HTML
<!doctype html>
|
||
<html class="no-js" lang="">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="description" content="">
|
||
<meta name="renderer" content="webkit">
|
||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
|
||
<base target="_blank" />
|
||
<style type="text/css">
|
||
*{padding: 0;margin: 0;}
|
||
body{
|
||
background: #000;
|
||
}
|
||
.card-box{
|
||
background: url(/static/onlinechip/pay_img/bg.jpg);
|
||
width: 100%;
|
||
height: 240px;
|
||
-webkit-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
}
|
||
.card-box .card{
|
||
width:300px;
|
||
height: 180px;
|
||
margin: 30px auto;
|
||
background: url(/static/onlinechip/pay_img/card_bg.png);
|
||
-webkit-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
.card-box .card .lab{
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 10px;
|
||
font-size: 16px;
|
||
padding-left: 22px;
|
||
background: url(/static/onlinechip/pay_img/icon_money.png) left 0 no-repeat;
|
||
-webkit-background-size: 18px;
|
||
background-size: 18px;
|
||
}
|
||
.card-box .card .username{
|
||
position: absolute;
|
||
right: 4px;
|
||
top: 0px;
|
||
padding:5px;
|
||
background: url(/static/onlinechip/pay_img/name_bg.png) no-repeat;
|
||
-webkit-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
border-top-right-radius: 18px;
|
||
}
|
||
.card-box .card .money{
|
||
text-align: center;
|
||
font-size: 28px;
|
||
width:90%;
|
||
margin: 0 auto;
|
||
padding-top: 50px;
|
||
}
|
||
.card-box .card .ft{
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 0;
|
||
width:100%;
|
||
display: table;
|
||
font-size: 14px;
|
||
text-align:center;
|
||
}
|
||
.card-box .card .ft .item{
|
||
width:50%;
|
||
display: table-cell;
|
||
/*padding-left: 20px;*/
|
||
color:#fff;
|
||
}
|
||
.input-money{
|
||
width:85%;
|
||
margin: 20px auto;
|
||
display: table;
|
||
}
|
||
.input-money .lab{
|
||
display: table-cell;
|
||
color: #fff;
|
||
vertical-align: middle;
|
||
width:90px;
|
||
font-size: 18px;
|
||
}
|
||
.input-money input{
|
||
display: table-cell;
|
||
width:100%;
|
||
vertical-align: middle;
|
||
background: #1a1509;
|
||
border: 1px solid #88867f;
|
||
outline: none;
|
||
color: #e9dbaf;
|
||
padding:7px 20px;
|
||
font-size: 16px;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
border-radius: 100px;
|
||
|
||
}
|
||
.input-money input::-webkit-input-placeholder {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
.input-money input:focus{
|
||
box-shadow:1px 1px 10px #c7bb05;
|
||
}
|
||
.select-box{
|
||
width:85%;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
.select-box .lab{
|
||
color: #fff;
|
||
padding-bottom: 10px;
|
||
}
|
||
.select-box .select{
|
||
background: #dfdfdf;
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
text-align-last: center;
|
||
outline: none;
|
||
width:100%;
|
||
border-radius: 0;
|
||
line-height: 35px;
|
||
font-size: 18px;
|
||
color: #666563;
|
||
}
|
||
.select-box .icon{
|
||
position: absolute;
|
||
width:0;
|
||
height:0;
|
||
border-top:12px solid transparent;
|
||
border-bottom:12px solid transparent;
|
||
border-right:14px solid #555555;
|
||
right: 10px;
|
||
bottom: 6.5px;
|
||
}
|
||
.btn{
|
||
width:85%;
|
||
height: 38px;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
margin: 0 auto;
|
||
display: block;
|
||
outline: none;
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
border: none;
|
||
background-color: #ddbb4b;
|
||
background-image: linear-gradient(180deg, #ddbb4b 0%, #f6e9bc 50%, #907f44 100%);
|
||
margin-top: 50px;
|
||
}
|
||
#redirect_btn{
|
||
width:85%;
|
||
height: 38px;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
margin: 0 auto;
|
||
display: block;
|
||
outline: none;
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
border: none;
|
||
background-color: #ddbb4b;
|
||
margin-top: 20px;
|
||
text-align:center;
|
||
color:#fff;
|
||
line-height:38px;
|
||
text-decoration:none;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body oncontextmenu="return false;">
|
||
<div class="card-box">
|
||
<div class="card">
|
||
<div class="lab">余额(元)</div>
|
||
<div class="username">{$user_info.username}</div>
|
||
<div class="money">{$user_info.money}</div>
|
||
<div class="ft">
|
||
<div class="item">
|
||
<p class="name">在线充值</p>
|
||
<!--<p class="num">200.00</p>-->
|
||
</div>
|
||
<div class="item">
|
||
<p class="name">方便快捷</p>
|
||
<!--<p class="num">200.00</p>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="input-money">
|
||
<label class="lab">充值金额：</label>
|
||
<input type="text" placeholder="请填写充值金额" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="6" placeholder="请输入金额" type="text" name="price" id="price" autocomplete="off">
|
||
</div>
|
||
<?php if(!empty($payMethod)): ?>
|
||
<div class="select-box">
|
||
<p class="lab">选择充值方式</p>
|
||
<i class="icon"></i>
|
||
<select class="select" name="pay_type" id="pay_type">
|
||
<?php foreach($payMethod as $key=>$method): ?>
|
||
<option value ="<?=$key?>"><?=$method?></option>
|
||
<?php endForeach; ?>
|
||
</select>
|
||
</div>
|
||
<?php endIf; ?>
|
||
<input type="hidden" name="user_id" id="user_id" value="{$user_info.id}" />
|
||
<input type="hidden" name="client" id="client" value="{$client}" />
|
||
<input type="hidden" name="username" id="username" value="{$user_info.username}" />
|
||
<button class="btn" id="confirm">确定充值</button>
|
||
<a id="redirect_btn" href="" style="display:none;">已经请求成功,点击这里跳转支付</a>
|
||
</body>
|
||
<script type="text/javascript" src="/static/onlinechip/js/jquery-2.1.0.min.js"></script>
|
||
<script type="text/javascript" src="/static/onlinechip/layer-v3.1.1/layer.js"></script>
|
||
<script type="text/javascript">
|
||
$(function (){
|
||
$('#confirm').click(function (){
|
||
var price = parseInt($('#price').val());
|
||
var user_id = parseInt($('#user_id').val());
|
||
var client = parseInt($('#client').val());
|
||
var username = $('#username').val();
|
||
var pay_type = $('#pay_type').val();
|
||
if(user_id > 0 && client > 0){
|
||
if(price > 0){
|
||
var query = new Object();
|
||
query.user_id = user_id;
|
||
query.client = client;
|
||
query.price = price;
|
||
query.username = username;
|
||
query.pay_type = pay_type;
|
||
url = '/order/<?=$online_order_fac ?>';
|
||
//var winRef = window.open("","_blank");
|
||
$.ajax({
|
||
url:url,
|
||
type:"POST",
|
||
dataType:"JSON",
|
||
data:query,
|
||
async:false,
|
||
success:function(data){
|
||
if(data.status == 1){
|
||
//winRef.location = data.url;
|
||
//window.open(data.url);
|
||
$('#confirm').hide();
|
||
$('#redirect_btn').attr('href',data.url);
|
||
$('#redirect_btn').show();
|
||
}else{
|
||
layer.msg(data.message);
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
layer.msg('请正确输入充值金额，充值金额必须大于100');
|
||
}
|
||
}else{
|
||
layer.msg('充值出错，请稍后再试');
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
</html> |