ZhiHuiJiaoWu_UniApp/pages/coach/my/gotake_exam.vue

<template>
	<view class="whole">
		<view style="height: 36rpx;"></view>
		
		<view class="topic" v-for="(item,index) in quantityArr" :key="index" v-show="quantity == index">
			<view class="dis_style">
				<view class="title_icon">{{index + 1}}</view>
				<view class="title_con" v-if="item.question_content_type === 'text'">{{item.question_content}}?</view>
			</view>
			<view class="dis_style">
				<view class="title_con" style="margin: auto;" v-if="item.question_content_type === 'image'">
					<img style="width: 300rpx;height: 300rpx;" :src="item.question_content" mode="aspectFit">
				</view>
			</view>
			<view style="line-height: 60rpx;margin-top: 16rpx;">
					<fui-radio-group name="radio" v-model="optionList[index]">
						<fui-checkbox-group name="checkbox" v-model="optionList[index]">
						<view class="title_con title_font" style="display: flex;align-items: center;" v-for="(item_option,index_option) in item.option_json" :key="index_option">
							<view style="display: flex;align-items: center;">
								<fui-radio :value="item_option.option" v-if="item.question_type != 'multiple_choice'"></fui-radio>
								<fui-checkbox :value="item_option.option" v-if="item.question_type == 'multiple_choice'"></fui-checkbox>
							</view>
							<view>{{item_option.option}}. {{item_option.option_content}}</view>
						</view>
						</fui-checkbox-group>
					</fui-radio-group>
			</view>
		</view>

		<view class="progress_bar">
			<fui-progress :percent="number_progress" background="#ddd" activeColor="#00bfa5" height="10"></fui-progress>
		</view>
		
		<view class="switch_style">
			<view class="dis_style" style="color: #3e94ed;font-size: 30rpx;">
				<view @click="previous_question">上一题</view>
				<view style="margin-left: 20rpx;" @click="next_question">下一题</view>
			</view>
			<view class="sub_style" @click="submit">
				提交试卷
			</view>
		</view>
	</view>
</template>
<script>
	import apiRoute from '@/api/apiRoute.js';
	export default {
		data() {
			return {
				quantity: 0,
				quantityArr: [1,2,3,4],
				number_progress: 0,
				testPaperId: 0,
				optionList: [],
				zid: 0
			}
		},
		onLoad(options) {
			if(options.id){
				this.testPaperId = options.id;
			}
			if(options.zid){
				this.zid = options.zid;
			}
			console.log(this.testPaperId, 999)
			this.init()
		},
		methods: {
			async init() {
				const res = await apiRoute.getTeachingTestPaper({exam_papers_id: this.testPaperId});
				if(res.code === 1) {
					this.quantityArr = res.data.resText
					this.number_progress = (Math.round(100 / res.data.count) * ( this.quantity + 1));
				}
			},
			previous_question() {
				if(this.quantity <= 0){
					uni.showToast({
					  title: '已经是第一题了',
					  icon: 'none'
					})
					return
				} else {
					this.quantity--
				}
				this.number_progress = (Math.round(100 / this.quantityArr.length) * ( this.quantity + 1));
			},
			next_question() {
				if((this.quantity + 1) >= this.quantityArr.length){
					uni.showToast({
					  title: '已经是最后一题了',
					  icon: 'none'
					})
					return
				} else {
					this.quantity++
				}
				this.number_progress = (Math.round(100 / this.quantityArr.length) * ( this.quantity + 1));
			},
			async submit() {
				this.optionList.forEach((item,index) => {
					if (Array.isArray(item)) {
					  this.optionList[index] = item.join(',')
					}
				})
				const res = await apiRoute.submitTestPaper({optionList: this.optionList,testPaperId: this.testPaperId, id: this.zid});
				if(res.code === 1) {
					this.$navigateTo({
						url: '/pages/coach/my/exam_results?error=' + res.data.error + '&success=' + res.data.success + '&num=' + res.data.num
					})
				} else {
					uni.showToast({
					  title: res.msg,
					  icon: 'none'
					})
					return
				}
			}
		}
	}
</script>

<style>
	.whole{
		width: 100%;
		height: 100vh;
		background-color: #171717;
	}
	.topic{
		width: 95%;
		height: auto;
		background-color: #2d2d2d;
		border: #3e91e8 4rpx solid;
		border-radius: 16rpx;
		padding: 26rpx;
		margin: auto;
	}
	.dis_style{
		display: flex;
		align-items: center;
	}
	.title_icon{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #00bfa5;
		font-size: 26rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 60rpx;
	}
	.title_con{
		margin-left: 16rpx;
		font-size: 26rpx;
		color: #fff;
	}
	.title_font{
		font-size: 30rpx;
	}
	.progress_bar{
		width: 95%;
		margin: 36rpx auto;
	}
	.switch_style{
		width: 95%;
		height: auto;
		padding: 26rpx;
		background-color: #2d2d2d;
		border-radius: 16rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sub_style{
		font-size: 32rpx;
		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		color: #000;
		font-weight: bold;
		text-align: center;
		background-color: #35a3f0;
	}
</style>