<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$website.name|default=''}</title>
    <meta name="keywords" content="{$website.keywords|default=''}">
    <meta name="description" content="{$website.descr|default=''}">
    <link rel="shortcut icon" href="">
    <!-- Bootstrap -->
    <link href="__COMMON__/css/bootstrap4.min.css" rel="stylesheet">
    <style>
        .container {
            padding: 20px 15px;
            max-width: 500px;
        }

        .image {
            width: 210px;
            height:210px;
            margin-bottom: 10px;
            /*border: #ccc solid 1px;*/
            /*padding: 8px;*/
            border: #f2f2f2 solid 1px;
            background-color: white;
        }

        .image img {
            border: 0;
            max-width: 100%;
            height: auto;
        }

        .radio{
            display: inline-block;
            border: #efefef solid 1px;

        }
        .radio img{
            height:30px;
        }

        .radio.active{
            border: red solid 1px;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="myForm" onsubmit="return false" target="_blank" action="/web/buy" method="post">
        <div class="row">
            <div class="col">
                <div class="image">
                    <img src="{$goods.image|createOutFileUrl}"/>
                </div>
                <input type="text" class="form-control" name="contact" value="" placeholder="请输入联系方式" />
            </div>
            <div class="col ml-1">
                <div class="mt-3">
                    <h5>{$goods.name}</h5>
                    <small class="form-text text-muted mb-2">{$goods.descr}</small>
                    <h5 class="text-danger">&yen;{$goods.price}</h5>
                    <div class="p mt-3 mb-3">
                        <input type="hidden" name="id" value="{$goods.id}">

                        {if $userPay['alipay_status'] == 1 }
                        <a class="active radio" href="###">
                            <input type="radio" style="display: none" checked name="type" value="alipay">
                            <img src="__COMMON__/img/logo_alipay.jpg"/>
                        </a>
                        {/if}

                        {if $userPay['wxpay_status'] == 1 }
                        <a class="radio" href="###">
                            <input type="radio" style="display: none" name="type" value="wxpay">
                            <img src="__COMMON__/img/logo_weixin.jpg"/>
                        </a>
                        {/if}

                    </div>
                </div>
                <button id="submit" class="btn-danger btn mt-3">确认购买</button>
                <button id="payed" data-id="" type="button" style="display: none;" class="btn-outline-secondary btn mt-3">我已经成功付款</button>
                <button id="close" type="button" class="btn-outline-secondary btn mt-3">关闭窗口</button>
            </div>
        </div>
    </form>
    <form id="sForm" action="/pay" target="_blank" method="post"></form>
    <iframe id="sFrame" style="display: none;" ></iframe>
</div>
<script src="__COMMON__/js/jquery.min.js"></script>
<script src="__PLUGIN__/sweetalert2/js/sweetalert2.all.min.js"></script>
<script src="__PLUGIN__/layer-mobile/layer.js"></script>
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>

<script>
    $(function () {
        $(".radio").on('click',function(){
            $(".radio.active").removeClass('active') ;
            $(this).addClass('active');
            $(this).find('input').prop('checked',true);
        })

        $("#close").on('click',function(){
            parent.layer.closeAll();
        });


        $("#myForm").on('submit', function () {

            $("#submit").addClass('disabled').prop('disabled', true).text('提交中...');
            var d = $(this).serialize();
            //$("#sForm").submit();
            var responseData ;
            $.ajaxSettings.async = false;
            $.post($(this).attr('action'), d, function (data) {
                //$("#sFrame")[0].contains().document.body.appendChild("<h1></h1>");
                responseData = data ;
            }, 'json');

            if( responseData.code == 0 ){
                $("#payed").data('id',responseData.data.out_trade_no) ;
                var form = '';
                for (var i in responseData.data) {
                    form += "<input type='hidden' name='" + i + "' value='" + responseData.data[ i ] + "' />"
                }
                $("#sForm").html(form);
                $("#sForm").attr({
                    'target': '_blank',
                    'action': '/pay',
                });
                //$(".p").remove();
                $("#submit").text('正在发起支付...');
                $("#sForm").submit();
                setTimeout(function(){
                    $("#submit").hide();
                    $("#payed").show();
                },500)
            }else{
                swal(responseData.data);
                $("#submit").removeClass('disabled').prop('disabled', false).text('确认购买');
            }
        })



        $("#payed").on('click', function () {
            parent.location.replace('/web/query?trade_no='+$(this).data('id')) ;
        });
    })
</script>
</body>
</html>
