256 lines
6.1 KiB
HTML
256 lines
6.1 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">
|
||
<style type="text/css">
|
||
*{padding: 0;margin: 0;}
|
||
.box{
|
||
display: table;
|
||
width:100%;
|
||
height: 80vh;
|
||
}
|
||
.box .card-box{
|
||
display: table-cell;
|
||
width: 50%;
|
||
height: 80vh;
|
||
}
|
||
.box .card-box .card{
|
||
width:94%;
|
||
margin: 11vh auto;
|
||
height: 58vh;
|
||
background: url(/static/onlinechip/pay_img/card_bg.png) no-repeat;
|
||
-webkit-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
.box .card-box .card .lab{
|
||
font-size: 2.1vw;
|
||
position: absolute;
|
||
left:3vw;
|
||
top: 3vw;
|
||
padding-left: 3.8vw;
|
||
line-height: 3.8vw;
|
||
background: url(/static/onlinechip/pay_img/icon_money.png) no-repeat;
|
||
-webkit-background-size: 3vw;
|
||
background-size: 3vw;
|
||
}
|
||
.box .card-box .card .name{
|
||
font-size: 2.1vw;
|
||
position: absolute;
|
||
right:0.8vw;
|
||
top: 3vw;
|
||
color: #fff;
|
||
padding:0 1vw;
|
||
line-height: 3.8vw;
|
||
background: url(/static/onlinechip/pay_img/name_bg.png) no-repeat;
|
||
-webkit-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
text-shadow:0px 0px 1px #9e8861;
|
||
}
|
||
.box .card-box .card .money{
|
||
font-size: 4.2vw;
|
||
font-weight: bold;
|
||
text-shadow:1px 1px 2px #aa823c;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 50%;
|
||
margin-top: -5vw;
|
||
width:100%;
|
||
text-align: center;
|
||
}
|
||
.box .card-box .card .ft{
|
||
display: table;
|
||
width:100%;
|
||
position: absolute;
|
||
bottom: 5vw;
|
||
left: 0;
|
||
font-size: 1.9vw;
|
||
}
|
||
|
||
.box .card-box .card .ft .item{
|
||
display: table-cell;
|
||
width:50%;
|
||
/*padding-left: 2vw;*/
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
.box .card-box .card .ft .text{
|
||
font-size: 2.1vw;
|
||
}
|
||
.box .card-box .card .ft .num{
|
||
color: #fff;
|
||
padding-top: 0.4vw;
|
||
display: block;
|
||
}
|
||
.box .input-box{
|
||
display: table-cell;
|
||
width: 50%;
|
||
height: 80vh;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.box .input-box .item{
|
||
font-size: 2.1vw;
|
||
display: table;
|
||
width:100%;
|
||
margin-bottom: 3vw;
|
||
position: relative;
|
||
}
|
||
.box .input-box .item .lab{
|
||
display: table-cell;
|
||
width:15vw;
|
||
text-align: right;
|
||
min-width: 85px;
|
||
color: #fff;
|
||
}
|
||
.box .input-box .item .input{
|
||
display: table-cell;
|
||
width:90%;
|
||
text-align: center;
|
||
background: #1a1509;
|
||
border: 1px solid #88867f;
|
||
outline:none;
|
||
color: #e9dbaf;
|
||
font-size: 2.1vw;
|
||
border-radius: 100px;
|
||
line-height: 5vw;
|
||
height: 5vw;
|
||
appearance:none;
|
||
-moz-appearance:none;
|
||
-webkit-appearance:none;
|
||
text-align-last:center;
|
||
}
|
||
.box .input-box .item select.input{
|
||
color: #1a150a;
|
||
background: background-color: #c7b26c;
|
||
background-image: linear-gradient(180deg, #c7b26c 0%, #f7e9ba 50%, #bba452 100%);
|
||
|
||
}
|
||
.box .input-box .item input:focus{
|
||
box-shadow:1px 1px 10px #c7bb05;
|
||
}
|
||
.box .input-box .item .icon{
|
||
position: absolute;
|
||
right:11%;
|
||
top: 50%;
|
||
margin-top: -0.46vw;
|
||
border-width: 1vw;
|
||
border-style: solid;
|
||
border-color:#1a150a transparent transparent transparent;
|
||
border-top-width: 1.5vw;
|
||
}
|
||
.btn-recharge{
|
||
width:40vw;
|
||
height: 12vh;
|
||
line-height: 12vh;
|
||
background: url("/static/onlinechip/pay_img/btn_bg.png");
|
||
text-align: center;
|
||
cursor: pointer;
|
||
-webkit-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
margin:4vh auto;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
font-size: 2.5vw;
|
||
}
|
||
option{
|
||
text-align:center;
|
||
}
|
||
.btn-recharge:active{
|
||
opacity: 0.8;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body oncontextmenu="return false;">
|
||
<div class="box">
|
||
<div class="card-box">
|
||
<div class="card">
|
||
<div class="lab">余额 (元)</div>
|
||
<div class="name">{$user_info.username}</div>
|
||
<div class="money">{$user_info.money}</div>
|
||
<div class="ft">
|
||
<div class="item">
|
||
|
||
<p class="text">在线充值</p>
|
||
<!--<p class="num">1000.00</p>-->
|
||
|
||
</div>
|
||
<div class="item">
|
||
<p class="text">方便快捷</p>
|
||
<!--<p class="num">1000.00</p>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="input-box">
|
||
<div class="item">
|
||
<label class="lab">充值金额：</label>
|
||
<input class="input" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="6" placeholder="请输入金额" type="text" name="price" id="price" autocomplete="off">
|
||
</div>
|
||
<?php if(!empty($payMethod)): ?>
|
||
<div class="item">
|
||
<label class="lab">选择付款方式：</label>
|
||
<i class="icon"></i>
|
||
<select class="input" name="pay_type" id="pay_type" style="color:#fff;">
|
||
<?php foreach($payMethod as $key=>$method): ?>
|
||
<option value ="<?=$key?>"><?=$method?></option>
|
||
<?php endForeach; ?>
|
||
</select>
|
||
</div>
|
||
<?php endIf; ?>
|
||
</div>
|
||
</div>
|
||
<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}" />
|
||
<div class="btn-recharge" id="confirm">确定充值</div>
|
||
</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 ?>';
|
||
$.ajax({
|
||
url:url,
|
||
type:"POST",
|
||
dataType:"JSON",
|
||
data:query,
|
||
async:false,
|
||
success:function(data){
|
||
if(data.status == 1){
|
||
window.open(data.url);
|
||
//window.location.href=data.url;
|
||
}else{
|
||
layer.msg(data.message);
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
layer.msg('请正确输入充值金额，充值金额必须大于100');
|
||
}
|
||
}else{
|
||
layer.msg('充值出错，请稍后再试');
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
</html> |