book
/
book_admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
							<style type="text/css">
    .a_pop_up{
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        white-space: nowrap;
        text-align: center;
        z-index:2;
    }
    .bg_color{
        background-color: rgba(0,0,0,.8);
    }
    .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: 4.9rem;
        padding: .3rem .2rem;
        background-color: #fff;
        border-radius: .1rem;
        box-sizing: border-box;
    }
    .pop_box_height{
        min-height: 3.2rem;
    }
    .a_pop_up_box strong{
        display: block;
        text-align: center;
        font-size: .32rem;
        color: #414141;
        line-height: .8rem;
    }
    .a_pop_up_box span{
        display: block;
        text-align: center;
        font-size: .3rem;
        color: #414141;
        line-height: .5rem;
    }
    .a_pop_up_box a{
        display: block;
        margin: .2rem .5rem;
        background-color: #ff2f10;
        font-size: .34rem;
        color: #fff;
        line-height: .8rem;
        border-radius: .06rem;
    }
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{:asset('/css/frontend/share/index.css')}">
    <title>邀请好友，关注立赚200书币</title>
    <script>
        (function(doc,win){
                var doc = doc.documentElement;
                doc.addEventListener('DOMContentLoaded', Resize, false);
                // 当DOM加载后执行
                win.addEventListener('resize', Resize, false);
                // 当屏幕发生变化时执行
                function Resize(){
                    // 规定750px宽度下，1rem = 100px
                    doc.style.fontSize=(doc.clientWidth > 1000 ? 1000 : doc.clientWidth)/7.5 +'px';
                }
                Resize()
            window.log_host = '{$log_host}';
            window.theme = '{$Think.config.template.view_theme}';
            })(document,window)
    </script>
</head>
<body>
    <!-- 首次打开页面，渲染此div -->
    <div id="init-content" class="content">
        <div class="loop-message">
            <ul>
<!--                <li>XXX0邀请了2位好友，收到2000书币</li>-->
                {foreach name="$barrage" item="vo" key="k"}
                <li>{$vo}</li>
                {/foreach}

            </ul>
        </div>
        <img class="content-item" src="{:asset('/img/frontend/share/01-1.jpg')}"/>
        <img class="content-item" src="{:asset('/img/frontend/share/01-2.jpg')}"/>
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/01-3.jpg')}"/>
            <div class="hidden-button main-button open-dialog" style="cursor: pointer"></div>
        </div>
        <div class="content-item">
            <img src="{:asset('/img/frontend/share/01-4.jpg')}"/>
            <span class="tips">发送到微信群收益最大化哟~不信来试试</span>
        </div>
        <img class="content-item" src="{:asset('/img/frontend/share/01-con-1.jpg')}"/>
        <div class="content-item activity-rules rules-1">
            {if condition="!empty($share_rules)"}
            {$share_rules}
            {else/}
            <p>
                <span class="activity-rules-dot">1</span>每邀请一位好友点击邀请链接，并首次关注公众号，您（以下或称为“邀请者”）会获得奖励200书币奖励。
            </p>
            <p>
                <span class="activity-rules-dot">2</span>您可点击“立即领取”按钮将邀请码粘贴给好友或者微信群，好友通过点击邀请链接并关注公众号，则视为您邀请好友成功。
            </p>
            {/if}
        </div>
        <img class="content-item" src="{:asset('/img/frontend/share/01-con-3.jpg')}"/>
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/01-6.jpg')}"/>
            <div class="hidden-button bottom-button open-dialog" style="cursor: pointer"></div>
        </div>
    </div>

    <!-- 已分享过渲染此div -->
    <div id="shared-cntent" class="content hide">
        <div class="loop-message">
            <ul>
                {foreach name="$barrage" item="vo" key="k"}
                <li>{$vo}</li>
                {/foreach}
            </ul>
        </div>
        <img class="content-item" src="{:asset('/img/frontend/share/02-1.jpg')}"/>
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/02-2.jpg')}"/>
            <div class="hidden-button shared-main-button open-dialog" style="cursor: pointer"></div>
        </div>
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/02-3.jpg')}"/>
            <span class="tips shared-tips">发送到微信群收益最大化哟~不信来试试</span>
        </div>
        
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/02-4.jpg')}"/>
            <!-- 已参加活动信息 -->
            <div class="shared-data">
                <!-- 已邀请好友 -->
                <div class="shared-data-item">
                    <div class="shared-data-item-title">已邀请好友</div>
                    <div class="shared-data-item-content">
                        <span class="shared-data-item-number count_num">{$data['count']}</span>
                        <span class="shared-data-item-text">人</span>
                    </div>
                </div>
                <!-- 已到账书币 -->
                <div class="shared-data-item">
                    <div class="shared-data-item-title">已到账书币</div>
                    <div class="shared-data-item-content">
                        <span class="shared-data-item-number">{$data['getKandian']}</span>
                        <span class="shared-data-item-text">书币</span>
                    </div>
                </div>
                <!-- 在途书币 -->
                <div class="shared-data-item">
                    <div class="shared-data-item-title">在途书币</div>
                    <div class="shared-data-item-content">
                        <span class="shared-data-item-number">{$data['totalKandian']-$data['getKandian']}</span>
                        <span class="shared-data-item-text">书币</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/02-5.jpg')}"/>
            <!-- 还没有邀请到好友 -->
            {if condition="empty($data['list'])"}
            <div class="no-friends">
                <img src="{:asset('/img/frontend/share/cry-guy.png')}" alt="">
                <p>
                    竟然没有好友，邀请好友关注赚立200书币，<br>还不赶快去试试？</p>
            </div>
            {else/}
            <!-- 已邀请好友 -->
            <div id="share-list" class="invited-friends">
                <!-- 已邀请但未关注公众号 -->
                {foreach name="$data['list']" item="vv" key="kk"}
                    {if condition="$vv['is_fan'] != 1"}
                        <div class="invited-friend userlist">
                            <div class="invited-friend-left">
                                <span class="invited-friend-avator"> <img src="{$vv['to_user_avatar']}"></span>
                                <span class="invited-friend-nickname">{$vv['to_user_nickname']}</span>
                            </div>
                            <div class="invited-friend-right">
                                <span class="invited-friend-no-coins open-dialog update_user" value="111" data-userid="{$vv['user_id']}" data-touserid="{$vv['to_user_id']}" style="cursor: pointer">已邀请，提醒好友</span>
                            </div>
                        </div>
                    {else/}
                        <!-- 已关注公众号 -->
                        <div class="invited-friend">
                            <div class="invited-friend-left">
<!--                                <span class="invited-friend-avator"></span>-->
                                <span class="invited-friend-avator"> <img src="{$vv['to_user_avatar']}"></span>
                                <span class="invited-friend-nickname">{$vv['to_user_nickname']}</span>
                            </div>
                            <div class="invited-friend-right">
                                <span class="invited-friend-earned-coins">+{$vv['kandian']}书币</span>
                            </div>
                        </div>
                    {/if}
                {/foreach}
                <input id="page-num" type="hidden" value="{$data['pageNum']}">
                <input id="len-num" type="hidden" value="{$data['lenNum']}">
            </div>
            {/if}
        </div>
        <input id="is_open_share" type="hidden" value="{$is_open_share}">
        <input id="to_url" type="hidden" value="{$to_url}">
        <img class="content-item" src="{:asset('/img/frontend/share/02-con-1.jpg')}"/>
        <div class="content-item activity-rules rules-2">
            {if condition="!empty($share_rules)"}
            {$share_rules}
            {else/}
            <p>
                <span class="activity-rules-dot">1</span>每邀请一位好友点击邀请链接，并首次关注公众号，您（以下或称为“邀请者”）会获得奖励200书币奖励。
            </p>
            <p>
                <span class="activity-rules-dot">2</span>您可点击“立即领取”按钮将邀请码粘贴给好友或者微信群，好友通过点击邀请链接并关注公众号，则视为您邀请好友成功。
            </p>
            {/if}
        </div>
        <img class="content-item" src="{:asset('/img/frontend/share/02-con-3.jpg')}"/>
        <div class="content-item">
            <img class="content-item" src="{:asset('/img/frontend/share/02-7.jpg')}"/>
            <div class="hidden-button bottom-button open-dialog" style="cursor: pointer"></div>
        </div>
    </div>
    <div id="share-dialog" class="share-dialog">
        <img src="{:asset('/img/frontend/share/04.png')}">
        <!-- data-clipboard-text中放置要复制的口令内容 -->
        <div class="hidden-button dialog-button" data-clipboard-text='{$content}'></div>
    </div>
    <input id="isfirst" type="hidden" value="{$data['count']}">
    <div class="a_pop_up bg_color" style="display: none">
        <div class="a_pop_up_box pop_box_height">
            <strong>活动已结束</strong>
            <span>敬请期待下次活动</span>
            <a href="{$to_url}">去看书</a>
        </div>
        <div class="a_pop_jgb"></div>
    </div>
    <script src="{:asset('/js/frontend/share/clipboard.min.js')}"></script>
    <script type="text/javascript" src="{:asset('/libs/zepto/zepto.min.js')}"></script>
    <script type="text/javascript" src="{:asset('/libs/Zepto-Cookie/zepto.cookie.min.js')}"></script>
    <script type="text/javascript" src="{:asset('/js/frontend/common.js?v=5')}"></script>
    <script type="text/javascript" src="{:asset('/js/frontend/cps_log.js')}"></script>
    <script>
        // 用户分享状态，默认为false
        var IS_SHARED = true;
        var is_open_share = $('#is_open_share').val();
        if ( is_open_share != 1 ){
            $('.a_pop_up').show();
        }

        /**
         *
        */
        function showCorrectContent() {
            var defaultContent = document.getElementById('init-content');
            var sharedContent = document.getElementById('shared-cntent');
            var isfirst = document.getElementById('isfirst');
            IS_SHARED = isfirst.value;
            console.log(IS_SHARED);
            if(IS_SHARED > 0){
                defaultContent.style.display = 'none';
                sharedContent.style.display = 'block';
            } else {
                var isfirst = $.fn.cookie('isfirst');
                if ( isfirst == 1 ){
                    defaultContent.style.display = 'none';
                    sharedContent.style.display = 'block';
                }else{
                    defaultContent.style.display = 'block';
                    sharedContent.style.display = 'none';
                }

            }
        }
        showCorrectContent()

        window.onload = function(){
            var dialog = document.getElementById('share-dialog')
            // 分享弹窗添加事件监听，允许用户手动关闭弹窗
            dialog.addEventListener('click', function(e){
                e = e || window.event
                if(e.currentTarget !== e.target) {
                    return
                }
                hideDialog()
            }, false)

            var body = document.body;
            body.addEventListener('click', function(e) {
                e = e || window.event
                var target = e.target;
                if(target.classList.contains('open-dialog')){
                    showDialog()
                }
                if(target.classList.contains('update_user')){
                    var userId = e.srcElement.getAttribute('data-userid');
                    var toUserId = e.srcElement.getAttribute('data-touserid');
                    // update_user(userId,toUserId);
                }
            }, false)
            // 实现口令添加到剪切板功能，基于clipboard.js[https://github.com/zenorocha/clipboard.js]
            var clipboard = new ClipboardJS('.dialog-button');
            // 复制成功
            clipboard.on('success', function(e) {
                e.clearSelection();
                // 复制成功后应关闭分享弹窗
                hideDialog()
                cpslog([702, {map:{share:'share_copy_click'}},'share_copy_click']);
                $('.a_pop_up_box').html("<strong style='font-size:0.35rem'>邀请口令已复制</strong>");
                $('.a_pop_up_box').removeClass('pop_box_height');
                $('.a_pop_up').removeClass('bg_color');
                $('.a_pop_up').show();
                $.fn.cookie('isfirst','1');
                window.setTimeout(function () {
                    $('.a_pop_up').hide();
                    location.reload();
                },3000);
                // TODO: 复制成功后若有其他操作，可写在这里
            });

            clipboard.on('error', function(e) {
                hideDialog()
                // console.log(e);
                // TODO: 复制失败，提醒用户重新点击按钮
            });
        }
        //提醒好友更新有效时间
        function update_user(userId,toUserId){
            var users = {};
            users.userId = userId;
            users.toUserId = toUserId;
            $.ajax({
                type:"get",
                url:"/api/share/updateUserSourceTime",
                data: users,
                success : function(result) {
                    // console.log(result);
                    if(result.code == 1 && result.msg.content != ''){
                        $('.dialog-button').attr('data-clipboard-text',result.msg.content);
                    }
                }
            })
        }
        var params = {};
        var countNum = $('.count_num').text();
        params.pageNum = $('#page-num').val();
        params.lenNum = $('#len-num').val();
        var share = $('#share-list');

        share.scroll(function () {
            var sonHeight = $('.invited-friend').height();
            var sonNum = $('.invited-friend').length;
            //判断是否滑动到底部
           if ( sonHeight * sonNum == share.height() + share.scrollTop() && params.pageNum*params.lenNum < countNum ){
               params.pageNum++;
                $.ajax({
                    type:"POST",
                    url:"/api/share/getShareList",
                    data: params,
                    success : function(result) {
                        // console.log(result.code);
                        if(result.code == 1 && result.msg != ''){

                            $.each(result.msg,function(i,n){
                                var str;
                                if(n.is_fan == 1){
                                    str += ' <div class="invited-friend userlist">';
                                    str += '<div class="invited-friend-left">';
                                    str += '<span class="invited-friend-avator" ><img src="'+n.to_user_avatar+'"> </span>';
                                    str += '<span class="invited-friend-nickname">'+n.to_user_nickname+'</span>';
                                    str += '</div> <div class="invited-friend-right">';
                                    str += '<span class="invited-friend-earned-coins">+'+n.kandian+'书币</span> </div></div>';
                                }else{
                                    str += ' <div class="invited-friend userlist">';
                                    str += '<div class="invited-friend-left">';
                                    str += '<span class="invited-friend-avator" ><img src="'+n.to_user_avatar+'"> </span>';
                                    str += '<span class="invited-friend-nickname">'+n.to_user_nickname+'</span>';
                                    str += '</div> <div class="invited-friend-right">';
                                    str += '<span class="invited-friend-no-coins open-dialog update_user" data-userid="'+n.user_id+'" data-touserid="'+n.to_user_id+'" style="cursor: pointer">已邀请，提醒好友</span> </div></div>';
                                }
                                share.append(str);
                            })
                        }
                    }
                })
            }
        })
        function share_list(){
            // console.log(share.scrollTop);
            // console.log(pageNum*share.scrollHeight);
        }
        // 显示分享弹窗
        function showDialog() {
            changeDialogStatus(true)
        }
        // 隐藏分享弹窗
        function hideDialog() {
            changeDialogStatus(false)
        }
        function changeDialogStatus(isShow) {
            var ele = document.getElementById('share-dialog'),
            classList = ele.classList
            body = document.body;
            if(isShow){
                // 防止打开弹窗后用户划动屏幕遮罩层下内容仍可滚动
                body.style.overflow = 'hidden';

                classList.add('show');
            }else{
                // 打开内容滚动
                body.style.overflow = 'auto';

                classList.remove('show')
            }
        }
    </script>
</body>
</html>