You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
13 KiB
347 lines
13 KiB
2 months ago
|
$(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 waitCheck = [
|
||
|
|
{
|
||
|
|
source: '0',
|
||
|
|
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',
|
||
|
|
''
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgs: [
|
||
|
|
'viewimg1.png',
|
||
|
|
'viewimg2.png',
|
||
|
|
'viewimg3.png',
|
||
|
|
],
|
||
|
|
source: '1',
|
||
|
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？',
|
||
|
|
name: '麻辣烫---',
|
||
|
|
lurutime: '2025.01.13 23:00',
|
||
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位'
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: '0',
|
||
|
|
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',
|
||
|
|
''
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgs: [
|
||
|
|
'viewimg1.png',
|
||
|
|
'viewimg2.png',
|
||
|
|
'viewimg3.png',
|
||
|
|
],
|
||
|
|
source: '1',
|
||
|
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？',
|
||
|
|
name: '麻辣烫---',
|
||
|
|
lurutime: '2025.01.13 23:00',
|
||
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位'
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: '0',
|
||
|
|
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',
|
||
|
|
''
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgs: [
|
||
|
|
'viewimg1.png',
|
||
|
|
'viewimg2.png',
|
||
|
|
'viewimg3.png',
|
||
|
|
],
|
||
|
|
source: '1',
|
||
|
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？',
|
||
|
|
name: '麻辣烫---',
|
||
|
|
lurutime: '2025.01.13 23:00',
|
||
|
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位'
|
||
|
|
|
||
|
|
},
|
||
|
|
]; //待审批
|
||
|
|
var checkList = []; //已审批
|
||
|
|
var deletedList = []; //已删除
|
||
|
|
function toggleDropdown() {
|
||
|
|
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 += "<li><</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>></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, 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)));
|
||
|
|
}
|
||
|
|
|
||
|
|
// 模拟数据
|
||
|
|
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>`);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 渲染分页按钮
|
||
|
|
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;
|
||
|
|
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}）`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|