knowledge/view/js/index.js

$(document).ready(function () {
    var imgurl = ''
    var tabActive = '1';
    var cur_editdata = {}; //当前编辑数据
    var vediourl = ''

    $('.radio-wrap').on('click', '.radio_box input', function () {
        var radio_val = $(this).attr('value')
        $('.edit-input').val('')
        if (radio_val == '1') {
            $('.normal-form').hide()
            $('.common-input').html('录入信息')
            $('.normal-input').removeClass('h74')
        } else {
            $('.common-input').html('回答信息')
            $('.normal-input').addClass('h74')
            $('.normal-form').show()
        }
        $('.radio-wrap .radio_box').removeClass('radio_box_active');
        $(this).parent().addClass('radio_box_active');
    })

    //编辑 打开弹框
    $('#data-list').on('click', '.list_item_top_r', function () {
        $('.preview').html('')
        var cur_id = $(this).attr('id');
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_weibo_detail',
            data: {
                id:cur_id
            },
            success: function (res) {
                if(!res.status){
                    alert(`请求失败`);
                }

                $('.edit-input').val('')
                $('.radio-form').hide();
                $('.normal-form').hide();
                $('.answer-input').val(res.data.text);
                $('.char-count').text(res.data.text.length + '/100');

                if ($('.modal').hasClass('addmodal')) {
                    $('.modal').removeClass('addmodal')
                    $('.modal').addClass('editmodal')
                } else {
                    $('.modal').addClass('editmodal')
                }
                $('#header_title').html('编辑');
                // $('.edit-input').show();
                $('.img_list2').html('')
                $('.img_list2').show()
                imagesHTML1 = ''
                renderImages(res.data)
                $('.modal, .modal-overlay').fadeIn();
            }
        })
    })
    // 打开弹框
    $('.addNewBtn').click(function () {
        $('.preview').html('')
        $('.edit-input').val('')
        $('.radio-form').show();
        $('.img_list2').html('')
        $('.img_list2').hide()
        imagesHTML1 = ''
        var radio_val = $('.radio-wrap').find('.radio_box_active input').val();
        if (radio_val == '1') {
            $('.answer-form').hide()
            $('.common-input').html('录入信息')
            $('.normal-input').removeClass('h74')

        } else {
            $('.answer-form').show()
            $('.normal-input').addClass('h74')
            $('.common-input').html('提问信息')
        }
        if ($('.modal').hasClass('editmodal')) {
            $('.modal').removeClass('editmodal')
            $('.modal').addClass('addmodal')
        } else {
            $('.modal').addClass('addmodal')
        }

        $('#header_title').html('新增自录入')
        $('.modal, .modal-overlay').fadeIn();
    });
    var imagesHTML1 = ''

    function renderImages(item) {
        $('#id').val(item.id)
        if (item.pic_arr) {
            item.pic_arr.forEach(image => {
                imagesHTML1 += `
                    <div class="small-image">
                        <span class="small-image-desc">图片</span>
                        <img src="${image}" alt="Small Image">
                        <img class="delete-btn" src="../images/delete-icon.svg" alt="Small Image">
                    </div>
                `;
            });
        } else if (item.video_url) {
            imagesHTML1 += `
                <div class="small-video-cover"  href="${v.video_url}">
                    <span class="small-image-desc">视频</span>
                    <img class="small-video-show" src="${v.video_cover}" alt="Video Cover">
                    <img src="../images/play.svg" class="play-video" alt="...丢了">
                    <img class="delete-btn" src="../images/delete-icon.svg" alt="Small Image">
                </div>
            `;
        }
        $('.img_list2').html(imagesHTML1)
    }

    // 关闭弹框
    $('#cancel, .modal-overlay').click(function () {
        $('.modal, .modal-overlay').fadeOut();
        $('.edit-input').val('')
        $('.wordNum').html('0/100')
    });
    $('#close_modal').click(function () {
        $('.modal, .modal-overlay').fadeOut();
        $('.edit-input').val('')
        $('.wordNum').html('0/100')
    });

    // 上传图片
    $('#upload-image-btn').click(function () {
        $('#upload-image').click(); // 触发文件选择
    });

    $('#upload-image').change(function (e) {
        const files = e.target.files;
        for (let i = 0; i < files.length; i++) {
            uploadFile(files[i], 'image');
        }
    });

    // 上传视频
    $('#upload-video-btn').click(function () {
        $('#upload-video').click(); // 触发文件选择
    });

    $('#upload-video').change(function (e) {
        const files = e.target.files;
        for (let i = 0; i < files.length; i++) {
            uploadFile(files[i], 'video');
        }
    });

    // 文件上传函数
    function uploadFile(file, type) {
        const item = $(`
            <div class="item">
                <div class="upload_name">上传中...</div>
                <div class="progress-bar">
                    <div class="progress"></div>
                </div>
                <div class="status uploading">上传中...</div>

            </div>
        `);
        $('.preview').append(item);
        // 模拟上传过程
        const formData = new FormData();
        formData.append('file', file);
        // 模拟接口上传
        $.ajax({
            url: 'http://zq.pengda.checkcopy.com//upload_file', // 模拟接口地址
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                console.log(file,'=====file');
                var xhr = $.ajaxSettings.xhr();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        const percent = Math.ceil((e.loaded / e.total) * 100);
                        item.find('.progress').css('width', percent + '%');
                        item.find('.upload_name').html(`<span class="upload_file_name">${file.name}</span>` + percent + '%');
                    }
                }, false);
                return xhr;
            },
            success: function (response) {
                res = JSON.parse(response)
                item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功');
                item.find('.progress-bar').addClass('hide'); // 隐藏进度条
                item.find('.upload_name').addClass('hide'); // 隐藏进度条
                const reader = new FileReader();
                reader.onload = function (event) {
                    if (type === 'image') {
                        item.prepend(` <div class="small-image">
                        <span class="small-image-desc">图片</span>
                        <img src="${event.target.result}" alt="Small Image">
                <img class="delete-btn" src="../images/delete-icon.svg" alt="Small Image">
                    </div>`);
                    } else if (type === 'video') {
                        // 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位
                        item.prepend(` <div class="small-video-cover"  href="">
                <span class="small-image-desc">视频</span>
                <img class="small-video-show" src="${event.target.result}" alt="Video Cover">
                <img src="../images/play.svg" class="play-video" alt="...丢了">
                <img class="delete-btn" src="../images/delete-icon.svg" alt="Small Image">
                </div>`);
                    }
                };
                reader.readAsDataURL(file);
                    return
                if (res.status) {
                    item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功');
                    item.find('.progress-bar').addClass('hide'); // 隐藏进度条
                    item.find('.upload_name').addClass('hide'); // 隐藏进度条
                    const reader = new FileReader();
                    reader.onload = function (event) {
                        if (type === 'image') {
                            item.prepend(` <div class="small-image">
                            <span class="small-image-desc">图片</span>
                            <img src="${event.target.result}" alt="Small Image">
                    <img class="delete-btn" src="../images/delete-icon.svg" alt="Small Image">
                        </div>`);
                        } else if (type === 'video') {
                            // 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位
                            item.prepend(` <div class="small-video-cover"  href="">
                    <span class="small-image-desc">视频</span>
                    <img class="small-video-show" src="${event.target.result}" alt="Video Cover">
                    <img src="../images/play.svg" class="play-video" alt="...丢了">
                    <img class="delete-btn" src="../images/delete-icon.svg" alt="Small Image">
                    </div>`);
                        }
                    };
                    reader.readAsDataURL(file);
                }else{
                    console.log(res,'response.info---');
                    item.find('.upload_name').html(`<span class="upload_file_name">${file.name}</span>` +res.info);
                    item.find('.status').removeClass('uploading').addClass('failed').text('上传失败');
                }
            },
            error: function () {
                item.find('.status').removeClass('uploading').addClass('failed').text('上传失败');ç
            }
        });
    }

    // 删除功能
    $('.img_list2').on('click', '.delete-btn', function () {
        $(this).parent().remove();
        // 请求借口
        // $.ajax({
        //     type: "post",
        //     dataType: 'json',
        //     url: '',
        //     data: {
        //         type
        //     },
        //     success: function (res) {}
        // })
    });
    $('.preview').on('click', '.delete-btn', function () {
        $(this).parent().parent().remove();
        // 请求借口
        // $.ajax({
        //     type: "post",
        //     dataType: 'json',
        //     url: '',
        //     data: {
        //         type
        //     },
        //     success: function (res) {}
        // })
    });
    // 三个按钮操作


    // viedo
    // 点击小版视频封面图时放大
    $('#data-list').on('click', '.list_item .small-video-cover', function () {
        console.log($(this), '900000');
        vediourl = $(this).attr('href')
        console.log(vediourl, '------8988989');
        // $('#large-viedo-url').attr('src', vediourl)
        var dom = document.getElementById('large-viedo-url')
        dom.src = vediourl
        $('#large-video-container').fadeIn(); // 显示放大后的视频容器
        $('#large-video').get(0).load(); // 播放视频
        setTimeout(() => {
            $('#large-video').get(0).play(); // 播放视频
        }, 500);
    });

    // 点击关闭按钮时关闭放大视频
    $('#close-btn').click(function () {
        $('#large-video').get(0).pause(); // 暂停视频
        $('#large-video-container').fadeOut(); // 隐藏放大后的视频容器
    });

    // 图片
    $('#data-list').on('click', '.list_item .small-image', function () {
        imgurl = $(this).find('img').attr('src')
        $('#large-image').attr('src', imgurl)
        $('#large-image-container').fadeIn(); // 显示放大后的图片容器
    });

    // 点击关闭按钮时关闭放大图片
    $('#close-btn2').click(function () {
        $('#large-image-container').fadeOut(); // 隐藏放大后的图片容器
    });

    // 点击背景区域时关闭放大图片
    $('#large-image-container').click(function (e) {
        if (e.target === this) {
            $('#large-image-container').fadeOut(); // 隐藏放大后的图片容器
        }
    });

    $('.dropdown-toggle').click(function () {
        const dropdownPanel = document.querySelector('.dropdown-panel');
        const icon = document.querySelector('.icon');
        // 切换面板的显示/隐藏
        if (dropdownPanel.style.display === 'block') {
            dropdownPanel.style.display = 'none';
            icon.classList.remove('rotate'); // 移除旋转效果
        } else {
            dropdownPanel.style.display = 'block';
            icon.classList.add('rotate'); // 添加旋转效果
        }
    })

    // 点击页面其他区域关闭面板
    document.addEventListener('click', (event) => {
        const dropdown = document.querySelector('.dropdown');
        const dropdownPanel = document.querySelector('.dropdown-panel');
        const icon = document.querySelector('.icon');

        // 如果点击的区域不在 Dropdown 内，则关闭面板
        if (!dropdown.contains(event.target)) {
            dropdownPanel.style.display = 'none';
            icon.classList.remove('rotate');
        }
    });
    var status = 0;
    var currentPage = 1; // 定义变量，用于存储当前的页码
    var pageSize = 20; // 定义变量，用于存储当前页条数

    // 当文档加载完成后执行以下函数
    function renderList() {
        function createPagination(currentPage, totalPages) {
            var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码

            // 如果当前页不是第一页，则生成一个“上一页”按钮
            // if (currentPage > 1) {
            paginationHtml += "<li>&lt;</li>";
            // }

            // 始终显示第一页的页码
            paginationHtml += generatePageNumberHtml(1, currentPage);

            // 如果总页数大于1页，则继续生成分页条的其余部分
            if (totalPages > 1) {
                // 如果当前页码大于3，则在第一页和当前页之间添加省略号
                if (currentPage > 3) {
                    paginationHtml += "<li>...</li>";
                }
                // 遍历当前页附近的页码，并生成对应的分页按钮
                for (
                    let i = Math.max(currentPage - 2, 2); i <= Math.min(currentPage + 2, totalPages - 1); i++
                ) {
                    paginationHtml += generatePageNumberHtml(i, currentPage);
                }
                // 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号
                if (currentPage < totalPages - 2) {
                    paginationHtml += "<li>...</li>";
                }
            }

            // 始终显示最后一页的页码
            paginationHtml += generatePageNumberHtml(totalPages, currentPage);

            // 如果当前页不是最后一页，则生成一个“下一页”按钮
            if (currentPage < totalPages) {
                paginationHtml += "<li>&gt;</li>";
            }

            // 返回生成的分页条HTML字符串
            return paginationHtml;
        }
        // 创建分页条的函数

        // 生成单个页码按钮的HTML的函数
        function generatePageNumberHtml(pageNumber, currentPage) {
            // 返回一个格式化后的HTML字符串，包含激活状态的判断
            return (
                '<li class="' +
                (pageNumber === currentPage ? "pagActive" : "") +
                '">' +
                pageNumber +
                "</li>"
            );
        }

        // 选择页码的函数
        function selectPage(pageNumber) {
            // 更新当前页码的变量，并重新生成分页条
            currentPage = pageNumber;
            $("#pagination").html(createPagination(currentPage, totalPages));
        }

        // 为分页条上的每个按钮绑定点击事件
        $("#pagination").on("click", "li", function (event) {
            let pageNumber = $(this).text(); // 获取点击的页码或按钮文本

            // 如果点击的是省略号，则不执行任何操作
            if (pageNumber === "...") {
                event.preventDefault();
                return;
            }

            // 根据点击的按钮，调用selectPage函数更新当前页码
            if (pageNumber === "<") {
                if (currentPage < 2) {
                    return
                }
                selectPage(currentPage - 1);
            } else if (pageNumber === ">") {
                // if(currentPage <2){
                //     return
                // }
                selectPage(currentPage + 1);
            } else {
                selectPage(parseInt(pageNumber));
            }
        });

        // 初始化分页条，总页数为20，默认显示第一页
        $("#pagination").html(createPagination(currentPage, totalPages));
    }

    var totalPages = 0;

    function getRenderData(){
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_weibo_list',
            data: {
                status,
                currentPage,
                pageSize
            },
            success: function (res) {
                if(!res.status){
                    alert(`请求失败`);
                }

                renderData(res.data)
            }
        })
    }
    // 渲染数据
    function renderData(data) {
        totalPages = data.last_page;
        var pageData = data.list

        // 清空列表
        document.documentElement.scrollTop = 0; // 适用于 HTML
        document.body.scrollTop = 0; // 适用于 Safari
        $('#data-list').empty();
        renderList()

        var html1 = '';
        // 渲染当前页数据
        pageData.forEach(item => {
            let imagesHTML = '';
            if (item.pic_arr.length>0) {
                item.pic_arr.forEach(image => {
                    imagesHTML += `
                        <div class="small-image">
                            <span class="small-image-desc">图片</span>
                            <img src="${image}" alt="Small Image">
                        </div>
                    `;
                });
            } else if (item.video_url) {
                imagesHTML += `
                        <div class="small-video-cover"  href="${item.video_url}">
                            <span class="small-image-desc">视频</span>
                            <img class="small-video-show" src="${item.video_cover}" alt="Video Cover">
                            <img src="../images/play.svg" class="play-video" alt="...丢了">
                        </div>
                    `;
            }
            html1 += `<div class="list_item ">
                    <div class="list_item_top flex">
                        <div class="list_item_top_l">
                            <span class="${item.wid != '' ? 'green' : 'blue'}">${item.wid != '' ? '微博' :'自录入'}</span>
                            ${item.refer ? `<b>${item.refer}</b>` :''}
                            <span class="name">` + item.name + `</span>
                            <span>录入：` + item.created_at + `</span>
                        </div>
                        ${
                            tabActive == '1' ? `<div class="list_item_top_r" id="${item.id}"><img src="../images/edit.svg" alt="">编辑</div>` :''
                        }
                       
                    </div>
                    <p class="desc_text">
                    ${item.text}
                    </p>
                    <!-- 图片合集 -->
                    <div class="img_list">
                    ${imagesHTML}
                    </div>
                    <div class="flex btngroups">
                    ${tabActive == '1' || tabActive == '2' ? '<button data-id="'+item.id+'" class="button button-normal deleteBtn">删除</button>' : ''} 
                    ${tabActive == '1' ? '<button data-id="'+item.id+'" class="button button-primary passBtn">通过</button>' : ''} 
                    ${tabActive == '3' || tabActive == '2' ? '<button data-id="'+item.id+'" class="button button-normal checkBtn">恢复待审批</button>' : ''} 
                    </div>
                </div>`
            $('#data-list').html(html1);
        });

        // 渲染分页按钮
        renderPagination();
    }

    // 渲染分页按钮
    function renderPagination() {
        const pageNumbers = $('#page-numbers');
        pageNumbers.empty();

        // 总页数小于等于 7 时，显示所有页码
        if (totalPages <= 7) {
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
            }
        } else {
            // 总页数大于 7 时，显示部分页码并用省略号代替
            if (currentPage <= 4) {
                // 前 5 页 + 省略号 + 最后一页
                for (let i = 1; i <= 5; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
                pageNumbers.append('<span>...</span>');
                pageNumbers.append(`<span>${totalPages}</span>`);
            } else if (currentPage >= totalPages - 3) {
                // 第一页 + 省略号 + 最后 5 页
                pageNumbers.append('<span>1</span>');
                pageNumbers.append('<span>...</span>');
                for (let i = totalPages - 4; i <= totalPages; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
            } else {
                // 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
                pageNumbers.append('<span>1</span>');
                pageNumbers.append('<span>...</span>');
                for (let i = currentPage - 2; i <= currentPage + 2; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
                pageNumbers.append('<span>...</span>');
                pageNumbers.append(`<span>${totalPages}</span>`);
            }
        }

        // 绑定页码点击事件
        pageNumbers.find('span').click(function () {
            const page = parseInt($(this).text());
            if (!isNaN(page)) {
                currentPage = page;
                getRenderData();
            }
        });

        if(totalPages>0){
            $(".pagination").removeClass('hide');
        }else{
            $(".pagination").addClass('hide');
        }
    }

    // 初始化渲染
    getRenderData();

    // 上一页
    $('#prev-page').click(function () {
        if (currentPage > 1) {
            currentPage--;
            getRenderData();
        }
    });

    // 下一页
    $('#next-page').click(function () {
        if (currentPage < totalPages) {
            currentPage++;
            getRenderData();
        }
    });

    // 跳转到指定页
    $('#go-to-page').click(function () {
        const page = parseInt($('#jump-to-page').val());
        if (page >= 1 && page <= totalPages) {
            currentPage = page;
            getRenderData();
        } else {
            alert(`请输入有效的页码（1-${totalPages}）`);
        }
    });

    $('.index-nav-wrap-li').click(function () {
        status = 0;
        tabActive = $(this).attr('type');
        switch (tabActive) {
            case '1':
                status = 0
                break
            case '2':
                status = 1
                break
            case '3':
                status = 2
                break
        }
        currentPage = 1;
        $('.index-nav-wrap-li span').removeClass('active')
        $(this).find('span').addClass('active')
        getRenderData()
    })

    // 仅保存
    // 录入信息
    $('#submit').click(function () {
        var id = $('#id').val().trim()
        var desc = $('.normal-input').val().trim()
        var answer = $('.answer-input').val().trim()
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_edit_weibo',
            data: {
                id,
                desc,
                answer
            },
            success: function (res) {
                alert(res.info)
                if(res.status){
                    window.location.reload();
                }
            }
        })

        // if ($('.modal').hasClass('editmodal')) { //编辑
        //     var desc = $('.normal-input').val().trim()
        //     var answer = $('.answer-input').val().trim()
        //     // cur_editdata.id //当前编辑数据 后续用其他参数也可
        //
        // } else if ($('.modal').hasClass('addmodal')) { //新增
        //     var radio_val = $('.radio-wrap').find('.radio_box_active input').val();
        //     // 区分信息段、问答
        //     if (radio_val == '1') {
        //
        //     } else {
        //
        //     }
        // }
        $('.modal, .modal-overlay').fadeOut();

    })
    // 保存并通过审批
    $('#savePass').click(function () {
        var id = $('#id').val().trim()
        var desc = $('.normal-input').val().trim()
        var answer = $('.answer-input').val().trim()
        var status = 1
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_edit_weibo',
            data: {
                id,
                desc,
                answer,
                status
            },
            success: function (res) {
                alert(res.info)
                if(res.status){
                    window.location.reload();
                }
            }
        })

        // // 请求借口
        // if ($('.modal').hasClass('editmodal')) { //编辑
        //     var desc = $('.normal-input').val().trim()
        //     var answer = $('.answer-input').val().trim()
        //
        // } else if ($('.modal').hasClass('addmodal')) { //新增
        //     var radio_val = $('.radio-wrap').find('.radio_box_active input').val();
        //     // 区分信息段、问答
        //     if (radio_val == '1') {
        //
        //     } else {
        //
        //     }
        // }
        $('.modal, .modal-overlay').fadeOut();
    })
    $('.list_all').on('click','.deleteBtn',function(){
        if (!confirm("你确定要删除这条数据吗？")) return false;

        const id = $(this).data('id');
        const that = $(this);
        // 列表删除
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_set_weibo_status',
            data: {
                id:id,
                status:2
            },
            success: function (res) {
                if(!res.status){
                    alert(`请求失败`);
                }

                that.closest(".list_item").fadeOut(300, function() {
                    $(this).remove();
                });
            }
        })
    })
    $('.list_all').on('click','.passBtn',function(){
        if (!confirm("你确定要通过这条数据吗？")) return false;

        const id = $(this).data('id');
        const that = $(this);
        // 列表通过
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_set_weibo_status',
            data: {
                id:id,
                status:1
            },
            success: function (res) {
                if(!res.status){
                    alert(`请求失败`);
                }

                that.closest(".list_item").fadeOut(300, function() {
                    $(this).remove();
                });
            }
        })
    })
    $('.list_all').on('click','.checkBtn',function(){
        if (!confirm("你确定要通过这条数据吗？")) return false;

        const id = $(this).data('id');
        const that = $(this);
        // 恢复待审批
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/weibo/ajax_set_weibo_status',
            data: {
                id:id,
                status:0
            },
            success: function (res) {
                if(!res.status){
                    alert(`请求失败`);
                }

                that.closest(".list_item").fadeOut(300, function() {
                    $(this).remove();
                });
            }
        })
    })

});