security_study_h5/examination/answersheet.vue

<template>
	<view class="pages">
		<view class="bg"></view>
		<view class="content">
			<view class="title">答题卡</view>
			<view class="list u-flex u-flex-wrap">
				<view 
					class="item" 
					:class="{error:item.status==0,undo:item.status==2}"
					@click="topicClick(item)"
					v-for="(item,index) in pagerResult.topicList" :key="item.paperAnswerId">
					{{index+1}}
				</view>
			</view>
			<view class="statistics u-flex">
				<view class="item">
					答对：<text class="num">{{pagerResult.topicTrueCount}}</text>
				</view>
				<view class="item">
					答错：<text class="num" style="color: #FFB100;">{{pagerResult.topicFalseCount}}</text>
				</view>
				<view class="item">
					未答：<text class="num" style="color: #999;">{{ pagerResult.topicList.length - pagerResult.answerTopicCount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				pagerResult:{
					topicList:[]
				}
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.id = page.id;
			this.findPagerResult();
		},
		methods: {
			findPagerResult(){
				this.$u.api.findPagerResult({paperScoreId:this.id}).then(res=>{
					this.pagerResult = res.data;
					// console.log('findPagerResult',res.data);
				}).catch(err=>{
					console.log('findPagerResult',err);
				})
			},
			topicClick(item){
				console.log('topicClick',item);
				uni.$u.route('/examination/question', {
					paperScoreId: this.id,
					paperTopicId: item.paperTopicId
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
.bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 200rpx;
	background-color: #009AEF;
	z-index: -1;
}
.content{
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 40rpx 0;
	margin-top: 40rpx;
	.title{
		margin-bottom: 30rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		margin-left: 46rpx;
	}
	.list{
		.item{
			width: 72rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #009AEF;
			color: #fff;
			border-radius: 8rpx;
			margin-left: 46rpx;
			margin-bottom: 46rpx;
			&.error{
				background: #FFB100;
			}
			&.undo{
				background: #F5F9FC;
				color: #999;
			}
		}
	}
	.statistics{
		margin: 20rpx 30rpx;
		padding: 40rpx 20rpx;
		background: #F5F9FC;
		border-radius: 24rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #999999;
		.item{
			flex: 1;
			& + .item{
				border-left: 1px solid #eee;
			}
			.num{
				font-weight: 600;
				color: #009AEF ;
			}
		}
	}
}
</style>