${firstRow.map(renderCaseItem).join('')}
${secondRow.map(renderCaseItem).join('')}
`;
}
// 渲染分頁 - 美觀的分頁組件
renderPagination() {
const paginationContainer = document.querySelector('.case-pagination');
if (!paginationContainer) return;
const totalPages = Math.ceil(this.total / this.queryParams.pageSize);
const currentPage = this.queryParams.pageNum;
if (totalPages <= 1) {
paginationContainer.innerHTML = '';
return;
}
let paginationHTML = `
';
paginationContainer.innerHTML = paginationHTML;
}
// 加載指定頁碼
async loadPage(pageNum) {
this.queryParams.pageNum = pageNum;
await this.loadCases();
}
// 切換分類
async switchCategory(categoryName) {
console.log('切換分類到:', categoryName);
this.queryParams.categoryName = categoryName || '';
this.queryParams.pageNum = 1; // 重置到第一頁
await this.loadCases();
}
// 初始化事件監聽
initEventListeners() {
// 分類標簽點擊事件
document.addEventListener('click', (e) => {
if (e.target.classList.contains('case-tag')) {
// 移除所有active類
document.querySelectorAll('.case-tag').forEach(tag => {
tag.classList.remove('active');
});
// 添加active類到當前標簽
e.target.classList.add('active');
// 獲取分類并加載數據
const category = e.target.dataset.category;
this.switchCategory(category);
}
});
}
// 顯示加載狀態
showLoadingState() {
const casesGrid = document.querySelector('.cases-grid');
if (casesGrid) {
casesGrid.innerHTML = `