mashangyoujiu/Application/Vip/View/Onlinepay/index1.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta charset="UTF-8">
    <title>在线充值</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/onlinepay.css"/>
    <style>
        .active {
            background-color: #ff877e;
            color: #fff;
        }

        .input {
            height: 13vw;
            box-sizing: border-box;
            width: 100%;
            border-radius: 5px;
            margin-top: 10px;
            padding: 0 2vw;
            font-size: 14px;
        }
    </style>
</head>
<body>
<input type="hidden" id="storeid" value="{$userinfo['storeid']}">
<input type="hidden" id="openid" value="{$userinfo['openid']}">
<div class="head">
    <div class="card_num">卡号：
        <span class="card_show">{$userinfo['cardnum1']}</span>
        <sapn class="card_show" style="display: none;">{$userinfo['cardnum']}</sapn>
    </div>
    <div class="balance">余额：<span>{$userinfo['balance']}</span></div>
</div>
<empty name="rechargelist">
    <input class="input" id="money" type="number" placeholder="请输入充值金额">
    <else/>
    <div class="body" style="box-sizing: border-box;">
        <volist name="rechargelist" id="vo">
            <div class="item" money="{$vo.money}" give="{$vo.give}" online="{$vo.id}">
                <input type="hidden" value="{$vo.id}">
                <div>充<span>{$vo['money']}</span></div>
                <div>送<span>{$vo['give']}</span></div>
            </div>
        </volist>
    </div>
</empty>
<!--<input class="input" id="money" type="number" placeholder="请输入充值金额">-->
<button class="btn">确认充值</button>
</body>
<script src="__PUBLIC__/vip/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/vip/js/window-reload.js"></script>
<script src="__PUBLIC__/js/tips.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    $('.item').on('touchstart', function () {
        if ($(".btn").hasClass("disabled")) {
            return;
        }
        if($(this).hasClass('active')){
            $(this).removeClass('active');
        }else {
            $('.item').removeClass('active');
            $(this).addClass('active');
        }
    })
    $('.card_show').click(function () {
        $('.card_show').show();
        $(this).hide();
    })
    //充值生成订单信息
    $(".btn").on('touchstart', function () {
        var money = 0;
        if ($('#money').length) {
            money = $('#money').val();
            if (!money) {
                alertMsg("请输入充值金额", 1000);
                return;
            }
        } else {
            if (!$('.active').length) {
                alertMsg("请选择一个充值额度", 1000);
                return;
            }
            money = $('.active').attr('money');
        }
        if ($(".btn").hasClass("disabled")) {
            return;
        }
        $(".btn").addClass("disabled");

        alertShowLoading({centerBg: 'transparent', bgOpacity: 0.3});
        var storeid = $("#storeid").val();
        $.post("/index.php/Pay/VipPay/NewSubmitDirectOrder", {
            storeid: storeid,
            trade_amount: money
        }, function (ret) {
            if (ret.status == 1) {
                //创建订单成功
                $.post('/index.php/Pay/VipPay/recharge', {
                    out_trade_no: ret.out_trade_no,
                    onlinepay_id: $('.active').length?$('.active').attr('online'):0,
                    money: money
                }, function (data) {
                    if (data.status == 1) {
                        // '/index.php/Pay/VipPay/getPrepayId'
                        $.post('/index.php/Pay/VipPay/getPrepayId', {
                            out_trade_no: ret.out_trade_no,
                            openid: $('#openid').val()
                        }, function (res) {
                            // console.log(res);
                            alertHideLoading(function () {
                                if (res.status == 1) {
                                    wx.chooseWXPay({
                                        timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                        nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
                                        package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                                        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                        paySign: res.data.paySign, // 支付签名
                                        success: function (result) {
                                            // 支付成功后的回调函数
                                            if (result.errMsg == 'chooseWXPay:ok') {
                                                //支付成功
                                                alertShowLoading(function () {
                                                    $.post('/index.php/Pay/VipPay/searchWxOnlinePay', {
                                                        out_trade_no: ret.out_trade_no
                                                    }, function (result) {
                                                        // console.log(result);
                                                        alertHideLoading();
                                                        alertMsg(result.msg, 1000, function () {
                                                            if (result.status == 1) {
                                                                //充值成功
                                                                localStorage.onlinepay = 1;
                                                                window.history.go(-1);
                                                            } else {
                                                                //充值失败
                                                                $(".btn").removeClass("disabled");
                                                            }
                                                        });
                                                    })
                                                })
                                            }
                                        },
                                        cancel: function (res) {
                                            //用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
                                            $(".btn").removeClass("disabled");
                                        }
                                    });
                                } else {
                                    alertHideLoading(function () {
                                        alertMsg(res.msg, 1000, function () {
                                            $(".btn").removeClass("disabled");
                                        });
                                    })
                                }
                            })

                        })
                    } else {
                        alertHideLoading(function () {
                            alertMsg(data.msg, 1000, function () {
                                $(".btn").removeClass("disabled");
                            });
                        })
                    }
                })
            } else {
                alertHideLoading(function () {
                    alertMsg(ret.msg, 1000, function () {
                        $(".btn").removeClass("disabled");
                    });
                })
            }
        })
    });
    wx.config({
        debug: false,
        appId: "{$signPackage.appId}",
        timestamp: "{$signPackage.timestamp}",
        nonceStr: "{$signPackage.nonceStr}",
        signature: "{$signPackage.signature}",
        jsApiList: ['chooseWXPay']
    });
    wx.error(function (res) {
        alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
    });
</script>
</html>