106 lines
4.0 KiB
HTML
106 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>充值</title>
|
||
<script src="__STATIC__/ext/layui/layui.js"></script>
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/layui/css/layui.css" />
|
||
</head>
|
||
<style>
|
||
.container {
|
||
text-align: center;
|
||
margin: 10px auto;
|
||
}
|
||
.upload-img-block {
|
||
padding: 20px;
|
||
width: 190px;
|
||
height: 190px;
|
||
border: 1px dashed #ddd;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
</style>
|
||
<div class="container layui-form ns-form">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label img-upload-lable">付款码：</label>
|
||
<div class="layui-input-inline img-upload">
|
||
<div class="upload-img-block">
|
||
<div class='upload-img-box'>
|
||
<div class="ns-upload-default">
|
||
<div class="upload">
|
||
<img width="150px" id="qrcode" src=""/>
|
||
</div>
|
||
</div>
|
||
<p id="money" style="color: red;display: none"></p>
|
||
</div>
|
||
</div>
|
||
<div class="ns-word-aux" style="color:#e03f1b;">扫码完成充值</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">充值金额</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" lay-filter="money" name="money" value="100" title="100元">
|
||
<input type="radio" lay-filter="money" name="money" value="200" title="200元">
|
||
<input type="radio" lay-filter="money" name="money" value="500" title="500元">
|
||
<input type="radio" lay-filter="money" name="money" value="1000" title="1000元">
|
||
<input type="radio" lay-filter="money" name="money" value="2000" title="2000元">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
layui.use('form', function() {
|
||
var form = layui.form,$=layui.$,
|
||
repeat_flag = false;//防重复标识
|
||
form.render();
|
||
/**
|
||
* 监听提交
|
||
*/
|
||
form.on('radio(money)', function(data){
|
||
console.log(data.elem); //得到radio原始DOM对象
|
||
console.log(data.value); //被点击的radio的value值
|
||
if (repeat_flag) return;
|
||
repeat_flag = true;
|
||
$.ajax({
|
||
url: "{:addon_url('saasagent://shop/saas/recharge')}",
|
||
data: {money:data.value},
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success: function(res){
|
||
repeat_flag = false;
|
||
$('#money').text(data.value+'元');
|
||
$('#money').show();
|
||
$('#qrcode').attr('src',res.data.qrcode);
|
||
getPayState(res.data.out_trade_no)
|
||
}
|
||
});
|
||
});
|
||
function getPayState(order){
|
||
setTimeout(function (){
|
||
$.ajax({
|
||
url: "{:addon_url('api/pay/status')}",
|
||
data: {out_trade_no:order},
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success: function(res){
|
||
res=JSON.parse(res)
|
||
let data=res.data;
|
||
if(data.pay_status==0){
|
||
getPayState(order);
|
||
}else if(data.pay_status==2) {
|
||
layer.msg('充值成功', {
|
||
icon: 1,
|
||
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
||
}, function(){
|
||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||
parent.layer.close(index); //再执行关闭
|
||
location.reload();
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},1500)
|
||
}
|
||
});
|
||
</script> |