diff --git a/src/pages/News.vue b/src/pages/News.vue index 17367ba7..0d3fdec8 100644 --- a/src/pages/News.vue +++ b/src/pages/News.vue @@ -40,7 +40,14 @@ - +
+ + + 已加载:{{ noticeData.last_id }},加载更多 + +
@@ -84,7 +91,14 @@
- +
+ + + 已加载:{{ activityData.last_id }},加载更多 + +
@@ -117,7 +131,14 @@
- +
+ + + 已加载:{{ newsData.last_id }},加载更多 + +
@@ -128,7 +149,7 @@ import { onMounted, ref } from "vue"; import TLoading from "../components/t-loading.vue"; // tauri -import { fs } from "@tauri-apps/api"; +import { dialog, fs } from "@tauri-apps/api"; // store import useAppStore from "../store/modules/app"; // tools @@ -179,6 +200,48 @@ onMounted(async () => { loading.value = false; }); +// 加载更多 +async function loadMore(data: string) { + switch (data) { + case "notice": + if (noticeData.value.is_last || noticeData.value.last_id === 50) { + await dialog.message("已经是最后一页了"); + return; + } + loading.value = true; + loadingTitle.value = "正在获取公告数据..."; + noticeData.value = await MysOper.News.get.notice(noticeData.value.last_id + 10); + loadingTitle.value = "正在渲染数据..."; + postData.value.notice = MysOper.News.card.notice(noticeData.value); + loading.value = false; + break; + case "activity": + if (activityData.value.is_last || activityData.value.last_id === 50) { + await dialog.message("已经是最后一页了"); + return; + } + loading.value = true; + loadingTitle.value = "正在获取活动数据..."; + activityData.value = await MysOper.News.get.activity(activityData.value.last_id + 10); + loadingTitle.value = "正在渲染数据..."; + postData.value.activity = MysOper.News.card.activity(activityData.value); + loading.value = false; + break; + case "news": + if (newsData.value.is_last || newsData.value.last_id === 50) { + await dialog.message("已经是最后一页了"); + return; + } + loading.value = true; + loadingTitle.value = "正在获取新闻数据..."; + newsData.value = await MysOper.News.get.news(newsData.value.last_id + 10); + loadingTitle.value = "正在渲染数据..."; + postData.value.news = MysOper.News.card.news(newsData.value); + loading.value = false; + break; + } +} + async function toPost(post_id: number) { // 获取帖子内容 const post: Post = (await MysOper.Post.get(post_id)).post; @@ -244,4 +307,31 @@ async function toJson(post_id: number) { .card-btn svg path { fill: #faf7e8; } + +/* load more */ +.load-news { + font-family: Genshin, serif; + margin-top: 10px; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + border-radius: 5px; + cursor: pointer; + transition: all 0.3s linear; +} + +.load-news button { + background: #455167 !important; + color: #faf7e8 !important; +} + +.load-news button svg { + width: 18px; + height: 18px; +} + +.load-news button svg path { + fill: #faf7e8; +}