收藏错题接口接入

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package-lock.json

@@ -1101,6 +1101,11 @@
         "chokidar": ">=3.0.0 <4.0.0"
       }
     },
+    "scopex": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/scopex/download/scopex-4.3.3.tgz",
+      "integrity": "sha512-vd0o+mkMC8xdESr4nxxYoNUUWWBjTi5lRTOjY9ZbPG5RFlNQPTxZmv3dtADfn7b9GT++XgtRfc1Fxf2G1K6XUQ=="
+    },
     "shvl": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/shvl/download/shvl-2.0.3.tgz",
@@ -1159,12 +1164,26 @@
       "integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=",
       "dev": true
     },
+    "ts-fns": {
+      "version": "10.6.3",
+      "resolved": "https://registry.npmmirror.com/ts-fns/download/ts-fns-10.6.3.tgz",
+      "integrity": "sha512-68L8OVKDS6VMhvf+PSxBf1ss6TDYsA53SS3FcKI+xZdokHEK3sTcMmxGCJQQIAoQlBqE2waa3mzxTTAziYibNA=="
+    },
     "typescript": {
       "version": "4.3.5",
       "resolved": "https://registry.nlark.com/typescript/download/typescript-4.3.5.tgz?cache=0&sync_timestamp=1628061383668&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftypescript%2Fdownload%2Ftypescript-4.3.5.tgz",
       "integrity": "sha1-TRw3zBbok5c8RaBohrcRMjTxGfQ=",
       "dev": true
     },
+    "tyshemo": {
+      "version": "11.20.3",
+      "resolved": "https://registry.npmmirror.com/tyshemo/download/tyshemo-11.20.3.tgz",
+      "integrity": "sha512-AQrukZXlZMmqjoPEOYCRpasD9KkoWBjXk2SyM/Cxx+fxRVNIAFXajLKP4HvIoJXiXK+jdyvtqIrzVxZmP+kPDw==",
+      "requires": {
+        "scopex": "^4.3.2",
+        "ts-fns": "^10.6.2"
+      }
+    },
     "upath": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/upath/download/upath-2.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "marked": "^3.0.4",
     "mockjs": "^1.1.0",
     "soundjs": "^1.0.1",
+    "tyshemo": "^11.20.3",
     "vant": "^3.1.5",
     "vconsole": "^3.9.1",
     "vue": "^3.0.5",

src/api/index.ts

@@ -3,3 +3,4 @@ export * from "./modules/test";
 export * from "./modules/auth";
 export * from "./modules/pay";
 export * from "./modules/testScores";
+export * from "./modules/collectionAndWrong";

src/api/modules/collectionAndWrong.ts

@@ -0,0 +1,74 @@
+import request from "../request";
+
+export class CollectionAndWrong {
+  private urlList: {
+    getList: string;
+    add: string;
+    deletes: string;
+  };
+  constructor(type: CollectionAndWrongType.type) {
+    switch (type) {
+      case "collection":
+        this.urlList = {
+          getList: "/student/question/collection/list",
+          add: "/student/question/collection/collections",
+          deletes: "/student/question/collection/",
+        };
+        break;
+      case "wrong":
+        this.urlList = {
+          getList: "/student/question/wrong/list",
+          add: "/student/question/wrong/wrongs",
+          deletes: "/student/question/wrong/",
+        };
+        break;
+    }
+  }
+  /**
+   * 获取列表
+   * @param params
+   * @returns
+   */
+  getList = async (params: CollectionAndWrongType.ListParams) => {
+    const res = await request({
+      url: this.urlList.getList,
+      params,
+    });
+    return <CollectionAndWrongType.ListRes[]>res.data.rows;
+  };
+
+  /**
+   * 批量新增问题至列表
+   * @param params
+   * @returns
+   */
+  adds = async (params: CollectionAndWrongType.AddCullectionsParams) => {
+    const res = await request({
+      url: this.urlList.add,
+      data: params,
+    });
+    return <CollectionAndWrongType.AddCullectionsRes>res.data;
+  };
+
+  /**
+   * 批量删除问题
+   * @param ids
+   */
+  deletes = async (ids: number[]) => {
+    const res = await request({
+      url: this.urlList.deletes + ids,
+      method: "delete",
+    });
+    return <CollectionAndWrongType.AddCullectionsRes>res.data;
+  };
+}
+
+/**
+ * 收藏题目接口列表
+ */
+export const collectionQuestion = new CollectionAndWrong("collection");
+
+/**
+ * 错题接口列表
+ */
+export const wrongQuestion = new CollectionAndWrong("wrong");

src/api/modules/test.ts

@@ -38,14 +38,14 @@ export async function getTopicList(params: any, isVip: Boolean = true) {
     }
   };
 
-  let res = await request({
+  const res = await request({
     url: isVip
       ? "/student/qustion/info/list"
       : "/student/qustion/info/normalList",
     params,
   });
 
-  let data2 = {
+  const data = {
     total: res.data.total,
     list: res.data.rows.map((item: any) => {
       return {
@@ -61,7 +61,7 @@ export async function getTopicList(params: any, isVip: Boolean = true) {
     }),
   };
 
-  return data2;
+  return data;
 }
 
 /**
@@ -73,3 +73,19 @@ export async function getTopicClass(path: string, params: any) {
     params,
   });
 }
+
+/**
+ * 根据ids批量获取问题详情
+ */
+export const getQuestionInfoByIds = async (
+  params: Test.QuestionInfoByIdsParams
+) => {
+  const res = await request({
+    url: "/student/qustion/info/getQuestionInfoByIds",
+    params: {
+      ...params,
+      ids: params.ids.toString(),
+    },
+  });
+  return <Test.QuestionInfoByIdsRes>res.data;
+};

src/api/types/collectionAndWrong.d.ts

@@ -0,0 +1,33 @@
+declare namespace CollectionAndWrongType {
+  // enum CarType {
+  //   a = "小车",
+  //   b = "客车",
+  //   c = "货车",
+  //   d = "摩托车",
+  // }
+  type type = "collection" | "wrong";
+  type CarType = "小车" | "客车" | "货车" | "摩托车";
+  type Km = "科目一" | "科目二" | "科目三" | "科目四";
+
+  interface Question {
+    carType: CarType;
+    km: Km;
+    questionId: number;
+  }
+
+  interface ListParams extends Common.Paging {
+    carType?: CarType;
+    km?: Km;
+  }
+
+  interface ListRes extends Question {
+    id: number;
+    userId: number;
+  }
+
+  type AddCullectionsParams = Question[];
+
+  interface AddCullectionsRes extends Common.Res {
+    data: number;
+  }
+}

src/api/types/common.d.ts

@@ -0,0 +1,10 @@
+declare namespace Common {
+  interface Paging {
+    pageNum?: number;
+    pageSize?: number;
+  }
+  interface Res {
+    code: number;
+    msg: string;
+  }
+}

src/api/types/test.d.ts

@@ -0,0 +1,49 @@
+declare namespace Test {
+  interface QuestionInfo {
+    answer: string;
+    answerkeyword: string;
+    answermp3: string;
+    classIssue: string;
+    classIssueName: string;
+    copyIssue: string;
+    excellIssue: string;
+    excellIssueName: string;
+    explainGif: string;
+    explainJq: string;
+    explainJs: string;
+    explainMp3: string;
+    explainjsmp3: string;
+    id: number;
+    image: string;
+    imageYdt: string;
+    issue: string;
+    issuemp3: string;
+    liceBus: string;
+    liceCar: string;
+    liceMoto: string;
+    liceTruck: string;
+    mockIssue: string;
+    number: number;
+    opts: string;
+    placeIssue: string;
+    placeIssueName: string;
+    questionType: number;
+    sequeIssue: string;
+    sequeIssueName: string;
+    skillkeyword: string;
+    subject1: string;
+    subject2: string;
+    subject3: string;
+    subject4: string;
+    titlekeyword: string;
+  }
+
+  interface QuestionInfoByIdsParams extends Common.Paging {
+    ids: number[];
+  }
+
+  interface QuestionInfoByIdsRes extends Common.Res {
+    rows: QuestionInfo[];
+    count: number;
+  }
+}

src/hooks/index.ts

@@ -73,7 +73,14 @@ export class RouterBus {
 //       return result;
 //     }
 //     case "Map": {
-//       return new Map([...(target as any)]);
+//       const result = new Map();
+//       hash.set(target, result);
+//       target.forEach((value, key) => {
+//         let v: any, k: any;
+//         hash.set(value, v);
+//         hash.set(key, k);
+//       });
+//       return result;
 //     }
 //     default:
 //       return target;

src/main.ts

@@ -16,15 +16,3 @@ app.use(router);
 app.use(components);
 app.use(Vant);
 app.mount("#app");
-
-declare let WeixinJSBridge: any;
-
-function onBridgeReady() {
-  WeixinJSBridge.call("hideToolbar");
-}
-
-if (typeof WeixinJSBridge == "undefined") {
-  document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
-} else {
-  onBridgeReady();
-}

src/views/collection/index.vue

@@ -8,24 +8,26 @@
     </template>
   </van-nav-bar>
   <div>
-    <van-checkbox-group v-model="checked">
+    <van-checkbox-group v-model="checked" ref="checkboxGroup">
       <van-cell-group>
         <van-swipe-cell
           v-for="(item, index) in list"
           :key="index"
           :disabled="isChoose"
         >
-          <van-cell
-            clickable
-            :title="`${item}. 复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框`"
-            @click="console.log(1231312312)"
-          >
+          <van-cell clickable :title="`${item.id}. ${item.issue}`" @click="">
             <template #icon v-if="isChoose">
-              <van-checkbox :name="item" class="checkbox" />
+              <van-checkbox :name="item.id" class="checkbox" />
             </template>
           </van-cell>
           <template #right>
-            <van-button square style="height: 100%" type="danger" text="删除" />
+            <van-button
+              square
+              style="height: 100%"
+              type="danger"
+              text="删除"
+              @click="deleteClick(item.id)"
+            />
             <van-button
               square
               style="height: 100%"
@@ -60,6 +62,7 @@
           type="danger"
           size="small"
           :disabled="checked.length == 0"
+          @click="deletesClick"
           >删除选中</van-button
         >
         <van-button
@@ -74,54 +77,120 @@
   </div>
 </template>
 
+<script lang="ts">
+import { onBeforeMount } from "vue";
+import { getQuestionInfoByIds, CollectionAndWrong } from "@/api";
+
+/**
+ * 列表hook
+ */
+const useQuestionList = (type: CollectionAndWrongType.type) => {
+  const QuestionApi = new CollectionAndWrong(type);
+  const questionList = ref<Test.QuestionInfo[]>([]);
+  const collectionList = ref<CollectionAndWrongType.ListRes[]>([]);
+  const pageNum = ref(0);
+  const pageSize = ref(10);
+  /**
+   * 删除已储存的问题,总之很麻烦,不要试图去理解
+   */
+  const deletes = async (ids: number[]) => {
+    const deletesCollectionList = collectionList.value.filter((item) => {
+      return ids.includes(item.questionId);
+    });
+    const deletesIds = deletesCollectionList.map((item) => item.id);
+    const res = await QuestionApi.deletes(deletesIds);
+    //删除完成重新请求数据
+    setData();
+  };
+  /**
+   * 设置列表数据
+   */
+  const setData = async () => {
+    const collectionListRes = await QuestionApi.getList({
+      carType: "小车",
+      km: "科目一",
+      pageNum: pageNum.value,
+      pageSize: pageSize.value,
+    });
+    collectionList.value = collectionListRes;
+    const ids = collectionListRes.map((item) => item.questionId);
+    const questions = await getQuestionInfoByIds({
+      ids,
+    });
+    questionList.value = questions.rows;
+  };
+  onBeforeMount(() => {
+    setData();
+  });
+  return {
+    questionList,
+    deletes,
+  };
+};
+</script>
+
 <script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
+import { nextTick, ref, watch, computed } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const onClickLeft = () => {
   router.back();
 };
 
-const list = ref([1, 2, 3, 4, 5, 6]); //题目列表
+const collection = useQuestionList("collection");
+const wrong = useQuestionList("wrong");
+//当前视图事务
+const currentView = computed(() => {
+  if (isType.value == 0) {
+    return collection;
+  } else {
+    return wrong;
+  }
+});
+//题目列表
+const list = computed(() => {
+  return currentView.value.questionList.value;
+});
+
 const isChoose = ref(false); //开启批量选中
 const isSelectAll = ref(false); //是否全选
 const checked = ref([]); //选中内容
+const checkboxGroup = ref(); //多选框组件实例
 const isType = ref(0); //0错题 1收藏
-//切换数据列表
-watch(isType, (val) => {
-  list.value = [];
-  nextTick(() => {
-    list.value = [7, 8, 9, 10, 11, 12];
-  });
-});
 //选择全选
-watch(isSelectAll, (val) => {
-  if (val) {
+watch(isSelectAll, (value) => {
+  if (value) {
     selectAll();
   } else {
     unSelectAll();
   }
 });
-//全选状态改变
+// //全选状态改变
 watch(checked, (val) => {
   if (val.length == 0) {
     isSelectAll.value = false;
   }
-  if (val.length == list.value.length) {
+  if (val.length === list.value.length) {
     isSelectAll.value = true;
   }
 });
 //全选
 const selectAll = () => {
-  checked.value = <never[]>list.value;
+  checkboxGroup.value.toggleAll(true);
 };
 //取消全选
 const unSelectAll = () => {
   checked.value = [];
 };
 //单个删除
+const deleteClick = (id: number) => {
+  currentView.value.deletes([id]);
+};
 //单个收藏
 //批量删除
+const deletesClick = () => {
+  currentView.value.deletes(checked.value);
+};
 //批量收藏
 </script>
 

src/views/marked/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-nav-bar class="navbar" title="学车必看" v-if="navbar" />
+  <m-nav-bar class="navbar" v-if="navbar" />
   <div v-for="oneLevel in jsonData" class="flex-box">
     <div class="one-level-title">
       <m-icon type="biaotizhuangshi3" />