chat-server/qq-imsvr/view/broadcast/talent/pass.html

<style>
    .right-content{
        padding-top:54px!important; padding-left:0!important; width:970px!important;
    }
    .down{height: 30px;  display: block;}
    .up{height: 30px;  display: block;}
</style>
<div class="content">
    <% include ../leftBar.html %>
    <!-- right content start -->
    <div class="right-content myTalents-approved">
        <div class="pageInfo">My talents</div>
        <div id="tabs-container">
            <% include topBar.html %>

            <div class="tab">
                <div id="tab-1" class="tab-content">
                    <div class="subject">
                        <ul class="">
                            <li style="width: 190px;">Name</li>
                            <li style="width: 74px; text-align: center; margin-left:20px; margin-right: 20px;">Type</li>
                            <li style="width: 100px; text-align: center; margin-right: 30px;">Price (coin)</li>
                            <li style="width: 343px;">Description</li>
                        </ul>
                    </div>

                    <% let i=1; if(data.length){%>
                    <div class="list">
                        <% for(let val of data){%>
                        <ul id="<%=val.id%>" class="talent">
                            <li style="width: 190px; padding:0px;">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="max-width: 190px; word-break:keep-all; overflow: hidden;"><%=val.talent_name%></td>
                                    </tr>
                                </table>
                            </li>
                            <li style="width: 74px; margin-left:20px; margin-right: 20px; padding:0px;">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="width: 74px; text-align: center; word-break:keep-all;"><%=val.type%></td>
                                    </tr>
                                </table>
                            </li>
                            <li style="width: 100px; text-align: center; margin-right: 30px; padding:0px;">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="width: 100px; text-align: center; word-break:break-all;"><%=val.credit%></td>
                                    </tr>
                                </table>
                            </li>
                            <li style="width: 343px; padding:0px;">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="max-width: 343px;  word-break:keep-all; overflow: hidden;"><%=val.talent_desc%></td>
                                    </tr>
                                </table>
                            </li>
                            <li>
                                <ul>
                                    <li><a class="<%if(i==1){%> disable <%}else{%> up <%}%> up_a" href="javascript:;"><img src="<%=public_path%>/img/moveUp-icon.png" width="30" height="30" alt=""/></a></li>
                                    <li><a class="<%if(i==data.length){%> disable <%}else{%> down <%}%> down_a" href="javascript:;"><img src="<%=public_path%>/img/moveDown-icon.png" width="30" height="30" alt=""/></a></li>
                                    <li><a class="talentsDelete" href="javascript:;"><img src="<%=public_path%>/img/delete-icon.png" width="30" height="30" alt=""/></a></li>
                                </ul>
                            </li>
                        </ul>
                        <% i++;}%>
                    </div>
                    <%}else{%>
                    <div class="empty">No talents set. </div>
                    <%}%>
                </div>
            </div>
        </div>
        <div id="page" class="pagenation"></div>
    </div>
    <!-- right content end -->
</div>
<style>
    /*屏蔽加载中的图片*/
    .layui-layer-loading{display:none;}
</style>
<script>
    $(function(){
        var count_ul = '<%=i%>' - 2;//由于上面是从1开始算的
        // 向上排序
        $(document).on('click', '.up', function(){
            let sortStart = layer.load(2);
            var that = $(this);
            var $obj = $(this).parents("ul.talent");
            if($obj.index() > 0){
                var current_id  = $obj.attr('id');
                var $prev_obj = $obj.prev();
                var exchange_id  = $prev_obj.attr('id');
                $.ajax({
                    url: '/broadcast/talent/exchangeTalent',
                    type: 'POST',
                    data: 'current_id='+current_id+'&exchange_id='+exchange_id,
                    success:function(data) {
                        if(data.errno == 0){
                            if($obj.index() == 1){
                                that.removeClass('up').addClass('disable');
                            }
                            if($obj.index() == count_ul){
                                that.parent('li').next().children('a.down_a').removeClass('disable').addClass('down');
                            }
                            if($prev_obj.index() == 0){
                                $prev_obj.find('a.up_a').removeClass('disable').addClass('up');
                            }
                            if($prev_obj.index()+1 == count_ul){
                                $prev_obj.find('a.down_a').removeClass('down').addClass('disable');
                            }
                            $prev_obj.before($obj);
                            layer.close(sortStart);
                        }
                    }
                });
            }
        })

        // 向下排序
        $(document).on('click', '.down', function(){
            let sortStart = layer.load(2);
            var that = $(this);
            var $obj = $(this).parents("ul.talent");
            if($obj.index() >= 0){
                var current_id  = $obj.attr('id');
                var $prev_obj = $obj.next();
                var exchange_id  = $prev_obj.attr('id');
                $.ajax({
                    url: '/broadcast/talent/exchangeTalent',
                    type: 'POST',
                    data: 'current_id='+current_id+'&exchange_id='+exchange_id,
                    success:function(data) {
                        if(data.errno == 0){
                            if($obj.index() == 0){
                                that.parent('li').prev().children('a.up_a').removeClass('disable').addClass('up');
                            }
                            if($obj.index()+1 == count_ul){
                                that.removeClass('down').addClass('disable');
                            }
                            if($prev_obj.index() == 1){
                                $prev_obj.find('a.up_a').removeClass('up').addClass('disable');
                            }
                            if($prev_obj.index() == count_ul){
                                $prev_obj.find('a.down_a').removeClass('disable').addClass('down');
                            }
                            $prev_obj.after($obj);
                            layer.close(sortStart);
                        }
                    }
                });
            }
        })

        /**
         * 删除才能
         */
        $('.talentsDelete').on('click', function(){
            let id = $(this).parents('ul.talent').attr('id');
            parent.layer.confirm('Are you sure you wish to delete this item?', {
                btn:['Cancel', 'Yes'],
                title:'',
                btnAlign:'c',
                closeBtn: 0,
                shade:0
            }, function(){
                parent.layer.msg('Cancel Delete');
            }, function(){
                $.post('/broadcast/talent/deleteTalent',{id:id},function(data){
                    if(data.errno == 0){
                        $('#'+id).remove();
                        parent.layer.msg('deleted');
                    }else{
                        parent.layer.msg('Failed to delete');
                    }
                })
            });
        })

        //分页
        var pages = Math.ceil('<%=count.total%>'/'<%=step%>');
        if(pages>1) {
            page('page', pages);
        }
    })
</script>