zc_saas_h5/pages2/subject/collect.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%">
					<div 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>
					</div>
					
				</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">收藏统计</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.questionNum}}</text></view>
						<view class="right">
							<navigator  hover-class="none" :url="'/pages2/subject/collectBank?id='+item.examId">
								<view class="btn">重做</view>
							</navigator>
							<navigator  hover-class="none" :url="'/pages2/subject/collectBank?id='+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/collectTypeBank?type='+item.type">
								<view class="btn">重做</view>
							</navigator>
							<navigator  hover-class="none" :url="'/pages2/subject/collectTypeBank?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,
			total:0,
			modalTop:0,
			testList:[],
			typeList:[],
			goodsid:'',
			orderGoodsId:'',
			paperid:''
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {
		this.orderGoodsId = option.orderGoodsId || '';
		this.listGoodsUserQuestion();
		this.examaperList();
		this.getData();
		
		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.goodsCollectExamList()
			} else if(this.type == 2) {
				this.collectQuestionTypeList();
			}
		},
		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];
			})
		},
		goodsCollectExamList() {
			this.$api.goodsCollectExamList({
				paperId:this.paperid,
				goodsId:this.goodsid,
				orderGoodsId:this.orderGoodsId
			}).then(res => {
				this.testList = res.data 
				let total = 0;
				this.testList.rows.forEach(item => {
					total += item.questionNum;
				})
				
				this.total = total
			})
		},
		collectQuestionTypeList() {
			this.$api.collectQuestionTypeList({
				paperId:this.paperid,
				orderGoodsId:this.orderGoodsId
			}).then(res => {
				this.typeList = res.data 
				let total = 0;
				this.typeList.rows.forEach(item => {
					total += item.num;
				})
				
				this.total = total
			})
		},
		showSceen(type){
			if(this.sceenType == type) {
				this.sceenType = null
				return;
			}
			this.sceenType = type
		},
		/**
		 * @param {Object} tab切换
		 */
		selectType(type) {
			this.type = type;
			this.getData();
		},
		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>