ks-app-employment-service/packageB/train/practice/startPracticing.vue

<template>
	<div class="app-box">
		<image src="../../../static/images/train/bj.jpg" class="bjImg" mode=""></image>
		<div class="con-box">
			<div class="header">
				<div>正确率：{{accuracyRate}}%</div>
				<div>用时：{{formattedTime}}</div>
				<div class="headBtn" v-if="isRunning" @click="pause">暂停</div>
				<div class="headBtn" v-if="!isRunning" @click="start">继续</div>
			</div>
			<div class="problemCard">
				<div v-for="(item,index) in problemData" :key="index">
					<template v-if="questionIndex==(index+1)">
						<div class="problemTitle">
							<span class="titleType" v-if="item.type=='single'">单选题</span>
							<span class="titleType" v-if="item.type=='multiple'">多选题</span>
							<span class="titleType" v-if="item.type=='judge'">判断题</span>
							<span>{{item.content}}</span>
						</div>
						<div class="options" v-if="item.type=='single'">
						  <div class="opt" @click="selected(i)" :class="radio!==''&&i==radio?'active':''" v-for="(val,i) in parseOptions(item.trainChooses)">
						    <div class="optLab">{{indexToLetter(i)}}</div>
						    <span>{{val}}</span>
						  </div>
						</div>
						<div class="options" v-if="item.type=='multiple'">
						  <div class="opt" @click="selected2(i)" :class="judgment(i)?'active':''" v-for="(val,i) in parseOptions(item.trainChooses)">
						    <div class="optLab">{{indexToLetter(i)}}</div>
						    <span>{{val}}</span>
						  </div>
						
						</div>
						<div class="options" v-if="item.type=='judge'">
						  <div class="opt" @click="selected3('正确')" :class="radio2=='正确'?'active':''">
						    <span>正确</span>
						  </div>
						  <div class="opt" @click="selected3('错误')" :class="radio2=='错误'?'active':''">
						    <span>错误</span>
						  </div>
						</div>
						<div class="analysis" v-if="analysis">
						  <div class="analysisHead correct" v-if="judgWhether=='正确'">
						    <div>回答正确！</div>
						    <div></div>
						  </div>
						  <div class="analysisHead errors" v-if="judgWhether=='错误'">
						    <div>回答错误！</div>
						    <div></div>
						  </div>
						  <div class="analysisCon">
						    <div class="parse1">正确答案：</div>
						    <div class="parse2" v-if="item.type=='single'" style="color: #30A0FF;font-weight: bold;">{{String.fromCharCode(65 + Number(item.answer))}}.</div>
						    <div class="parse2" v-if="item.type=='multiple'" style="color: #30A0FF;font-weight: bold;">
						      <span  v-for="(val,i) in parseOptions(item.answer)">{{indexToLetter(val-1)}}.</span>
						    </div>
						    <div class="parse2" v-if="item.type=='judge'" style="color: #30A0FF;font-weight: bold;">{{item.answer}}</div>
						  </div>
						  <div class="analysisCon">
						    <div class="parse1">答案解析：</div>
						    <div class="parse2">{{item.answerDesc}}</div>
						  </div>
						  <div class="analysisCon">
						    <div class="parse1">知识点：</div>
						    <div>
						      <el-tag style="margin-right: 10px;">{{item.knowledgePoint}}</el-tag>
						    </div>
						  </div>
						</div>
						<div class="problemBtns">
							<div v-if="analysis&&judgWhether!=''&&questionIndex!=problemData.length" @click="questionIndex+=1">下一题</div>
							<div v-else :class="((radio===''&&radio2===''&&checkList.length==0&&isRunning)||analysis)?'events':''" @click="submit()">提交答案</div>
						</div>
					</template>
				</div>
			</div>
			<div class="footer">
				<div class="footerLeft">
					<div class="zuo" :class="questionIndex==1?'events':''" @click="questionIndex-=1"></div>
					<div class="you" :class="questionIndex==problemData.length?'events':''" @click="questionIndex+=1"></div>
					<div @click="collect(1)" style="text-align: center;font-size: 24rpx;" v-if="(problemData[questionIndex - 1]?.isCollect || 0)!=1">
						<image :src="urls+'wsc.png'" mode="" style="width: 34rpx;height: 32rpx;"></image>
						<div>收藏</div>
					</div>
					<div @click="collect(0)" style="text-align: center;font-size: 24rpx;" v-if="(problemData[questionIndex - 1]?.isCollect || 0)==1">
						<image :src="urls+'video-sc.png'" mode="" style="width: 34rpx;height: 32rpx;"></image>
						<div>取消</div>
					</div>
				</div>
				<div class="footerBtn" @click="exit()">完成练习</div>
				<div class="footerLeft">
					<div>
						<div class="icons" style="background-color: #1CADF5;">√</div>
						<div class="texts" style="color: #1CADF5;">{{correctIndex}}</div>
					</div>
					<div>
						<div class="icons" style="background-color: #FF6668;">×</div>
						<div class="texts" style="color: #FF6668;">{{errorsIndex}}</div>
					</div>
					<div @click="dialogVisible=true">
						<div><span style="color: #1CADF5;">{{questionIndex}}</span>/{{problemData.length}}</div>
						<div>题号</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cards" v-if="dialogVisible">
			<div class="cardCon">
				<div class="cardHead">
					<div>题号</div>
					<div style="font-size: 40rpx;" @click="clones()">×</div>
				</div>
				<div class="questionNums">
				  <div class="questions" :class="item.whether=='正确'?'questionCorrect':item.whether=='错误'?'questionError':questionIndex==(index+1)?'questionsActive':''" @click="switchs(index)" v-for="(item,index) in problemList" :key="index">{{index+1}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted,onBeforeUnmount,computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api,urls , navTo,navBack , vacanciesTo, formatTotal, config } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const userInfo = ref({});
const Authorization = ref('');
const radio = ref('');
const radio2 = ref('');
const checkList = ref([]);
const questionIndex = ref(1);
const correctIndex = ref(0);
const errorsIndex = ref(0);
const accuracyRate = ref(0);
const elapsedTime = ref(0);
const analysis = ref(false);
const judgWhether = ref('');
const isRunning = ref(false);
const dialogVisible = ref(false);
const problemData = ref([]);
const problemList = ref([]);
let timer = null;
const formattedTime = computed(() => {
	const minutes = Math.floor(elapsedTime.value / 60)
	const seconds = elapsedTime.value % 60
	return `${padTime(minutes)}:${padTime(seconds)}`
});
watch(questionIndex, (newVal, oldVal) => {
  radio.value=""
  radio2.value=""
  checkList.value=[]
  analysis.value=false
  judgWhether.value=""
});

// watch(problemData, (newVal, oldVal) => {
//   problemList.value=[];
//   newVal.forEach((item,i)=>{
//     problemList.value.push({index:i+1,whether:""})
//   })
// });

onLoad((options) => {
	Authorization.value=uni.getStorageSync('Padmin-Token')||''
	getHeart();
});
onShow(()=>{
	
})
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer); // 清除定时器
    timer = null; // 防止内存泄漏，确保下次不会再误用已清除的定时器
  }
});
function getHeart() {
	const raw =Authorization.value;
	const token = typeof raw === "string" ? raw.trim() : "";
	const headers = token ? { 'Authorization': raw.startsWith("Bearer ") ? raw : `Bearer ${token}` }: {}
	$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData) => {
      if (resData.code == 200) {
        getUserInfo();
      } else {
		  navTo('/packageB/login')
      }
    });
};
function getUserInfo(){
	let header={
		'Authorization':Authorization.value
	}
	$api.myRequest('/system/user/login/user/info', {},'get',10100,header).then((resData) => {
		userInfo.value = resData.info || {};
		// userId.value=resData.info.userId
		queryData()
	});
};
function queryData(){
	problemData.value=[]
	let header={
		'Authorization':Authorization.value,
		'Content-Type':"application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/trainPractice/getQuestions', {
		userId: userInfo.value.userId
	},'post',9100,header).then((resData) => {
		if(resData&&resData.code==200){
			resData.data.forEach((item,i)=>{
				problemData.value.push(item)
				problemList.value.push({index:i+1,whether:""})
			})
			start()
			accuracyRates()
		}
		
	});
}
function collect(is){
	let header={
		'Authorization':Authorization.value,
		'Content-Type':"application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/questionUser/addOrUpdateCollect', {
		userId: userInfo.value.userId,
		questionId:problemData.value[questionIndex.value-1].questionId,
		collect:is
	},'post',9100,header).then((resData) => {
		if(resData&&resData.code==200){
			problemData.value[questionIndex.value-1].isCollect=is
		}
	});
};
//正确率
function accuracyRates(){
	let header={
		'Authorization':Authorization.value,
		'Content-Type':"application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/trainPractice/getCount', {
		userId: userInfo.value.userId,
	},'post',9100,header).then((resData) => {
		if(resData&&resData.code==200){
			accuracyRate.value=resData.data.truePresent
		}
	});
};
//提交答案
function submit(){
	let indexs=questionIndex.value-1
	let parm={
	  questionId:problemData.value[indexs].questionId,
	  userId:userInfo.value.userId,
	  answer:problemData.value[indexs].answer
	}
	if(problemData.value[indexs].type=='single'){
	  parm.submitAnswer=radio.value
	}else if(problemData.value[indexs].type=='multiple'){
	  parm.submitAnswer=checkList.value.join(',')
	}else if(problemData.value[indexs].type=='judge'){
	  parm.submitAnswer=radio2.value
	}
	let header={
		'Authorization':Authorization.value,
		'Content-Type':"application/json"
	}
	$api.myRequest('/train/public/trainPractice/submitAnswer', parm,'post',9100,header).then((resData) => {
		if(resData&&resData.code==200){
			analysis.value=true
			judgWhether.value=resData.msg
			problemList.value[indexs].whether=resData.msg
			if(resData.msg=='正确'){
			  correctIndex.value++
			}else if(resData.msg=='错误'){
			  errorsIndex.value++
			}
			accuracyRates()
		}
	});
};
function selected(i){
    radio.value=i
};
//多选
function selected2(i){
	let arr=checkList.value.join(",")
	if(arr.indexOf(i) !== -1){
	  const index = checkList.value.indexOf(i);
	  if (index !== -1) {
		  checkList.value.splice(index, 1);
	  }
	}else{
	  checkList.value.push(i)
	}
};
function judgment(i){
	let arr=checkList.value.join(",")
	if(arr.indexOf(i) !== -1){
	  return true
	}else{
	  return false
	}
};
function selected3(i){
    radio2.value=i
};
// 解析选项
function parseOptions(options) {
	if (!options) return [];
	// 假设options是字符串格式，以分号分隔
	if (typeof options === 'string') {
	  return options.split(',').filter(opt => opt.trim());
	}
	// 如果是数组，直接返回
	if (Array.isArray(options)) {
	  return options;
	}
	return [];
};
function indexToLetter(index) {
	// 将索引转换为对应的字母
	return String.fromCharCode(65 + index);
};
function padTime(time) {
    return time < 10 ? `0${time}` : time
};
function start() {
	if (isRunning.value) return
	isRunning.value = true
	timer = setInterval(() => {
	  elapsedTime.value++
	}, 1000)
};
function pause() {
	if (!isRunning.value) return
	clearInterval(timer)
	isRunning.value = false
};
function clones(){
	dialogVisible.value=false
};
function switchs(i){
	questionIndex.value=(i+1)
	dialogVisible.value=false
};
function exit(){
	navBack()
}
</script>

<style lang="stylus" scoped>
.app-box{
	width: 100%;
	height: 100vh;
	position: relative;
	.bjImg{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.con-box{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top:0;
		z-index: 10;
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		.header{
			height: 100rpx;
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(0deg, #4285EC 0%, #0BBAFB 100%);
			color: #fff;
			font-size: 26rpx;
			border-radius: 10rpx
			.headBtn{
				background: #499FFF;
				border-radius: 4px;
				width: 100rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
		.problemCard{
			margin-top: 30rpx;
			.problemTitle{
				font-size: 30rpx;
				.titleType{
					display: inline-block;
					background-color: #499FFF;
					border-radius: 10rpx 10rpx 10rpx 0;
					padding: 8rpx 12rpx;
					color: #fff;
					font-size: 26rpx;
					margin-right: 20rpx;
				}
			}
			.options{
				margin-top: 30rpx;
				.opt{
					height: 60rpx;
					/* background-color: #F8F9FA; */
					border-radius: 5px;
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					box-sizing: border-box;
					color: #808080;
					font-size: 30rpx;
					.optLab{
					  width: 40rpx;
					  height: 40rpx;
					  text-align: center;
					  line-height: 40rpx;
					  border-radius: 50%;
					  background-color: #8C8C8C;
					  color: #fff;
					  font-weight: 600;
					  font-size: 32rpx;
					  margin-right: 20rpx;
					}
				}
				.active{
				  background: linear-gradient(90deg, #25A9F5 0%, #B1DBFF 100%);
				  color: #fff!important;
				  font-weight: bold;
				}
				.active>view{
				  background-color: #fff!important;
				  color: #25A9F5!important;
				}
			}
			.analysis{
			  margin-top: 30rpx;
			  background-color: #fff;
			  border-radius: 6px;
			  margin-bottom: 15rpx;
			  border: 1px solid #10A8FF;
			  padding: 20rpx;
			  box-sizing: border-box;
			  .analysisHead{
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				letter-spacing: 2px;
			  }
			  .correct{
			    color: #67C23A;
			  }
			  .errors{
			    color: #F06A6A;
			  }
			  .analysisCon{
			    margin-top: 30rpx;
				.parse1{
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
				}
				.parse2{
					font-size: 26rpx;
					color: #333;
					margin-top: 10px;
				}
			  }
			}
			.problemBtns{
				display: flex
				align-items: center
				justify-content: center
				view{
					width: 140rpx
					height: 50rpx
					text-align: center
					line-height: 50rpx
					background-color: #10A8FF
					color: #fff
					font-size: 28rpx
					border-radius: 5rpx
					margin-right: 10rpx;
				}
				
			}
		}
		.footer{
			width: 100%;
			height: 120rpx;
			border-top: 1px solid #ddd
			position: fixed
			bottom: 0
			left: 0
			display: flex
			align-items: center
			justify-content: space-between
			.footerLeft{
				display: flex
				align-items: center
				font-size: 30rpx;
				text-align: center
				.zuo{
					width: 26rpx;
					height: 26rpx;
					border-top: 2px solid #666
					border-left: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					margin-left: 60rpx;
				}
				.you{
					width: 26rpx;
					height: 26rpx;
					border-right: 2px solid #666
					border-bottom: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					// margin-left: 30rpx;
					margin-right: 50rpx;
				}
				.icons{
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					text-align: center;
					line-height: 30rpx;
					border-radius: 50%
				}
				.texts{
					font-size: 24rpx;
				}
			}
			.footerLeft>view{
				margin-right: 40rpx;
			}
			.footerBtn{
				width: 140rpx
				height: 50rpx
				text-align: center
				line-height: 50rpx
				background-color: #67C23A
				color: #fff
				font-size: 28rpx
				border-radius: 5rpx
			}
		}
	}
	.cards{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		z-index: 1000;
		padding: 100rpx 50rpx;
		box-sizing: border-box;
		.cardCon{
			height: 100%;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			.cardHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 600;
			}
			.questionNums{
			  width: 100%;
			  display: flex;
			  flex-wrap: wrap;
			}
			.questions{
			  width: 60rpx;
			  height: 60rpx;
			  text-align: center;
			  line-height: 60rpx;
			  border-radius: 8rpx;
			  border: 2px solid #E0E0E0;
			  font-size: 28rpx;
			  margin-right: 15px;
			  cursor: pointer;
			}
			.questionsActive{
			  background-color: #F0F9FF;
			  border: 2px solid #409EFF;
			}
			.questionCorrect{
			  background-color: #F0F9FF;
			  border: 2px solid #64BC38;
			  color: #6BC441;
			}
			.questionError{
			  background-color: #FFF1F0;
			  border: 2px solid #F56C6C;
			  color: #F36B6B;
			}
		}
	}
}
.events{
	pointer-events: none; /* 这会禁用所有指针事件 */
	opacity: 0.5; /* 可选：改变透明度以视觉上表示不可点击 */
	cursor: not-allowed; /* 可选：改变鼠标光标样式 */
}
</style>