zc_saas_h5/pages2/subject/wrong.vue

<template>
	<view class="safeArea">
		<nav-bar title="错题集"  class="nav"></nav-bar>
		<view class="sceenBox">
			<view :class="['item', {'active':sceenType===1} ]" @click="showSceen(1)">全部题库记录<u-icon class="icon" :class="sceenType ===1 ? 'animals':''"  name="arrow-down"></u-icon></view>
			<view :class="['item', {'active':sceenType===2} ]" @click="showSceen(2)">全部试卷类型<u-icon class="icon" :class="sceenType ===2? 'animals':''"  name="arrow-down"></u-icon></view>
		</view>
		<view class="sceenModel" v-if="sceenType" :style="{top:modalTop+'px'}" >
			<view class="sceenModelBg" @click="hideSceen"></view>
			<view class="sceenMain">
				<scroll-view scroll-y="true" style="height:100%">
					<view class="sceenMainContent">
						<template v-if="sceenType===1">
							<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList1" :key="index" @click="choseRecord(index)">{{item.goodsName}}</view>
						</template>
						<template v-if="sceenType===2">
							<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList2" :key="index" @click="choseType(index)">{{item.paperName}}</view>
						</template>
					</view>
				</scroll-view>
				
			</view>
		</view>
		<view class="wrap">
			<view class="wrongTab">
				<view class="item" :class="{active:type == 1}" @click="selectType(1)">试卷归类</view>
				<view class="item" :class="{active:type == 2}" @click="selectType(2)">题型归类</view>
			</view>
			<view class="wrongHead">
				<view class="title">错题统计<text class="sub">（不含简答和案例题）</text></view>
				<view class="progress">
					<text>{{total}}</text>
				</view>
			</view> 
			<view class="wrongList" v-if="type == 1">
				<view class="item" v-for="(item,index) in testList.rows" :key="index">
					<view class="title">{{item.examName}}</view>
					<view class="bt">
						<view class="left">错题数<text class="num">{{item.wrongQuestionNum}}</text></view>
						<view class="right">
							<navigator  hover-class="none" :url="'/pages2/subject/wrongBank?examId='+item.examId">
								<view class="btn">重做</view>
							</navigator>
							<navigator  hover-class="none" :url="'/pages2/subject/wrongBank?examId='+item.examId+'&explain=1'">
								<view class="btn">解析</view>
							</navigator>
							<!-- <view class="btn">解析</view> -->
						</view>
					</view>
				</view>
			</view>
			
			<view class="wrongList" v-if="type == 2">
				<view class="item" v-for="(item,index) in typeList.rows" :key="index">
					<view class="title">
						<text v-if="item.type==1">单选题</text>
						<text v-if="item.type==2">多选题</text>
						<text v-if="item.type==3">判断题</text>
						<text v-if="item.type==4">案例题</text>
						<text v-if="item.type==5">简答题</text>
					</view>
					<view class="bt">
						<view class="left">错题数<text class="num">{{item.num}}</text></view>
						<view class="right">
							<navigator  hover-class="none" :url="'/pages2/subject/wrongTypeBank?type='+item.type">
								<view class="btn">重做</view>
							</navigator>
							<navigator  hover-class="none" :url="'/pages2/subject/wrongTypeBank?type='+item.type+'&explain=1'">
								<view class="btn">解析</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			sceenType: null,
			scennList1:[
				{goodsId: '', goodsName: '全部题库记录', checked: true}
			],
			scennList2:[
				{paperId: '', paperName: '全部试卷类型', checked: true}
			],
			type:1,
			testList:[],
			typeList:[],
			goodsid:'',
			paperid:'',
			total:0,
			modalTop:0,
		};
	},
	onPullDownRefresh() {},
	onShow() {
		this.getData();
	},
	onLoad(option) {
		this.listGoodsUserQuestion();
		this.examaperList();
		
		uni.getSystemInfo({
			success:(e) => {
				let info = uni.createSelectorQuery().select(".nav");
				info.boundingClientRect((navData) => { //data - 各种参数
				
					let info = uni.createSelectorQuery().select(".sceenBox");
					info.boundingClientRect((tabData) => { //data - 各种参数
						this.modalTop = navData.height + tabData.height
						console.log(navData) // 获取元素宽度
						console.log(tabData) // 获取元素宽度
					}).exec()
				}).exec()
			}
		})
	},
	methods: {
		getData() {
			if(this.type == 1) {
				this.wrongRecordList()
			} else if(this.type == 2) {
				this.wrongRecordTypeList();
			}
		},
		examaperList() {
			this.$api.examaperList({
				
			}).then(res => {
				this.scennList2 = [...this.scennList2,...res.data.rows];
			})
		},
		
		listGoodsUserQuestion() {
			this.$api.listGoodsUserQuestion({
				
			}).then(res => {
				this.scennList1 = [...this.scennList1,...res.data.rows];
			})
		},
		wrongRecordList() {
			this.$api.wrongRecordList({
				paperId:this.paperid,
				goodsId:this.goodsid
			}).then(res => {
				this.testList = res.data;
				let total = 0;
				this.testList.rows.forEach(item => {
					total += item.wrongQuestionNum;
				})
				
				this.total = total
			})
		},
		wrongRecordTypeList() {
			this.$api.wrongRecordTypeList({
				paperId:this.paperid,
				goodsId:this.goodsid
			}).then(res => {
				this.typeList = res.data;
				
				let total = 0;
				this.typeList.rows.forEach(item => {
					total += item.num;
				})
				
				this.total = total
			})
		},
		selectType(type) {
			this.type = type;
			this.getData();
		},
		showSceen(type){
			if(this.sceenType == type) {
				this.sceenType = null
				return;
			}
			this.sceenType = type
		},
		hideSceen(){
			this.sceenType = null
		},
		choseRecord(index) {
			this.sceenType = null
			this.scennList1.forEach((item,idx)=>{
				this.$set(item, 'checked',false)
				if(index==idx){
					this.goodsid = item.goodsId
					this.$set(item, 'checked',true)
				}
			})
			
			this.getData()
		},
		choseType(index) {
			this.sceenType = null
			this.scennList2.forEach((item,idx)=>{
				this.$set(item, 'checked',false)
				if(index==idx){
					this.paperid = item.paperId
					this.$set(item, 'checked',true)
				}
			})
			this.getData()
		},
	}
};
</script>
<style lang="scss">
page {
	background: #EAEEF1;
}

</style>
<style scoped lang="scss">
	.animals{
		transition: all 0.3s;
		transform: rotate(180deg);
	}
.sceenBox {
	width:100%;
	height: 80rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	position: fixed;
	z-index: 999;
	border-bottom: 1px solid #eee;
	.item{
		flex:1;
		text-align: center;
		&.active{
			color:#333;
			font-weight: bold;
			.icon{
				transform: rotate(180deg);
			}
		}
	}
}
.sceenModel{
	left:0;
	bottom:0;
	width:100%;
	position: fixed;
	z-index: 998;
	.sceenModelBg{
		width:100%;
		height:100%;
		position: fixed;
		background: rgba(0,0,0,.3);
		z-index: 998;
	}
	.sceenMain{
		position: relative;
		z-index: 999;
		background: #fff;
		height:80%;
		.sceenMainContent {
			
			display: flex;
			flex-wrap: wrap;
			padding: 8rpx;
			justify-content: space-between;
				.item{
					width: 350rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					padding: 25rpx 19rpx;
					margin: 8rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
					&.active{
						background: #007AFF;
						color:#fff;
					}
					&:first-child{
						width:100%;
						text-align: center;
					}
				}
		}		
	}
}
.wrap{
	padding:96rpx 16rpx 16rpx;
}
.wrongHead{
	background: #FFFFFF;
	border-radius: 16px;
	padding:24rpx;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		.sub{
			font-size: 20rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.progress{
		width: 180rpx;
		height: 180rpx;
		line-height: 140rpx;
		border: 20rpx solid #EEEEEE;
		border-radius: 50%;
		margin: 24rpx auto;
		font-size: 50rpx;
		text-align: center;
	}
}
.wrongTab{
	display: flex;
	margin: 24rpx 0;
	.item{
		width: 144rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: #fff;
		border-radius: 16px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 15rpx;
		&.active{
			background: #007AFF;
			color: #fff;
		}
	}
}
.wrongList{
	margin-top:20rpx;
	.item{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 30rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		.title{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin: 40rpx 0 17rpx;
		}
		.bt{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 24rpx;
			.left{
				width: 176rpx;
				height: 40rpx;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				border-radius: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				justify-content: center;
				align-items: center;
				.num{
					font-size: 26rpx;
					font-weight: bold;
					color: #FF3B30;
					margin-left: 16rpx;
				}
			}
			.right{
				display: flex;
				.btn{
					width: 100rpx;
					height: 48rpx;
					background: #FFFFFF;
					border: 1px solid #007AFF;
					border-radius: 16px;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #007AFF;
					margin-left:9rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}
</style>