jwl-applet/src/pages/questionBank/wrongQuestion.vue

<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="categoryList" :scrollable="false" @click="tabChange"></u-tabs>
		</u-sticky>
		<view class="p14">
			<view class="top_box">
				<view class="tip_box flex ai-c jc-sb" v-if="tIndex==0&&showTip">
					<view class="flex ai-c">
						<u-icon name="error-circle-fill" color="#FF6E02" size="18"></u-icon>
						<text class="ml10 fs12" style="color: #FF6E02;">{{title}}</text>
					</view>
					<u-icon name="close" color="#FF6E02" size="18" @tap="showTip=false"></u-icon>
				</view>
				<view class="p14">
					<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏'}}情况</text>
					<view class="total_box mt10" @tap="toPractice">
						<view class="flex ai-c jc-sb">
							<view class="text-center">
								<view style="width: 111rpx;" class="fs30 cor-000">{{tIndex==0?wrongList.length:collectList.length}}
								</view>
							</view>
							<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c">
								<u-icon name="arrow-right" size="18"></u-icon>
							</view>
						</view>
						<view class="flex ai-c jc-sb mt5">
							<view class="text-center">
								<text class="fs14 cor-666">全部{{tIndex==0?'错题':'收藏'}}</text>
							</view>
							<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c">
								<text v-if="tIndex==0"
									class="fs14 cor-666">错{{wrongList.length}}/已做{{wrongList.length+rightList.length}}</text>
							</view>
						</view>
					</view>
					<view class="yellow_box" v-if="tIndex==0&&getPercent>10">
						<view class="flex jc-sb ai-c">
							<view>
								<text class="fs24 fw600" style="color: #FF6E02;">{{getPercent}}%</text><text
									class="fs18 cor-000 fw600">错题率</text>
								<view class="fs14 cor-000">错题率有点高，快去提升吧</view>
							</view>
							<!-- <view style="width: 156rpx;">
									<button class="riseBtn">马上提升</button>
								</view> -->
						</view>
					</view>
					<!-- <view class="flex jc-sb ai-c mt10" v-if="tIndex==0">
						<text>答对后自动移除错题</text>
						<u-switch v-model="isMoveWrong" activeColor="#0BD032"></u-switch>
					</view> -->
				</view>
				<!-- 	<view class="ml15 text-center">
								<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
									text="去看视频" color="linear-gradient(90deg, #11DF20 0%, #00B74F 100%)" icon="play-circle">
								</u-button>
								<view class="cor-333 fs15 fw600 mt10">科{{subject==1?'一':'四'}}易错试题</view>
							</view> -->


			</view>
			<view class="top_box mt15 p14" v-if="typeList&&typeList.length">
				<view class="flex jc-sb aic">
					<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏题'}}分类</text>
					<!-- <u-icon name="arrow-right" size="18"></u-icon> -->
				</view>
				<view class="flex ai-c jc-sb mt10" style="flex-wrap: wrap;">
					<!-- 这个点击效果没加 -->
					<view v-for="(item,index) of typeList" :key="index" class="category_item p14 flex jc-sb ai-c mb10" @tap="toCategoryQuestion(item)">
						<view class="topic_cont_text" style="max-width: 75%;">
							<text class="cor-000">{{item.categoryName}}</text>
						</view>
						<text class="cor-666">{{item.num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import useQuestionStore from '@/jtools/store/question' //引入store
	import storage from '@/jtools/storage';
	import {
		questionCategory
	} from '@/jtools/api/question';
	export default {
		data() {
			return {
				showTip: true,
				collectList: [],
				rightList: storage.get(`rightList_subject${this.subject}`) || [],
				wrongList: storage.get(`wrongList_subject${this.subject}`) || [],
				subject: 0,
				tIndex: 0,
				isMoveWrong: true,
				title: '重要提示：所有错题做对，再去考试！',
				categoryList: [{
					name: '错题本'
				}, {
					name: '收藏夹'
				}],
				typeList: []
			}
		},
		onLoad(op) {
			if (op.subject) {
				this.subject = op.subject
				this.rightList = storage.get(`rightList_subject${this.subject}`) || []
				this.wrongList = storage.get(`wrongList_subject${this.subject}`) || []
				this.collectList = storage.get(`collectList_subject${this.subject}`) || []
				this.getQuestionCategory()
			}
		},
		computed: {
			...mapState(useQuestionStore, ["orderQuestion_subject1", "orderQuestion_subject4"]), //映射函数，取出tagslist
			getPercent() {
				return ((this.wrongList.length / (this.wrongList.length + this.rightList.length)) * 100).toFixed(0)
			}
		},
		methods: {
			getQuestionCategory() {
				const param = {}
				if (this.tIndex == 0) {
					param.questionIdList = this.wrongList
				} else {
					param.questionIdList = this.collectList
				}
				questionCategory(param).then(resp => {
					this.typeList = resp.data
				})
			},
			tabChange(val) {
				this.tIndex = val.index
				this.getQuestionCategory()
			},
			toCategoryQuestion(item){
				const jsonString = JSON.stringify(item.errorQuestionIdList)
				console.log(item);
				uni.navigateTo({
					url: "/pages/questionBank/questionBank?navTitle=" + item.categoryName + "&questionIdList=" + jsonString+"&subject="+this.subject
				})
			},
			toPractice() {
				const navTitle = this.tIndex == 0 ? '错题本' : '收藏夹'
				let arr=[]
				if (navTitle == '错题本') {
					arr = this.wrongList
					if (!this.wrongList.length) {
						uni.showModal({
							title: '提示',
							content: '当前无错题，继续保持吧~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
						return
					}
				} else if (navTitle == '收藏夹') {
					arr=this.collectList
					if (!this.collectList.length) {
						uni.showModal({
							title: '提示',
							content: '当前无收藏题~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
						return
					}
				}
				const listJson=JSON.stringify(arr)
				uni.navigateTo({
					url: "/pages/questionBank/questionBank?navTitle=" + navTitle + "&subject=" + this.subject+"&questionIdList="+listJson
				})
			}
		}
	}
</script>

<style scoped>
	::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
		bottom: 14rpx !important;
	}

	.top_box {
		width: 100%;
		background: #FDFDFD;
		border-radius: 20rpx;
	}

	.tip_box {
		width: 100%;
		background: #FFE6D4;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 10px 14px;
	}

	.total_box {
		width: 100%;
		background: #F5F5F5;
		border-radius: 20rpx;
		padding: 14px;
	}

	.yellow_box {
		margin-top: 10px;
		padding: 14px;
		width: 100%;
		background: linear-gradient(90deg, #FBF2D4 0%, #F7E4B5 100%);
		border-radius: 20rpx;
	}

	.riseBtn {
		width: 156rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 12px;
		background-color: #F7E4B5;
		border: 1px solid #FF6E02;
		color: #FF6E02;
		border-radius: 28rpx;
	}

	.video-box {
		padding: 20rpx;
		width: 694rpx;
		height: 369rpx;
		background: #DEEFE5;
		border: 2px solid #47DB87;
		border-radius: 16rpx;
	}

	.contain-box {
		width: 406rpx;
		height: 228rpx;
		background: #00B74F;
		border-radius: 16rpx;
	}

	.category_item {
		width: 310rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
	}

	.play_btn_2 {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		left: 165.5rpx;
		top: 78rpx
	}
	.topic_cont_text {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	
	}
</style>