saas_miniprogram/pages5/examCount/index.vue

<template>
	<view class="safeArea">
		<nav-bar title="模拟考试-一级建造师-管理"></nav-bar>
		<view class="examWrap">
			<view class="title">距离管理开考还有</view>
			<view class="circle">
				<u-circle-progress class="img" width="448" bg-color="rgba(0,0,0,0)" type="primary" :percent="percent"></u-circle-progress>
				<view class="time">{{timeText}}</view>
			</view>
			
			<view class="btn" @click="examBank()" :class="{disabled:!((nowTime > start) && (nowTime < end ))}">开始考试</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			mockName:'',
			state:1,
			start:0,
			timer:null,
			timeText:'',
			nowTime:0,
			timeLimit:0,
			examId:0,
			eachExamId:0,
			subscribeId:0,
			end:0,
			percent:0,
			examEndTime:0,
		};
	},
	onLoad(option){
		console.log('option', option)
		this.examEndTime = option.examEndTime;
		this.mockName = option.mockName || ''
		this.subscribeId = option.subscribeId
		this.eachExamId = option.eachExamId
		this.examId = option.examId
		this.timeLimit = +option.limit || 0
		this.start = +option.start;
		this.end = (this.timeLimit* 60) + this.start ;
		this.timer = setInterval(() => {
			this.timeText = this.getDuring()
		},1000)
	},
	onShow() {
		clearInterval(this.timer)
		this.timer = setInterval(() => {
			this.timeText = this.getDuring()
		},1000)
	},
	onUnload() {
		clearInterval(this.timer)
	},
	methods: {
		getDuring() {
			this.nowTime = +this.$method.timest();
			let during = this.start - this.nowTime;
			console.log('during', during)
			this.percent = during <= 0 ? 100 : during >= 600 ? 0 :  (600 - during) / 600 * 100;
			if(during <= 0) {
				return '00:00'
			}
			let minutes = parseInt(during/60) >= 10 ? '0'+ parseInt(during/60) : parseInt(during/60);
			let seconds = during % 60 >= 10 ? during % 60 :'0'+ during % 60;
			
			return minutes+':'+seconds
		},
		canTest() {
			
		},
		examBank() {
			if(((this.nowTime > this.start) && (this.nowTime < this.end ))) {
				uni.redirectTo({
					url:'../examBank/index?examId='+this.examId+'&eachExamId='+this.eachExamId+'&subscribeId='+this.subscribeId+'&examEndTime='+this.examEndTime+'&examStartTime='+this.start
				})
			} else {
				uni.showToast({
					icon:'none',
					title:'不在考试时间'
				})
			}
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
	page {
			background: #EAEEF1;
		}
</style>
<style scoped lang="scss">
.examWrap{
	padding: 16rpx;
	
	.title {
		margin-top:70rpx;
		font-size: 32rpx;
		color: #666666;
		line-height: 48rpx;
		text-align: center;
	}
	
	.circle {
		margin:60rpx auto 0;
		width:480rpx;
		height:480rpx;
		position:relative;
		background: #fff;
		border-radius:50%;
		
		.img {
			position:absolute;
			left:50%;
			top:50%;
			transform: translate3D(-50%,-50%,0);
		}
		
		.time {
			width:100%;
			height:100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position:relative;
			z-index: 999;
			font-size: 80rpx;
			text-align: center;
			font-weight: bold;
			color: #333333;
		}
	}
	
	.btn {
		margin:330rpx auto 0;
		width: 528rpx;
		height: 80rpx;
		background: #007AFF;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color:#fff;
		
		&.disabled {
			background:#ccc;
		}
	}
}
</style>