book_admin/application/index/view/sf/public/tabbar.html

<div id="tabbar">
    <div class="tab_nav {if $tab_choice == 'bookshelf' }choice{/if}">
        {if condition="$showBookShelf"}
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/book/shelf')}" onclick="do_burydot($(this), 'bookshelf')">
            <div class="tab_icon bookshelf"></div>
            <div style="font-size: .1rem">书架</div>
        </a>
        {else}
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/user/recent')}" onclick="do_burydot($(this), 'bookshelf')">
            <div class="tab_icon bookshelf"></div>
            <div style="font-size: .1rem">书架</div>
        </a>
        {/if}
    </div>
    <div class="tab_nav {if $tab_choice == 'bookcity' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index')}" onclick="do_burydot($(this), 'bookcity')">
            <div class="tab_icon bookcity"></div>
            <div style="font-size: .1rem">书城</div>
        </a>
    </div>
    <div class="tab_nav {if $tab_choice == 'recharge' }choice{/if} tab_nav_recharge">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/recharge/pay')}" onclick="do_burydot($(this), 'recharge')">
            <div class="tab_icon recharge"></div>
            <div style="font-size: .1rem">充值</div>
        </a>
    </div>
    <!--<div class="tab_nav {if $tab_choice == 'rank_list' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/book/list?sex=1&type=click')}" onclick="do_burydot($(this), 'rank_list')">
            <div class="tab_icon rank_list"></div>
            <div style="font-size: .1rem">排行</div>
        </a>
    </div>-->
    <div class="tab_nav {if $tab_choice == 'my' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/user')}" onclick="do_burydot($(this), 'my')">
            <div class="tab_icon my"></div>
            <div style="font-size: .1rem">我的</div>
        </a>
    </div>
</div>
<style type="text/css">
    .footer_box{
        padding-bottom: .56rem;
    }
    /** Tab Bar **/
    #tabbar {
        width: 100%;
        position: fixed;
        bottom: 0rem;
        left: 0;
        right: 0;
        height: .46rem;
        background: #f9f9f9;
        display: flex;
        justify-content: space-around;
        padding-top: 0.05rem;
        z-index:999;
        padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
        padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    }

    .tab_nav {
        color: #B0B0B0;
        font-size: .1rem;
        text-align: center;
    }

    .tab_nav a{
        color: #B0B0B0;
    }

    .tab_nav .icon {
        width: .27rem;
        height: .268rem;
    }
    .tab_icon {
        width: 0.27rem;
        height: 0.27rem;
        background-size: .27rem, .27rem;
    }
    .choice a{
        color: #7B9DC8;
    }
    .choice .tab_icon {
        width: 0.27rem;
        height: 0.27rem;
        background: url("{:asset('/img/bookcity-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 书架 **/
    .bookshelf{
        background: url("{:asset('/img/bookshelf-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .bookshelf{
        background: url("{:asset('/img/bookshelf-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 书城 **/
    .bookcity{
        background: url("{:asset('/img/bookcity-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .bookcity{
        background: url("{:asset('/img/bookcity-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 充值 **/
    .recharge{
        background: url("{:asset('/img/money-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .recharge{
        background: url("{:asset('/img/money-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 我的 **/
    .my{
        background: url("{:asset('/img/my-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .my{
        background: url("{:asset('/img/my-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    /** 排行榜 **/
    .rank_list{
        background: url("{:asset('/img/rank-list-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .rank_list{
        background: url("{:asset('/img/rank-list-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
</style>
<script>
    
    function do_burydot(obj, idstr ='') {
        window.payStatus = localStorage.getItem('payStatus') || '0';
        // 需要满足的条件：当前在充值页，当前渠道有广告计划，要跳转到其他页，未支付，当前用户有广告计划 -->删掉：&&$('.ad-recharge-alert').find('.ad-image').length>0
        if($('.tab_nav_recharge').hasClass('choice') && idstr != 'recharge' && window.$isAdPick == '1' && window.payStatus == '0'){
            var localADData = JSON.parse(localStorage.getItem('local_AD_data'));
            var pageCode = 'charge';
            ad_welfare(localADData, pageCode);
            var dis = $('.ad_welfaregload').css('display');
            if(dis!=='none'){
                $('.closealert').unbind().bind('click',function(){
                    cpslog([702, {
                        map: {
                            page: obj.data('href'),
                            idstr: idstr,
                        }
                    }, 'tabbar']);
                    location.href = obj.data('href');
                })
                return ;
            }
            if($('.ad-recharge-alert').find('.ad-image').length>0){
                window.simpleAD.showRechargeAlert();
                $('.close').unbind().bind('click',function(){
                    cpslog([702, {
                        map: {
                            page: obj.data('href'),
                            idstr: idstr,
                        }
                    }, 'tabbar']);
                    location.href = obj.data('href');
                })
                return ;
            }
        }
        cpslog([702, {
            map: {
                page: obj.data('href'),
                idstr: idstr,
            }
        }, 'tabbar']);
        localStorage.removeItem('payStatus');
        location.href = obj.data('href');
    }
</script>