$(document).ready(function () { var imgurl = '' var tabActive = '1'; var cur_editdata = {}; //当前编辑数据 var vediourl = '' var allData =[];//用于列表展示 // 假数据假数据----- //待审批 var waitCheck = [{ id: 1, source: '微博', name: '麻辣烫---', lurutime: '2025.01.13 23:00', vedios: [{ img_show: 'viewimg1.png', url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', }, { img_show: 'viewimg2.png', url: 'https://cloud.video.taobao.com/vod/BYqzWJAb0TEleeeLZG-L5qFoBnmmKt0WC8qxw4hVDFc.mp4', }, ], desc: '111111华佗医生真是医术献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医的智慧和精髓,真是受益匪浅!感谢您为中医事业做出的贡献💐。', }, { id: 2, imgs: [ 'viewimg1.png', 'viewimg2.png', 'viewimg3.png', ], source: '自录入', desc: '22222对于中医按摩时穴位定位的问题,确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议,以及辅助工具,可以帮助您更准确地找到穴位', question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢?', name: '麻辣烫---', lurutime: '2025.01.13 23:00', }, { id: 3, source: '自录入', name: '麻辣烫---', lurutime: '2025.01.13 23:00', vedios: [{ img_show: 'viewimg1.png', url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', }, { img_show: 'viewimg1.png', url: 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', }, ], desc: '333333浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医的智慧和精髓,真是受益匪浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医', }, { id: 4, imgs: [ 'viewimg1.png', 'viewimg2.png', 'viewimg3.png', ], source: '自录入', question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢?', name: '麻辣烫---', lurutime: '2025.01.13 23:00', answer: '对于中医按摩时穴位定位的问题,确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议,以及辅助工具,可以帮助您更准确地找到穴位', desc: '4444浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医的智慧和精髓,真是受益匪浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医', }, { id: 5, source: '微博', name: '麻辣烫---', lurutime: '2025.01.13 23:00', vedios: [{ img_show: 'viewimg1.png', url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', }, { img_show: 'viewimg1.png', url: 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', }, ], desc: '55555浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医的智慧和精髓,真是受益匪浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医', }, { id: 6, imgs: [ 'viewimg1.png', 'viewimg2.png', 'viewimg3.png', ], source: '自录入', question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢?', name: '麻辣烫---', lurutime: '2025.01.13 23:00', answer: '对于中医按摩时穴位定位的问题,确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议,以及辅助工具,可以帮助您更准确地找到穴位', desc: '6666浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医的智慧和精髓,真是受益匪浅!感谢您为中医事业做出的贡献💐。华佗医生真是医术高明,每次看您的微博都能学到很多中医。', }, ]; //已审批 var checkList = [{ id: 1, source: '微博', name: '待审批11-', lurutime: '2025.01.13 23:00', vedios: [{ img_show: 'viewimg1.png', url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', }, { img_show: 'viewimg2.png', url: 'https://cloud.video.taobao.com/vod/BYqzWJAb0TEleeeLZG-L5qFoBnmmKt0WC8qxw4hVDFc.mp4', }, ], desc: '审批审批----------审批', }, { id: 2, imgs: [ 'viewimg1.png', 'viewimg2.png', 'viewimg3.png', ], source: '自录入', desc: '审批审批----------审批', question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢?', name: '待审批-2222', lurutime: '2025.01.13 23:00', }, ]; //已删除 var deletedList = [{ id: 1, source: '微博', name: '已删除111-', lurutime: '2025.01.13 23:00', vedios: [{ img_show: 'viewimg1.png', url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', }, { img_show: 'viewimg2.png', url: 'https://cloud.video.taobao.com/vod/BYqzWJAb0TEleeeLZG-L5qFoBnmmKt0WC8qxw4hVDFc.mp4', }, ], desc: '删除----删除', }, { id: 2, imgs: [ 'viewimg1.png', 'viewimg2.png', 'viewimg3.png', ], source: '自录入', desc: '删除----删除', question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢?', name: '已删除-2222', lurutime: '2025.01.13 23:00', }, ]; allData = waitCheck;//初始赋值待审批列表 后续从接口请求赋值 $('.radio-wrap').on('click', '.radio_box input', function () { var radio_val = $(this).attr('value') $('.edit-input').val('') if (radio_val == '1') { $('.answer-form').hide() $('.common-input').html('录入信息') } else { $('.common-input').html('提问信息') $('.answer-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'); cur_editdata = allData.filter(item => item.id == cur_id)[0]; console.log(cur_editdata, 'cur_editdata'); $('.edit-input').val('') $('.radio-form').hide(); $('.answer-form').hide(); $('.normal-input').val(cur_editdata.desc); $('.char-count').text(cur_editdata.desc.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(cur_editdata) $('.modal, .modal-overlay').fadeIn(); }) // 打开弹框 $('.addNewBtn').click(function () { $('.preview').html('') $('.edit-input').val('') $('.radio-form').show(); $('.img_list2').html('') $('.img_list2').show() imagesHTML1 = '' var radio_val = $('.radio-wrap').find('.radio_box_active input').val(); if (radio_val == '1') { $('.answer-form').hide() $('.common-input').html('录入信息') } else { $('.answer-form').show() $('.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) { if (item.imgs) { item.imgs.forEach(image => { imagesHTML1 += `
图片 Small Image Small Image
`; }); } else if (item.vedios) { item.vedios.forEach(v => { imagesHTML1 += `
视频 Video Cover ...丢了 Small Image
`; }); } $('.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 = $(`
上传中...
上传中...
`); $('.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(`${file.name}` + 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(`
图片 Small Image Small Image
`); } else if (type === 'video') { // 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位 item.prepend(`
视频 Video Cover ...丢了 Small Image
`); } }; 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(`
图片 Small Image Small Image
`); } else if (type === 'video') { // 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位 item.prepend(`
视频 Video Cover ...丢了 Small Image
`); } }; reader.readAsDataURL(file); }else{ console.log(res,'response.info---'); item.find('.upload_name').html(`${file.name}` +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).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 list = waitCheck var currentPage = 1; // 定义变量,用于存储当前的页码 var pageSize = 2; // 定义变量,用于存储当前页条数 renderList(list) // 当文档加载完成后执行以下函数 function renderList(list) { function createPagination(currentPage, totalPages) { var paginationHtml = ""; // 初始化一个字符串,用于存放分页条的HTML代码 // 如果当前页不是第一页,则生成一个“上一页”按钮 // if (currentPage > 1) { paginationHtml += "
  • <
  • "; // } // 始终显示第一页的页码 paginationHtml += generatePageNumberHtml(1, currentPage); // 如果总页数大于1页,则继续生成分页条的其余部分 if (totalPages > 1) { // 如果当前页码大于3,则在第一页和当前页之间添加省略号 if (currentPage > 3) { paginationHtml += "
  • ...
  • "; } // 遍历当前页附近的页码,并生成对应的分页按钮 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 += "
  • ...
  • "; } } // 始终显示最后一页的页码 paginationHtml += generatePageNumberHtml(totalPages, currentPage); // 如果当前页不是最后一页,则生成一个“下一页”按钮 if (currentPage < totalPages) { paginationHtml += "
  • >
  • "; } // 返回生成的分页条HTML字符串 return paginationHtml; } // 创建分页条的函数 // 生成单个页码按钮的HTML的函数 function generatePageNumberHtml(pageNumber, currentPage) { // 返回一个格式化后的HTML字符串,包含激活状态的判断 return ( '
  • ' + pageNumber + "
  • " ); } // 选择页码的函数 function selectPage(pageNumber) { // 更新当前页码的变量,并重新生成分页条 currentPage = pageNumber; $("#pagination").html(createPagination(currentPage, Math.ceil(list.length / pageSize))); } // 为分页条上的每个按钮绑定点击事件 $("#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, Math.ceil(list.length / pageSize))); } // 模拟数据 // var allData = [ // "数据 1", "数据 2", "数据 3", "数据 4", "数据 5", // "数据 6", "数据 7", "数据 8", "数据 9", "数据 10", // "数据 11", "数据 12", "数据 13", "数据 14", "数据 15", // "数据 16", "数据 17", "数据 18", "数据 19", "数据 20", // "数据 21", "数据 22", "数据 23", "数据 24", "数据 25", // "数据 26", "数据 27", "数据 28", "数据 29", "数据 30" // ]; // 总页数 var totalPages = Math.ceil(allData.length / pageSize); // 渲染数据 function renderData() { totalPages = Math.ceil(allData.length / pageSize); const start = (currentPage - 1) * pageSize; const end = start + pageSize; const pageData = allData.slice(start, end); // 清空列表 $('#data-list').empty(); var html1 = ''; // 渲染当前页数据 pageData.forEach(item => { let imagesHTML = ''; if (item.imgs) { item.imgs.forEach(image => { imagesHTML += `
    图片 Small Image
    `; }); } else if (item.vedios) { item.vedios.forEach(v => { imagesHTML += `
    视频 Video Cover ...丢了
    `; }); } html1 += `
    ` + item.source + ` ${item.question ? `${item.question}` :''} ` + item.name + ` 录入:` + item.lurutime + `
    ${ tabActive == '1' ? `
    编辑
    ` :'' }

    ${item.desc}

    ${imagesHTML}
    ${tabActive == '1' || tabActive == '2' ? '' : ''} ${tabActive == '1' ? '' : ''} ${tabActive == '3' || tabActive == '2' ? '' : ''}
    ` $('#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(`${i}`); } } else { // 总页数大于 7 时,显示部分页码并用省略号代替 if (currentPage <= 4) { // 前 5 页 + 省略号 + 最后一页 for (let i = 1; i <= 5; i++) { pageNumbers.append(`${i}`); } pageNumbers.append('...'); pageNumbers.append(`${totalPages}`); } else if (currentPage >= totalPages - 3) { // 第一页 + 省略号 + 最后 5 页 pageNumbers.append('1'); pageNumbers.append('...'); for (let i = totalPages - 4; i <= totalPages; i++) { pageNumbers.append(`${i}`); } } else { // 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页 pageNumbers.append('1'); pageNumbers.append('...'); for (let i = currentPage - 2; i <= currentPage + 2; i++) { pageNumbers.append(`${i}`); } pageNumbers.append('...'); pageNumbers.append(`${totalPages}`); } } // 绑定页码点击事件 pageNumbers.find('span').click(function () { const page = parseInt($(this).text()); if (!isNaN(page)) { currentPage = page; renderData(); } }); } // 初始化渲染 renderData(); // 上一页 $('#prev-page').click(function () { if (currentPage > 1) { currentPage--; renderData(); } }); // 下一页 $('#next-page').click(function () { if (currentPage < totalPages) { currentPage++; renderData(); } }); // 跳转到指定页 $('#go-to-page').click(function () { const page = parseInt($('#jump-to-page').val()); if (page >= 1 && page <= totalPages) { currentPage = page; renderData(); } else { alert(`请输入有效的页码(1-${totalPages})`); } }); $('.index-nav-wrap-li').click(function () { tabActive = $(this).attr('type'); switch (tabActive) { case '1': allData = waitCheck break case '2': allData = checkList break case '3': allData = deletedList break } currentPage = 1; $('.index-nav-wrap-li span').removeClass('active') $(this).find('span').addClass('active') renderData() }) // 仅保存 // 录入信息 $('#submit').click(function () { 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 { } } // $.ajax({ // type: "post", // dataType: 'json', // url: '', // data: { // type // }, // success: function (res) {} // }) $('.modal, .modal-overlay').fadeOut(); }) // 保存并通过审批 $('#savePass').click(function () { // 请求借口 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 { } } // $.ajax({ // type: "post", // dataType: 'json', // url: '', // data: { // type // }, // success: function (res) {} // }) $('.modal, .modal-overlay').fadeOut(); }) $('.list_all').on('click','deleteBtn',function(){ // 列表删除 }) $('.list_all').on('click','passBtn',function(){ // 列表通过 }) $('.list_all').on('click','checkBtn',function(){ // 恢复待审批 }) });