新增收藏错题数据模型

src/dataModel/collection.ts

@@ -0,0 +1,32 @@
+import { getQuestionInfoByIds, CollectionAndWrong } from "@/api";
+
+/**收藏与错题列表模型 */
+export class CollectionModel {
+  private collectionApi;
+
+  constructor(apiType: CollectionAndWrongType.type) {
+    this.collectionApi = new CollectionAndWrong(apiType);
+  }
+
+  /**获取列表 */
+  async getList(params: CollectionAndWrongType.ListParams) {
+    const collectionListRes = await this.collectionApi.getList(params);
+    if (collectionListRes.rows.length > 0) {
+      const ids = collectionListRes.rows.map((item) => item.questionId);
+      const questions = await getQuestionInfoByIds({
+        ids,
+      });
+      return {
+        total: collectionListRes.total,
+        rows: questions.rows,
+        collectionList: collectionListRes.rows,
+      };
+    } else {
+      return {
+        total: collectionListRes.total,
+        rows: [],
+        collectionList: collectionListRes.rows,
+      };
+    }
+  }
+}

src/views/collection/index.vue

@@ -87,20 +87,24 @@
 <script lang="ts">
 import { onBeforeMount, computed } from "vue";
 import { getQuestionInfoByIds, CollectionAndWrong } from "@/api";
+import { CollectionModel } from "@/dataModel/collection";
 
 /**
  * 列表hook
  */
 const useQuestionList = (type: CollectionAndWrongType.type) => {
+  const collectionModel = new CollectionModel(type);
   const QuestionApi = new CollectionAndWrong(type);
   const questionList = ref<Test.QuestionInfo[]>([]);
   const collectionList = ref<CollectionAndWrongType.QuestionRes[]>([]);
-  const total = ref(0);
+  const total = ref(100);
   const pageNum = ref(0);
   const pageSize = ref(10);
-  /**
-   * 删除已储存的问题,总之很麻烦,不要试图去理解
-   */
+  const loading = ref(true);
+  /**数据是否全部加载完成 */
+  const finished = ref(false);
+
+  /** 删除已收藏的问题 */
   const deletes = async (ids: number[]) => {
     const deletesCollectionList = collectionList.value.filter((item) => {
       return ids.includes(item.questionId);
@@ -110,37 +114,46 @@ const useQuestionList = (type: CollectionAndWrongType.type) => {
     //删除完成重新请求数据
     setData();
   };
-  /**
-   * 设置列表数据
-   */
+
+  /** 设置列表数据 */
   const setData = async () => {
-    const collectionListRes = await QuestionApi.getList({
+    const res = await collectionModel.getList({
       carType: "小车",
       km: "科目一",
       pageNum: pageNum.value,
       pageSize: pageSize.value,
     });
-    collectionList.value = collectionListRes.rows;
-    total.value = collectionListRes.total;
-    const ids = collectionListRes.rows.map((item) => item.questionId);
-    if (ids.length > 0) {
-      const questions = await getQuestionInfoByIds({
-        ids,
-      });
-      questionList.value = questions.rows;
-    }
+    total.value = res.total;
+    collectionList.value = res.collectionList;
+    questionList.value = res.rows;
+    loading.value = false;
+  };
+
+  /**获取下一页数据 */
+  const onLoadData = async () => {
+    const res = await collectionModel.getList({
+      carType: "小车",
+      km: "科目一",
+      pageNum: pageNum.value,
+      pageSize: pageSize.value,
+    });
+    total.value = res.total;
+    collectionList.value.push(...res.collectionList);
+    questionList.value.push(...res.rows);
+    loading.value = false;
+    finished.value = questionList.value.length === total.value;
+    pageNum.value++;
   };
 
-  const finished = computed(() => {
-    return questionList.value.length === total.value;
-  });
   onBeforeMount(() => {
-    setData();
+    // setData();
   });
   return {
     questionList,
     deletes,
     finished,
+    loading,
+    onLoadData,
   };
 };
 </script>
@@ -173,6 +186,15 @@ const finished = computed(() => {
   return currentView.value.finished.value;
 });
 
+/**显示加载状态 */
+const loading = computed(() => {
+  return currentView.value.loading;
+});
+
+const onLoad = computed(() => {
+  return currentView.value.onLoadData;
+});
+
 const isChoose = ref(false); //开启批量选中
 const isSelectAll = ref(false); //是否全选
 const checked = ref([]); //选中内容