questionbankvue3/pages/exercises/wrongQuestion/wrongQuestion.vue

<template>
	<view class="content">
		<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" :bgColor="'transparent'">
			<template #center>
				<view class="u-nav-slot flex">
					<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">错题本</view>
					<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">收藏夹</view>
				</view>
			</template>
		</up-navbar>
		
		<view class="card">
			<view class="h7">我的{{ currentNav==2?'收藏':'错题'}}</view>
			<view class="flex-b">
				<view class="cardBg">
					<view class="flex" @click="goPage('/pages/exercises/brushQuestions/wrongQuestions?wrong=' +currentNav, countInfo.allCount)">
						<view class="label">全部{{ currentNav==2?'收藏':'错题'}}</view>
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
					<view class="num">{{ countInfo.allCount}}</view>
				</view>
				<view class="cardBg" :class="{green: currentNav==2}">
					<view class="flex" @click="goPage('/pages/exercises/brushQuestions/wrongQuestions?wrong=' + currentNav + '&isHigh=1', countInfo.highCount)">
						<view class="label">{{ currentNav==2?'今日收藏': '高频错题'}}</view>
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
					<view class="num">{{ countInfo.highCount}}</view>
				</view>
			</view>
			<view class="flex-b" v-if="currentNav==1">
				<view class="h8">答对题后自动移除错题</view>
				<u-switch v-model="switchValue" @change="changeSwitch"></u-switch>
			</view>
		</view>
		<view class="card" v-if="subMenu.length">
			<view class="flex-b">
				<view class="h7">章节练习</view>
				<view class="rightall" @click="deleteAll">
					<u-icon name="trash" color="#ccc" size="14"></u-icon>
					<view class="txt">全部移除</view>
				</view>
			</view>
			<view class="radioWrap" v-if="switchValue&&currentNav==1">
				<up-radio-group 
				    v-model="switchNum"
				   >
					<up-radio label="答对1次就移除" :name="1" class="mr"></up-radio>
					<up-radio label="答对3次就移除" :name="3" class="mr"></up-radio>
				</up-radio-group>
			</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in subMenu" :key="index" @click="subMenuClick(item)">
					<view class="num">{{index+1}}</view>
					<view class="txt">{{ item.name }}</view>
					<view class="rightBox">
						<view class="p">错{{ item.total }}题</view>
						<u-icon name="arrow-right" color="#D9D9D9" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { myWrongQuestion, questionSubmenu, deleteWrongOrCol } from '@/config/api.js'
	import { computed, ref } from 'vue'
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	
	import { onShow } from "@dcloudio/uni-app"
	
	import wrongQuestion from '@/store/modules/wrongQuestionBook.js'
	let usewrongQuestion = wrongQuestion()
	
	const value = ref(false)
	const currentNav = ref(1)
	let list = ref([])
	// let switchValue = ref(false)
	
	function subMenuClick(item) {
		if(!item.total) return uni.$u.toast('暂无题目')
		usecarStore.setCar('chapter', item.param)
		uni.navigateTo({
			url: '/pages/exercises/brushQuestions/wrongQuestions?wrong=' +currentNav.value
		})
	}
	
	function changeNav(val) {
		currentNav.value = val
		countInfo.value = {}
		subMenu.value = []
		myWrongQuestionFn()
		questionSubmenuFn()
	}
		// 1-错题，2-收藏 
	let countInfo = ref({})
	async function myWrongQuestionFn() {
		const {data: res} = await myWrongQuestion({stepType: usecarStore.carInfo.stepType,carType: usecarStore.carInfo.carType, city: usecarStore.carInfo.city,type: currentNav.value})
		countInfo.value = res
		console.log(res)
	}
	
	// 章节列表
	const subMenu = ref([])
	async function questionSubmenuFn() {
		const {data: res} = await questionSubmenu({stepType: usecarStore.carInfo.stepType,carType: usecarStore.carInfo.carType, type: currentNav.value})
		subMenu.value = res
		console.log(res)
	}
	
	onShow(()=>{
		myWrongQuestionFn()
		questionSubmenuFn()
	})
	
	function changeSwitch(val) {
		console.log(val)
	}
	// 是否对题后自动删除错题
	let switchValue = computed({
		get() {
			return usewrongQuestion.frequency?true:false
		},
		set(val) {
			let num = val?1:0
			usewrongQuestion.setFrequency(num)
		}
	})
	// 答对几次删除
	let switchNum = computed({
		get() {
			return usewrongQuestion.frequency
		},
		set(val) {
			usewrongQuestion.setFrequency(val)
		}
	})
	
	// 删除全部的错题
	 function deleteAll() {
		uni.showModal({
			title: '确定要全部移除吗？',
			async success() {
				let obj = {
				  "carType": usecarStore.carInfo.carType,
				  "questionId": '',
				  "stepType": usecarStore.carInfo.stepType,
				  "type":  currentNav.value
				}
				await deleteWrongOrCol(obj)
				myWrongQuestionFn()
				questionSubmenuFn()
			}
		})
		
	}
	
	function goPage(url, num) {
		if(!num) return uni.$u.toast('暂无题目')
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.radioWrap {
		padding: 40rpx 0 0 0;
		.mr {
			margin: 0 34rpx;
		}
	}
	.u-nav-slot {
		display: flex;
		.btn {
			color: #fff;
			position: relative;
			padding: 0 20rpx;
			&.active {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 30rpx;
					height: 4rpx;
					background: #F6F7F8;
					border-radius: 2rpx;
					transform: translateX(-50%);
				}
			}
		}
	}
	.content {
	  width: 100%;
	  // background-color: #F6F7FA;
	  min-height: 100vh;
	  padding: 100rpx 30rpx 30rpx 30rpx;
	  background: url('../../../static/images/topbg.png') #F6F7FA no-repeat;
	  background-size: 100% 410rpx;
	  .card {
		  width: 100%;
		  background: #FFFFFF;
		  border-radius: 20rpx;
		  padding: 20rpx;
		  margin-top: 20rpx;
	    .h7 {
			font-size: 32rpx;
			font-weight: 550;
	    }
	
	    .cardBg {
			width: 48%;
			height: 147rpx;
			background: linear-gradient(125deg, #3776FF 0%, #6193FF 100%);
			border-radius: 20rpx;
			padding: 20rpx;
			color: #fff;
			margin-top: 30rpx;
			&:last-child {
				background: linear-gradient(125deg, #FE5656 0%, #FFC5C5 100%);
			}
			&.green {
				background: linear-gradient(125deg, #53FC87 0%, #80FEB5 100%);
			}
	      .flex {
	        .label {
				font-size: 24rpx;
	        }
	
	        u-icon {
				
	        }
	      }
	
	      .num {
			font-weight: bold;
			font-size: 48rpx;
			margin-top: 20rpx;
	      }
	    }
	
	    .flex-b {
	      .h8 {
			font-size: 28rpx;
			line-height: 120rpx;
			font-weight: 550;
	      }
	
	      u-switch {
	
	      }
	    }
	  }
	  .rightall {
		  display: flex;
		  align-items: center;
		  font-size: 24rpx;
		  color: #ccc;
		  .txt {
			  margin-left: 6rpx;
		  }
	  }
	  .ul {
	  	padding-top: 30rpx;
	    .li {
	  	  width: 100%;
	  	  display: flex;
	  	  align-items: center;
	  	  padding: 34rpx 0;
	      .num {
	  		height: 32rpx;
	  		background: #F5C142;
	  		border-radius: 50%;
	  		padding: 0 10rpx;
	  		color: #fff;
	  		font-size: 24rpx;
	  		line-height: 32rpx;
	      }
	  	
	      .txt {
	  		flex: 1;
	  		width: 0;
	  		font-size: 28rpx;
	  		padding: 0 20rpx;
	      }
	  	
	      .rightBox {
	  		display: flex;
	  		align-items: center;
	        .p {
	  		font-size: 24rpx;
	  		color: #FF3333;
	  		margin-right: 4rpx;
	        }
	  	
	        u-icon {
	  		
	        }
	      }
	    }
	  }
	}
</style>