feat: 保存

src/App.vue

@@ -5,9 +5,11 @@
     inline-theme-disabled
   >
     <div class="page" :class="routeName">
-      <n-message-provider>
-        <router-view />
-      </n-message-provider>
+      <n-loading-bar-provider>
+        <n-message-provider>
+          <router-view />
+        </n-message-provider>
+      </n-loading-bar-provider>
     </div>
   </n-config-provider>
 </template>

src/store/collect.js

@@ -6,14 +6,17 @@ export const useCollectStore = defineStore({
   id: "collect",
   state: () => {
     return {
+      isLoadMoreLock: false,
       lists: [],
       entity: {},
       files: [],
       currentLevel: null,
+      total: 0,
       pagination: {
         dictLevel: "",
         endTime: "",
         pageNum: 0,
+        pages: null,
         pageSize: 20,
         searchKey: "",
         startTime: "",
@@ -21,12 +24,22 @@ export const useCollectStore = defineStore({
     };
   },
   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
+      );
+    },
     model() {
       const model = this.files.find((item) => item.type === "model");
-  
-      console.log("model", model);
       if (model) {
-        // const url =  model.id;
         return model.id;
       } else {
         return "";
@@ -34,7 +47,6 @@ export const useCollectStore = defineStore({
     },
     video() {
       const video = this.files.find((item) => item.type === "video");
-      console.log("video", video);
       if (video) {
         const url = domain + video.filePath;
         return url;
@@ -67,23 +79,49 @@ export const useCollectStore = defineStore({
     },
   },
   actions: {
+    convertLevel(dictLevel) {
+      switch (dictLevel) {
+        case 1:
+          return "一级";
+          break;
+        case 2:
+          return "二级";
+          break;
+        case 3:
+          return "三级";
+          break;
+        default:
+          return "";
+          break;
+      }
+    },
     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) {
-        const { records, total, current, page } = data.data;
-        this.lists = records;
+        const { records, total, current, pages } = data.data;
+        const templists = this.lists.concat(records);
+        this.lists = templists;
         this.total = total;
         this.pagination.current = current;
-        this.pagination.page = page;
+        this.pagination.pages = pages;
+        this.isLoadMoreLock = false;
+        return Promise.resolve(0);
+      } else {
+        this.reset();
+        return Promise.resolve(1);
       }
     },
     async getCollectList(page, level) {
       this.pagination.pageNum = page || 1;
       this.pagination.dictLevel = level === 0 ? "" : level;
       this.currentLevel = level;
-      await this.fetch();
+      return await this.fetch();
     },
 
     async getDetail(id) {
@@ -101,11 +139,38 @@ export const useCollectStore = defineStore({
       this.pagination.searchKey = searchKey;
       this.pagination.pageNum = 1;
       this.pagination.dictLevel = level === 0 ? "" : level;
-      await this.fetch();
+      return await this.fetch();
     },
     async clearSearch() {
       this.pagination.searchKey = "";
-      // await this.fetch();
+    },
+    async reset() {
+      this.lists = [];
+      this.pagination = {
+        dictLevel: "",
+        endTime: "",
+        pageNum: 0,
+        pages: null,
+        pageSize: 20,
+        searchKey: "",
+        startTime: "",
+        current: null,
+      };
+      return Promise.resolve();
+    },
+    async loadMore(level) {
+      if (!this.isLoadMoreLock && !this.isLast) {
+        console.log("loadMore -c-2", this.isLoad);
+        this.isLoadMoreLock = true;
+        this.pagination.dictLevel = level;
+        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

@@ -24,12 +24,12 @@ export const useInfoStore = defineStore({
         type: "",
         video: "",
       },
+      total: 0,
       pagination: {
         pageNum: 1,
         pageSize: 20,
         searchKey: "",
         type: "",
-        total: 0,
         pages: 0,
         current: 0,
       },
@@ -37,7 +37,7 @@ export const useInfoStore = defineStore({
   },
   getters: {
     isLoad() {
-      return this.pagination.total > 0;
+      return this.total > 0;
     },
     isLast() {
       return (
@@ -58,7 +58,7 @@ export const useInfoStore = defineStore({
         const { records, total, current, pages } = data.data;
         const lists = this.exhibitions.concat(records);
         this.exhibitions = lists;
-        this.pagination.total = total;
+        this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
         this.isLoadMoreLock = false;
@@ -75,8 +75,9 @@ export const useInfoStore = defineStore({
       });
       if (data.code === 0) {
         const { records, total, current, pages } = data.data;
-        this.activates = records;
-        this.pagination.total = total;
+        const lists = this.activates.concat(records);
+        this.activates = lists;
+        this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
       } else {
@@ -92,8 +93,9 @@ export const useInfoStore = defineStore({
       });
       if (data.code === 0) {
         const { records, total, current, pages } = data.data;
-        this.news = records;
-        this.pagination.total = total;
+        const lists = this.news.concat(records);
+        this.news = lists;
+        this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
       } else {
@@ -109,8 +111,9 @@ export const useInfoStore = defineStore({
       });
       if (data.code === 0) {
         const { records, total, current, pages } = data.data;
-        this.notices = records;
-        this.pagination.total = total;
+        const lists = this.notices.concat(records);
+        this.notices = lists;
+        this.total = total;
         this.pagination.current = current;
         this.pagination.pages = pages;
       } else {
@@ -128,12 +131,12 @@ export const useInfoStore = defineStore({
       }
     },
     resetPage() {
+      this.total = 0;
       this.pagination = {
         pageNum: 1,
         pageSize: 20,
         searchKey: "",
         type: "",
-        total: 0,
         current: null,
         pages: null,
       };

src/views/collect.vue

@@ -29,7 +29,7 @@
               </n-input-group>
             </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="3" class="tab-grid">
               <template v-for="item in collectLists">
                 <n-gi>
@@ -45,7 +45,7 @@
             </n-grid>
             <empty :show="collectLists.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="1" tab="一级">
+          <n-tab-pane name="1" tab="一级" v-infinite-scroll="onLoadMore">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in collectLists">
                 <n-gi>
@@ -61,7 +61,7 @@
             </n-grid>
             <empty :show="collectLists.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="2" tab="二级">
+          <n-tab-pane name="2" tab="二级" v-infinite-scroll="onLoadMore">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in collectLists">
                 <n-gi>
@@ -77,7 +77,7 @@
             </n-grid>
             <empty :show="collectLists.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="3" tab="三级">
+          <n-tab-pane name="3" tab="三级" v-infinite-scroll="onLoadMore">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in collectLists">
                 <n-gi>
@@ -101,14 +101,18 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, unref, watch, watchEffect } from "vue";
-import { useFullscreen } from "@vueuse/core";
+import { computed, ref, unref, watch } from "vue";
+import { vInfiniteScroll } from "@vueuse/components";
+import { useLoadingBar } from "naive-ui";
+// import { useFullscreen } from "@vueuse/core";
 import collectBox from "../components/collectBox";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import empty from "../components/empty.vue";
-// import noticeBox from "../components/noticeBox";
 import { useCollectStore } from "../store/collect";
+import { useThrottleFn } from "@vueuse/core";
+
+const loadingBar = useLoadingBar();
 const collectStore = useCollectStore();
 const domain = ref(import.meta.env.VITE_DOMAIN_URL);
 const collectLists = computed(() => collectStore.lists);
@@ -119,9 +123,11 @@ const currentTab = ref("all");
 
 watch(
   currentTab,
-  (val) => {
+  async (val) => {
+    loadingBar.start();
     const level = isNaN(Number(val)) ? 0 : Number(val);
-    collectStore.getCollectList(1, level);
+    await collectStore.getCollectList(1, level);
+    loadingBar.finish();
   },
   {
     immediate: true,
@@ -138,6 +144,19 @@ const handleSearch = () => {
     collectStore.fetch();
   }
 };
+
+const onLoadMore = useThrottleFn(async () => {
+  if (collectStore.isLoad) {
+    console.log("canLoadMore", collectStore.canLoadMore);
+    collectStore.canLoadMore && loadingBar.start();
+    const level = isNaN(Number(currentTab.value))
+      ? 0
+      : Number(currentTab.value);
+    const code = await collectStore.loadMore(level);
+    console.log("code", code);
+    loadingBar.finish();
+  }
+}, 1000);
 </script>
 
 <style lang="scss" scoped>