feat: 保存

src/store/info.js

@@ -5,6 +5,8 @@ export const useInfoStore = defineStore({
   id: "info",
   state: () => {
     return {
+      isLoadMoreLock: false,
+      tabs: ["exhibitions", "activates", "news", "notices"],
       exhibitions: [],
       activates: [],
       news: [],
@@ -28,37 +30,58 @@ export const useInfoStore = defineStore({
         searchKey: "",
         type: "",
         total: 0,
+        pages: 0,
+        current: 0,
       },
     };
   },
-  getters: {},
+  getters: {
+    isLoad() {
+      return this.pagination.total > 0;
+    },
+    isLast() {
+      return (
+        this.pagination.current &&
+        this.pagination.pages &&
+        this.pagination.pages === this.pagination.current
+      );
+    },
+  },
   actions: {
-    async getExhibition(page) {
+    async getExhibitions(page) {
       this.pagination.type = "exhibition";
       this.pagination.pageNum = page || 1;
       const { data, status } = await request.post("/show/news/pageList", {
         ...this.pagination,
       });
       if (data.code === 0) {
-        const { records, total, current, page } = data.data;
-        this.exhibitions = records;
+        const { records, total, current, pages } = data.data;
+        const lists = this.exhibitions.concat(records);
+        this.exhibitions = lists;
         this.pagination.total = total;
         this.pagination.current = current;
-        this.pagination.page = page;
+        this.pagination.pages = pages;
+        this.isLoadMoreLock = false;
+      } else {
+        this.resetPage();
+        this.exhibitions = [];
       }
     },
-    async getActivity(page) {
+    async getActivates(page) {
       this.pagination.pageNum = page || 1;
       this.pagination.type = "activity";
       const { data, status } = await request.post("/show/news/pageList", {
         ...this.pagination,
       });
       if (data.code === 0) {
-        const { records, total, current, page } = data.data;
+        const { records, total, current, pages } = data.data;
         this.activates = records;
         this.pagination.total = total;
         this.pagination.current = current;
-        this.pagination.page = page;
+        this.pagination.pages = pages;
+      } else {
+        this.resetPage();
+        this.activates = [];
       }
     },
     async getNews(page) {
@@ -68,11 +91,14 @@ export const useInfoStore = defineStore({
         ...this.pagination,
       });
       if (data.code === 0) {
-        const { records, total, current, page } = data.data;
+        const { records, total, current, pages } = data.data;
         this.news = records;
         this.pagination.total = total;
         this.pagination.current = current;
-        this.pagination.page = page;
+        this.pagination.pages = pages;
+      } else {
+        this.resetPage();
+        this.news = [];
       }
     },
     async getNotices(page) {
@@ -82,11 +108,14 @@ export const useInfoStore = defineStore({
         ...this.pagination,
       });
       if (data.code === 0) {
-        const { records, total, current, page } = data.data;
+        const { records, total, current, pages } = data.data;
         this.notices = records;
         this.pagination.total = total;
         this.pagination.current = current;
-        this.pagination.page = page;
+        this.pagination.pages = pages;
+      } else {
+        this.resetPage();
+        this.notices = [];
       }
     },
 
@@ -98,5 +127,62 @@ export const useInfoStore = defineStore({
         this.detail = null;
       }
     },
+    resetPage() {
+      this.pagination = {
+        pageNum: 1,
+        pageSize: 20,
+        searchKey: "",
+        type: "",
+        total: 0,
+        current: null,
+        pages: null,
+      };
+    },
+    loadMore(currentTab) {
+      if (!this.isLoadMoreLock && !this.isLast) {
+        console.log("loadMore", currentTab);
+        this.isLoadMoreLock = true;
+        const page =
+          this.pagination.pageNum < this.pagination.pages
+            ? this.pagination.pageNum + 1
+            : this.pagination.pages;
+
+        switch (currentTab) {
+          case "exhibitions":
+            this.getExhibitions(page);
+            break;
+          case "activates":
+            this.getActivates(page);
+            break;
+          case "news":
+            this.getNews(page);
+            break;
+          case "notices":
+            this.getNotices(page);
+            break;
+        }
+      }
+    },
+    switchTab(tab) {
+      this.resetPage();
+      switch (tab) {
+        case "exhibitions":
+          this.exhibitions = [];
+          this.getExhibitions();
+          break;
+        case "activates":
+          this.activates = [];
+          this.getActivates();
+          break;
+        case "news":
+          this.news = [];
+          this.getNews();
+          break;
+        case "notices":
+          this.notices = [];
+          this.getNotices();
+          break;
+      }
+    },
   },
 });

src/views/info.vue

@@ -11,11 +11,10 @@
             </span>
           </template>
           <n-tab-pane
-            name="exhibition"
+            name="exhibitions"
             tab="展览"
             v-infinite-scroll="onLoadMore"
           >
-   
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in exhibitions">
                 <n-gi>
@@ -30,7 +29,7 @@
             </n-grid>
             <empty :show="exhibitions.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="activity" tab="活动">
+          <n-tab-pane name="activates" tab="活动">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in activates">
                 <n-gi>
@@ -60,7 +59,7 @@
             </n-grid>
             <empty :show="news.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="notice" tab="通知">
+          <n-tab-pane name="notices" tab="通知">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in notices">
                 <n-gi>
@@ -94,26 +93,13 @@ import { useInfoStore } from "../store/info";
 
 const infoStore = useInfoStore();
 const domain = ref(import.meta.env.VITE_DOMAIN_URL);
-const currentTab = ref("exhibition");
+const currentTab = ref("exhibitions");
 const news = computed(() => infoStore.news);
 const notices = computed(() => infoStore.notices);
 const activates = computed(() => infoStore.activates);
 const exhibitions = computed(() => infoStore.exhibitions);
 const handleTabFetch = (type) => {
-  switch (type) {
-    case "exhibition":
-      infoStore.getExhibition();
-      break;
-    case "activity":
-      infoStore.getActivity();
-      break;
-    case "news":
-      infoStore.getNews();
-      break;
-    case "notice":
-      infoStore.getNotices();
-      break;
-  }
+  infoStore.switchTab(type);
 };
 
 watch(
@@ -129,9 +115,10 @@ watch(
 const XGap = ref(50);
 const YGap = ref(50);
 
-const onLoadMore = (type) => {
-  // console.log("type", type);
-  console.log("onLoadMore");
+const onLoadMore = () => {
+  if (infoStore.isLoad) {
+    infoStore.loadMore(currentTab.value);
+  }
 };
 </script>