|
|
|
@ -1,123 +1,402 @@ |
|
|
|
$(document).ready(function () { |
|
|
|
var imgurl='' |
|
|
|
var vediourl='' |
|
|
|
var list = [ |
|
|
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
|
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
|
|
|
'' |
|
|
|
] |
|
|
|
// viedo
|
|
|
|
// 点击小版视频封面图时放大
|
|
|
|
$('.small-video-cover').click(function () { |
|
|
|
vediourl = $(this).attr('href') |
|
|
|
imgurl = $(this).attr('src') |
|
|
|
$('#large-viedo-url').attr('src',imgurl) |
|
|
|
$('#large-video-container').fadeIn(); // 显示放大后的视频容器
|
|
|
|
$('#large-video').get(0).play(); // 播放视频
|
|
|
|
}); |
|
|
|
|
|
|
|
// 点击关闭按钮时关闭放大视频
|
|
|
|
$('#close-btn').click(function () { |
|
|
|
$('#large-video').get(0).pause(); // 暂停视频
|
|
|
|
$('#large-video-container').fadeOut(); // 隐藏放大后的视频容器
|
|
|
|
}); |
|
|
|
|
|
|
|
// 图片
|
|
|
|
$('.small-image').click(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(); // 隐藏放大后的图片容器
|
|
|
|
} |
|
|
|
}); |
|
|
|
var imgurl = '' |
|
|
|
var tabActive = '1'; |
|
|
|
var cur_editdata = {}; //当前编辑数据
|
|
|
|
var vediourl = '' |
|
|
|
// 假数据假数据-----
|
|
|
|
var waitCheck = [ |
|
|
|
{ |
|
|
|
source: '0', |
|
|
|
var waitCheck = [{ |
|
|
|
id: 1, |
|
|
|
source: '微博', |
|
|
|
name: '麻辣烫---', |
|
|
|
lurutime: '2025.01.13 23:00', |
|
|
|
vedios: [ |
|
|
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
|
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
|
|
|
'' |
|
|
|
] |
|
|
|
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: '1', |
|
|
|
source: '自录入', |
|
|
|
desc: '22222对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位', |
|
|
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
|
|
name: '麻辣烫---', |
|
|
|
lurutime: '2025.01.13 23:00', |
|
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
source: '0', |
|
|
|
id: 3, |
|
|
|
source: '自录入', |
|
|
|
name: '麻辣烫---', |
|
|
|
lurutime: '2025.01.13 23:00', |
|
|
|
vedios: [ |
|
|
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
|
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
|
|
|
'' |
|
|
|
] |
|
|
|
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: '1', |
|
|
|
source: '自录入', |
|
|
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
|
|
name: '麻辣烫---', |
|
|
|
lurutime: '2025.01.13 23:00', |
|
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' |
|
|
|
|
|
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位', |
|
|
|
desc: '4444浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医', |
|
|
|
}, |
|
|
|
{ |
|
|
|
source: '0', |
|
|
|
id: 5, |
|
|
|
source: '微博', |
|
|
|
name: '麻辣烫---', |
|
|
|
lurutime: '2025.01.13 23:00', |
|
|
|
vedios: [ |
|
|
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
|
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
|
|
|
'' |
|
|
|
] |
|
|
|
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: '1', |
|
|
|
source: '自录入', |
|
|
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
|
|
name: '麻辣烫---', |
|
|
|
lurutime: '2025.01.13 23:00', |
|
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' |
|
|
|
|
|
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位', |
|
|
|
desc: '6666浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医。', |
|
|
|
}, |
|
|
|
]; //待审批
|
|
|
|
var checkList = []; //已审批
|
|
|
|
var deletedList = []; //已删除
|
|
|
|
function toggleDropdown() { |
|
|
|
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', |
|
|
|
}, |
|
|
|
]; //已删除
|
|
|
|
|
|
|
|
$('.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 () { |
|
|
|
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 () { |
|
|
|
$('.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 += ` |
|
|
|
<div class="small-image"> |
|
|
|
<span class="small-image-desc">图片</span> |
|
|
|
<img src="./style/img/${image}" alt="Small Image"> |
|
|
|
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
|
|
</div> |
|
|
|
`;
|
|
|
|
}); |
|
|
|
} else if (item.vedios) { |
|
|
|
item.vedios.forEach(v => { |
|
|
|
imagesHTML1 += ` |
|
|
|
<div class="small-video-cover" href="${v.url}"> |
|
|
|
<span class="small-image-desc">视频</span> |
|
|
|
<img class="small-video-show" src="./style/img/${v.img_show}" alt="Video Cover"> |
|
|
|
<img src="./style/img/play.svg" class="play-video" alt="...丢了"> |
|
|
|
<img class="delete-btn" src="./style/img/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="progress-bar"> |
|
|
|
<div class="progress"></div> |
|
|
|
</div> |
|
|
|
<div class="status uploading">上传中...</div> |
|
|
|
<button class="delete-btn">×</button> |
|
|
|
</div> |
|
|
|
`);
|
|
|
|
$('.preview').append(item); |
|
|
|
// 模拟上传过程
|
|
|
|
const formData = new FormData(); |
|
|
|
formData.append('file', file); |
|
|
|
// 模拟接口上传
|
|
|
|
$.ajax({ |
|
|
|
url: 'https://aitest.chachongz.com/upload_file', // 模拟接口地址
|
|
|
|
type: 'POST', |
|
|
|
data: formData, |
|
|
|
processData: false, |
|
|
|
contentType: false, |
|
|
|
xhr: function () { |
|
|
|
var xhr = $.ajaxSettings.xhr(); |
|
|
|
xhr.upload.addEventListener('progress', function (e) { |
|
|
|
if (e.lengthComputable) { |
|
|
|
const percent = (e.loaded / e.total) * 100; |
|
|
|
item.find('.progress').css('width', percent + '%'); |
|
|
|
} |
|
|
|
}, false); |
|
|
|
return xhr; |
|
|
|
}, |
|
|
|
success: function (response) { |
|
|
|
item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功'); |
|
|
|
item.find('.progress-bar').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"> |
|
|
|
</div>`); |
|
|
|
} else if (type === 'video') { |
|
|
|
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="./style/img/play.svg" class="play-video" alt="...丢了"> |
|
|
|
</div>`); |
|
|
|
} |
|
|
|
}; |
|
|
|
reader.readAsDataURL(file); |
|
|
|
}, |
|
|
|
error: function () { |
|
|
|
item.find('.status').removeClass('uploading').addClass('failed').text('上传失败'); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 删除功能
|
|
|
|
$(document).on('click', '.delete-btn', function () { |
|
|
|
$(this).parent().remove(); |
|
|
|
}); |
|
|
|
// 三个按钮操作
|
|
|
|
|
|
|
|
|
|
|
|
// 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'; |
|
|
|
@ -126,7 +405,7 @@ $(document).ready(function () { |
|
|
|
dropdownPanel.style.display = 'block'; |
|
|
|
icon.classList.add('rotate'); // 添加旋转效果
|
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// 点击页面其他区域关闭面板
|
|
|
|
document.addEventListener('click', (event) => { |
|
|
|
@ -142,16 +421,16 @@ $(document).ready(function () { |
|
|
|
}); |
|
|
|
var list = waitCheck |
|
|
|
var currentPage = 1; // 定义变量，用于存储当前的页码
|
|
|
|
var pageSize = 2;// 定义变量，用于存储当前页条数
|
|
|
|
var pageSize = 2; // 定义变量，用于存储当前页条数
|
|
|
|
renderList(list) |
|
|
|
// 当文档加载完成后执行以下函数
|
|
|
|
function renderList (list) { |
|
|
|
function renderList(list) { |
|
|
|
function createPagination(currentPage, totalPages) { |
|
|
|
var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码
|
|
|
|
|
|
|
|
// 如果当前页不是第一页，则生成一个“上一页”按钮
|
|
|
|
// if (currentPage > 1) {
|
|
|
|
paginationHtml += "<li><</li>"; |
|
|
|
paginationHtml += "<li><</li>"; |
|
|
|
// }
|
|
|
|
|
|
|
|
// 始终显示第一页的页码
|
|
|
|
@ -204,7 +483,7 @@ $(document).ready(function () { |
|
|
|
function selectPage(pageNumber) { |
|
|
|
// 更新当前页码的变量，并重新生成分页条
|
|
|
|
currentPage = pageNumber; |
|
|
|
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length /pageSize))); |
|
|
|
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length / pageSize))); |
|
|
|
} |
|
|
|
|
|
|
|
// 为分页条上的每个按钮绑定点击事件
|
|
|
|
@ -218,8 +497,8 @@ $(document).ready(function () { |
|
|
|
} |
|
|
|
|
|
|
|
// 根据点击的按钮，调用selectPage函数更新当前页码
|
|
|
|
if (pageNumber === "<" ) { |
|
|
|
if(currentPage <2){ |
|
|
|
if (pageNumber === "<") { |
|
|
|
if (currentPage < 2) { |
|
|
|
return |
|
|
|
} |
|
|
|
selectPage(currentPage - 1); |
|
|
|
@ -234,114 +513,181 @@ $(document).ready(function () { |
|
|
|
}); |
|
|
|
|
|
|
|
// 初始化分页条，总页数为20，默认显示第一页
|
|
|
|
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length /pageSize))); |
|
|
|
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length / pageSize))); |
|
|
|
} |
|
|
|
|
|
|
|
// 模拟数据
|
|
|
|
const 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" |
|
|
|
]; |
|
|
|
// 总页数
|
|
|
|
const totalPages = Math.ceil(allData.length / pageSize); |
|
|
|
|
|
|
|
// 渲染数据
|
|
|
|
function renderData() { |
|
|
|
const start = (currentPage - 1) * pageSize; |
|
|
|
const end = start + pageSize; |
|
|
|
const pageData = allData.slice(start, end); |
|
|
|
|
|
|
|
// 清空列表
|
|
|
|
$('#data-list').empty(); |
|
|
|
|
|
|
|
// 渲染当前页数据
|
|
|
|
pageData.forEach(item => { |
|
|
|
$('#data-list').append(`<li>${item}</li>`); |
|
|
|
}); |
|
|
|
// 模拟数据
|
|
|
|
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" |
|
|
|
]; |
|
|
|
allData = waitCheck; |
|
|
|
// 总页数
|
|
|
|
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 += ` |
|
|
|
<div class="small-image"> |
|
|
|
<span class="small-image-desc">图片</span> |
|
|
|
<img src="./style/img/${image}" alt="Small Image"> |
|
|
|
</div> |
|
|
|
`;
|
|
|
|
}); |
|
|
|
} else if (item.vedios) { |
|
|
|
item.vedios.forEach(v => { |
|
|
|
imagesHTML += ` |
|
|
|
<div class="small-video-cover" href="${v.url}"> |
|
|
|
<span class="small-image-desc">视频</span> |
|
|
|
<img class="small-video-show" src="./style/img/${v.img_show}" alt="Video Cover"> |
|
|
|
<img src="./style/img/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.source == '微博' ? 'green' : 'blue'}">` + item.source + `</span> |
|
|
|
${item.question ? `<b>${item.question}</b>` :''} |
|
|
|
<span>` + item.name + `</span> |
|
|
|
<span>录入：` + item.lurutime + `</span> |
|
|
|
</div> |
|
|
|
${ |
|
|
|
tabActive == '1' ? ' <div class="list_item_top_r" id="${item.id}"><img src="./style/img/edit.svg" alt="">编辑</div>' :'' |
|
|
|
} |
|
|
|
|
|
|
|
</div> |
|
|
|
<p class="desc_text"> |
|
|
|
${item.desc} |
|
|
|
</p> |
|
|
|
<!-- 图片合集 --> |
|
|
|
<div class="img_list"> |
|
|
|
${imagesHTML} |
|
|
|
</div> |
|
|
|
<div class="flex btngroups"> |
|
|
|
${tabActive == '1' || tabActive == '2' ? '<button class="button button-normal deleteBtn">删除</button>' : ''} |
|
|
|
${tabActive == '1' ? '<button class="button button-primary passBtn">通过</button>' : ''} |
|
|
|
${tabActive == '3' || tabActive == '2' ? '<button class="button button-normal checkBtn">恢复待审批</button>' : ''} |
|
|
|
</div> |
|
|
|
</div>` |
|
|
|
$('#data-list').html(html1); |
|
|
|
}); |
|
|
|
|
|
|
|
// 渲染分页按钮
|
|
|
|
renderPagination(); |
|
|
|
} |
|
|
|
|
|
|
|
// 渲染分页按钮
|
|
|
|
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++) { |
|
|
|
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 { |
|
|
|
// 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
|
|
|
|
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>`); |
|
|
|
// 总页数大于 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.append('<span>...</span>'); |
|
|
|
pageNumbers.append(`<span>${totalPages}</span>`); |
|
|
|
} |
|
|
|
|
|
|
|
// 绑定页码点击事件
|
|
|
|
pageNumbers.find('span').click(function () { |
|
|
|
const page = parseInt($(this).text()); |
|
|
|
if (!isNaN(page)) { |
|
|
|
currentPage = page; |
|
|
|
renderData(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 绑定页码点击事件
|
|
|
|
pageNumbers.find('span').click(function () { |
|
|
|
const page = parseInt($(this).text()); |
|
|
|
if (!isNaN(page)) { |
|
|
|
currentPage = page; |
|
|
|
// 初始化渲染
|
|
|
|
renderData(); |
|
|
|
|
|
|
|
// 上一页
|
|
|
|
$('#prev-page').click(function () { |
|
|
|
if (currentPage > 1) { |
|
|
|
currentPage--; |
|
|
|
renderData(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 初始化渲染
|
|
|
|
renderData(); |
|
|
|
// 下一页
|
|
|
|
$('#next-page').click(function () { |
|
|
|
if (currentPage < totalPages) { |
|
|
|
currentPage++; |
|
|
|
renderData(); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 上一页
|
|
|
|
$('#prev-page').click(function () { |
|
|
|
if (currentPage > 1) { |
|
|
|
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}）`); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 下一页
|
|
|
|
$('#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() |
|
|
|
}) |
|
|
|
}); |
zq
2 months ago
