{extend name="layout/layout" /}
{block name="title"}充值{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/pay.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
    html,
    body {
        background-color: #f2f4f8;
    }
    .js_loading strong{
        padding: .1rem .1rem .1rem .8rem;
        position:fixed;
        top:50%;
        left: .6rem;
        right: .6rem;
        z-index: 199;
        margin: -.3rem auto;
        height: .7rem;
        font-size:.16rem;
        color:#fff;
        line-height: .5rem;
        background:rgba(0,0,0,0.7) url({:client_asset('/img/frontend/icon/oval.svg')}) no-repeat .2rem center;
    background-size: .4rem .4rem;
    box-sizing: border-box;
    border-radius: .08rem;
    }
    .js_loading{
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        background-color: rgba(0,0,0,.3);
    }






    /*弹出框*/
    .bind_alert_box{
        display: none;
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        padding:20px 0;
        overflow:hidden;
        background-color:rgba(0,0,0,0.5);
        text-align:center;
        font-size:0;
        z-index:3000;
    }
    .bind_alert_main,
    .bind_alert_height{
        display:inline-block;
        *display:inline;
        *zoom:1;
        vertical-align:middle;
    }
    .bind_alert_height{
        height:100%;
        overflow:hidden;
        width:1px;
        margin-left:-10px;
    }

    .bind_alert_main{
        overflow:hidden;
        width:240px;
        background-color:#fff;
        border-radius:6px;
        font-size:14px;


        -moz-box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
        box-shadow:0 0 10px 0px rgba(0,0,0,0.3);

    }

    .bind_alert_off{
        float: right;
        width: 26px;
        height: 26px;
        background:#fff url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
        background-size: 13px 13px;
        border-radius: 26px;
        margin: 0 0 10px;
    }
    .alert_tit{
        margin: 20px 40px;
        text-align:center;
        overflow:hidden;
    }

    .alert_tit_clear{
        margin:5px 5px 0 0;
        float:right;
        width:30px;
        height:30px;
        background:url(/images/icons/cha_icon_2.png) no-repeat center center;
        background-size:18px auto;
    }

    .alert_tit h2{
        margin:0 40px;
        overflow:hidden;
        height:40px;
        font-size:16px;
        color:#808080;
        text-align:center;
        line-height:40px;
    }
    .alert_tit h3{
        margin-top:10px;
        padding-left:22px;
        display:inline-block;
        *display:inline;
        *zoom:1;
        overflow:hidden;
        height:30px;
        background:url(/images/icons/warning_icon_2.png) no-repeat 0 center;
        background-size:18px auto;
        font-size:16px;
        color:#333;
        text-align:center;
        line-height:30px;
    }

    .alert_text{
        padding:10px;
    }
    .alert_txt_c{
        font-size:14px;
        color:#808080;
        text-align:left;
        line-height:20px;
    }

    .alert_but_box{
        border-top:1px solid #d8d8d8;
        overflow:hidden;
    }
    .alert_but_box a{
        display:block;
        box-sizing:border-box;
    }

    .alert_but_1{
        height:46px;
        font-size:15px;
        color:#77a4ff;
        text-align:center;
        line-height:46px;
    }



</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu"}
<div class="head_tit_box">
    <a href="javascript:;" class="head_return_page_but"></a>
    <div class="head_menu_but_box">
        <!--<a href="javascript:;" class="head_menu_but"></a>-->
    </div>
    <h1>充值</h1>
</div>
<!--head_tit_box 分类 head_menu_but_open-->
<div class="pop_up_menu_box">
    <i></i>
    <div class="pum_box">
        <div class="pum_nav_list">
            <ul class="pum_nav_list_ul">
                <li>
                    <a href="{:getCurrentDomain($channel_id,true,'/index/index?type=boy')}">
                        <div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_1.png')}" /></div>
                        <strong>男生</strong>
                    </a>
                </li>
                <li>
                    <a href="{:getCurrentDomain($channel_id,true,'/index/index?type=girl')}">
                        <div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_2.png')}" /></div>
                        <strong>女生</strong>
                    </a>
                </li>
                <li>
                    <a href="{:getCurrentDomain($channel_id,true,'/index/category')}">
                        <div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_3.png')}" /></div>
                        <strong>分类</strong>
                    </a>
                </li>
                <li>
                    <a href="{:getCurrentDomain($channel_id,true,'/index/book/list?type=finish')}">
                        <div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_4.png')}" /></div>
                        <strong>完本</strong>
                    </a>
                </li>
                <li>
                    <a href="{:getCurrentDomain($channel_id,true,'/index/book/list?type=free')}">
                        <div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_5.png')}" /></div>
                        <strong>免费</strong>
                    </a>
                </li>
                <li>
                    <a href="{:getCurrentDomain($channel_id,true,'/index/user')}">
                        <div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_6.png')}" /></div>
                        <strong>个人中心</strong>
                    </a>
                </li>
            </ul>
            <div class="pum_but_box">
                <a href="{:getCurrentDomain($channel_id,true,'/index/user/recent')}">最近阅读</a>
            </div>
            <input type="hidden" value="{:$recent_url}" class="js_recent_url">
        </div>
    </div>
</div>
<!--pop_up_menu_box 菜单弹框-->

{/block}
{block name="main"}
<div class="body_sytle">
    <div class="re_head_box">
        {if isset($user['vip_endtime']) && $user['vip_endtime'] > time()}
        <div class="re_img_vip">
            <img alt="vip头像" src="{$user['avatar'] ?? asset('/img/frontend/icon/nav_icon_4.png')}"/>
            <span></span>
        </div>
        {else /}
        <div class="re_img">
            <img alt="头像" src="{$user['avatar'] ?? asset('/img/frontend/icon/nav_icon_4.png')}"/>
        </div>
        {/if}
        <div class="re_user_info_box">
            <h3>
                {$user['nickname'] ?? '书友'}
            </h3>
            <div class="re_user_info">
                <em>ID：<span>{$site['theme']??''}{$user['id'] ?? '暂无'}</span></em>
                <strong>余额：<span>{$kandian}书币</span></strong>
            </div>
        </div>
    </div>
    <div class="re_main_box">
        {if isset($bookBillingTip)}
        <div class="re_vip_txt">
            <em>{$bookBillingTip}</em>
            <strong>当前书币余额不足，请充值后继续阅读</strong>
        </div>
        {/if}
        <div class="re_list_box">
            <div class="re_list_tit">
                <h2>请选择充值金额<span>（1元=100书币）</span></h2>
            </div>
            <ul class="re_list_ul">
                {foreach name="list" item="row"}
                <li {if (empty($select_goods_id) && $key == 0) || (!empty($select_goods_id) && $row.id == $select_goods_id) }class="hover"{/if}>
                <a href="javascript:;" data-goods-id="{$row.id}" data-goods-category="{$row.category_id}" data-goods-money="{$row.money|floatval}元">
                    <strong>{$row.title}</strong>
                    {if $row.type==1}
                    <em>{$row.first_description}<span>{$row.second_description}</span></em>
                    {if $row.icon}<i>{$row.icon}</i>{/if}
                    {else /}
                    <em>{$row.first_description}</em>
                    {if $row.icon}<i>{$row.icon}</i>{/if}
                    <b>{$row.second_description}</b>
                    {/if}
                </a>
                </li>
                {/foreach}
            </ul>
        </div>
        <div style="width: 100%;height: 10px;background: #F2F2F2;"></div>
        <div style="padding:15px;">
            <span class="payment_title" style="font-size:18px;">支付方式</span>
            <ul style="margin-top:15px;overflow: hidden;">
                {foreach name="pay_list" item="payinfo"}
                <li class="select_pay" style="overflow:inherit;padding-top:10px;padding-bottom:10px;border-top:solid 1px #D8D8D8;border-bottom:solid 1px #D8D8D8;">
                        <img style="width: 24px;height: 24px;float: left;margin-right:15px;" src="{$payinfo['icon']}" />
                        <span style="font-size: 15px;float:left;">{$payinfo['name']}</span>
                        <input value="{$payinfo['payment_method']}" type="radio" {if $payinfo['isdefault']}checked="checked"{/if} name="payment_id" style="float:right;" />
                </li>
                {/foreach}
            </ul>
        </div>
    </div>

    <div class="js_loading"><strong>正在加载</strong></div>
    <div class="re_rule_box">
        <p>温馨提示：</p>
        <p>1. 充值获得的书币仅限在本公司书城使用。</p>
        <p>2. 若是发现充值未到账，请先确认你登录的账号与充值的账号是否一致。</p>
        <p>3. 充值赠送的书币存在有效期，有效期为：自领取时间起， {:config('site.kandian_free_day')}天有效；消费时优先扣除赠送书币。</p>
    </div>

    <div class="re_but_box">
        {foreach name="list" item="row"}
        {if (empty($select_goods_id) && $key == 0) || (!empty($select_goods_id) && $row.id == $select_goods_id) }
        <a href="javascript:;" {if !empty($select_goods_id) && $row.id == $select_goods_id }class="check"{/if} id="pay_btn" data-money="{$row.money|floatval}" data-business_line="{$business_line}" data-goods-id="{$row.id}" data-goods-category="{$row.category_id}">立即充值：{$row.money|floatval}元</a>
        {/if}
        {/foreach}
    </div>
</div>

<div class="bind_alert_box" id="clear_alert_box">
    <div class="bind_alert_main">
        <a href="javascript:;" class="bind_alert_off"></a>
        <div class="alert_tit">
            <h2>充值成功</h2>
        </div>
        <div class="alert_but_box">
            <a href="javascript:;" class="alert_but_1">去看书</a>
        </div>

    </div>

    <div class="bind_alert_height"></div>
</div>


{/block}
{block name="footer"}{/block}
{block name="js"}
<script type="text/javascript" src="{:client_asset('/js/frontend/recharge/pay.js')}"></script>
{/block}