|
|
@ -103,11 +103,13 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang='ts'> |
|
|
|
import { onMounted, ref } from 'vue'; |
|
|
|
import { onMounted, ref,watch } from 'vue'; |
|
|
|
import type { homePageInterface } from '@/api'; |
|
|
|
import iconComponents from "@/assets/index" |
|
|
|
import { get } from '@/tools/request'; |
|
|
|
import router from '@/router'; |
|
|
|
import { homePageStore } from '@/stores'; |
|
|
|
const homepageStore = homePageStore(); |
|
|
|
const randomColor = () => { |
|
|
|
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"]) |
|
|
|
return labelColor.value[Math.floor(Math.random() * labelColor.value.length)]; |
|
|
@ -119,17 +121,17 @@ const readMoreBlog = (id: any) => { |
|
|
|
const readMoreDiary = (id: any) => { |
|
|
|
router.push(`/diary/${id}`) |
|
|
|
} |
|
|
|
const homepagelist = ref<homePageInterface[]>([]) |
|
|
|
// const homepagelist = ref<homePageInterface[]>([]) |
|
|
|
const displayedData = ref<any[]>([]); // 存储当前显示的部分数据 |
|
|
|
const itemsPerPage = 10; // 每次加载的条目数 |
|
|
|
let currentIndex = 0; // 当前显示数据的索引位置 |
|
|
|
const showNextBatch = () => { |
|
|
|
const end = currentIndex + itemsPerPage; |
|
|
|
displayedData.value = homepagelist.value.slice(0, end); |
|
|
|
displayedData.value = homepageStore.homepagelist.slice(0, end); |
|
|
|
currentIndex = end; |
|
|
|
|
|
|
|
// 控制加载更多按钮的显示与隐藏 |
|
|
|
showLoadMoreButton.value = currentIndex < homepagelist.value.length; |
|
|
|
showLoadMoreButton.value = currentIndex < homepageStore.homepagelist.length; |
|
|
|
}; |
|
|
|
|
|
|
|
// 加载更多按钮的显示与隐藏 |
|
|
@ -146,17 +148,23 @@ const loadMore = () => { |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const homePageList = async () => { |
|
|
|
await get( |
|
|
|
"/statistics/homepage" |
|
|
|
).then(response => { |
|
|
|
homepagelist.value = response.data.data |
|
|
|
showNextBatch(); |
|
|
|
}) |
|
|
|
} |
|
|
|
// const homePageList = async () => { |
|
|
|
// await get( |
|
|
|
// "/statistics/homepage" |
|
|
|
// ).then(response => { |
|
|
|
// homepagelist.value = response.data.data |
|
|
|
// showNextBatch(); |
|
|
|
// }) |
|
|
|
// } |
|
|
|
onMounted(() => { |
|
|
|
homePageList() |
|
|
|
// homePageList() |
|
|
|
homepageStore.fetchHomePageList(); |
|
|
|
}) |
|
|
|
watch(() => homepageStore.homepagelist, () => { |
|
|
|
// 当 homepagelist 更新时,重新显示第一页数据 |
|
|
|
currentIndex = 0; |
|
|
|
showNextBatch(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|