liuxue
/
payoffline


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>向商家付款</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
    <script type="text/javascript">
        function adapter() {
            const dpWidth = document.documentElement.clientWidth
            const rootFonstSize = (dpWidth * 100) / 750
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                document.documentElement.style.fontSize = rootFonstSize + 'px'
            } else {
                document.documentElement.style.fontSize = dpWidth
            }
        }
        adapter()
        window.onresize = adapter
    </script>
    <style>
        body {

            background: #F8F8F8;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #pay {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* .pay_header {
            width: 100%;
            height: 1.76rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #FFFFFF;
        }

        .pay-header-nei {
            width: 6.86rem;
            height: 100%;
            display: flex;
        }

        .pay-header-nei-in {
            margin-top: 1.07rem;
            font-size: 0.36rem;
            font-weight: 500;
            color: #333333;
            text-align: center;
            margin-left: 2.17rem;
        }

        .pay-header-nei-left {
            width: 0.36rem;
            height: 0.36rem;
            margin-top: 1.17rem;
        }

        .pay-header-nei-left img {
            width: 100%;
            height: 100%;
            display: block;
        } */

        .pay_name {
            width: 6.2rem;
            height: 0.9rem;
            margin: 0.5rem 0 0.5rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pay_name_left {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .pay_name_left_top {
            font-size: 0.34rem;
            font-weight: 600;
            color: #333333;
        }

        .pay_name_left_bottom {
            font-size: 0.26rem;
            font-weight: 400;
            color: #999999;
        }

        .pay_name_right {
            width: 0.9rem;
            height: 0.9rem;
            background: #D8D8D8;
            border: 0.01rem solid #979797;
        }

        .pay_name_right img {
            width: 100%;
            height: 100%;
            display: block;
        }

        input::-webkit-input-placeholder {
            /*WebKit browsers*/
            color: #999999;
            font-size: 0.4rem;
            margin-top: 13rem;

        }

        input::-moz-input-placeholder {
            /*Mozilla Firefox*/
            color: #999999;
            font-size: 0.4rem;
            margin-top: 13rem;

        }

        input::-ms-input-placeholder {
            /*Internet Explorer*/
            color: #999999;
            font-size: 0.4rem;
            margin-top: 13rem;

        }

        .pay_input {
            width: 100%;
            height: 3.48rem;
            background: #FFFFFF;
            border-radius: 0.16rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .pay_input-top {
            width: 6.36rem;
            height: 2.63rem;
            border-bottom: 0.01rem solid #E5E5E5;
        }

        .pay_input-top-shifu {
            margin: 0.54rem 0 0 0.41rem;
            font-size: 0.26rem;
            font-weight: 400;
            color: #333333;
        }

        .pay_input-top-manei {
            margin: 0.12rem 0 0 0.41rem;
            height: 1.19rem;
            display: flex;
            align-items: center;
        }

        .pay_input-top-manei span {
            font-size: 0.64rem;
            font-weight: 600;
            color: #333333;
        }

        .pay_input-top-manei input {
            width: 100%;
            height: 0.99rem;
            border: none;
            outline: medium;
            margin-left: 0.27rem;
            font-size: 1.1rem;
        }

        .pay_input-bottom {
            width: 6.36rem;
            height: 0.84rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.24rem;
            font-weight: 400;
            color: #FE0032;
        }

        .pay_input-bottom-left {
            width: 0.3rem;
            height: 0.3rem;
        }

        .pay_input-bottom-left img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .pay_input-bottom-right {
            margin-left: 0.08rem;
        }

        .pay_bottom {
            width: 6.86rem;
            height: 0.88rem;
            background: linear-gradient(179deg, #FE7577 0%, #FE0032 100%);
            border-radius: 1rem;
            margin-top: 7.5rem;
            text-align: center;
            line-height: 0.88rem;
            font-size: 0.32rem;
            font-weight: 600;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div id="pay">
        <!-- <div class="pay_header">
            <div class="pay-header-nei">
                <div class="pay-header-nei-left">
                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018150019704.png" alt="">
                </div>
                <div class="pay-header-nei-in">向商家付款</div>
            </div>
        </div> -->
        <div class="pay_name">
            <div class="pay_name_left">
                <div class="pay_name_left_top">付款给商家</div>
                <div class="pay_name_left_bottom" id="mername"></div>
            </div>
            <div class="pay_name_right">
                <img src="" id="merbanner" alt="">
            </div>
        </div>
        <div class="pay_input">
            <div class="pay_input-top">
                <div class="pay_input-top-shifu">实付金额</div>
                <div class="pay_input-top-manei">
                    <span>￥</span>
                    <input type="text" id="textInput" placeholder="请输入金额" maxLength="8"
                        onkeyup="value=value.replace(/[^\d^\.]+/g,'')" oninput="myFunction()">
                </div>
            </div>
            <div class="pay_input-bottom">
                <div class="pay_input-bottom-left">
                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018152247280.png" alt="">
                </div>
                <div class="pay_input-bottom-right">储蓄保全国合作伙伴招募中</div>
            </div>
        </div>
        <div class="pay_bottom" onclick="btn()">立即支付</div>
    </div>

    <script type="text/javascript">
        var ua = window.navigator.userAgent.toLowerCase();
        var Wxuserinfor;//微信user
        var ZfBuserinfor;//支付宝user
        var mer_id;//商户Id
        var money;//金额
        var trade_type;//微信|支付宝
        var out_trade_no;//订单
        //动态获取金额
        function myFunction() {
            money = $("#textInput").val()
        }
        //获取参数
        var userpay = parseParms()
        get_mer_info()//调用二维码接口
        //跳转微信授权登陆
        let local = window.location.href;
        if (local.split(':')[0] == 'http') {
            local = local.split(':')[0] + 's:' + local.split(':')[1]
            console.log(local)
        } else {
            local = window.location.href;
        }
        let wechatHrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + 'wx66f5f8def2b755da' +
            "&redirect_uri=" + encodeURIComponent(local) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

        //不是微信并且不是支付宝
        if (ua.match(/MicroMessenger/i) != "micromessenger" && ua.match(/AlipayClient/i) != "alipayclient") {
            alert('请使用微信或支付宝扫码');
        }
        //判断是不是微信
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            trade_type = "WX"
            if (userpay.code == "" || userpay.code == null) {
                window.location.href = wechatHrefurl;
            } else {
                user()
            }
        }
        //判断是不是支付宝
        if (ua.match(/AlipayClient/i) == "alipayclient") {
            trade_type = "ALI"
            if (userpay.auth_code == null || userpay.auth_code == "") {
                local = local.replace('#/', '');
                let aliHrefurl =
                    "https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021001197698727&scope=auth_user&redirect_uri=" +
                    encodeURIComponent(local)
                window.location.href = aliHrefurl;
            } else {
                aliUser()
            }
        }
        //获取二维码
        function get_mer_info() {
            $.post("https://test.bjtdba.com/api/merchantcheckcodeid/" + userpay.id, function (data) {
                if (data.status == 200) {
                    if (data.data.code == 1) {
                        mer_id = data.data.mer_id; //获取店铺id
                        getQrcode(data)
                    } else {
                        //如果不可以收款清空body
                        alert("商户未开通")
                        $("body").html("")
                    }
                } else {
                    alert(data.message)
                    //400收款清空body
                    $("body").html("")
                }

            })
        }
        //获取商户信息
        function getQrcode(event) {
            $.get("https://test.bjtdba.com/api/merchant/get_mer_info", { mer_id: event.data.mer_id }, function (data) {
                if (data.status == 200) {
                    $("#mername").text(data.data.mer_name)//商户名称
                    $("#merbanner").attr("src", data.data.mer_banner)//商户头像
                }
            })
        }
        //wx获取用户信息 
        function user() {
            $.get("https://test.bjtdba.com/api/wechat/wechatAuthorization", { code: userpay.code }, function (data) {
                if (data.status == 200) {
                    Wxuserinfor = data.data
                }
            })
        }
        //支付宝获取用户信息
        function aliUser() {
            $.get("https://test.bjtdba.com/api/ali/aliSign", { code: userpay.auth_code }, function (data) {
                if (data.status == 200) {
                    ZfBuserinfor = data.data
                }
            })
        }
        //点击支付创建订单
        function btn() {
            //开始loading

            let data = {
                mer_id: mer_id,
                money: money,
                trade_type: trade_type,
            }
            if (trade_type == 'WX') {
                data.avatar = Wxuserinfor.headimgurl;
                data.nickname = Wxuserinfor.nickname;
                data.pay_user_id = Wxuserinfor.unionid;
            } else if (trade_type == 'ALI') {
                data.pay_user_id = ZfBuserinfor.user_id;
            }
            //支付宝user_id
            if (userpay.user_id) {
                data.user_id = userpay.user_id;
            }
            $.post("https://test.bjtdba.com/api/merchant/createOrder", { money: money, mer_id: data.mer_id, trade_type: data.trade_type, avatar: data.avatar, nickname: data.nickname, pay_user_id: data.pay_user_id }, function (data) {
                console.log(data, '订单创建')
                if (data.status == 200) {
                    out_trade_no=data.data.out_trade_no
                    jsapiPay(data.data)//订单数据
                } else {
                    alert(data.message)
                    //结束loading
                }
            })
        }
        // 创建订单成功后调用接口区分微信支付还是支付宝，分别调用支付
        function jsapiPay(event) {
            $.post("https://test.bjtdba.com/api/merchant/jsapiPay", { out_trade_no: event.out_trade_no, type: 'HF' }, function (data) {
                console.log(data, '订单创建完区分WZ')
                if (data.status == 200) {
                    if (trade_type == 'WX') {
                        console.log("WX")
                        paymentByWxpay(data.data)
                    } else if (trade_type == 'ALI') {
                        paymentByAlipay(data.data)
                    }
                } else {
                    alert(data.message)
                    //结束loading
                }
            })
        }
        // 微信支付
        function paymentByWxpay(data) {
            console.log(data)
            var appid = ''
            var timestamp = ''
            var noncestr = ''
            var paysign = ''
            var signType = ''
            var pay_info = JSON.parse(data.expend.pay_info)
            var package1 = ''

            appid = pay_info.appId
            timestamp = pay_info.timeStamp
            noncestr = pay_info.nonceStr
            paysign = pay_info.paySign
            signType = pay_info.signType
            package1 = pay_info.package
            wx.config({
                debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
                appId: appid, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: paysign,// 必填，签名
                jsApiList: ['chooseWXPay'], // 必填，需要使用的 JS 接口列表 支付
                openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
            });

            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                    success: function (res) {
                        console.log(res, '微信支付返回值');
                    },
                    fail: function (res) {
                        console.log(res, '错误');
                    }
                });
                wx.chooseWXPay({
                    appId: appid,
                    timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: noncestr, // 支付签名随机串，不长于 32 位
                    package: package1, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: paysign, // 支付签名
                    success: (res) => {
                        // 支付成功后的回调函数
                        // location.replace("./Paytocomplete.html")
                        // window.location.replace("./Paytocomplete.html")
                        // window.location.href = path + "./Paytocomplete.html";
                        //结束loading
                    },
                    // cancel: function (res) {
                    //      结束loading
                    //     alert('取消支付');
                    // },
                    fail: function (res) {
                        //结束loading
                        alert('支付失败');
                    }
                });
            });
            wx.error(function (res) {
                console.log('res', res);
            });

        }
        //支付宝支付
        function paymentByAlipay(data) {
            var pay_info = JSON.parse(data.expend.pay_info)
            AlipayJSBridge.call("tradePay", {
                tradeNO: pay_info.tradeNO, // 必传，此使用方式下该字段必传
            }, function (result) {
                if (result.resultCode == '9000') {
                    location.replace("./Paytocomplete.html?out_trade_no="+out_trade_no);
                    money = '';
                } else {
                    alert("支付失败")
                }
            });
        }
        //hash参数转对象
        function parseParms() {
            var str = window.location.href.split("?")[1];
            var pieces = str.split("&"), data = {}, i, parts;
            // process each query pair
            for (i = 0; i < pieces.length; i++) {
                parts = pieces[i].split("=");
                if (parts.length < 2) {
                    parts.push("");
                }
                data[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
            }
            return data
        }
    </script>
</body>

</html>