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

<style>
    .right-content{
        padding-top:54px!important; padding-left:0!important; width:970px!important;
    }
    .editAlbum{background: rgba(255,255,255,0.40); height: 40px; position: absolute; font-size: 13px; display: none;}
    .editAlbumLock{float: left; width: auto; margin-top: 10px; margin-left: 10px; height: 30px; border: none; cursor: pointer;}
    .editAlbumLockText{float: left; color: #000000; margin-top: 3px;}
    .editAlbumDelete{float: right; width: auto; margin-top: 10px; margin-right: 10px; height: 30px; cursor: pointer;}
</style>
<div class="content">
    <% include ../leftBar.html %>
    <!-- right content start -->
    <div class="right-content myAlbum-underReview">
        <div class="pageInfo">My Album</div>
        <% include topBar.html %>
        <%if(anchor_album.data.length){%>
        <div class="covers-photos albumList">
            <ul>
                <% for(let val of anchor_album.data){ %>
                    <%if(val.type == 1){%>
                    <li id="<%=val.id%>" class="MyAlbum">
                        <div><img src="<%=val.imgThumb%>" alt=""/></div>
                        <div class="showOriginalBtn showOriginal cursor" data-img="<%=val.img%>"><img src="<%=public_path%>/img/u567.jpg" width="32" height="32" alt=""/></div>
                        <div class="editAlbum editAlbumToggle">
                            <div class="editAlbumLock Lock" data-privacy="<%=val.is_private%>" style="width: auto;height: 30px;border: none;">
                                <img class="editAlbumLockImg" style="width: 20px; height: 20px; float: left;" src="<%=public_path%>/img/u182.png" alt=""/>
                                <a class="editAlbumLockText" href="javascript:;">
                                    <%if(val.is_private == 0){%>
                                    Lock
                                    <%}else{%>
                                    Unlock
                                    <%}%>
                                </a>
                            </div>
                            <div class="editAlbumDelete">
                                <img style="width: 20px; height: 20px; float: left;" src="<%=public_path%>/img/u155.png" alt=""/>
                                <a style="float: left; color: #000000; margin-top: 2px;" class="operating_delete" href="javascript:;">Delete</a>
                            </div>
                        </div>
                        <!--<div class="dec Ellipses" title="<%=val.file_desc%>"><%=val.file_desc%></div>-->
                        <%if(val.is_private == 1){%>
                        <div class="lock-icon"><img src="<%=public_path%>/img/u182.png" alt=""/></div>
                        <%}%>
                    </li>
                    <% }else if(val.type == 2){%>
                    <li id="<%=val.id%>" class="MyAlbum">
                        <div><img src="<%=val.imgThumb%>" alt=""/></div>

                        <div class="editAlbum editAlbumToggle">
                            <div class="editAlbumLock Lock" data-privacy="<%=val.is_private%>" style="width: auto;height: 30px;border: none;">
                                <img class="editAlbumLockImg" style="width: 20px; height: 20px; float: left;" src="<%=public_path%>/img/u182.png" alt=""/>
                                <a class="editAlbumLockText" href="javascript:;">
                                    <%if(val.is_private == 0){%>
                                    Lock
                                    <%}else{%>
                                    Unlock
                                    <%}%>
                                </a>
                            </div>
                            <div class="editAlbumDelete">
                                <img style="width: 20px; height: 20px; float: left;" src="<%=public_path%>/img/u155.png" alt=""/>
                                <a style="float: left; color: #000000; margin-top: 2px;" class="operating_delete" href="javascript:;">Delete</a>
                            </div>
                        </div>
                        <!--<div class="dec Ellipses" title="<%=val.file_desc%>"><%=val.file_desc%></div>-->
                        <div class="video" data-status="<%=val.video_file_status%>" data-video="<%=val.video%>"><img src="<%=public_path%>/img/u206.png" width="22" height="31" alt=""/></div>
                        <%if(val.is_private == 1){%>
                        <div class="lock-icon"><img src="<%=public_path%>/img/u182.png" alt=""/></div>
                        <%}%>
                    </li>
                    <% }else if(val.type == 3){%>
                    <li id="<%=val.id%>" class="MyAlbum">
                        <div class="editAlbumToggle" style="background: rgba(255,255,255,0.40); position: absolute; display: none; height: 40px; bottom: 0px; border: none;">
                            <div class="editAlbumTextDelete" style=" height: 30px; width: 70px; margin: 10px auto 0px;;">
                                <img style="width: 20px; height: 20px; float: left" src="<%=public_path%>/img/u155.png" alt=""/>
                                <a style="color: #000000; margin-top: 2px; float: left" class="operating_delete" href="javascript:;">Delete</a>
                            </div>
                        </div>


                        <table width="225" height="200" border="0" style="word-break:break-all;">
                            <tbody>
                            <tr>
                                <td align="center" valign="middle" title="<%=val.file_desc%>"><%=val.file_desc%></td>
                            </tr>
                            </tbody>
                        </table>
                    </li>
                    <% }%>
                <% }%>
            </ul>
        </div>
        <div class="tips">* Drag photo to reposition.</div>
        <%}else{%>
        <div class="noData">No photos approved.</div>
        <%}%>
        <div id="page" class="pagenation"></div>
    </div>
    <!-- right content end -->
</div>

<script>
    $(function(){
        /*设置公开和隐私*/
        $('.Lock').on('click', function(){
            var that = $(this);
            var id = that.parents('li.MyAlbum').attr('id');
            var privacy = that.attr('data-privacy');
            if(privacy == 1){
                privacy = 0;
            }else{
                privacy = 1;
            }
            $.post('/broadcast/albumLayer/setPrivacy', {id:id, privacy:privacy}, function(data){
                if(data.errno == 0){
                    window.location.reload();
                }else{
                    myParentAlert('Setup failed');
                }
            })
        })

        var count = parseInt('<%=anchor_album.count[0].total%>');
        /*删除相册*/
        $('.operating_delete').on('click', function(){
            if(count < 6){
                myParentAlert('Can not delete when there are less than 6 photos.');
                return false;
            }
            var id = $(this).parents('li.MyAlbum').attr('id');
            parent.layer.confirm('Are you sure you wish to delete this photo?', {
                btn:['Cancel', 'Yes'],
                title:'',
                btnAlign:'c',
                closeBtn: 0,
                shadeClose:true,
                shade:0.01
            }, function(){
                parent.layer.msg('Cancel Delete');
            }, function(){
                $.post('/broadcast/albumLayer/deleteAlbum', {id:id}, function(data){
                    if(data.errno == 0){
                        count = count-1;
                        window.location.reload();
                        parent.layer.msg('deleted');
                    }else{
                        myParentAlert('Failed to delete');
                    }
                })
            });
        });

        //显示修改和删除
        $('.MyAlbum').mouseenter(function(){
            $(this).find('div.editAlbumToggle').stop();
            $(this).find('div.editAlbumToggle').slideDown(300);
        })
        $('.MyAlbum').mouseleave(function(){
            $(this).find('div.editAlbumToggle').stop();
            $(this).find('div.editAlbumToggle').slideUp(300);
        })
        //分页
        var pages = Math.ceil('<%=anchor_album.count[0].total%>'/'<%=step%>');
        if(pages>1) {
            page('page', pages);
        }
    })
</script>