{extend name="layout/layout" /}
{block name="title"}充值{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{: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({: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>

<style>
    .dialoge_bg { position: fixed; left:0; top:0; right:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index: 1; display: none}
    .dialoge_main_div {position: fixed; top:50%; left:50%; margin:-1.655rem 0 0 -1.5125rem; width:3.025rem; height:3.31rem; z-index: 2;}

    .dialoge_main_div .h3 {position:absolute; top:0; left:0; width:100%; height:0.46rem; background:url({:asset('/img/frontend/recharge/pop-tit-bk.png')}) no-repeat center; background-size:2.725rem;
    padding-top:.16rem;
    font-size:0.175rem;
    font-family:PingFang-SC-Bold,PingFang-SC;
    font-weight:bold;
    color:rgba(81,61,61,1);
    text-align: center;
    z-index: 3;
    }
    .dialoge_main { position: relative; margin-top:.395rem;padding-top:.28rem; width:3.025rem; height:2.17rem; background:#fff; border-radius:0.115rem; text-align: center;}

    .suc_ico { margin:0 auto; width:.96rem;}
    .suc_p1 {font-size:.125rem;font-family:PingFangSC-Regular,PingFang SC;color:rgba(184,190,204,1);line-height:.18rem;text-align: center;}
    .dialoge_main .suc_btn_look {
        position:absolute; left:50%; bottom:.19rem;  margin-left:-1.2375rem;
        display:block; width:2.475rem;height:.365rem;line-height:.365rem;background:rgba(255,180,115,1);border-radius:.18rem;color:#fff;}
    .suc_close { position: absolute; right:0; top:-0.4rem; margin-left:-0.13rem; width:.26rem;}
    .suc_close img {width:.26rem;}
</style>
<link href="{:asset('/css/frontend/ad/image.css')}" rel="stylesheet" type="text/css">
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu"}
<!-- 广告三期宝藏弹窗 -->
<div class="ad_welfare_toast">
	恭喜获得xx书币
</div>
<div class="ad_welfaregload ad_welfare">
    <div>
        <img class="closealert" src="{:asset('/img/close.png')}" />
        <img class="ad_welfareclick" src="{:asset('/img/frontend/imgages/gold.png')}" />
    </div>
</div>
<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,'/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,'/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,'/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,'/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,'/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,'/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,'/index/user/recent')}">最近阅读</a>
            </div>
            <input type="hidden" active-id="{$active_id}" 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">
        <div class="re_user_info_box">
            <div class="re_user_info">
                <em>ID：<span>{$site['theme']??''}{$user['id'] ?? '暂无'}</span></em><span class="line-css">|</span>
                <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 $default_goods.id == $row.id }class="hover"{/if}>
                <a href="javascript:;" data-goods-id="{$row.id}" data-goods-category="{$row.category_id}"
                   {if !empty($row.activity_id)} data-activity-id="{$row.activity_id}"{/if} data-goods-money="{$row.money|floatval}元">
                    <strong>{$row.title}</strong>
                    <em>{if empty($row.first_description)} &nbsp;{else/}{$row.first_description}{/if}</em>
                    {if $row.icon}<i>{$row.icon}</i>{/if}
                    <b>{if empty($row.second_description)} &nbsp;{else/}{$row.second_description}{/if}</b>
                </a>
                </li>
                {/foreach}
            </ul>
            <div class="re_but_box">
                <a href="javascript:;" id="pay_btn" {if $default_goods.id == $select_goods_id}class="check"{/if}
                data-money="{$default_goods.money|floatval}" data-business_line="{$business_line}" data-activity-id="{$default_goods.activity_id}"
                data-goods-id="{$default_goods.id}" data-goods-category="{$default_goods.category_id}">立即充值：{$default_goods.money|floatval}元
                </a>
            </div>
        </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>
        <p>4. 充值获得的书币或看点为虚拟货币，一般不可退换，但法律或协议另有规定的除外。 </p>
        <p>5. 未满18周岁的未成年人应在法定监护人同意下进行充值。</p>
        <p>6.点击充值即表示您已阅读并同意<a href="{:asset('/html/user_agg.html')}" style="color: black">《用户协议》</a>、<a href="{:asset('/html/vip.html')}" style="color: black">《VIP会员服务协议》</a> 和<a href="{:asset('/html/yinsi.html')}" style="color: black">《隐私策略》</a>。</p>
    </div>
    {if condition="$is_show_tabbar" }
    <div style="padding-bottom: .56rem"></div>
    {include file="public/tabbar" /}
    {/if}

</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>

<div class="dialoge_bg">
    <div class="dialoge_main_div">
        <h3 class="h3" style="background:url({:asset('/img/frontend/recharge/pop-tit-bk.png')}) no-repeat center;background-size:2.725rem;">已充值成功</h3>
        <div class="dialoge_main">
            <img class="suc_ico" src="{:asset('/img/frontend/recharge/pic-delayed.png')}">

            <p class="suc_p1">书币到账可能存在短暂延迟，<br>请稍后刷新继续阅读！</p>
            <a class="suc_btn_look" style="background:#77a4ff;" href="javascript:;">去看书</a>
        </div>
        <a class="suc_close" href="javascript:;"><img src="{:asset('/img/frontend/recharge/close.png')}"></a>
    </div>
</div>
<div class="ad-recharge-alert">
    <div class="ad-recharge-alert-contain">
        <div class="close"></div>
        <div class="ad_position_10"></div>
    </div>
</div>
{/block}
{block name="footer"}{/block}
{block name="js"}
<script>

</script>
<script type="text/javascript" src="{:asset('/js/frontend/recharge/pay.js')}"></script>
<!-- 多条广告如下脚本只需引入一次 -->
{if condition="$isAdPick"}
    {include file="public/ad_common_js"}
    <script type="text/javascript" src="{:asset('/js/frontend/ad/ad_welfare.js')}"></script>
{/if}
<script>
    window.$isAdPick = '{$isAdPick}'
    window.$adLatestVersion = '{$ad_latest_version}'
    window.payStatus = '0'
	$(function(){
		window.$isAdPick == '1' && window.simpleAD.render(window.AD_PAGE_CODE.CHARGE)
	})
</script>
{/block}