settled_payment.html 14.4 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>入驻缴费</title>
    {include file="public/head"}
    <style>
        li{
            list-style-type: none;
        }
        ul{
            margin: 0;
        }
        .clear{
            clear: both;
        }
        body{
            background:rgba(249,249,249,1);
        }
        /*菜单样式*/
        .content{
            width: 100%;
            font-size: 0;
            background:rgba(249,249,249,1);
        }
        .content .navBarBox{
            width: 100%;
            height: 50px;
            background: rgba(0,159,142,1);
        }
        .content .navBarBox ul{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            padding: 0;
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            color:rgba(255,255,255,1);
        }
        .content .navBarBox ul li{
            width: 144px;
            height: 100%;
            line-height: 50px;
            list-style-type: none;
            float: left;
        }
        .content .navBarBox ul li a{
            color: rgba(255,255,255,1);
        }
        .content .titleImgContent{
            width: 100%;
            height: 146px;
        }
        .content .titleImgContent img{
            width: 100%;
            height: 100%;
        }
        /*主要内容*/
        .contentBox{
            width: 100%;
            margin-top: 12px;
        }
        .contentMain{
            margin: auto;
            width: 1200px;
        }
        .contentTop{
            height: 62px;
            line-height: 62px;
            margin-bottom: 10px;
            background:#fff;
        }
        .titleText{
            padding-left: 17px;
            height:22px;
            line-height:22px;
            font-size:16px;
            font-family:PingFang SC;
            font-weight:800;
            color:rgba(0,159,142,1);
            vertical-align: middle;
        }
        .titleLine{
            line-height: 20px;
            display: inline-block;
            width: 6px;
            height:20px;
            background:rgba(0,159,142,1);
            opacity:1;
            border-radius:2px;
            vertical-align: middle;
        }
        .contentList{
            padding: 40px;
            margin-bottom: 12px;
            background-color: #FFFFFF;
        }
        .payTip{
            margin-bottom: 20px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(102,105,110,1);
        }
        .payTip p{
            margin: 0;
        }
        .payTip p span{
            color: rgba(239, 55, 49, 1)
        }
        /*支付方式*/
        .paymentMode{
            margin-left: -5px;
            cursor: pointer;
        }
        .paymentMode div{
            display: inline-block;
            width: 329px;
            border-bottom: 1px solid rgba(238,238,238,1);
            margin-left: 30px;
            height: 48px;
            line-height: 48px;
        }
        .paymentMode:last-child div:last-child{
            border-bottom: none;
        }
        .paymentModetitle{
            margin-bottom: 20px;
            display: inline-block;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(6,18,30,1);
        }
        .paymentModeIcon{
            margin: 0 8px 0 0;
            width: 28px;
            height: 28px;
        }
        .paymentModeText{
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(6,18,30,1);
            vertical-align: middle;
        }
        .payBtn{
            margin: 15px 0 0 -5px;
            background:rgba(0,159,142,1);
            border-radius:2px;
            color: #fff;
            width:375px;
            height:51px;
            font-size:18px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
            border: 0;
        }
        .payBtn:hover,.payBtn:visited,.payBtn:focus{
            color: #fff;
            color:rgba(255,255,255,1);
            border: 0;
        }
        .warmTip{
            margin-top: 30px;
            margin-bottom: 76px;
        }
        .warmTip p{
            margin: 0;
            line-height: 22px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(102,105,110,1);
        }
        .warmTip span{
            display: inline-block;
            margin-bottom: 20px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(6,18,30,1);
        }

    </style>
    <style>
        #payModal{
            display: none;
        }
        .modal-box {
            width: 716px;
            height: 438px;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99999;
            overflow: hidden;
            position: fixed;
            border: 6px solid #bbb;
            background-color: #fff;
            -webkit-animation: scale-in both cubic-bezier(.4, 0, 0, 1.5) .3s;
            animation: scale-in both cubic-bezier(.4, 0, 0, 1.5) .3s;
        }
        .modal-left {
            float: left;
            width: 333px;
            padding: 20px 50px 25px 45px;
        }
        #payModal .modal-qrcode {
            width: 210px;
            height: 210px;
            display: block;
            margin: 0 auto 20px;
        }
        .icon-qrcode {
            width: 16px;
            height: 16px;
            margin-right: 3px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            background-position: 0 -88px;
        }
        .modal-left .icon {
            font-size: 0;
            background-image: url(https://mpay.meituan.com/resource/cashier/img/icon-common@2x.rcJBe.png);
            background-size: 168px;
        }
        #payModal .modal-info {
            color: #f80;
            font-size: 12px;
            padding: 13px 0;
            text-align: center;
            background-color: #f7f7f7;
        }
        .modal-right {
            float: left;
        }
        #payModal p{
            font-size: 18px;
            text-align: center;
            line-height: 32px;
            margin-bottom: 16px;
        }
        #payModal .orange {
            color: #f80;
        }
        #payModal .modal-qr{
            padding-top: 20px;
            border: 1px solid #ddd;
        }
        .icon-clock {
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }
        .icon-close {
            top: 13px;
            right: 13px;
            width: 13px;
            height: 13px;
            z-index: 5;
            cursor: pointer;
            position: absolute;
            background-position: -17px -88px;
        }
        .modal-right .icon {
            font-size: 0;
            background-image: url(https://mpay.meituan.com/resource/cashier/img/icon-common@2x.rcJBe.png);
            background-size: 168px;
        }
        #payModal .model-right img {
            width: 371px;
            height: 438px;
        }
    </style>
</head>
<body>
{include file="public/header"}
<!--主要内容-->
<div class="content">
    {include file="public/nav"}
    <!--主要内容-->
    <div class="contentBox">
        <div class="contentMain">
            <div class="contentTop">
                <span class="titleLine"></span>
                <span class="titleText">
                    入驻缴费
                </span>
            </div>
            <div class="contentList">
                <div class="payTip">
                    <p>
                        订单提交成功，请尽快付款！应付金额：<span id="price">{$price}</span>元
                    </p>
                    <p>
                        请您在提交订单两天内完成付款，否则订单会自动取消，工企邦为您提供交易保障，请您放心购买。
                    </p>
                </div>
                <div class="paymentContent">
                    <span class="paymentModetitle">支付方式</span>
                    <div class="paymentMode" onclick="changeRadioState(1)">
                        <img id="weChat" class="checkboxImg" src="__CDN__/assets/store/images/checkbox_orange.png" alt="radio">
                        <div>
                            <img src="__CDN__/assets/store/images/weixin.png" alt="" class="paymentModeIcon">
                            <span class="paymentModeText">微信支付</span>
                        </div>

                    </div>
                    <div class="paymentMode" onclick="changeRadioState(2)">
                        <img id="aliPay" class="checkboxImg" src="__CDN__/assets/store/images/radioUnSelect.png" alt="radio">
                        <div>
                            <img src="__CDN__/assets/store/images/zhufubao.png" alt="" class="paymentModeIcon">
                            <span class="paymentModeText">支付宝支付</span>
                        </div>
                    </div>
                </div>
                <a href="javascript:;">
                    <button type="button" class="btn payBtn">下一步</button>
                </a>

                <div class="warmTip">
                    <span>
                        温馨提示
                    </span>
                    <div>
                        {$site.store_tips}
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
{include file="public/footer"}
<!--begin:提示弹层-->
<div class="toast">提示框</div>
<div class="bg"></div>
<!--支付窗口-->
<div id="payModal">
    <div class="mask" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0.6;z-index: 9999;"></div>
    <div class="modal-box">
        <div class="modal-left">
            <p>
                <span>请使用 </span>
                <span class="orange">微信 </span>
                <i class="icon icon-qrcode"></i>
                <span class="orange"> 扫一扫</span><br>扫描二维码支付
            </p>
            <div class="modal-qr">
                <img class="modal-qrcode"
                     src=""
                     alt="您的浏览器版本太低, 请升级您的浏览器">
                <div class="modal-info">
                    <img class="icon-clock" src="__CDN__/assets/store/images/clock.png">
                    <span>二维码有效时长为2小时, 请尽快支付</span>
                </div>
            </div>
        </div>
        <div class="modal-right"><i class="icon icon-close"></i><img
                src="https://mpay.meituan.com/resource/cashier/img/weixin-qrcode.1xf1oN.jpg" alt="微信扫码">
        </div>
    </div>
</div>
<script>
    var pay_type = 1;
    var order_id = '';
    var order_status = 1;
    //支付方式radio点击
    function changeRadioState(payModel) {
        $('.paymentMode .checkboxImg').attr('src','__CDN__/assets/store/images/radioUnSelect.png');
        if(payModel == 1){
            //微信支付
            $('#weChat').attr('src','__CDN__/assets/store/images/checkbox_orange.png');
        }else if(payModel == 2){
            //支付宝支付
            $('#aliPay').attr('src','__CDN__/assets/store/images/checkbox_orange.png');
        }
        pay_type = payModel;
    }
    // 支付
    $('.payBtn').click(function () {
        var vip_type = {$store_type};//会员类型
        var province_ids = "{$province_ids}";
        if (pay_type == '' || pay_type == undefined) {
            toast('请选择支付方式');
            return false;
        }
        //创建订单
        $.ajax({
            url: "{:url('create_order')}",
            type: "POST",
            data: {'vip_type': vip_type, 'province_ids': province_ids, 'pay_type': pay_type},
            success: function (res) {
                console.log(res);
                if (res.code == 1) {
                    if(res.data.status == 1){
                        if (pay_type == 1) {
                            //微信支付
                            order_id = res.data.viporder_id;
                            $('#payModal').show();
                            $('.modal-left .modal-qrcode').attr('src',res.data.url);
                        } else if (pay_type == 2) {
                            //支付宝支付
                            order_id = res.data.viporder_id;
                            window.open(res.data.url);
                        }
                    }else{
                        window.location.href="{:url('index/member/member')}";
                    }
                } else {
                    toast(res.msg);
                    return false;
                }
            },
            error: function (res) {
                toast('与服务器断开连接');
            }
        });
    })
    //关闭按钮
    $('.icon-close').click(function(){
        $("#payModal").hide();
    });
    setInterval(function(){order_pay()},3000);
    //检测订单支付状态
    function order_pay() {
        console.log(order_id);console.log(order_status);
        if(order_id != '' && order_status != 2){
            $.ajax({
                url:"{:url('index/vip/order_pay')}",
                type:"POST",
                data:{'order_id':order_id},
                success:function(res){
                    console.log(res);
                    if(res.code == 1){
                        order_id = '';
                        order_status = 2;
                        toast('支付成功');
                        setTimeout(function(){
                            window.location.href = res.url;
                        },3000);
                        // window.location.href = res.url;
                    }
                },
                error:function(res){
                    toast('与服务器断开连接')
                }
            })
        }
    }
    //提示弹层
    function toast(msg='玩命加载中~',time=2000, location = 0){
        $('.toast').text(msg);
        $('.toast').fadeToggle();
        $('.bg').show();
        setTimeout(function(){
            $('.toast').fadeToggle();
            $('.bg').hide();
            if(location) {
                location.replace(location);
            }
        },time);
    }
</script>
</body>
</html>