完善资源模块

This commit is contained in:
云泽网
2025-05-16 23:56:21 +08:00
parent 02b21dcc6d
commit f6f8f6ac52
21 changed files with 3622 additions and 285 deletions
+255 -5
View File
@@ -42,6 +42,48 @@
</div>
</div>
<!-- 资源下载模块 -->
<div class="core-block core-module" id="resourcesDownload" style="order: 3;">
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
<h3 class="ModuleTitle_title">办公资源</h3>
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
<!-- 分类标签将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<div class="more-btn">更多</div>
</div>
<div class="product-list" id="resourcesDownloadList">
<!-- 文章将通过JavaScript动态加载 -->
</div>
</div>
<!-- 程序下载模块 -->
<div class="core-block core-module" id="programDownload" style="order: 3;">
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
<h3 class="ModuleTitle_title">程序下载</h3>
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
<!-- 分类标签将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<div class="more-btn">更多</div>
</div>
<div class="product-list" id="programDownloadList">
<!-- 程序将通过JavaScript动态加载 -->
</div>
</div>
</div>
</main>
@@ -108,6 +150,60 @@
});
}
// 加载资源下载
function loadResources() {
fetch('/index/index/resourcesList')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 渲染分类标签
if (result.categories) {
renderCategoryTabs(result.categories, 'resourcesDownload');
}
// 渲染资源列表
if (result.resources && result.resources.length > 0) {
// 只取最新的8条
renderResources(result.resources.slice(0, 8), 'resourcesDownloadList');
} else {
showNoData('resourcesDownloadList');
}
} else {
showNoData('resourcesDownloadList');
}
})
.catch(error => {
console.error('请求失败:', error);
showError('resourcesDownloadList');
});
}
// 加载程序下载
function loadPrograms() {
fetch('/index/index/programList')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 渲染分类标签
if (result.categories) {
renderCategoryTabs(result.categories, 'programDownload');
}
// 渲染程序列表
if (result.programs && result.programs.length > 0) {
// 只取最新的8条
renderPrograms(result.programs.slice(0, 8), 'programDownloadList');
} else {
showNoData('programDownloadList');
}
} else {
showNoData('programDownloadList');
}
})
.catch(error => {
console.error('请求失败:', error);
showError('programDownloadList');
});
}
// 显示无数据提示
function showNoData(containerId) {
document.getElementById(containerId).innerHTML = '<div class="no-data">暂无数据</div>';
@@ -156,11 +252,20 @@
// 获取选中的分类ID
const selectedCategoryId = this.getAttribute('data-tab');
// 重新加载对应分类的文章
if (moduleId === 'opencourse') {
loadCategoryArticles(selectedCategoryId, 'webArticlesList');
} else {
loadCategoryArticles(selectedCategoryId, 'techArticlesList');
// 根据不同模块加载对应数据
switch(moduleId) {
case 'opencourse':
loadCategoryArticles(selectedCategoryId, 'webArticlesList');
break;
case 'techArticles':
loadCategoryArticles(selectedCategoryId, 'techArticlesList');
break;
case 'resourcesDownload':
loadCategoryResources(selectedCategoryId, 'resourcesDownloadList');
break;
case 'programDownload':
loadCategoryPrograms(selectedCategoryId, 'programDownloadList');
break;
}
});
});
@@ -258,9 +363,154 @@
`;
}
// 渲染资源列表
function renderResources(resources, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
let html = '';
if (Array.isArray(resources)) {
resources.forEach(resource => {
html += createResourceHtml(resource);
});
}
container.innerHTML = html || '<div class="no-data">暂无数据</div>';
}
// 创建资源HTML
function createResourceHtml(resource) {
if (!resource) return '';
// 格式化日期
const uploadDate = new Date(resource.uploaddate * 1000);
const formattedDate = uploadDate.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
// 格式化文件大小
const formatFileSize = (bytes) => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
return `
<div class="opencourse product-item" onclick="window.open('/index/resource/detail?id=${resource.id || ''}', '_blank')">
<div class="video">
<img src="${resource.thumbnail || '/static/images/default-resource.png'}" alt="" class="cover">
<div class="file-type">${resource.filetype || '未知类型'}</div>
</div>
<div class="introduction">
<div class="title">${resource.title || '无标题'}</div>
<div class="description">${resource.description || '暂无描述'}</div>
<div class="publishdate">${formattedDate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye"></i><span style="margin-left: 5px;">${resource.views || 0}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">${resource.uploader || '未知作者'}</span></div>
</div>
</div>
`;
}
// 渲染程序列表
function renderPrograms(programs, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
let html = '';
if (Array.isArray(programs)) {
programs.forEach(program => {
html += createProgramHtml(program);
});
}
container.innerHTML = html || '<div class="no-data">暂无数据</div>';
}
// 创建程序HTML
function createProgramHtml(program) {
if (!program) return '';
// 格式化日期
const createDate = new Date(program.create_time * 1000);
const formattedDate = createDate.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return `
<div class="opencourse product-item" onclick="window.open('/index/program/detail?id=${program.id || ''}', '_blank')">
<div class="video">
<img src="${program.icon || '/static/images/default-program.png'}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">${program.title || '无标题'}</div>
<div class="publishdate">${formattedDate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye"></i><span style="margin-left: 5px;">${program.views || 0}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">${program.uploader || '未知作者'}</span></div>
</div>
</div>
`;
}
// 加载分类资源
function loadCategoryResources(categoryId, containerId) {
fetch('/index/index/resourcesList')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
if (categoryId === 'all') {
renderResources(result.resources.slice(0, 8), containerId);
} else {
const filteredResources = result.resources.filter(resource => resource.cate == categoryId);
renderResources(filteredResources, containerId);
}
} else {
showNoData(containerId);
}
})
.catch(error => {
console.error('请求失败:', error);
showError(containerId);
});
}
// 加载分类程序
function loadCategoryPrograms(categoryId, containerId) {
fetch('/index/index/programList')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
if (categoryId === 'all') {
renderPrograms(result.programs.slice(0, 8), containerId);
} else {
const filteredPrograms = result.programs.filter(program => program.cate == categoryId);
renderPrograms(filteredPrograms, containerId);
}
} else {
showNoData(containerId);
}
})
.catch(error => {
console.error('请求失败:', error);
showError(containerId);
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
loadWebArticles();
loadTechArticles();
loadResources();
loadPrograms();
});
</script>