收藏和错题的改版

src/api/modules/collectionAndWrong.ts

@@ -6,6 +6,7 @@ export class CollectionAndWrong {
     getList: string;
     add: string;
     deletes: string;
+    deleteAll:string;
   };
   constructor(type: CollectionAndWrongType.type) {
     switch (type) {
@@ -14,6 +15,7 @@ export class CollectionAndWrong {
           getList: "/student/question/collection/list",
           add: "/student/question/collection/collections",
           deletes: "/student/question/collection/",
+          deleteAll:"/student/question/collection/cancelAll"
         };
         break;
       case "wrong":
@@ -21,6 +23,7 @@ export class CollectionAndWrong {
           getList: "/student/question/wrong/list",
           add: "/student/question/wrong/wrongs",
           deletes: "/student/question/wrong/",
+          deleteAll:"/student/question/wrong/cancelAll"
         };
         break;
     }
@@ -64,6 +67,16 @@ export class CollectionAndWrong {
     });
     return <CollectionAndWrongType.AddCullectionsRes>res.data;
   };
+  deleteAll = async (data: CollectionAndWrongType.ListParams)=>{
+    const res = await request({
+      url: this.urlList.deleteAll,
+      method: "delete",
+      data
+    });
+    return res.data;
+
+
+  }
 }
 
 /**

src/api/types/collectionAndWrong.d.ts

@@ -14,6 +14,11 @@ declare namespace CollectionAndWrongType {
     km: Km;
     questionId: number;
   }
+  interface listParamse extends Common.Paging{
+    carType: CarType;
+    km: Km;
+
+  }
 
   interface ListParams extends Common.Paging {
     carType?: CarType;

src/hooks/exercise/list.ts

@@ -14,7 +14,6 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 	const subject = useRouter().currentRoute.value.query.subject as string; //路由subject参数
 	onBeforeMount(async () => {
 		let res: TestModelListResType;
-
 		if (type == "normal" || type == "test") {
 			res = await testModel.getList({
 				...query,
@@ -30,9 +29,6 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 				total: wrongSet.length,
 				list: wrongSet
 			} as TestModelListResType
-
-
-
 		}
 		else if (type == "wrong") {
 			const collectionModel = new CollectionModel(type);

src/model/collection.ts

@@ -2,6 +2,7 @@ import { getQuestionInfoByIds, CollectionAndWrong } from "@/api";
 
 /**收藏与错题列表模型 */
 export class CollectionModel {
+	[x: string]: any;
 	private collectionApi;
 
 	constructor(apiType: CollectionAndWrongType.type) {
@@ -49,4 +50,10 @@ export class CollectionModel {
 		const res = await this.collectionApi.adds(params);
 		return res.data;
 	}
+
+	/** 新增收藏或者错题 */
+	async deleteAll(params: CollectionAndWrongType.listParamse) {
+		const res = await this.collectionApi.deleteAll(params);
+		return res.data;
+	}
 }

src/views/collection/index.vue

@@ -1,80 +1,261 @@
 <template>
-  <div class="collection-box">
-    <van-nav-bar left-arrow @click-left="onClickLeft" placeholder>
-      <template #title>
-        <div class="title">
-          <span
-            :class="{ active: isType == 0 }"
-            @click="
-              isType = 0;
-              swiper.swipeTo(0);
-            "
-            >做错题</span
-          >
-          <span
-            :class="{ active: isType == 1 }"
-            @click="
-              isType = 1;
-              swiper.swipeTo(1);
-            "
-            >收藏题</span
-          >
-        </div>
-      </template>
-    </van-nav-bar>
-    <van-swipe ref="swiper" :show-indicators="false" :touchable="false">
+	<div class="collection-box">
+		<van-nav-bar title="做错题和收藏题" left-arrow @click-left="onClickLeft" placeholder> </van-nav-bar>
+		<div>
+			<img class="collectionHeader" :src="collectionHeader" />
+		</div>
+		<div @click="goExercise('wrong')" class="choose">
+			<div class="choose-img">
+				<span class="choose-text1"> 做错题 </span>
+				<span class="choose-text2"> 共 {{ wrongList.length }} 题 </span>
+				<img class="" :src="wrongBg" />
+				<img class="goArrow" :src="goArrow" />
+				<button @click="clearTopics('wrong')" style="color: #498ef5" class="clear">清空错题</button>
+			</div>
+			<div @click="goExercise('collection')" class="choose-img">
+				<span class="choose-text1">收藏题</span>
+				<span class="choose-text2"> 共 {{ collectionList.length }} 题 </span>
+				<img class="" :src="collectionBg" />
+				<img class="goArrow" :src="goArrow" />
+				<button @click="clearTopics('collection')" style="color: #01c18d" class="clear">清空收藏</button>
+			</div>
+		</div>
+		<div class="bottom">
+			<img :src="collectionBottomBg" />
+		</div>
+		<!-- <listCom type="wrong"></listCom> -->
+		<!-- <van-swipe ref="swiper" :show-indicators="false" :touchable="false">
       <van-swipe-item> <listCom type="wrong" /> </van-swipe-item>
       <van-swipe-item> <listCom type="collection" /> </van-swipe-item>
-    </van-swipe>
-  </div>
+    </van-swipe> -->
+	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import listCom from "./components/list.vue";
+import collectionHeader from "@/assets/img/collectionHeader.png";
+import collectionBg from "@/assets/img/collectionBg.png";
+import wrongBg from "@/assets/img/wrongBg.png";
+import collectionBottomBg from "@/assets/img/collectionBottomBg.png";
+import goArrow from "@/assets/img/goArrow.png";
+import { CollectionModel } from "@/model/collection";
+import { CollectionAndWrong } from "@/api/index";
+import { Dialog } from "vant";
+import { RouterBus } from "@/hooks";
 const router = useRouter();
+const query = useRoute().query;
+const wrongList = ref<CollectionAndWrongType.Question[]>([]);
+const collectionList = ref<CollectionAndWrongType.Question[]>([]);
+onMounted(() => {
+	let wrongModel = new CollectionAndWrong("wrong");
+	wrongModel
+		.getList({
+			km: router.currentRoute.value.query.subject === "1" ? "科目一" : "科目四",
+			carType: router.currentRoute.value.query.vehicle as CollectionAndWrongType.CarType,
+		})
+		.then((res) => {
+			wrongList.value = res.rows;
+		});
+	let collectionModel = new CollectionAndWrong("collection");
+	collectionModel
+		.getList({
+			km: router.currentRoute.value.query.subject === "1" ? "科目一" : "科目四",
+			carType: router.currentRoute.value.query.vehicle as CollectionAndWrongType.CarType,
+		})
+		.then((res) => {
+			collectionList.value = res.rows;
+		});
+});
 const onClickLeft = () => {
-  router.back();
+	router.back();
 };
+const {
+	router: { push },
+} = new RouterBus();
 
+const gsMap: {
+	xc: string;
+	hc: string;
+	kc: string;
+	mtc: string;
+} = {
+	xc: "小车",
+	hc: "货车",
+	kc: "客车",
+	mtc: "摩托车",
+};
+const clearTopics = (type: string) => {
+	if (type == "wrong") {
+		let collectionModel = new CollectionModel("wrong");
+		Dialog.confirm({
+			title: "清除错题",
+			message: "是否清除错题",
+		})
+			.then(() => {
+				// on confirm
+				collectionModel
+					.deleteAll({
+						km: router.currentRoute.value.query.subject === "1" ? "科目一" : "科目四",
+						carType: router.currentRoute.value.query.vehicle as CollectionAndWrongType.CarType,
+					})
+					.then((res) => {
+						Dialog.alert({ message: "清除成功" });
+					});
+			})
+			.catch(() => {
+				// on cancel
+			});
+	} else if (type == "collection") {
+		let collectionModel = new CollectionModel("collection");
+		Dialog.confirm({
+			title: "清除收藏",
+			message: "是否清除收藏",
+		})
+			.then(() => {
+				// on confirm
+				collectionModel
+					.deleteAll({
+						km: router.currentRoute.value.query.subject === "1" ? "科目一" : "科目四",
+						carType: gsMap[router.currentRoute.value.query.gs] as CollectionAndWrongType.CarType,
+					})
+					.then((res) => {
+						Dialog.alert({ message: "清除成功" });
+					});
+			})
+			.catch(() => {
+				// on cancel
+			});
+	}
+};
+const goExercise = (type: string) => {
+	switch (type) {
+		case "wrong":
+			if (wrongList.value.length == 0) {
+				Dialog.alert({ title: "没有题目" });
+				return;
+			}
+			push({
+				name: "wrongExercise",
+				query: {
+					...query,
+
+					title: "错题",
+				},
+			});
+			break;
+		case "collection":
+			if (collectionList.value.length == 0) {
+				Dialog.alert({ title: "没有题目" });
+				return;
+			}
+			push({
+				name: "collectionExercise",
+				query: {
+					...query,
+
+					title: "收藏",
+				},
+			});
+			break;
+		default:
+			break;
+	}
+};
 const isType = ref(0); //0错题 1收藏
 const swiper = ref();
 </script>
 
 <style lang="scss" scoped>
+.bottom {
+	bottom: 0;
+	img {
+		width: 100%;
+	}
+}
+.choose {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	transform: translate(0%, -8%);
+
+	.choose-img {
+		width: 92%;
+		position: relative;
+		.clear {
+			background: #fff;
+			border-radius: 15px;
+			position: absolute;
+			bottom: 20px;
+			width: 100px;
+			height: 30px;
+			left: 20px;
+			bottom: 20px;
+			border: 0;
+			font-size: 13px;
+		}
+		.goArrow {
+			position: absolute;
+			top: 32px;
+			right: 20px;
+			width: 73px;
+		}
+		.choose-text1 {
+			position: absolute;
+			font-size: 25px;
+			color: #fff;
+			left: 20px;
+			top: 20px;
+		}
+		.choose-text2 {
+			position: absolute;
+			top: 56px;
+			left: 22px;
+			font-size: 25px;
+			color: #fff;
+		}
+		img {
+			width: 100%;
+		}
+	}
+}
+.collectionHeader {
+	width: 100%;
+}
 .collection-box {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
 }
 .title {
-  display: flex;
-  width: 130px;
-  justify-content: space-between;
-  align-items: center;
-  span {
-    font-size: 15px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    line-height: 13px;
-    color: #0a1a33;
-    position: relative;
-    padding: 8px;
-  }
-  .active {
-    &:after {
-      position: absolute;
-      content: "";
-      width: 20px;
-      height: 4px;
-      border-radius: 3px;
-      background-color: #498ef5;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 100;
-    }
-  }
+	display: flex;
+	width: 130px;
+	justify-content: space-between;
+	align-items: center;
+	span {
+		font-size: 15px;
+		font-family: PingFang SC;
+		font-weight: 400;
+		line-height: 13px;
+		color: #0a1a33;
+		position: relative;
+		padding: 8px;
+	}
+	.active {
+		&:after {
+			position: absolute;
+			content: "";
+			width: 20px;
+			height: 4px;
+			border-radius: 3px;
+			background-color: #498ef5;
+			bottom: 0;
+			left: 50%;
+			transform: translateX(-50%);
+			z-index: 100;
+		}
+	}
 }
 </style>