zc_saas_h5/pages2/bank/question_record.vue

<template>
	<view>
		<view class="tabs">
			<view class="tab" :class="{active:index==1}" data-index="1" @click="tab">全部题库记录</view>
			<view class="tab" :class="{active:index==2}" data-index="2" @click="tab">全部试卷类型</view>
		</view>
		
		<view class="record">
			<view class="item" v-for="record in recordList">
				<view class="note">{{record.paperName}}</view>
				<view class="title">{{record.examName}}</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>{{$method.timestampToTime(record.updateTime,false)}}</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 {{record.totalQuestionNum}} 题 做对  {{record.rightQuestionNum}} 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn" v-if="record.status == 1">
						报告
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="modal" v-if="index==1">
			<view class="content">
				<view class="top">全部题库记录</view>
				<view class="list">
					<view class="item" v-for="listItem in list" @click="testClick(listItem)">{{listItem.goodsName}}</view>
				</view>
			</view>
			<view class="modal_wrap" @click="index=0"></view>
		</view>
		
		<view class="modal" v-if="index==2">
			<view class="content">
				<view class="top">全部试卷类型</view>
				<view class="list">
					<view class="item" v-for="listItem in list1" @click="paperClick(listItem)">{{listItem.paperName}}</view>
				</view>
			</view>
			<view class="modal_wrap" @click="index=0"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				list:[],
				list1:[],
				recordList:[]
			}
		},
		onLoad(option) {
			this.listGoodsUserQuestion();
			this.examaperList();
			
			this.$api.examRecordList({}).then(res => {
				this.recordList = res.data.rows
			})
		},
		onShow(){
			
		},
		methods: {
			testClick(item) {
				this.index = 0
				this.$api.examRecordList({
					goodsId:item.goodsId
				}).then(res => {
					this.recordList = res.data.rows
				})
			},
			paperClick(item) {
				this.index = 0
				this.$api.examRecordList({
					paperId:item.paperId
				}).then(res => {
					this.recordList = res.data.rows
				})
			},
			tab(e) {
				this.index = e.currentTarget.dataset.index;
			},
			
			examaperList() {
				this.$api.examaperList({
					
				}).then(res => {
					this.list1 = res.data.rows;
				})
			},
			
			listGoodsUserQuestion() {
				this.$api.listGoodsUserQuestion({
					
				}).then(res => {
					this.list = res.data.rows;
				})
			},
		},
		
	}
</script>
<style >
	page {
			background: #EAEEF1;
		}
</style>
<style lang="scss" scope>
	
	.tabs {
		position:fixed;
		left:0;
		width:100%;
		top:0;
		display: flex;
		z-index: 10;
		.tab {
			flex:1;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #FFFFFF;
			font-size: 32rpx;
			color: #999999;
			
			&.active {
				color:#333333;
			}
		}
	}
	
	.record {
		margin-top:80rpx;
		padding:16rpx 8rpx;
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari 和 Chrome */
		column-count:2;
		-moz-column-gap: 16rpx;
		-webkit-column-gap: 16rpx;
		column-gap: 16rpx;
		.item {
			margin-bottom:16rpx;
			-moz-page-break-inside: avoid;
			-webkit-column-break-inside: avoid;
			break-inside: avoid;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding:65rpx 20rpx 22rpx;
			position: relative;
			overflow: hidden;
			
			.note {
				color:#fff;
				position:absolute;
				left:0;
				top:0;
				width: 112rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				background: linear-gradient(0deg, #4FACFE, #007AFF);
				border-radius: 16rpx 0px 16rpx 0rpx;
			}
			
			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}
			
			.desc {
				margin-top:26rpx;
				view {
					margin:16rpx 0;
					
					image {
						width: 23rpx;
						height: 24rpx;
					}
					
					text {
						margin-left:15rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
					}
				}
			}
			
			.btns {
				margin-top:26rpx;
				display: flex;
				justify-content: space-around;
				.btn {
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					color:#007AFF;
					background: #FFFFFF;
					border: 1rpx solid #007AFF;
					border-radius: 16rpx;
				}
			}
		}
	}
	
	.modal {
		position:fixed;
		left:0;
		width:100%;
		top:80rpx;
		bottom:0;
		
		.content {
			position: relative;
			z-index: 10;
			background:#fff;
			padding:8rpx 12rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			
			.top {
				margin:0 auto;
				width: 726rpx;
				height: 80rpx;
				background: #007AFF;
				border-radius: 16rpx;
				color:#fff;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
			}
			
			.list {
				margin-top:16rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.item {
					padding:25rpx 20rpx;
					width: 359rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					font-size: 32rpx;
					color: #666666;
					margin:8rpx 0;
				}
			}
		}
		
		.modal_wrap {
			position: absolute;
			left:0;
			width:100%;
			top:0;
			height:100%;
			background:rgba(0,0,0,0.3)
		}
	}
</style>