{extend name="./template/default/pub/pc_base.html" /}
{block name="seo"}
<title>vip-{$site_name}</title>
{/block}
{block name="content"}
<main class="container-fluid overflow-Show clearfix" style="min-height:750px;">
    <div class="container">
        <section class="vip-recharge-con">
            <div class="txt-ad"></div>
            <div class="recharge-body mt20">
                <div class="top"><span class="label">账号：</span>
                    {$Think.session.xwx_nick_name|default="无昵称"} &nbsp;&nbsp;vip剩余时间:{$day}天&nbsp;&nbsp;余额:{$balance}元
                </div>
                <div class="head"><span class="label">购买vip：</span></div>
                <ul class="amount-list">
                    {volist name="vips" id="vo"}
                    <li style="margin:5px 77px 15px 0;">
                        <label>
                            <input type="radio" name="wxpay" class="goodsItem" checked="">
                            <div style="display:inline-block;height:115px;">
                                <p class="time"><span data-val="{$vo.month}">{$vo.month}月</span></p>
                                <p>
                                    <span class="color-main"> ￥ <span class="price">{$vo.price}</span> </span> <span
                                        class="original"></span>
                                </p>
                                <p class="describe">每月￥{:floor($vo.price/$vo.month)}</p>
                            </div>
                        </label>
                    </li>
                    {/volist}
                </ul>
                <div class="bottom head"><span class="label">需支付:</span><span class="total"></span></div>
            </div>

            <div class="recharge-footer mb20">
                <form id="vipForm">
                    <input type="hidden" name="month" id="month" value="">
                </form>
                <span class="label">
                    <button onclick="formSub();" class="channel-btn">购买vip</button>
                </span>
                <span>
                   <a href="#" target="_blank">用户充值、消费服务协议</a>
                </span>
                <span class="tip">成为本站vip，可以免费阅读所有收费章节，不再有额外消费</span>
            </div>
            <script>
                $(document).ready(function () {
                    var checkedItem = $('.goodsItem:checked');
                    $('.total').text('￥' + checkedItem.next().find('p span.color-main span.price').text());
                    $('#month').val(checkedItem.next().find('p.time span').attr('data-val'));
                })

                $('.goodsItem').click(function () {
                    $('.total').text('￥' + $(this).next().find('p span.color-main span.price').text());
                    $('#month').val($(this).next().find('p.time span').attr('data-val'));
                })

            </script>
        </section>
    </div>
</main>
<script>
    function formSub() {
        var month = $('#month').val();
        if (month == '') {
            ShowDialog('请选择一个选项');
        } else {
            $.post({
                url: '/vip',
                data: {month: month},
                success: function (res) {
                    ShowDialog(res.msg);
                    if (res.err == 0) {
                        setTimeout(function () {
                            location.href = '/ucenter';
                        }, 1000);
                    } else if (res.err == 1) {
                        setTimeout(function () {
                            location.href = '/charge';
                        }, 1000);
                    }
                }
            })
        }
    }
</script>
{/block}