saas_miniprogram/pages2/subject/record.vue

<template>
	<view class="safeArea">
		<view class="sceenBox">
			<view :class="['item', {'active':sceenType===1} ]" @click="showSceen(1)">全部题库记录<u-icon class="icon" name="arrow-down"></u-icon></view>
			<view :class="['item', {'active':sceenType===2} ]" @click="showSceen(2)">全部试卷类型<u-icon class="icon" name="arrow-down"></u-icon></view>
		</view>
		<view class="sceenModel" v-if="sceenType">
			<view class="sceenModelBg" @click="hideSceen"></view>
			<view class="sceenMain">
				<template v-if="sceenType===1">
					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList1" :key="index" @click="choSceen(index,'tk')">{{item.name}}</view>
				</template>
				<template v-if="sceenType===2">
					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList2" :key="index" @click="choSceen(index,'sj')">{{item.name}}</view>
				</template>
			</view>
		</view>
		<view class="pubuBox">
			<view class="pubuItem">
				<view class="item-masonry" v-for="(item, index) in comList" :key="index">
					<view class="type">{{item.type}}</view>
					<view class="title">{{ item.title }}</view>
					<view class="info"><u-icon class="icon" name="file-text"></u-icon>{{ item.time }}</view>
					<view class="info"><u-icon class="icon" name="file-text"></u-icon>总共 {{ item.count }} 题 做对 {{item.trueNum}} 道</view>
					<view class="btnBox">
						<view class="btn">重做</view>
						<view class="btn">解析</view>
						<view class="btn">报告</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			sceenType: null,
			scennList1:[
				{id: 1, name: '全部题库记录', checked: true},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'}
			],
			scennList2:[
				{id: 1, name: '全部试卷类型', checked: true},{id: 1, name: '模拟卷'},{id: 1, name: '真题'},{id: 1, name: '练习'}
			],
			comList: [{
				type: '模拟卷',
				title: '试卷名称可换不知道最多多少个字行',
				time: '2021/12/20  14:30',
				count: 95,
				trueNum: 2
			}, {
				type: '真题',
				title: '试卷名称可换不知道最多多少个字行',
				time: '2021/12/20  14:30',
				count: 95,
				trueNum: 2
			},{
				type: '练习',
				title: '试卷名称可换',
				time: '2021/12/20  14:30',
				count: 95,
				trueNum: 2
			}, {
				type: '模拟卷',
				title: '试卷名称可换行我也不知道最多多少个字',
				time: '2021/12/20  14:30',
				count: 95,
				trueNum: 2
			} ]
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {},
	methods: {
		showSceen(type){
			this.sceenType = type
		},
		hideSceen(){
			this.sceenType = null
		},
		choSceen(index,type){
			if(type==='tk'){
				this.scennList1.forEach((item,idx)=>{
					this.$set(item, 'checked',false)
					if(index===idx){
						this.$set(item, 'checked',true)
					}
				})
			}
			if(type==='sj'){
				this.scennList2.forEach((item,idx)=>{
					this.$set(item, 'checked',false)
					if(index===idx){
						this.$set(item, 'checked',true)
					}
				})
			}
			this.sceenType = null
		}
	}
};
</script>
<style lang="scss">
page {
	background: #EAEEF1;
}
</style>
<style scoped lang="scss">
.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{
	width:100%;
	height: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;
		margin-top: 80rpx;
		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;
			}
		}
	}
}
.pubuBox {
	padding: 96rpx 8rpx 30rpx;
	.pubuItem {
	    column-count: 2;
	    column-gap: 16rpx;
	}
	.item-masonry {
	    border-radius: 16rpx;
	    overflow: hidden;
	    background-color: #fff;
	    break-inside: avoid;
	    box-sizing: border-box;
	    margin-bottom: 16rpx;
		position: relative;
		padding: 0 19rpx;
		.type{
			width: 112rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: linear-gradient(0deg, #4FACFE, #007AFF);
			border-radius: 16rpx 0px 16rpx 0px;
			position: absolute;
			top:0;
			left:0;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.title{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin: 65rpx 0 26rpx;
		}
		.info{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
			.icon{
				color:#007AFF;
				margin-right: 14rpx;
			}
		}
		.btnBox{
			display: flex;
			justify-content: center;
			margin: 22rpx 0;
			.btn{
				width: 100rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background: #FFFFFF;
				border: 1px solid #007AFF;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #007AFF;
				margin: 0 9rpx;
			}
		}
	}
}
</style>