chat-server/qq-imsvr/view/broadcast/hangoutLayer/addLayer.html

<style type="text/css">
    /*
        浏览器重置样式
    */
    .LF,.LF *{
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        margin:0px;
        padding:0px;
        vertical-align:baseline;
        word-break:break-word;
        word-wrap:break-word;
    }
    .LF a{
        text-decoration:none;
    }
    .black-opacity-mask{
        position:fixed;
        left:0px;
        top:0px;
        width:3000px;
        height:3000px;
        margin-left:-1500px;
        margin-top:-1500px;
        z-index:-1;
        /* background-color:rgba(255,255,255,0.3); */
        background-color:transparent;
    }
    .LF__operate{
        text-align:center;
        display:-webkit-box;
        display:-ms-box;
        display:-webkit-flex;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:8px 0px;
    }
    .LF__loadmore{
        padding:0px 15px;
        flex:0 0 100px;
        color:#fff;
        background-color:#05C775;
        line-height:32px;
        font-weight:bold;
        border-radius:16px;
        user-select:none;
    }
    .LF{
        /*position:absolute;*/
        /*left:100px;*/
        /*top:40px;*/
        background-color:#05C775;
        padding:2px 0px;
        width:470px;
        z-index:9;
        border-radius:2px;
        box-shadow:0px 1px 1px 1px rgba(135,135,135,0.5);
    }

    .LF__title{
        line-height:32px;
        height:35px;
        text-align:center;
        color:#fff;
        font-size:14px;
        position: relative;
        z-index:2;
    }



    .null-data{
        padding:10px;
        line-height:1.3;
        display:-webkit-flex;
        display:flex;
        height:150px;
        color:#999;
        justify-content:center;
        text-align:center;
        align-items:center;
    }
    .LF__btn{
        padding:0px 15px;
        flex:0 0 115px;
        color:#fff;
        background-color:#05C775;
        line-height:32px;
        font-weight:bold;
        text-align:center;
        border-radius:16px;
        user-select:none;
    }
    .LF__btn.plusWidth{
        flex: 0 0 130px;
    }
    .LF__btn._2{
        flex:0 0 92px;
    }
    .LF__btn.offline{
        background-color:#66e6b0;
        color:#fff;
        display:-webkit-flex;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .LF__btn.offline ._i{
        width:12px;
        height: 7px;
        border-left:2px solid #fff;
        border-bottom:2px solid #fff;
        -webkit-transform:rotate(-35deg);
        -moz-transform:rotate(-35deg);
        -ms-transform:rotate(-35deg);
        -o-transform:rotate(-35deg);
        transform:rotate(-35deg);
        -webkit-transform-origin:34% -50%;
        -moz-transform-origin:34% -50%;
        -ms-transform-origin:34% -50%;
        -o-transform-origin:34% -50%;
        transform-origin:34% -50%;
    }
    .LF__content{
        flex:auto;
        padding:0px 15px;
        overflow:hidden;
    }
    .LF__content ._text{
        display:block;
        overflow:hidden;
        white-space:nowrap;
        -o-text-overflow:ellipsis;
        text-overflow:ellipsis;
        word-wrap:break-word;
        word-break:break-word;
        font-weight:bold;
    }
    .LF__content ._text._name{
        font-size:14px;
        color:#333;
    }
    .LF__box{
        background-color:#fff;
        font-size:12px;
        color:#666;
    }
    .LF__box ul{
        list-style:none;
    }
    .LF__box ul >li{
        width:100%;
        display:-webkit-flex;
        display:flex;
        padding:6px 12px;
        justify-content:flex-start;
        align-items:center;
        border-bottom:1px solid #ddd;
    }
    .LF__anchorphoto{
        width:44px;
        height:44px;
        flex:0 0 44px;
        border-radius:50%;
        background-repeat:no-repeat;
        background-position:center top;
        background-size:100% auto;
        background-image:url('<%=public_path%>/img/logo.png');
    }


    .HLS{
        font-size:12px;
        text-align:center;
        padding:15px 0px;
    }
    .HLS__reload{
        height:150px;
        padding:186px 0px;
    }
    .HLS__status{
        display:-webkit-flex;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        color:#6B6B6B;
        line-height:23px;
        padding:0px 20px;
        margin-bottom:20px;
    }
    .HLS__status ._t{
        text-align:left;
    }
    .HLS__status ._i{
        width:23px;
        height:23px;
        margin-right:10px;
        background:transparent url('<%=public_path%>/img/u3959.png') no-repeat center center scroll;
        background-size:23px 23px;
    }
    .HLS__btn{
        display:inline-block;
        line-height:30px;
        padding:0px 20px;
        min-width:90px;
        color:#fff;
        border-radius:14px;
        background-color:#05C775;
        -webkit-transition:all 0.3s ease-in;
        -moz-transition:all 0.3s ease-in;
        -ms-transition:all 0.3s ease-in;
        -o-transition:all 0.3s ease-in;
        transition:all 0.3s ease-in;
    }
    .HLS__btn:active{
        background-color:#eee;
    }
    .HLS__btn.loading{
        display:-webkit-flexbox;
        display:flexbox;
        display:-webkit-box;
        display:box;
        display:-webkit-inline-flex;
        display:inline-flex;
        justify-content:center;
        align-items:center;
    }
    .HLS__btn.loading:before{
        content:'';
        width:10px;
        height:10px;
        margin-right:5px;
        background:transparent url('<%=public_path%>/img/live2.gif') no-repeat center center scroll;
    }
    .LF__close{
        width:20px;
        height: 20px;
        position: absolute;
        z-index:9;
        right: 10px;
        top:9px;
        background:transparent url('<%=public_path%>/img/close.png') no-repeat center center scroll;
        background-size:20px 20px;
        display: block;
        text-indent:-9999em;
    }
    .LF__errorTips{
        position: absolute;
        z-index:11;
        color:#fff;
        font-size:12px;
        background-color:rgba(239,134,72,0.8);
        padding:8px 15px;
        line-height:1.5;
        text-align:left;
        top:37px;
        left: 0px;
        right:0px;
    }

    #wrapper {
        position: absolute;
        z-index: 1;
        top:0px;
        bottom:0px;
        left: 0;
        width: 100%;
        /*background: #ccc;*/
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }
</style>
<script src="<%=public_path%>/js/iscroll5/build/iscroll.js"></script>
<script src="<%=public_path%>/js/iscroll5/demoUtils.js"></script>
<div class="LadyFriends LF">
    <!--蒙层遮罩 start-->
    <div ref="dommask" class="black-opacity-mask"></div>
    <!--蒙层遮罩 end-->
    <!--关闭-->
    <a class="LF__close" href="javascript:void(0);">close</a>
    <h2 class="LF__title">Add new friends</h2>
    <!--错误提示-->
    <div class="LF__errorTips" style="display: none;"></div>
    <!--列表开始 start-->
    <div class="LF__box">
        <!--滚动器 start-->
        <div>
            <div>
                <%if(addFriendsList.length > 0){%>
                <div id="cao" style="height:342px; overflow:hidden;position:relative;">
                    <div id="wrapper">
                        <ul id="wrapBox">
                            <%for(var data of addFriendsList){%>
                            <li>
                                <div class="LF__anchorphoto" style="background-image:url('<%=data.avatar_img%>');"></div>
                                <div class="LF__content">
                                    <p class="_text _name"><%=data.nick_name%></p>
                                    <p class="_text"><%=data.age%>yrs / <%=data.country%></p>
                                </div>

                                <a class="LF__btn sendRequest" data-id="<%=data.friend_id%>" data-name="<%=data.nick_name%>" href="javascript:void(0);" style="<%if(data.status == 0){%>display: flex;<%}else{%>display: none;<%}%>">Send request</a>

                                <a class="LF__btn offline plusWidth requestSent" href="javascript:void(0);" style="<%if(data.status == 1){%><%}else{%>display: none;<%}%>">
                                    <span>Request sent</span><i class="_i"></i>
                                </a>

                                <a class="LF__btn Accept" data-id="<%=data.friend_id%>" data-name="<%=data.nick_name%>" href="javascript:void(0);" style="<%if(data.status == 2){%><%}else{%>display: none;<%}%>">Accept</a>

                                <a class="LF__btn offline Added" href="javascript:void(0);" style="display: none;">
                                    <span>Added</span><i class="_i"></i>
                                </a>
                            </li>
                            <%}%>
                        </ul>
                    </div>
                </div>
                <%}%>
                <!--加载更多主播-->
                <!--下载按钮 start-->
                <div class="HLS">
                    <div style="height:5px;"></div>
                    <!--下载数据-->
                    <!--loadmore-->
                    <a class="HLS__btn LoadMore" style="<%if(addFriendsList.length < step){%>display: none;<%}%>" href="javascript:void(0);" @click="loadmore">Load more</a>
                    <!--loading-->
                    <span class="HLS__btn loading" style="display: none;">Loading</span>
                    <!--五数据 reload-->
                    <div class="HLS__reload" style="<%if(addFriendsList.length != 0){%>display: none;<%}%>">
                        <div class="HLS__status">
                            <p class="_t">No friends to add yet.</p>
                        </div>
                        <!--<a class="HLS__btn" href="javascript:void(0);">Reload</a>-->
                    </div>
                    <!--网络错误 reload-->
                    <!--<div class="HLS__reload">-->
                        <!--<div class="HLS__status">-->
                            <!--<i class="_i"></i><p class="_t">Could not load your friend list.</p>-->
                        <!--</div>-->
                        <!--<a class="HLS__btn" href="javascript:void(0);" @click="neterrorReload">Reload</a>-->
                    <!--</div>-->
                    <!--其它类型按钮-->
                    <a class="HLS__btn noMoreData" style="<%if(addFriendsList.length == step || addFriendsList.length==0){%>display: none;<%}%>background-color:#F2F2F2;color:#AEAEAE;" href="javascript:void(0);">No more data</a>
                </div>
                <!--下载按钮 end-->
            </div>
        </div>
        <!--滚动器 end-->
    </div>
    <!--列表开始 end-->
</div>
<script>
    $(function(){
        var index = parent.layer.getFrameIndex(window.name);
        //自适应高度
        parent.layer.iframeAuto(index);
        $('.LF__close').click(function(){
            parent.layer.close(index);
        })
        //获取列表长度
        let addFriendsListNum = '<%=addFriendsList.length%>';
        var myScroll;
        //如果列表长度为0则不执行滚动插件
        if(addFriendsListNum > 0){
            if(addFriendsListNum >= 6){
                $('#cao').height('342px');
                myScroll = new IScroll('#wrapper', { useTransition: false, scrollbars: true, mouseWheel:true });
            }else{
                var height = addFriendsListNum * 57;
                $('#cao').height(height);
            }
            //自适应高度
            parent.layer.iframeAuto(index);
        }else{
            //自适应高度
            parent.layer.iframeAuto(index);
        }

        var page = 2;
        $(document).on('click','.LoadMore',function(){
            $('.LoadMore').hide();
            $('.loading').show();
            $.ajax({
                url: '/broadcast/hangoutLayer/addLayerAjax',
                type: 'POST',
                data: 'page='+page,
                success:function(data) {
                    if(data.errno == 0){
                        if(data.data.html == ''){
                            $('.loading').hide();
                            $('.noMoreData').show();
                        }else {
                            $('#wrapBox').append(data.data.html);
                            $('.LoadMore').show();
                            $('.loading').hide();
                            myScroll.refresh();
                            page++;
                        }
                    }
                },
                error:function(){
                    errorFun('Trouble connecting to the server. Please try again later.');
                }
            });
        });

        $(document).on('click','.sendRequest',function(){
            var that = $(this);
            var friend_id = $(this).attr('data-id');
            var anchor_name = $(this).attr('data-name');
            $.ajax({
                url: '/lady/v1/addAnchorFriend',
                type: 'POST',
                data: {userid:friend_id},
                success:function(data) {
                    if(data.errno == 0){
                        that.hide();
                        that.siblings('.requestSent').show();
                    }else if(data.errno == 16314){
                        errorFun('You are not available to add '+anchor_name+' at the moment.');
                    }else if(data.errno == 16342){
                        errorFun(''+anchor_name+' has been added as your friend.');
                        that.hide();
                        that.siblings('.Added').show();
                    }else if(data.errno == 16343){
                        errorFun('You are not available to add '+anchor_name+' at the moment.');
                        that.hide();
                        that.siblings('.requestSent').show();
                    }else{
                        errorFun('Failed to send the friend request. Please try again later.');
                    }
                },
                error:function(){
                    errorFun('Trouble connecting to the server. Please try again later.');
                }
            });
        })

        /**
         * 同意好友请求
         */
        $(document).on('click','.Accept',function(){
            var that = $(this);
            var friend_id = $(this).attr('data-id');
            var anchor_name = $(this).attr('data-name');
            $.ajax({
                url: '/lady/v1/answerAddFriend',
                type: 'POST',
                data: {friend_id:friend_id,accept:1},
                success:function(data) {
                    if(data.errno == 0){
                        that.hide();
                        that.siblings('.Added').show();
                    }else{
                        errorFun(anchor_name + '  has been added as your friend.');
                        that.hide();
                        that.siblings('.Added').show();
                    }
                },
                error:function(){
                    errorFun('Trouble connecting to the server. Please try again later.');
                }
            });
        });

        //错误提示
        function errorFun(msg){
            $('.LF__errorTips').show().text(msg);
            setTimeout(function(){
                $('.LF__errorTips').hide();
            },3000);
        };
    })
</script>