Pro/application/onlinechip/view/order/app_recharge.html
2026-01-28 15:54:52 +08:00

696 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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;}
.section{
width: 100vw;
height: 100vh;
background: url(/static/onlinechip/app_img/bg.jpg) no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
position: relative;
overflow: hidden;
}
.section .box{
position: absolute;
width:94vw;
height: 98vh;
background:url(/static/onlinechip/app_img/box_bg.png)no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
left:50%;
top: 50%;
margin-left: -47vw;
margin-top: -45vh;
}
.section .box .nav{
position: absolute;
width:40vw;
top: -3vh;
left:50%;
margin-left: -20vw;
border-radius: 100px;
overflow: hidden;
background: rgba(0,0,0,0.7);
}
.section .box .nav .item{
width:33.33%;
float: left;
text-align: center;
color: #5c5c5c;
font-weight: bold;
padding:1.4vh 0;
position: relative;
z-index: 1;
}
.section .box .nav .item.active{
color: #191402;
}
.section .box .nav .item.active:after{
content: "";
position: absolute;
left:-3px;
top: 0;
width:106%;
height: 100%;
z-index: -1;
background-color: #9f8b47;
background-image: linear-gradient(180deg, #9f8b47 0%, #f7e9bb 50%, #9c8842 100%);
transform: skewX(-25deg);
}
.section .box .tip{
margin-left: 10vw;
padding-left: 3vw;
color: #646464;
margin-top: 12.5vh;
font-size: 12px;
background: url(/static/onlinechip/app_img/tip_icon.png) left center no-repeat;
-webkit-background-size: 2.2vw;
background-size: 2.2vw;
}
.section .box .usermoney{
color: #f0d78c;
width:40%;
margin: 3vh auto;
margin-top: 5vh;
text-align: center;
background: url(/static/onlinechip/app_img/money_bg.png) no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
font-size: 3vw;
}
.section .box .list{
display: table;
width:50%;
margin: 2vh auto;
position: relative;
}
.section .withdrawal{
display: none;
}
.section .withdrawal .list{
width: 60%;
}
.section .box .list .lab{
width: 80px;
background-image: -webkit-linear-gradient(bottom,#9c8843,#efe0b1,#9a8542);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: table-cell;
font-size: 16px;
font-weight:bold;
vertical-align: middle;
}
.section .withdrawal .list .lab{
width: 120px;
}
.section .input-box{
display: table-cell;
width:100%;
background: #000;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
border: 1px solid #3e3f45;
font-size: 16px;
vertical-align: middle;
text-align: center;
color: #fff;
font-weight: 500;
border-radius: 100px;
padding: 1.2vh 0;
}
.section select.input-box{
text-align-last: center;
background-color: #9f8b47;
background-image: linear-gradient(180deg, #9f8b47 0%, #f7e9bb 50%, #9c8842 100%);
color: #000;
border-radius: 5px;
}
.section .box .list .icon{
position: absolute;
position: absolute;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 10px solid #000;
right: 12px;
top: 50%;
margin-top: -8px;
}
.section .btn{
border: none;
text-decoration: none;
outline: none;
background-color: #9f8b47;
background-image: linear-gradient(180deg, #9f8b47 0%, #f7e9bb 50%, #9c8842 100%);
display:block;
margin: 0 auto;
font-size: 18px;
width:100px;
font-weight: bold;
padding:1vh 0;
margin-top: 6vh;
}
.section .btn:active{
opacity: 0.8;
}
.section .unline .label{
color: #fff;
}
.section .unline .label p{
position: relative;
display: block;
font-size: 16px;
width:80px;
padding-left: 25px;
margin: 4vh 0;
}
.section .unline{
width:60%;
margin: 0 auto;
}
.section .unline .table{
display: table;
width:100%;
}
.section .unline .view{
display: table-cell;
vertical-align: middle;
}
.section .unline .label p input{
position: absolute;
left: 0;
top: 0;
width:20px;
height: 20px;
}
.section .unline{
font-size: 12px;
color: #f0d78c;
}
.section .unline .right{
display: none;
}
.section .unline .item {
font-size: 14px;
color: #fff;
}
.section .unline .item p{
color: #fff;
background: rgba(0,0,0,0.8);
padding:1vh;
}
.section .unline .input-box{
border-radius: 5px;
font-size: 12px;
margin: 1vh 0;
}
.section .unline .ft{
display: table;
width:100%;
font-size: 14px;
background: rgba(0,0,0,0.8);
padding:0 1vw;
box-sizing: border-box;
border: 1px solid #3e3f45;
border-radius: 5px;
margin-top: 1vh;
padding-right: 0;
overflow: hidden;
}
.section .unline .ft .btn-small{
border: none;
text-decoration: none;
outline: none;
background-color: #9f8b47;
background-image: linear-gradient(180deg, #9f8b47 0%, #f7e9bb 50%, #9c8842 100%);
font-size: 16px;
font-weight: bold;
padding:1.2vh 1vw;
float: right;
}
.section .unline .ft .btn-small:active{
opacity: 0.8;
}
.section .unline .ft input{
font-size: 16px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
padding:1.2vh 0;
}
.section .ewm-box{
text-align: center;
}
.section .unline .imgewm{
width:30vh;
display: inline-block;
vertical-align: middle;
}
.section .unline .textewm{
width:10px;
display: inline-block;
vertical-align: middle;
padding-right: 1vw;
}
.section .choseCard{
width:70%;
margin: 2vh auto;
position: relative;
display: none;
}
.section .choseCard .btn_addCard{
color: #f0d78c;
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
}
.section .btn_backCard{
color: #f0d78c;
position: absolute;
right: 15%;
bottom: 15vh;
font-size: 12px;
}
</style>
</head>
<body oncontextmenu="return false;">
<div class="section">
<div class="box">
<div class="nav">
<span class="item active">在线充值</span>
<span class="item ">离线充值</span>
<span class="item ">资金提现</span>
</div>
<div class="tip">提示:请选择支付方式,然后输入您要的充值的余额,并确认充值。</div>
<div class="usermoney">{$user_info.money}</div>
<div class="online" style="display: block">
<div class="list">
<label class="lab">会员账号:</label>
<input class="input-box" disabled="" type="text" value="{$user_info.username}" name="">
</div>
<div class="list">
<label class="lab">支付方式:</label>
<i class="icon"></i>
<select class="input-box" name="pay_type" id="pay_type">
<option value ="3">微信支付</option>
</select>
</div>
<div class="list">
<label class="lab">充值金额:</label>
<input placeholder="请输入充值金额" class="input-box" type="text" name="price" id="price">
</div>
<button class="btn" id="confirm">确定充值</button>
</div>
<div class="unline " style="display: none">
<div class="table">
<div class="view label">
{if condition="($rechargeinfo.bank_info != 0)"}
<p><input name="paytype" type="radio" checked="checked" id="bankpay" value="1" name=""><label for="bankpay">银行卡支付</label></p>
{/if}
{if condition="($rechargeinfo.weixin_info != 0)"}
<p><input name="paytype" type="radio" id="wxpay" value="2" name=""><label for="wxpay">微信支付</label></p>
{/if}
{if condition="($rechargeinfo.alipay_info != 0)"}
<p><input name="paytype" type="radio" id="alipay" value="3" name=""><label for="alipay">支付宝支付</label></p>
{/if}
</div>
{if condition="($rechargeinfo.bank_info != 0)"}
<div class="view right bankpay" style="display: block">
<div class="v-box">
<!-- <div class="title">官方收款账号:</div> -->
<div class="item">
<i class="icon"></i>
<p id="recharge_bank_name">{$rechargeinfo.bank_info.0.receivables_bank}</p>
<select class="input-box" id="recharge_bank_num" onchange="changeSelect1()">
{foreach name="$rechargeinfo.bank_info" item="vo"}
<option value ={$vo.value_num}>{$vo.receivables_bank_number}</option>
{/foreach}
</select>
</div>
<!-- <div class="title">打款账号:</div> -->
<input class="input-box" placeholder="请填写银行名称" type="text" name="recharge_bank" id="recharge_bank">
<input class="input-box" placeholder="请填写银行卡号" type="text" name="recharge_cardnumber" id="recharge_cardnumber">
<input type="hidden" name="bank_receivables_id" id="bank_receivables_id" value="{$rechargeinfo.bank_info.0.id}" />
</div>
</div>
{/if}
{if condition="($rechargeinfo.weixin_info != 0)"}
<div class="view ewm-box wxpay right">
<div class="textewm">扫码充值</div>
<img class="imgewm" src="{$rechargeinfo.weixin_info.receivables_qr_code}">
<input type="hidden" name="wx_receivables_id" id="wx_receivables_id" value="{$rechargeinfo.weixin_info.id}" />
</div>
{/if}
{if condition="($rechargeinfo.alipay_info != 0)"}
<div class="view ewm-box alipay right">
<div class="textewm">扫码充值</div>
<img class="imgewm" src="{$rechargeinfo.alipay_info.receivables_qr_code}">
<input type="hidden" name="al_receivables_id" id="al_receivables_id" value="{$rechargeinfo.alipay_info.id}" />
</div>
{/if}
</div>
<div class="ft">
{if condition="($rechargeinfo.alipay_info != 0 && $rechargeinfo.weixin_info != 0 && $rechargeinfo.bank_info != 0)"}
充值金额:<input type="text" placeholder="请输入" name="recharge_money" id="recharge_money"> <button class="btn-small" id="offline_confirm">确认充值</button>
{else}
<div style="background:none;border:none;text-align: center;font-size: 24px;">暂不支持离线充值</div>
{/if}
</div>
</div>
<div class="withdrawal">
<div class="addCard" id="addCard">
{if condition="($show_withdrawal != 0)"}
<div class="btn_backCard" id="btn_backCard" onclick="backChose()">返回选择<font style="font-family:'黑体'"></font></div>
{/if}
<div class="list">
<label class="lab">提现金额: </label>
<input class="input-box" placeholder="请输入提款金额" type="text" name="withdrawal_money" id="withdrawal_money">
</div>
<div class="list">
<label class="lab">开户银行名称: </label>
<input class="input-box" placeholder="请输入所属银行名称" type="text" name="withdrawal_bank" id="withdrawal_bank">
</div>
<div class="list">
<label class="lab">开户银行支行: </label>
<input class="input-box" placeholder="请填写开户银行地址" type="text" name="withdrawal_bank_branch" id="withdrawal_bank_branch">
</div>
<div class="list">
<label class="lab">开户姓名: </label>
<input class="input-box" placeholder="请填写开户姓名" type="text" name="withdrawal_name" id="withdrawal_name">
</div>
<div class="list">
<label class="lab">银行卡号: </label>
<input class="input-box" placeholder="请填写卡号" type="text" name="withdrawal_cardnumber" id="withdrawal_cardnumber">
</div>
<button class="btn" id="withdrawal">确定申请</button>
</div>
<div class="choseCard" id="choseCard">
<div class="btn_addCard" onclick="swithCard()">使用新银行卡<font style="font-family:'黑体'"></font></div>
<div class="list" style="margin-top:5vh">
<label class="lab">请选择银行卡: </label>
<select class="input-box" id="bank_num" onchange="changeSelect()" style="padding-left:1vw;">
{foreach name="$show_withdrawal" item="vo"}
<option value ={$vo.value_num}>{$vo.receivables_bank_number}</option>
{/foreach}
</select>
<input type="hidden" name="chose_bank_number" id="chose_bank_number" value="{$show_withdrawal.0.receivables_bank_number}" />
</div>
<div class="list">
<label class="lab">开户银行名称: </label>
<input class="input-box" readonly name="choseCard_name" id="choseCard_name" value="{$show_withdrawal.0.receivables_bank}">
</div>
<input type="hidden" name="chose_bank_branch" id="chose_bank_branch" value="{$show_withdrawal.0.receivables_bank_branch}" />
<input type="hidden" name="chose_name" id="chose_name" value="{$show_withdrawal.0.receivables_name}" />
<div class="list" >
<label class="lab">提现金额: </label>
<input class="input-box" placeholder="请输入提款金额" value='' name="recharge_money2" id="recharge_money2">
</div>
<button class="btn" style="margin-top:5vh" id="withdrawal2">确定申请</button>
</div>
</div>
</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}" />
</body>
<script type="text/javascript" src="/static/onlinechip/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/static/onlinechip/layer/layer.js"></script>
<script type="text/javascript">
function changeSelect(){
choseCardIndex = document.getElementById('bank_num').value;
bankcard = {$json_withdrawal};
document.getElementById('chose_bank_number').value=bankcard[choseCardIndex].receivables_bank_number;
document.getElementById('choseCard_name').value=bankcard[choseCardIndex].receivables_bank;
document.getElementById('chose_bank_branch').value=bankcard[choseCardIndex].receivables_bank_branch;
document.getElementById('chose_name').value=bankcard[choseCardIndex].receivables_name;
}
function changeSelect1(){
choseCardIndex = document.getElementById('recharge_bank_num').value;
bankcard = {$json_banke_info};
$('#recharge_bank_name').html(bankcard[choseCardIndex].receivables_bank);
$('#bank_receivables_id').val(bankcard[choseCardIndex].id);
}
function swithCard(){
document.getElementById('choseCard').style.display="none";
document.getElementById('addCard').style.display="block";
document.getElementById('btn_backCard').style.display="block";
}
function backChose(){
document.getElementById('choseCard').style.display="block";
document.getElementById('addCard').style.display="none";
}
$(function(){
$(".nav .item").click(function(){
var index=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
if(index==0){
$(".unline").css("display","none");
$(".online").css("display","block");
$(".withdrawal").css("display","none");
}else if(index==1){
$(".online").css("display","none");
$(".unline").css("display","block");
$(".withdrawal").css("display","none");
}else if(index==2){
$(".online").css("display","none");
$(".unline").css("display","none");
$(".withdrawal").css("display","block");
}
})
$("input[name='paytype']").change(function(){
var type=$(this).val();
$(".section .unline .right").css("display","none")
if(type==1){
$(".section .unline .bankpay").css("display","block")
}else if(type==2){
$(".section .unline .wxpay").css("display","block")
}else if(type==3){
$(".section .unline .alipay").css("display","block")
}
})
$('#confirm').click(function (){
var iswap = "{$iswap}";
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;
if(pay_type == 1){
url = '/order/online_order';
}else if(pay_type == 2){
url = '/order/union_pay';
}else if(pay_type == 3){
url = '/order/weixin_pay';
}
$.ajax({
url:url,
type:"POST",
dataType:"JSON",
data:query,
async:false,
success:function(data){
if(data.status == 1){
if(iswap == 1){
window.open(data.url);
}else{
window.parent.postMessage({
data:data.url
},'*');
}
//window.open(data.url);
//window.location.href=data.url;
$('#price').val('');
}else{
layer.msg(data.message);
}
}
})
}else{
layer.msg('请正确输入充值金额充值金额必须大于100');
}
}else{
layer.msg('充值出错,请稍后再试');
}
})
$('#offline_confirm').click(function (){
var query = new Object();
query.recharge_type = $(':radio[name="paytype"]:checked').val();
query.user_id = parseInt($('#user_id').val());
query.recharge_money = parseInt($('#recharge_money').val());
if(query.recharge_type == 1){
query.receivables_id = parseInt($('#bank_receivables_id').val());
query.recharge_bank = parseInt($('#recharge_bank').val());
query.recharge_cardnumber = parseInt($('#recharge_cardnumber').val());
if(!query.recharge_bank){
layer.msg('银行名称不能为空');
return false;
}
if(!query.recharge_cardnumber){
layer.msg('银行卡号不能为空');
return false;
}
}else if(query.recharge_type == 2){
query.receivables_id = parseInt($('#wx_receivables_id').val());
}else{
query.receivables_id = parseInt($('#al_receivables_id').val());
};
if(query.user_id > 0){
if(query.recharge_money > 0){
$.ajax({
url:'/order/recharge',
type:"POST",
dataType:"JSON",
data:query,
async:false,
success:function(data){
layer.msg(data.Data.msg);
if(data.Success == 1){
$('#recharge_bank').val('');
$('#recharge_cardnumber').val('');
$('#recharge_money').val('');
}
}
})
}else{
layer.msg('请正确输入充值金额');
}
}else{
layer.msg('充值出错,请稍后再试');
}
})
//提现
$('#withdrawal').click(function (){
var query = new Object();
query.user_id = parseInt($('#user_id').val());
query.recharge_money = parseInt($('#withdrawal_money').val());
query.recharge_name = $('#withdrawal_name').val();
query.recharge_bank = $('#withdrawal_bank').val();
query.recharge_bank_branch = $('#chose_bank_branch').val();
query.recharge_cardnumber = $('#withdrawal_cardnumber').val();
if(!query.recharge_bank){
layer.msg('提款银行不能为空');
return false;
}
if(!query.recharge_bank_branch){
layer.msg('提款银行支行不能为空');
return false;
}
if(!query.recharge_name){
layer.msg('持卡人不能为空');
return false;
}
if(!query.recharge_cardnumber){
layer.msg('提款银行卡号不能为空');
return false;
}
if(query.user_id > 0){
if(query.recharge_money > 0){
$.ajax({
url:'/order/withdrawal',
type:"POST",
dataType:"JSON",
data:query,
async:false,
success:function(data){
layer.msg(data.Data.msg);
if(data.Success == 1){
$('.usermoney').html(data.Data.newMoney);
$('#withdrawal_money').val('');
$('#withdrawal_bank').val('');
$('#withdrawal_bank_branch').val('');
$('#withdrawal_name').val('');
$('#withdrawal_cardnumber').val('');
}
}
})
}else{
layer.msg('请正确输入提现金额');
}
}else{
layer.msg('提现出错,请稍后再试');
}
})
//提现
$('#withdrawal2').click(function (){
var query = new Object();
query.user_id = parseInt($('#user_id').val());
query.recharge_money = parseInt($('#recharge_money2').val());
query.recharge_name = $('#chose_name').val();
query.recharge_bank = $('#choseCard_name').val();
query.recharge_bank_branch = $('#chose_bank_branch').val();
query.recharge_cardnumber = $('#chose_bank_number').val();
if(!query.recharge_bank){
layer.msg('提款银行不能为空');
return false;
}
if(!query.recharge_bank_branch){
layer.msg('提款银行支行不能为空');
return false;
}
if(!query.recharge_name){
layer.msg('持卡人不能为空');
return false;
}
if(!query.recharge_cardnumber){
layer.msg('提款银行卡号不能为空');
return false;
}
if(query.user_id > 0){
if(query.recharge_money > 0){
$.ajax({
url:'/order/withdrawal',
type:"POST",
dataType:"JSON",
data:query,
async:false,
success:function(data){
layer.msg(data.Data.msg);
if(data.Success == 1){
$('.usermoney').html(data.Data.newMoney);
$('#recharge_money2').val('');
}
}
})
}else{
layer.msg('请正确输入提现金额');
}
}else{
layer.msg('提现出错,请稍后再试');
}
})
})
</script>
</html>