jwl-applet/src/pages/questionBank/components/Question.vue

<template>
	<view style="margin-top: 100px;">
		<view class="flex ai-c jc-c">
			<view class="flex type_box">
				<view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
				<view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
			</view>
		</view>
		<view class="m14lr">
			<text class="tag_box">{{questionList[currentIndex].questionTypeDesc}}</text>
			<text class="fs18">{{questionList[currentIndex].questionDesc}}</text>
		</view>
		<view class="flex m14lr ai-c mt20" v-for="(item,index) in questionList[currentIndex].optionList" :key="item.op">
			<template v-if="clickAnswer&&item.op===questionList[currentIndex].rightAnswer">
				<u-icon name="checkmark-circle-fill" color="#05C341" size="30"></u-icon>
			</template>
			<template v-else-if="clickAnswer===item.op&&item.op!==questionList[currentIndex].rightAnswer">
				<u-icon name="close-circle-fill" color="red" size="30"></u-icon>
			</template>
			<template v-else-if="!clickAnswer">
				<view class="option_item">{{item.op}}</view>
			</template>
			<text class="fs18">{{item.opDesc}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tCurrent:0,
				clickAnswer:undefined,
				questionList:[],
				currentIndex:0,
			}
		},
		onshow(){
			this.getQuestionList()
		},
		methods: {
			sectionChange(index){
				this.tCurrent=index
			},
			getQuestionList(){
				this.questionList=[{
					questionId:0,
					questionTypeDesc:'单选',
					questionDesc:'在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
					optionList:[{
						op:'A',
						opDesc:'注意新手标志'
					},{
						op:'B',
						opDesc:'注意新手标志'
					},{
						op:'C',
						opDesc:'注意新手标志'
					},{
						op:'D',
						opDesc:'注意新手标志'
					}],
					rightOp:'C',
				},{
					questionId:1,
					questionDesc:'在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
					optionList:[{
						op:'A',
						opDesc:'注意新手标志'
					},{
						op:'B',
						opDesc:'注意新手标志'
					},{
						op:'C',
						opDesc:'注意新手标志'
					},{
						op:'D',
						opDesc:'注意新手标志'
					}],
					rightOp:'B',
				},{
					questionId:2,
					questionDesc:'在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
					optionList:[{
						op:'A',
						opDesc:'注意新手标志'
					},{
						op:'B',
						opDesc:'注意新手标志'
					},{
						op:'C',
						opDesc:'注意新手标志'
					},{
						op:'D',
						opDesc:'注意新手标志'
					}],
					rightOp:'A',
				}]
			}
		}
	}
</script>

<style scoped>
.type_box{
	width: 280rpx;
	height: 72rpx;
	background-color: #FFFFFF;
	border-radius: 8rpx;
}
.type_item{
	text-align: center;
	line-height: 64rpx;
	width: 126rpx;
	height: 64rpx;
	border-radius: 8rpx;
}
.checked{
	color: #fff;
	background-color: #05C341;
}
.unchecked{
	color: #666;
}
.tag_box{
	display: inline-block;
	width: 78rpx;
	height: 42rpx;
	background: #05C341;
	border-radius: 8rpx;
	text-align: center;
	line-height: 42rpx;
	color: #fff;
	font-size: 12px;
	margin-right: 5px;
}
.option_item{
	width: 60rpx;
	height: 60rpx;
	border: 1px solid #666;
	border-radius: 50%;
	text-align: center;
	line-height: 60rpx;
	margin-right: 30rpx;
}
</style>