jxtxkj/jxtxkj/pages/index/exam/submit.vue

<template>
	<view class="web_box vflex jbetween">
		<view class="top">
			<u-navbar height="44" leftIcon="arrow-left" leftIconColor="#000" leftText="考试成绩" @leftClick="leftClick" :autoBack="true" bgColor="#fff">
			</u-navbar>
			<view class="box vflex acenter jcenter">
				<view v-if="course.is_pass == 0" class="title">考试未合格</view>
				<view v-else class="title">
					<image :src="course.certificate" mode="widthFix" style="width: 660rpx;" @click="clickImg"></image>
				</view>
				<view class="hflex aend">
					<view v-if="course.is_pass == 0" class="score">{{course.score}}</view>
					<view v-else class="score" style="color: #3DA1FE;">{{course.score}}</view>
					<view class="score_total">/{{course.all_score}}分</view>
				</view>
				<view class="name hflex acenter jbetween">
					<view>{{course.name}}</view>
					<view>{{date}}</view>
				</view>
			</view>
			<view class="box vflex acenter jcenter">
				<view class="hflex acenter jbetween" style="width: 100%;">
					<view class="box_title">答题卡</view>
					<view class="hflex acenter">
						<!-- <view class="item1"></view>
						<view class="text">未答</view> -->
						<view class="item2"></view>
						<view class="text">答对</view>
						<view class="item3"></view>
						<view class="text">答错</view>
					</view>
				</view>
				<view class="hflex acenter fwrap">
					<block v-for="(item,index) in course.log_info" :key="index">
						<!-- <view class="item hflex acenter jcenter" v-if="item.is_right == 0">
							{{index + 1}}
						</view> -->
						<view class="item hflex acenter jcenter blue" v-if="item.is_right == 1">
							{{index + 1}}
						</view>
						<view class="item hflex acenter jcenter red" v-if="item.is_right == 0">
							{{index + 1}}
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="bottom hflex acenter jcenter">
			<view class="leftBtn" @click="parse(1)">全部解析</view>
			<view class="rightBtn"  @click="parse(2)">错题解析</view></strong>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				course: {},
				date: '',
				state: {},
				log_id: 0
			}
		},
		onLoad(option) {
			this.state = JSON.parse(option.data)
			this.log_id = option.log_id
			this.sellQuestionsLog()
			this.getDate()
		},
		methods: {
			leftClick() {
				
			},
			sellQuestionsLog() {
				var that = this
				$api.req({
					url: '/api/User/sellQuestionsLog',
					data: {
						log_id: that.log_id,
						state: 1
					}
				}, function(res) {
					console.log("试卷成绩",res)
					if (res.code == 1) {
						that.course = res.data
					}
				})
			},
			// 获取当前时间
			getDate() {
				const nowDate = new Date();
				const date = {
					year: nowDate.getFullYear(),
					month: nowDate.getMonth() + 1,	
					date: nowDate.getDate(),
				}
				const newmonth = date.month >= 10 ? date.month : '0' + date.month
				const day = date.date >= 10 ? date.date : '0' + date.date
				this.date = date.year + '-' + newmonth + '-' + day
				console.log("当前时间：",this.date);
			},
			// 查看解析
			parse(state) {
				$api.jump('/pages/index/exam/parse?state=' + state + '&log_id=' + this.log_id)
			},
			clickImg() {
				var that = this
				uni.previewImage({
					urls: [that.course.certificate],
					current: '',
					success:function(res){
						
					},
					fail:function(res){
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		
		.top {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
		}
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 36px 16px 58rpx 0;
		}
		.box {
			width: 100%;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 24rpx 32rpx;
		}
		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #FA6400;
			padding: 10rpx 0 15rpx;
		}
		.score {
			font-size: 72rpx;
			font-weight: 500;
			color: #FA6400;
		}
		.score_total {
			font-size: 32rpx;
			color: #333;
			padding-bottom: 10rpx;
		}
		.name {
			width: 100%;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 44rpx;
		}
		.box_title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
		.item1 {
			width: 24rpx;
			height: 24rpx;
			background: #D8D8D8;
			border-radius: 50%;
		}
		.item2 {
			width: 24rpx;
			height: 24rpx;
			background: #09BBD0;
			border-radius: 50%;
		}
		.item3 {
			width: 24rpx;
			height: 24rpx;
			background: #FD6076;
			border-radius: 50%;
		}
		.text {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			padding: 0 16rpx 0 6rpx;
		}
		.item {
			width: 72rpx;
			height: 72rpx;
			background: #D8D8D8;
			border-radius: 50%;
			margin: 54rpx 66rpx 0 0;
			font-size: 40rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
		.item:nth-child(5n) {
			margin: 54rpx 0 0 0;
		}
		.blue {
			background: #09BBD0;
		}
		.red {
			background: #FD6076;
		}
		.bottom {
			margin-top: 20rpx;
			width: 100%;
			height: 83px;
			background: #FFFFFF;
		}
		.leftBtn {
			width: 344rpx;
			height: 80rpx;
			background: rgba(41,136,254,0.2);
			border-radius: 20px 0 0 20px;
			font-size: 36rpx;
			font-weight: 500;
			color: #2988FE;
			text-align: center;
			line-height: 80rpx;
		}
		.rightBtn {
			width: 344rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 0px 20px 20px 0px;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>