questionbankvue3/pages/exercises/brushQuestions/brushQuestions.vue

<template>
	<view class="content">
		<up-navbar leftText=" "  title="" :safeAreaInsetTop="false" :autoBack="true">
			<template #center>
				<view class="u-nav-slot flex">
					<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">答题模式</view>
					<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">背题模式</view>
				</view>
			</template>
		</up-navbar>
		

		<view class="con padding">
			<view class="h1_row">
				<text class="tag">{{types[questionBank.types-1]}}</text>
				<text class="h1">{{ questionBank.title}}</text>
			</view>
			<view class="option">
				<view class="optionItem flex" v-for="(item,index) in questionBank.optionArr" @click="chooseOption(item)">
					<view class="icon"></view>
					<up-icon name="close-circle-fill" color="#ff0000" size="20"></up-icon>
					<up-icon name="checkmark-circle-fill" color="#55ff7f" size="20"></up-icon>
					<view class="text">{{item.key}}  {{item.text}}</view>
				</view>
			</view>
			<view class="answer flex">
				<view class="ans">正确答案是：<text>B</text></view>
				<view class="ans">您的答案是：<text>B</text></view>
			</view>
			<view class="btn_row flex-b">
				<view class="btn border" @click="$goPage('/pages/exercises/lastPage/lastPage')">上一题</view>
				<view class="btn bg">下一题</view>
			</view>
			<view class="analysis">
				<view class="tit">题目解析</view>
				<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view>
			</view>
			<view class="btn" @click="">确定</view>
		</view>
		
		<view class="bottomBar">
			<view class="ul">
				<view class="li">
					<view class="icon">1</view>
					<view class="text">答对</view>
				</view>
				<view class="li">
					<view class="icon">1</view>
					<view class="text">答错</view>
				</view>
				<view class="li">
					<view class="icon">1</view>
					<view class="text">题目</view>
				</view>
				<view class="li">
					<view class="icon">
						<image src="@/static/images/theory/fankui.png" mode=""></image>
					</view>
					<view class="text">反馈</view>
				</view>
				<view class="li">
					<view class="icon">
						<image src="@/static/images/theory/dtk.png" mode=""></image>
					</view>
					<view class="text">答题卡</view>
				</view>
				<view class="li">
					<view class="icon">
						<image src="@/static/images/theory/sc.png" mode=""></image>
					</view>
					<view class="text">收藏</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { startQuestionApi, submitAnswerResultApi } from '@/config/api.js'
	import {
		ref,
		reactive
	} from 'vue';
	const currentNav = ref('1')
	const types = ref([
		'单选题',
		'多选题',
		'判断题'
	])
	// 1：单选题，2：多选题，3：判断题
   function	changeNav(val) {
		console.log(window)
		if(currentNav.value == val) return
		currentNav.value = val
	}
	function goEmam() {
		uni.navigateTo({
			// url: '/pages/exercises/exam/exam',
			// url: '/pages/exercises/beforeExam/beforeExam',
			// url: '/pages/exercises/examResults/examResults',
			// url: '/pages/exercises/wrongQuestion/wrongQuestion',
			// url: '/pages/exercises/theoryStudy/theoryStudy',
			url: '/pages/vip/vipEntry/vipEntry'
			
		})
	}
	function changeTabbar(val) {
		console.log(val)
	}
	
	// 请求数据
	const questionBank = ref({})
	async function startQuestionFn() {
		let obj = {
			carType: 'car',
			stepType: '1',
			volume: '0',
			types: '1',
			sift: '0',
			contentType: '1'
		}
		const {data: res} = await startQuestionApi(obj)
		console.log(res.questionBank.types)
		if(res.questionBank.types !=3) {
			res.questionBank.optionArr = []
			let abcd = [
				'a',
				'b',
				'c',
				'd',
				'e',
				'f'
			]
			abcd.forEach((k,i)=>{
				let option = 'option'+k
				if(res.questionBank[option]) {
					let obj = {
						key: k.toLocaleUpperCase(),
						text: res.questionBank[option],
						index: i+1
					}
					res.questionBank.optionArr.push(obj)
				}
			})
		}
		questionBank.value = res.questionBank
		console.log(questionBank.value)
	}
	
	startQuestionFn()
	
	// 选择答案
	const curOption = ref({})
	async function chooseOption(item) {
		 curOption.value = item
		 let obj = {
			 answer: '1',
			 carType: 'car',
			 questionId: questionBank.value.id,
			 result: '0',
			 stepType: 1,
			 
		 }
		 const {data: res} = await submitAnswerResultApi(obj)
	}
</script>

<style lang="scss" scoped>
	image {display: block;width: 100%;height: 100%;}
	.bottomBar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #F4F4F4;
		.ul {
			display: flex;
			justify-content: space-between;
			height: 100%;
			align-items: center;
			.li {
				width: 16.6%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.icon {
					font-size: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					image {
						display: block;
						margin-top: 4rpx;
						width: 26rpx;
						height: 26rpx;
					}
				}
				.text {
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}
	}
.content {
	padding: 120rpx 0 0 0;
	min-height: 100vh;
	.u-nav-slot {
		width: 306rpx;
		height: 54rpx;
		border-radius: 10rpx;
		border: 1px solid #333333;
		display: flex;

		.btn {
			font-size: 24rpx;
			color: #333333;
			flex: 1;
			text-align: center;
			line-height: 54rpx;

			&.active {
				background-color: #333333;
				color: #fff;
			}
		}
	}
	.btn_row {
		padding: 100rpx 0 50rpx 0;
		.btn {
			width: 44%;
			height: 76rpx;
			border-radius: 38rpx;
			border: 1rpx solid  $themC;
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			color: $themC;
			&.bg {
				background: #3776FF;
				border-radius: 38rpx;
				color: #fff;
			}
			
		}
	}
	.con {
		.h1_row {
			margin-bottom: 50rpx;
			.tag {
				display: inline-block;
				// width: 66px;
				height: 36rpx;
				line-height: 36rpx;
				padding: 4rpx 6rpx;
				background: #63C168;
				border-radius: 6rpx;
				margin-top: -2rpx;
				margin-right: 16rpx;
				font-size: 28rpx;
				color: #fff;
			}

			text.h1 {
				font-size: 36rpx;
			}
		}

		.option {
			width: 100%;
			.optionItem {
				margin-bottom: 50rpx;
				align-items: center;
				.icon {
					width: 36rpx;
					height:36rpx;
					border-radius: 50%;
					border: 1rpx solid #999;
				}

				.text {
					font-size: 32rpx;
					margin-left: 16rpx;
				}
			}
		}

		.answer {
			height: 90rpx;
			background: #F4F4F4;
			line-height: 90rpx;
			padding: 0 30rpx;
			margin-top: 20rpx;
			.ans {
				margin-right: 60rpx;
				text {
					color: red;
				}
			}
		}

		.analysis {
			margin-top: 60rpx;
			.tit {
				font-weight: 700;
				font-size: 32rpx;
				position: relative;
				padding-left: 30rpx;
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 8rpx;
					width: 6rpx;
					height: 30rpx;
					background: linear-gradient(0deg, #43EA80 0%, #38F8D4 100%);
					border-radius: 3rpx;
				}
			}

			.txt {
				margin-top: 39rpx;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
}
</style>