221 lines
7.1 KiB
HTML
221 lines
7.1 KiB
HTML
|
<!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">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
||
|
|
<link rel="stylesheet" href="/public/wxpay/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="/public/wxpay/css/style.css">
|
||
|
|
<title>充值</title>
|
||
|
|
<style type="text/css" media="all">
|
||
|
|
.radio-row{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.radio-box{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 10px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
.mask {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
/*height: 100vh;*/
|
||
|
|
background: rgba(0, 0, 0, 0.48);
|
||
|
|
z-index: 9999;
|
||
|
|
|
||
|
|
}
|
||
|
|
.mask-tip{
|
||
|
|
position: absolute;
|
||
|
|
width: 300px;
|
||
|
|
height: 200px;
|
||
|
|
top: 20px;
|
||
|
|
right: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<form action="/api/payapp/wxjsapi" method="post">
|
||
|
|
<div class="row">
|
||
|
|
<div class="container_logo">
|
||
|
|
<div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" class="form-control user_id" name="user_id" value="" placeholder="请输入您的会员ID">
|
||
|
|
<input type="hidden" class="form-control user_id" id="user_id_has" name="user_id_has" value="">
|
||
|
|
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-default" id="user_id" type="button">验证</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
|
||
|
|
<div class="form-group">
|
||
|
|
|
||
|
|
<h4>充值金额</h4>
|
||
|
|
<div class="number_amount">
|
||
|
|
<label>￥</label>
|
||
|
|
<input type="text" class="money" name="money">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="quick_amount col-xs-10 col-sm-10 col-md-10 col-lg-10">
|
||
|
|
{volist name="item" id="vo"}
|
||
|
|
<p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='{$vo.money}'>{$vo.money}</p>
|
||
|
|
{/volist}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="radio-row col-xs-10 col-sm-10 col-md-10 col-lg-10">
|
||
|
|
<div class="radio-box wx">
|
||
|
|
<input style="margin:0;" id="item1" type="radio" name="pay_type" value="10" checked>
|
||
|
|
<label for="item1" style="margin-bottom:0;"><span style="padding-left:5px;">微信</span></label>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!--<div class="radio-box zfb">-->
|
||
|
|
<!-- <input style="margin:0;" id="item2" type="radio" name="pay_type" value="11">-->
|
||
|
|
<!-- <label for="item2" style="margin-bottom:0;"><span style="padding-left:5px;">支付宝支付</span></label>-->
|
||
|
|
|
||
|
|
<!--</div>-->
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="_submit col-xs-10 col-sm-10 col-md-10 col-lg-10">
|
||
|
|
<input type="submit" value="充值" class="btn btn-primary submit-amount">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mask">
|
||
|
|
<img class="mask-tip" src="/public/wxpay/img/tip.png" alt="" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/public/wxpay/js/jquery.min.js"></script>
|
||
|
|
<script src="/public/wxpay/js/bootstrap.min.js"></script>
|
||
|
|
<script>
|
||
|
|
var $amountInput = $('.money');
|
||
|
|
var amount = '';
|
||
|
|
var $getId = $('[type="hidden"]');
|
||
|
|
var getparse = ParaMeter();
|
||
|
|
$getId.val(getparse.id);
|
||
|
|
let browserType = navigator.userAgent.toLowerCase();
|
||
|
|
let browserEnv = '';
|
||
|
|
|
||
|
|
if (browserType.match(/MicroMessenger/i) == 'micromessenger') { //微信环境
|
||
|
|
browserEnv = 'wechat';
|
||
|
|
}else{
|
||
|
|
//浏览器环境
|
||
|
|
$('#item1').removeAttr("checked");
|
||
|
|
$('#item2').attr("checked", "checked");
|
||
|
|
$('.radio-box.wx').css('display','none')
|
||
|
|
browserEnv = 'mobile';
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#user_id').bind("click", function(){
|
||
|
|
var uid=$(".user_id").val();
|
||
|
|
if(!uid){
|
||
|
|
alert("请输入要充值的会员ID");
|
||
|
|
}
|
||
|
|
$(".submit-amount").val('验证中..');
|
||
|
|
$.get("/api/payapp/checkuser", {user_id:uid},function(str){
|
||
|
|
var obj = JSON.parse(str);
|
||
|
|
var test="充值"
|
||
|
|
if(obj.code==200){
|
||
|
|
test="充值("+obj.result.nickname+")";
|
||
|
|
$(".submit-amount").prop('disabled', false);
|
||
|
|
$("#user_id_has").val(obj.result.id);
|
||
|
|
|
||
|
|
}else{
|
||
|
|
test=obj.message;
|
||
|
|
$(".submit-amount").prop('disabled', true);
|
||
|
|
}
|
||
|
|
$(".submit-amount").val(test);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('.mask').bind("click",function(){
|
||
|
|
$('.mask').css('display','none')
|
||
|
|
})
|
||
|
|
|
||
|
|
$('.submit-amount').bind("click", function(e){
|
||
|
|
var uid=$(".user_id").val();
|
||
|
|
var money=$(".money").val();
|
||
|
|
//支付方式
|
||
|
|
var payType = $("input[type='radio']:checked").val();
|
||
|
|
|
||
|
|
let event = e || window.event;
|
||
|
|
|
||
|
|
|
||
|
|
if(!uid){
|
||
|
|
alert("请输入要充值的会员ID");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(!money || money<0){
|
||
|
|
alert("请选择充值金额");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(payType == 11){
|
||
|
|
|
||
|
|
if(browserEnv == 'wechat'){
|
||
|
|
//如果此时浏览器环境是微信
|
||
|
|
event.preventDefault(); // 兼容标准浏览器
|
||
|
|
window.event.returnValue = false; // 兼容IE6~8
|
||
|
|
$('.mask').css('display','block')
|
||
|
|
return
|
||
|
|
}else{
|
||
|
|
//在普通浏览器里，不执行提示操作
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".quick_amount p").off("click").on("click", function () {
|
||
|
|
amount = $(this).attr('data-item');
|
||
|
|
if (!$(this).hasClass('active')) {
|
||
|
|
$(this).addClass('active').siblings().removeClass('active');
|
||
|
|
$amountInput.val(amount);
|
||
|
|
} else {
|
||
|
|
$(this).removeClass('active');
|
||
|
|
$amountInput.val('');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function ParaMeter() {
|
||
|
|
var obj = {};
|
||
|
|
var arr = location.href.substring(location.href.lastIndexOf('?') + 1).split("&");
|
||
|
|
for (var i = 0; i < arr.length; i++) {
|
||
|
|
var aa = arr[i].split("=");
|
||
|
|
obj[aa[0]] = aa[1];
|
||
|
|
}
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|