大体思路是：每答一题，点击按钮就提交当前的题的答案，当用户点提交后，改变status权限，则答题完成。然后返回此前记录的正确答案数组，比对自己的答案，绿色正确，红色错误。

答题包含，单选，多选以及填空

参考JSON

[
    {
        "questionId":"aaaaa",
        "rightKey":"A",
        "batch":"2021-03-12-1",
        "type":"1",
        "analysis":"",
        "major":"1",
        "answerF":"",
        "answerC":"除",
        "answerB":"没有",
        "answerE":"",
        "answerD":"运行",
        "tittle":"过滤优点不包括下列哪些？",
        "answerA":"适于"
    },
    {
        "questionId":"bbbb",
        "rightKey":"D",
        "batch":"2021-03-12-1",
        "type":"1",
        "analysis":"",
        "major":"1",
        "answerF":"",
        "answerC":"c尘",
        "answerB":"b尘 ",
        "answerE":"",
        "answerD":"d尘",
        "tittle":"下列危害最严重（）。",
        "answerA":"a尘 "
    },
    {
        "questionId":"cccc",
        "rightKey":"D",
        "batch":"2021-03-12-1",
        "type":"1",
        "analysis":"",
        "major":"1",
        "answerF":"",
        "answerC":"风  ",
        "answerB":"除 ",
        "answerE":"",
        "answerD":"滤",
        "tittle":"下列不属于xx的是（）。",
        "answerA":"吸    "
    }
]

<template>
	<view>
		<view class="padding radius light bg-yellow">
			<text>{{time}}</text>
			<text class="fr text-xl" @tap="examBox">
				{{indexs + 1}}/{{testAll}}
				<text :class="{ 'cuIcon-right': isHide, 'cuIcon-unfold': isShow }"></text>
			</text>
		</view>

		<view class="exam-block grid col-5 padding-sm" v-if="isShow">
			<view class="padding-sm" v-for="(block , index) in blocks" :key="index">
				<view v-if="status == 0" @tap='thisBlock(index)' class="padding-top padding-bottom radius text-center shadow-blur" :class="indexs == index ? 'bg-blue':'bg-white'">{{index + 1}}</view>
				<view v-if="status == 1" @tap='thisBlock(index)' class="padding-top padding-bottom radius text-center shadow-blur" :class="green[index] == index ? 'bg-green':'bg-red' ">{{index + 1}}</view>
			</view>
		</view>
		<view class="bg-white examTest-contant">
			<view class="padding" v-for="(item ,index) in items" :key="index" v-show="indexs == index">
				<view class="flex">
					<view class="cu-tag bg-blue margin-right">{{index + 1}}</view>
					<view class="text-lg">
						{{item.tittle}}
						<text class="text-green">（{{types[item.type - 1]}}）</text>
					</view>
				</view>
				<!-- 单选start -->
				<block v-if="item.type < 3">
					<radio-group class="block" @change="RadioChange($event,index,item.questionId)">
						<view class="radius border margin-top">
							<label>
								<view class="flex padding-sm">
									<view class="margin-right">
										<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A" :disabled="status == 0 ? false : true"></radio>
									</view>
									<view class="text-xl flex align-center">{{ item.answerA }}</view>
								</view>
							</label>
						</view>
						<view class="radius border margin-top">
							<label>
								<view class="flex padding-sm">
									<view class="margin-right">
										<radio :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B" :disabled="status == 0 ? false : true"></radio>
									</view>
									<view class="text-xl flex align-center">{{ item.answerB }}</view>
								</view>
							</label>
						</view>
						<block v-if="item.answerC">
							<view class="radius border margin-top">
								<label>
									<view class="flex padding-sm">
										<view class="margin-right">
											<radio :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C" :disabled="status == 0 ? false : true"></radio>
										</view>
										<view class="text-xl flex align-center">{{ item.answerC }}</view>
									</view>
								</label>
							</view>
						</block>
						<block v-if="item.answerD">
							<view class="radius border margin-top">
								<label>
									<view class="flex padding-sm">
										<view class="margin-right">
											<radio :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D" :disabled="status == 0 ? false : true"></radio>
										</view>
										<view class="text-xl flex align-center">{{ item.answerD }}</view>
									</view>
								</label>
							</view>
						</block>
						<block v-if="item.answerE">
							<view class="radius border margin-top">
								<label>
									<view class="flex padding-sm">
										<view class="margin-right">
											<radio :class="radio=='E'?'checked':''" :checked="radio=='E'?true:false" value="E" :disabled="status == 0 ? false : true"></radio>
										</view>
										<view class="text-xl flex align-center">{{ item.answerE }}</view>
									</view>
								</label>
							</view>
						</block>
					</radio-group>
				</block>
				<!-- 单选end -->
				<!-- 多选start -->
				<block v-if="item.type == 4">
					<checkbox-group class="block" @change="CheckboxChange($event,item.questionId)">
						<view class="radius border margin-top">
							<label>
								<view class="flex padding-sm">
									<view class="margin-right">
										<checkbox class="blue" :class="checkbox[0].checked ? 'checked' : ''" :checked="checkbox[0].checked ? true : false" value="A" :disabled="status == 0 ? false : true"></checkbox>
									</view>
									<view class="text-xl flex align-center">{{ item.answerA }}</view>
								</view>
							</label>
						</view>
						<view class="radius border margin-top">
							<label>
								<view class="flex padding-sm">
									<view class="margin-right">
										<checkbox class="blue" :class="checkbox[1].checked ? 'checked' : ''" :checked="checkbox[1].checked ? true : false" value="B" :disabled="status == 0 ? false : true"></checkbox>
									</view>
									<view class="text-xl flex align-center">{{ item.answerB }}</view>
								</view>
							</label>
						</view>
						<block v-if="item.answerC">
							<view class="radius border margin-top">
								<label>
									<view class="flex padding-sm">
										<view class="margin-right">
											<checkbox class="blue" :class="checkbox[2].checked ? 'checked' : ''" :checked="checkbox[2].checked ? true : false" value="C" :disabled="status == 0 ? false : true"></checkbox>
										</view>
										<view class="text-xl flex align-center">{{ item.answerC }}</view>
									</view>
								</label>
							</view>
						</block>
						<block v-if="item.answerD">
							<view class="radius border margin-top">
								<label>
									<view class="flex padding-sm">
										<view class="margin-right">
											<checkbox class="blue" :class="checkbox[3].checked ? 'checked' : ''" :checked="checkbox[3].checked ? true : false" value="D" :disabled="status == 0 ? false : true"></checkbox>
										</view>
										<view class="text-xl flex align-center">{{ item.answerD }}</view>
									</view>
								</label>
							</view>
						</block>
						<block v-if="item.answerE">
							<view class="radius border margin-top">
								<label>
									<view class="flex padding-sm">
										<view class="margin-right">
											<checkbox class="blue" :class="checkbox[4].checked ? 'checked' : ''" :checked="checkbox[4].checked ? true : false" value="E" :disabled="status == 0 ? false : true"></checkbox>
										</view>
										<view class="text-xl flex align-center">{{ item.answerE }}</view>
									</view>
								</label>
							</view>
						</block>
					</checkbox-group>
				</block>
				<!-- 多选end -->
				
				<!-- 填空start -->
				<block v-if="item.type == 3">
					<view class="radius border margin-top">
						<textarea class="padding-sm" maxlength="-1" @input="textareaAInput($event,item.questionId)" placeholder="请输入答案" :disabled="status == 0 ? false : true"></textarea>
					</view>
				</block>
				<!-- 填空end -->
			</view>
		</view>
		<view class="margin-top-sm bg-white" v-if="status == 1 && green[indexs] < 0">
			<view class="cu-bar">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">正确答案</text>
				</view>
			</view>
			<view class="padding-left padding-bottom text-lg">
				{{rightKey}}
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar footBar bg-white tabbar border shop">
			<view class="submit" :class="indexs == 0 ? 'bg-grey light':'bg-white'" @tap="prev">上一题</view>
			<view class="submit" :class="indexs == (testAll - 1)? 'bg-grey light':'bg-blue'"  @tap="next">下一题</view>
			<view class="bg-green submit" @tap="save(selectAnswer,questionId,1)" v-if="status == 0">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			examId:'',
			time:'00:00',
			timer:'',//显示分数
			isShow: true,
			isHide: false,
			testAll:'',//右上角题目总数
			blocks:[],
			indexs:0,
			types:['单选','判断','填空','多选'],
			radio: '',
			checkbox: [
				{
					value: 'A',
					checked: false
				},
				{
					value: 'B',
					checked: false
				},
				{
					value: 'C',
					checked: false
				},
				{
					value: 'D',
					checked: false
				},
				{
					value: 'E',
					checked: false
				}
			],
			checkboxIndex:[],
			items:[],
			selectAnswer:'',
			questionId:'',
			selectArr:[],//所选的答案数组
			rightKeyArr:[],//正确答案数组
			rightKey:'',//提交后，显示正确答案
			status:0,//提交权限
			green:[]//提交后，方块正确显示绿色，else红色
		};
	},
	methods: {
		examBox() {//方块显示与隐藏
			this.isShow = !this.isShow;
			this.isHide = !this.isHide;
		},
		CheckboxChange(e,id) {//多选
			if(this.status == 0){
				var items = this.checkbox,
					values = e.detail.value,
					val = '';
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							val += values[j];
							items[i].checked = true;
							break
						}
					}
				}
				this.selectAnswer = val;
				this.questionId = id;
				this.selectArr[this.indexs] = val;
			}
		},
		RadioChange(e,index,id) {//单选
			if(this.status == 0){
				this.selectAnswer = e.target.value;
				this.questionId = id;
				this.selectArr[this.indexs] = e.target.value;
			}
		},
		textareaAInput(e,id) {//填空
			this.selectAnswer = e.detail.value;
			this.questionId = id;
			this.selectArr[this.indexs] = e.detail.value;
		},
		thisBlock(str){//点击方块切换题
			this.indexs = str;
			this.commonClick();
			this.checkboxSelect();
		},
		next(){//下一题
			if((this.testAll - 1) > this.indexs ){
				this.indexs += 1;
				this.commonClick();
			}
			this.checkboxSelect();
		},
		prev(){//上一题
			if(this.indexs > 0){
				this.indexs -= 1;
				this.commonClick();
			}
			this.checkboxSelect();
		},
		checkboxSelect(){//重置多选题状态
			var that = this;
			if(that.checkboxIndex[that.indexs]){//如果下一题是多选题
				var arr = that.selectArr[that.indexs].split('');
				if(arr[0] != undefined){//判断当前多选题是否已选择过
					for(var i = 0;i<that.checkbox.length;i++){
						that.checkbox[i].checked = false;
					}
					for(var i = 0;i<that.checkbox.length;i++){
						for(var j = 0;j<arr.length;j++){
							if(that.checkbox[i].value == arr[j]){
								that.checkbox[i].checked = true;
							}
						}
					}
				}else{
					for(var i = 0;i<that.checkbox.length;i++){
						that.checkbox[i].checked = false;
					}
				}
			}
		},
		commonClick(){
			if(this.status == 0){
				this.save(this.selectAnswer,this.questionId,0)
			}else if(this.status == 1 && this.green[this.indexs] < 0){
				this.rightKey = this.rightKeyArr[this.indexs];
			}
		},
		startTime(){//考试时间
			var that = this;
			var second = 0 * 60;
			var interval = setInterval(function() {
				second++;
				var m = parseInt(second / 60);
				var s = second % 60;
				var t = that.formatNum(m) + ":" + that.formatNum(s);
				that.time =t;
				if(that.status == 1){
					clearInterval(interval);
					that.time = that.timer;
				}
			}, 1000)
			
		},
		formatNum(num) {
			if(num < 10) {
				return "0" + num;
			} else {
				return num;
			}
		},
		save(selectAnswer,questionId,status) {
			var that = this;
			if(that.selectAnswer == ''){
				if(status == 1){
					uni.showToast({
						icon:'none',
						position:'bottom',
						title :'请答题后再提交'
					})
				}
				return false;
			}
			uni.request({
				url: this.util.baseIP('地址'),
				method: 'POST',
				data: {
					examId: that.examId,
					userId: this.util.checkLogin(1),
					selectAnswer: selectAnswer,
					questionId: questionId,
					status: status,
					batch:that.batch
				},
				header: {'Content-Type': 'application/x-www-form-urlencoded'},
				success: (res) =>{
					if(status == 1){//提交
						that.status = status;
						that.timer ='分数：'+ res.data.score+'分，'+ res.data.str;
						for(var i = 0;i<that.testAll;i++){//所选和正确答案比对，正确的显示绿色
							if(that.selectArr[i] == that.rightKeyArr[i]){
								that.green.push(i);
							}else{
								that.green.push(-1);
							}
						}
						that.indexs = 0;
						if(that.green[0] < 0){//显示第一题的状态
							that.rightKey = that.rightKeyArr[0];
						}
					}
				}
			});
		}
	},
	onLoad(option) {
		var that = this;
		this.examId = option.id;
		this.batch = option.batch;
		uni.request({
			url: this.util.baseIP('地址'),
			method: 'POST',
			data: {
				userId:this.util.checkLogin(1),
				examId: option.id,
				batch:option.batch
			},
			header: {'Content-Type': 'application/x-www-form-urlencoded'},
			success: (res) =>{
				// console.log(JSON.stringify(res.data.list))
				for(var i = 0;i< res.data.list.length;i++){
					this.selectArr.push('');//传空值，占位，后面选择传值
					this.rightKeyArr.push(res.data.list[i].rightKey);//传正确答案
					if(res.data.list[i].type == 4){
						this.checkboxIndex.push(i);
					}else{
						this.checkboxIndex.push("");
					}
				}
				this.items = res.data.list;
				this.testAll = res.data.list.length;
				this.blocks = res.data.list.length;
			}
		});
		
		this.startTime()
	}
};
</script>

<style>
.cu-bar.footBar {	box-sizing: border-box;	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 998;
}
.exam-block{max-height: 410upx;overflow-y: auto;}
/* 后面的样式很多是没用的，不做整理了，有需要的小伙伴儿自行整理下吧 */
/* 登录 */
.pages-login-login{background-color: #FFFFFF;}
.pages-login-login .text-xl{font-size: 36upx;}
.pages-tabbar-tabbar-1 .grid image{height:120upx;width:120upx;border-radius: 15upx;}
.type{background-repeat: no-repeat;background-size: 100% 100%;color: #ffffff;border-radius: 12upx;padding: 18upx 0;}
.type.bg-color1 {background-color: #e54d42;}
.type.bg-color2 {background-color: #f37b1d;}
.type.bg-color3 {background-color: #fbbd08;color: #333333;}
.type.bg-color4 {background-color: #8dc63f;}
.type.bg-color5 {background-color: #39b54a;}
.type.bg-color6 {background-color: #1cbbb4;}
.type.bg-color7 {background-color: #0081ff;}
.type.bg-color8 {background-color: #6739b6;}
.type.bg-color9 {background-color: #9c26b0;}
.type.bg-color10 {background-color: #e03997;}
.type.bg-color11 {background-color: #a5673f;}
.type.bg-color12 {background-color: #8799a3;}
.type.bg-color13 {background-color: #f0f0f0;color: #333333;}
.type.bg-color14 {background-color: #333333;}

.pages-tabbar-tabbar-2 .icon{position: absolute;right: 24upx;top: 18upx;width: 75upx;height: 75upx;text-align: center;line-height: 50px;}

/* pages-book-book */
.book{background-repeat: no-repeat;background-size: 100% 100%;color: #ffffff;height: 250upx;padding: 25upx;}

.tabbar-3-avatar{border: 6upx solid white;}

.testPlan .cu-avatar.lg{width: 120upx;height: 120upx;font-size: 30upx;}
.testPlanMajor{width: 60upx;white-space:initial;}
.testPlan .cu-list.menu-avatar>.cu-item .content{width: calc(100% - 120upx - 60upx - 24upx);left: 170upx;}

.testPlanAdd{position: fixed;z-index: 111;width: 90upx;height: 90upx;background: #007AFF;border: 10upx solid white;border-radius: 50%;display: flex;justify-content: center;align-items:center;font-size: 60upx;color: white;bottom: 30upx;right: 30upx;}

.cu-form-group uni-picker.testDetailPicker{padding-right: 20upx;}

.myExam-score{width:120upx;height: 120upx;}
.myExam-type{position: absolute;height: 100upx;width:100upx;right: 0;}
.myExam-type image{width: 100%;height: 100%;}

.exam-block{max-height: 410upx;overflow-y: auto;}

.examTest-contant{margin-bottom: 20upx;}
/*边框样式*/
.border-l {border-left: 3upx solid #e8e8e8;}
.border-r {border-right: 3upx solid #e8e8e8;}
.border-t {border-top: 3upx solid #e8e8e8;}
.border-b {border-bottom: 3upx solid #e8e8e8;}
.border {border: 3upx solid #e8e8e8;}
</style>