{extend name="layout/layout" /}
{block name="title"}{$res.aname}{/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">
<style type="text/css">
    html,
    body {
    background-color: {$res.bgcolor};
    }
    .a_banner{
        overflow: hidden;
    }
    .a_info_box{
        margin: 0 auto .1rem;
        padding:.17rem .16rem;
        width: 2.41rem;
        height: .94rem;
        background: url({$res.payimage}) no-repeat 0 0/100% 100%;
        box-sizing: border-box;
    }
    .a_info_text{
        text-align: center;
        overflow: hidden;
    }
    .a_info_text strong
    {
        font-size: .18rem;
    color: {$res.paycolor};
    line-height: .3rem;
    white-space: nowrap;
    }

    .a_info_text span{
        font-size: .18rem;
    color: {$res.paycolor};
    line-height: .3rem;
    white-space: nowrap;
    }
    .a_info_text span{
        margin-left: .1rem;
    }
    .a_time{
        overflow: hidden;
        margin: 0 auto .1rem;
        text-align: center;
        font-size: .13rem;
    color: {$res.atimecolor};
    line-height: .24rem;
    }
    .re_but_box{
        overflow: hidden;
        display: block;
        text-align: center;
    }
    .re_but_box a{
        margin: 0;
        padding: 0;
        border: 0;
        display:inline-block;
        height: .36rem;
        font-size: 0;
    }
    .re_but_box a img{
        margin: 0;
        padding: 0;
        border: 0;
        display: block;
        height: .36rem;
        width: auto;
    }
    .a_pay_text{
        overflow: hidden;
        margin: .16rem .16rem .24rem;
    }
    .a_pay_text h3{
        font-size: .15rem;
    color: {$res.warningcolor};
    line-height: .3rem;
    }
    .a_pay_text {
        font-size: .13rem;
    color: {$res.warningcolor};
    line-height: .24rem;
    }
    .a_pop_up{
        display:none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.8);
        white-space: nowrap;
        text-align: center;
    }
    .a_pop_up_box,
    .a_pop_jgb{
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
    .a_pop_jgb{
        margin-left: -1px;
        height: 100%;
        width: 1px;
    }

    .a_pop_up_box{
        min-width: 2.6rem;
        padding: .3rem .2rem;
        background-color: #fff;
        border-radius: .1rem;
        box-sizing: border-box;
    }
    .a_pop_up_box strong{
        display: block;
        text-align: center;
        font-size: .18rem;
        color: #414141;
        line-height: .3rem;
    }
    .a_pop_up_box span{
        display: block;
        text-align: center;
        font-size: .13rem;
        color: #414141;
        line-height: .3rem;
    }
    .a_pop_up_box a{
        display: block;
        margin: .1rem .2rem;
        background-color: #ff2f10;
        font-size: .14rem;
        color: #fff;
        line-height: .4rem;
        border-radius: .06rem;
    }

    .vry_sry{
        display:none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        overflow: hidden;
        background-color: rgba(0,0,0,.7);
        font-size: 0;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .vry_sry a,
    .vry_sry span{
        display: inline-block;
        *display: inline;
        *zoom:1;
        vertical-align: middle;
    }

    .vry_sry span{
        overflow: hidden;
        margin-left: -1px;
        height: 100%;
        width: 1px;
    }
    .vry_sry a{
        height: 3.13rem;
        width: 3.1rem;
        background: url(/assets/img/frontend/activity/btn3.png) no-repeat 0 0;
        background-size: 3.1rem 3.13rem;
    }
    .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, .bind_alert_box2{
        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"}{/block}
{block name="main"}

<div class="a_banner"><img src="{$res.bgimage}" /></div>
<div class="a_info_box">
    <div class="a_info_text"><strong>充值{$res.money|floatval}元</strong><span>{$res.warning1}</span></div>
    <div class="a_info_text"><strong>{$res.warning2}</strong></div>
</div>
<div class="a_time">活动时间：{$res.starttime|date="Y-m-d H:i",###} 至 {$res.endtime|date="Y-m-d H:i",###}</div>
<div class="re_but_box">
    {if $isGiveAct}
    <img class="img_give_act" data-api-url="{:url('index/activity/getActGiveMoney',['act_id'=>$res.activity_id,'res_id'=>$res.id])}" src="{$res.bannerimage}" />
    {else /}
    <a href="javascript:;" data-goods-id="{$res.id}" data-goods-aid="{$res.activity_id}" data-money="{$res.money|floatval}" data-goods-category="{res.classify}"><img src="{$res.bannerimage}" /></a>
    {/if}
</div>
<div class="js_loading"><strong>正在加载</strong></div>
<input type="hidden" value="{:$recent_url}" class="js_recent_url">
<div class="a_pay_text">
    <h3>温馨提示</h3>
    {$res.warning}
</div>
{if condition="$aid eq 100"}
<div class="vry_sry" {notempty name="$isRange"}style="display:block;"{/notempty}>
<a href="javascript:;"></a>
<span></span>
</div>
<input type="hidden" id="tourl" value="{:urlencode($toUrl)}" />
{else /}
<input type="hidden" id="tourl" value="{:urlencode($toUrl)}" />

<div class="a_pop_up" {notempty name="$isend"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>活动已结束</strong>
    <span>敬请期待下次活动</span>
    <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
</div>
<div class="a_pop_jgb"></div>

</div>

<div class="a_pop_up" {notempty name="$is_max_end"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>您已达到参与最大次数</strong>
    <span>敬请期待下次活动</span>
    <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
</div>
<div class="a_pop_jgb"></div>

</div>

<div class="a_pop_up" {notempty name="$needWait"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>活动即将开始</strong>
    <span>距离开始时间：{notempty name="$lastTime"}{$lastTime}{/notempty}</span>
    <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
</div>
<div class="a_pop_jgb"></div>

</div>

<div class="a_pop_up" {notempty name="$isRange"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>抱歉，您不符合活动要求</strong>
    <span>敬请期待下次活动</span>
    <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
</div>
<div class="a_pop_jgb"></div>
</div>


{/if}

<div class="bind_alert_box2" id="clear_alert_box2">
    <div class="bind_alert_main">
        <a href="javascript:;" class="bind_alert_off"></a>
        <div class="alert_tit">
            <h2>领取成功</h2>
            {if isset($the_max_time)}<span>最多可领取{$the_max_time}次</span>{/if}
        </div>
        <div class="alert_but_box">
            <a href="javascript:;" class="alert_but_1">去看书</a>
        </div>

    </div>

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

<input type="hidden" id="choose_pay_method" name="choose_url" value="{:buildAppUrl('dialog', ['url' => '/clientweb/index/paymethodselect?goods_id='.$goods_id.'&aid='.$aid])}">
{/block}
{block name="js"}
<script>
    var isLogin ="{$is_login ? '1' : '0'}";
    $(function () {
        $(document).on("click", ".re_but_box" ,function () {
            if (isLogin == '0') {
                if (window.cps !== undefined) {
                    window.cps.checkToLogin('{}', "dialogPayMethod");
                }
            } else {
                dialogPayMethod();
            }
        });
    });

    //拉起支付
    function dialogPayMethod() {
        var url = decodeURIComponent($("#choose_pay_method").val());

        if (window.cps !== undefined) {
            //关闭
            window.cps.dismissDialogWebView();
            var urlJsonStr = JSON.stringify({"uri":url});
            window.cps.toAppPage(urlJsonStr);
        }
    }
</script>
{/block}