feat: 保存

src/store/collect.js

@@ -96,14 +96,14 @@ export const useCollectStore = defineStore({
       }
     },
     async fetch() {
-      if (this.pagination.pageNum === 1) {
-        this.lists = [];
-      }
       const { data, status } = await request.post("/show/goods/pageList", {
         ...this.pagination,
         dictLevel: this.convertLevel(this.pagination.dictLevel),
       });
       if (data.code === 0) {
+        if (this.pagination.pageNum === 1) {
+          this.lists = [];
+        }
         const { records, total, current, pages } = data.data;
         const templists = this.lists.concat(records);
         this.lists = templists;

src/store/exhibition.js

@@ -5,8 +5,10 @@ export const useExhibitionStore = defineStore({
   id: "exhibition",
   state: () => {
     return {
+      isLoadMoreLock: false,
       lists: [],
       detail: {},
+      total: 0,
       pagination: {
         type: "",
         endTime: "",
@@ -17,24 +19,46 @@ export const useExhibitionStore = defineStore({
       },
     };
   },
-  getters: {},
+  getters: {
+    canLoadMore() {
+      return this.isLoad && !this.isLast && !this.isLoadMoreLock;
+    },
+    isLoad() {
+      return this.total > 0;
+    },
+    isLast() {
+      return (
+        this.pagination.current &&
+        this.pagination.pages &&
+        this.pagination.pages === this.pagination.current
+      );
+    },
+  },
   actions: {
     async fetch() {
       const { data, status } = await request.post("/show/exhibition/pageList", {
         ...this.pagination,
       });
       if (data.code === 0) {
+        if (this.pagination.pageNum === 1) {
+          this.lists = [];
+        }
         const { records, total, current, page } = data.data;
-        this.lists = records;
-        this.pagination.total = total;
+        const templists = this.lists.concat(records);
+        this.lists = templists;
+        this.total = total;
         this.pagination.current = current;
         this.pagination.page = page;
+        return Promise.resolve(0);
+      } else {
+        this.lists = [];
+        return Promise.resolve(1);
       }
     },
     async getExhibitionList(page, type) {
       this.pagination.pageNum = page || 1;
       this.pagination.type = type === "all" ? "" : type;
-      await this.fetch();
+      return await this.fetch();
     },
 
     async getDetail(id) {
@@ -56,5 +80,30 @@ export const useExhibitionStore = defineStore({
     async clearSearch() {
       this.pagination.searchKey = "";
     },
+    resetPage() {
+      this.total = 0;
+      this.pagination = {
+        pageNum: 1,
+        pageSize: 20,
+        searchKey: "",
+        type: "",
+        current: null,
+        pages: null,
+      };
+    },
+    async switchTab() {},
+    async loadMore(type) {
+      if (!this.isLoadMoreLock && !this.isLast) {
+        this.isLoadMoreLock = true;
+        this.pagination.type = type;
+        const page =
+          this.pagination.pageNum < this.pagination.pages
+            ? this.pagination.pageNum + 1
+            : this.pagination.pages;
+        this.pagination.pageNum = page;
+
+        return await this.fetch();
+      }
+    },
   },
 });

src/store/info.js

@@ -36,6 +36,9 @@ export const useInfoStore = defineStore({
     };
   },
   getters: {
+    canLoadMore() {
+      return this.isLoad && !this.isLast && !this.isLoadMoreLock;
+    },
     isLoad() {
       return this.total > 0;
     },
@@ -62,9 +65,11 @@ export const useInfoStore = defineStore({
         this.pagination.current = current;
         this.pagination.pages = pages;
         this.isLoadMoreLock = false;
+        return Promise.resolve(0);
       } else {
         this.resetPage();
         this.exhibitions = [];
+        return Promise.resolve(1);
       }
     },
     async getActivates(page) {
@@ -80,9 +85,11 @@ export const useInfoStore = defineStore({
         this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
+        return Promise.resolve(0);
       } else {
         this.resetPage();
         this.activates = [];
+        return Promise.resolve(1);
       }
     },
     async getNews(page) {
@@ -98,9 +105,11 @@ export const useInfoStore = defineStore({
         this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
+        return Promise.resolve(0);
       } else {
         this.resetPage();
         this.news = [];
+        return Promise.resolve(1);
       }
     },
     async getNotices(page) {
@@ -116,9 +125,11 @@ export const useInfoStore = defineStore({
         this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
+        return Promise.resolve(0);
       } else {
         this.resetPage();
         this.notices = [];
+        return Promise.resolve(1);
       }
     },
 
@@ -166,25 +177,24 @@ export const useInfoStore = defineStore({
         }
       }
     },
-    switchTab(tab) {
+    async switchTab(tab) {
       this.resetPage();
       switch (tab) {
         case "exhibitions":
           this.exhibitions = [];
-          this.getExhibitions();
-          break;
+          return this.getExhibitions();
+
         case "activates":
           this.activates = [];
-          this.getActivates();
-          break;
+          return this.getActivates();
+
         case "news":
           this.news = [];
-          this.getNews();
-          break;
+          return this.getNews();
+
         case "notices":
           this.notices = [];
-          this.getNotices();
-          break;
+          return this.getNotices();
       }
     },
   },

src/views/collect-detail.vue

@@ -38,12 +38,14 @@
 
 <script setup>
 import { computed, unref, onMounted } from "vue";
+import { useLoadingBar } from "naive-ui";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
 import showCase from "../components/showCase";
 import { useCollectStore } from "../store/collect";
 const collectStore = useCollectStore();
+
 const entity = computed(() => collectStore.entity);
 const files = computed(() => collectStore.files);
 const video = computed(() => collectStore.video);

src/views/exhibition.vue

@@ -11,7 +11,7 @@
               <img src="@/assets/subtitle_2.png" />
             </span>
           </template>
-          <n-tab-pane name="all" tab="全部展览">
+          <n-tab-pane name="all" tab="全部展览" v-infinite-scroll="onLoadMore">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in exhibitionList">
                 <n-gi>
@@ -30,7 +30,7 @@
             </n-grid>
             <empty :show="exhibitionList.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="long" tab="常设展览">
+          <n-tab-pane name="long" tab="常设展览" v-infinite-scroll="onLoadMore">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in exhibitionList">
                 <n-gi>
@@ -48,7 +48,11 @@
             </n-grid>
             <empty :show="exhibitionList.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="topic" tab="专题展览">
+          <n-tab-pane
+            name="topic"
+            tab="专题展览"
+            v-infinite-scroll="onLoadMore"
+          >
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in exhibitionList">
                 <n-gi>
@@ -66,7 +70,7 @@
             </n-grid>
             <empty :show="exhibitionList.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="temp" tab="临时展览">
+          <n-tab-pane name="temp" tab="临时展览" v-infinite-scroll="onLoadMore">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in exhibitionList">
                 <n-gi>
@@ -93,18 +97,19 @@
 
 <script setup>
 import { computed, watch } from "vue";
+import { vInfiniteScroll } from "@vueuse/components";
+import { useThrottleFn } from "@vueuse/core";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import exhibitionBox from "../components/exhibitionBox";
 import { useExhibitionStore } from "../store/exhibition";
 import empty from "../components/empty.vue";
 
+const loadingBar = useLoadingBar();
 const exhibitionStore = useExhibitionStore();
 const domain = ref(import.meta.env.VITE_DOMAIN_URL);
 const exhibitionList = computed(() => exhibitionStore.lists);
 
-
-
 const XGap = ref(50);
 const YGap = ref(50);
 
@@ -112,14 +117,24 @@ const currentTab = ref("all");
 
 watch(
   currentTab,
-  (val) => {
+  async (val) => {
     console.log("val", val);
-    exhibitionStore.getExhibitionList(1, val);
+    loadingBar.start();
+    await exhibitionStore.getExhibitionList(1, val);
+    loadingBar.finish();
   },
   {
     immediate: true,
   }
 );
+const onLoadMore = useThrottleFn(async () => {
+  if (exhibitionStore.isLoad) {
+    console.log("canLoadMore", exhibitionStore.canLoadMore);
+    exhibitionStore.canLoadMore && loadingBar.start();
+    await exhibitionStore.loadMore(currentTab.value);
+    loadingBar.finish();
+  }
+}, 1000);
 </script>
 
 <style lang="scss" scoped>

src/views/info.vue

@@ -90,16 +90,20 @@ import sideMenu from "../components/sideMenu";
 import noticeBox from "../components/noticeBox";
 import empty from "../components/empty.vue";
 import { useInfoStore } from "../store/info";
+import { useLoadingBar } from "naive-ui";
 
 const infoStore = useInfoStore();
+const loadingBar = useLoadingBar();
 const domain = ref(import.meta.env.VITE_DOMAIN_URL);
 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) => {
-  infoStore.switchTab(type);
+const handleTabFetch = async (type) => {
+  loadingBar.start();
+  await infoStore.switchTab(type);
+  loadingBar.finish();
 };
 
 watch(