173 lines
6.9 KiB
HTML
173 lines
6.9 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 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="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="3000" title="3000元">
|
||
<input type="radio" lay-filter="money" name="money" value="5000" title="5000元">
|
||
<input type="radio" lay-filter="money" name="money" value="10000" title="10000元">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">自定义充值金额：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="custom_money" id="custom_money" placeholder="请输入自定义充值金额" autocomplete="off" class="layui-input len-mid">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<button class="layui-btn bg-color" lay-submit lay-filter="save">确定</button>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
layui.use('form', function() {
|
||
var form = layui.form,$=layui.$,repeat_flag = false,Timer;//防重复标识
|
||
form.render();
|
||
form.on('submit(save)', function (data) {
|
||
if (repeat_flag) return;
|
||
repeat_flag = true;
|
||
$.ajax({
|
||
url: "{:addon_url('supply://shop/appapi/recharge')}",
|
||
data: data.field,
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success: function(res){
|
||
clearTimeout(Timer);
|
||
repeat_flag = false;
|
||
$('#money').text(money+'元');
|
||
$('#money').show();
|
||
$('#qrcode').attr('src',res.qrcode);
|
||
getPayState(res.out_trade_no)
|
||
}
|
||
});
|
||
});
|
||
|
||
/**
|
||
* 监听提交
|
||
*/
|
||
form.on('radio(money)', function(data){
|
||
// repeat_flag = false;
|
||
// getQR(data.value);
|
||
// $.ajax({
|
||
// url: "{:addon_url('saas://shop/saas/recharge')}",
|
||
// data: {money:data.value},
|
||
// dataType: 'JSON',
|
||
// type: 'POST',
|
||
// success: function(res){
|
||
// clearTimeout(Timer);
|
||
// repeat_flag = false;
|
||
// $('#money').text(data.value+'元');
|
||
// $('#money').show();
|
||
// $('#qrcode').attr('src',res.qrcode);
|
||
// getPayState(res.out_trade_no)
|
||
// }
|
||
// });
|
||
});
|
||
// document.getElementById('custom_money').addEventListener('keydown', function(event) {
|
||
// if (event.key === 'Enter' || event.keyCode === 13) {
|
||
// // 回车键被按下，执行相关操作
|
||
// console.log($('#custom_money').val());
|
||
// console.log('回车键被按下');
|
||
// let money = $('#custom_money').val();
|
||
// repeat_flag = false;
|
||
// getQR(money);
|
||
// // 可以在这里添加你想要执行的代码
|
||
// }
|
||
// });
|
||
// document.addEventListener('DOMContentLoaded', function () {
|
||
// var input = document.getElementById('custom_money'); // 假设有一个ID为'myInput'的输入框
|
||
// input.addEventListener('keydown', function(event) {
|
||
// console.log(event.key);
|
||
// if (event.key === 'Enter') {
|
||
// // 调用你想要执行的函数
|
||
// getQR();
|
||
// }
|
||
// });
|
||
// });
|
||
// function getQR(money) {
|
||
// console.log(money,888888);
|
||
// if (repeat_flag) return;
|
||
// repeat_flag = true;
|
||
// $.ajax({
|
||
// url: "{:addon_url('supply://shop/appapi/recharge')}",
|
||
// data: {money:money},
|
||
// dataType: 'JSON',
|
||
// type: 'POST',
|
||
// success: function(res){
|
||
// clearTimeout(Timer);
|
||
// repeat_flag = false;
|
||
// $('#money').text(money+'元');
|
||
// $('#money').show();
|
||
// $('#qrcode').attr('src',res.qrcode);
|
||
// getPayState(res.out_trade_no)
|
||
// }
|
||
// });
|
||
// }
|
||
function getPayState(order){
|
||
Timer= 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.href="{:addon_url('saas://shop/saas/index')}"
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},1500)
|
||
}
|
||
});
|
||
</script>
|