From cfc763decf6e4b8912850a09a2ee8a65182d7f13 Mon Sep 17 00:00:00 2001 From: liqi Date: Wed, 7 May 2025 23:12:06 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/request/home.js | 8 ++ src/views/admin/Projects.vue | 13 ++- src/views/frontend/Home.vue | 1 + src/views/frontend/Projects.vue | 167 +++++++++++++++++++++----------- 4 files changed, 130 insertions(+), 59 deletions(-) diff --git a/src/api/request/home.js b/src/api/request/home.js index 0d1903f..9f5a819 100644 --- a/src/api/request/home.js +++ b/src/api/request/home.js @@ -10,6 +10,14 @@ const prefix = 'home' export function homeProjectListApi(credentials) { return get(`${prefix}/list`, credentials) } +/** + * 获取项目列表 + * @param credentials + * @returns {Promise>} + */ +export function projectListApi(credentials) { + return get(`${prefix}/project-list`, credentials) +} /** * 获取首页轮播图列表 diff --git a/src/views/admin/Projects.vue b/src/views/admin/Projects.vue index b90e700..b28edf1 100644 --- a/src/views/admin/Projects.vue +++ b/src/views/admin/Projects.vue @@ -77,6 +77,7 @@ const paginatedData = computed(() => { const changePage = (page) => { currentPage.value = page + getList(); } // 模态框 @@ -121,8 +122,6 @@ const handleUploadChange = (info) => { } if (info.file.status === "done") { // 模拟上传成功后获取图片URL - currentItem.value.cover = - "https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" uploading.value = false message.success("封面上传成功") } @@ -206,6 +205,14 @@ const beforeVideoUpload = (file) => { return isVideo && isLt50M } +const customCoverRequest = ({ file, onSuccess }) => { + // 模拟上传 + uploadImageApi(file).then((res) => { + currentItem.value.cover = res.url; + onSuccess("ok", { status: "done" }) + }) +} + const customRequest = ({ file, onSuccess }) => { // 模拟上传 uploadImageApi(file).then((res) => { @@ -843,7 +850,7 @@ getList(); v-model:file-list="fileList" list-type="picture-card" :before-upload="beforeUpload" - :custom-request="customRequest" + :custom-request="customCoverRequest" @preview="handlePreview" @change="handleUploadChange" :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }" diff --git a/src/views/frontend/Home.vue b/src/views/frontend/Home.vue index 6a50f17..c464814 100644 --- a/src/views/frontend/Home.vue +++ b/src/views/frontend/Home.vue @@ -219,6 +219,7 @@ const breakpoints = {

diff --git a/src/views/frontend/Projects.vue b/src/views/frontend/Projects.vue index 166a992..e4015b0 100644 --- a/src/views/frontend/Projects.vue +++ b/src/views/frontend/Projects.vue @@ -2,6 +2,7 @@ import { ref, computed, onMounted } from 'vue' import AOS from 'aos' import 'aos/dist/aos.css' +import {projectListApi} from "@/api/request/home.js"; onMounted(() => { AOS.init({ @@ -45,7 +46,24 @@ const projects = ref(Array.from({ length: 12 }, (_, i) => ({ createdAt: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toISOString(), description: '这是一个示例项目描述，包含了项目的主要功能和技术特点。实际项目中会有更详细的描述信息。' }))) +// 分页 +const currentPage = ref(1) +const pageSize = ref(8) +const totalItems = ref(0) +const pageCount = ref(0) +const getList = () => { + projectListApi({ + page: currentPage.value, + pageSize: pageSize.value, + }).then((res) => { + projects.value = res.items + currentPage.value = res.page; + pageSize.value = res.size; + totalItems.value = res.total; + pageCount.value = res.page_count; + }) +} // 筛选排序逻辑 const selectedCategory = ref('all') const sortBy = ref('date') @@ -104,6 +122,28 @@ const getAosEffect = (index) => { ]; return aosEffects[rowIndex % aosEffects.length][colIndex % aosEffects[0].length]; } +getList() +// 计算可见的页码 +const visiblePages = computed(() => { + const maxVisiblePages = 3; + let startPage = Math.max(currentPage.value - Math.floor(maxVisiblePages / 2), 1); + let endPage = startPage + maxVisiblePages - 1; + + if (endPage > pageCount.value) { + endPage = pageCount.value; + startPage = Math.max(endPage - maxVisiblePages + 1, 1); + } + + return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); +}); + +// 是否显示省略号 +const showEllipsisBefore = computed(() => visiblePages.value[0] > 1); +const showEllipsisAfter = computed(() => visiblePages.value[visiblePages.value.length - 1] < pageCount.value - 1); +const changePage = (page) => { + currentPage.value = page + getList(); +}