jpcj-h5/src/views/collection/index.vue

<template>
	<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 class="choose">
			<div @click="goExercise('wrong')" 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="clearTopicsWrong" style="color: #498ef5" class="clear">清空错题</button>
				<button
					@click.stop="
						() => {
							wrongSyncVisible = true;
						}
					"
					style="color: #498ef5; left: 60vw"
					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="clearTopicsCollection" style="color: #01c18d" class="clear">清空收藏</button>
				<button
					@click.stop="
						() => {
							collectSyncVisible = true;
						}
					"
					style="color: #01c18d; left: 60vw"
					class="clear">
					同步收藏
				</button>
			</div>
		</div>
		<div class="bottom">
			<img :src="collectionBottomBg" />
		</div>
		<van-popup position="bottom" v-model:show="wrongSyncVisible">
			<van-picker
				@cancel="
					() => {
						wrongSyncVisible = false;
					}
				"
				
				:columns="['合并本机和云端错题', '备份本机收藏到错题', '恢复云端收藏到错题']"></van-picker>
		</van-popup>

		<van-popup position="bottom" v-model:show="collectSyncVisible">
			<van-picker
				@cancel="
					() => {
						collectSyncVisible = false;
					}
				"
				:columns="['合并本机和云端收藏', '备份本机收藏到云端', '恢复云端收藏到本机']"></van-picker>
		</van-popup>
		<!-- <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>
</template>

<script setup lang="ts">
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();
};
const {
	router: { push },
} = new RouterBus();

const gsMap: {
	xc: string;
	hc: string;
	kc: string;
	mtc: string;
} = {
	xc: "小车",
	hc: "货车",
	kc: "客车",
	mtc: "摩托车",
};
const clearTopicsCollection = (e: PointerEvent) => {
	e.preventDefault();
	e.stopPropagation();
	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: "清除成功" });
					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;
						});
				});
		})
		.catch(() => {
			// on cancel
		});
};
const clearTopicsWrong = (e: PointerEvent) => {
	e.preventDefault();
	e.stopPropagation();
	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: "清除成功" });
					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;
						});
				});
		})
		.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();
const wrongSyncVisible = ref(false);
const collectSyncVisible = ref(false);
</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;
}
.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;
		}
	}
}
</style>