修改

packageB/train/practice/startPracticing.vue

@@ -3,9 +3,10 @@
 		<image src="../../../static/images/train/bj.jpg" class="bjImg" mode=""></image>
 		<div class="con-box">
 			<div class="header">
-				<div>正确率：0%</div>
-				<div>用时：00:00</div>
-				<div class="headBtn">暂停</div>
+				<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">
@@ -37,15 +38,15 @@
 						    <span>错误</span>
 						  </div>
 						</div>
-						<div class="analysis">
-						  <div class="analysisHead correct">
+						<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 class="analysisHead errors" v-if="judgWhether=='错误'">
 						    <div>回答错误！</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>
@@ -66,38 +67,38 @@
 						  </div>
 						</div>
 						<div class="problemBtns">
-							<div class="events">提交答案</div>
-							<div>下一题</div>
+							<div v-if="analysis&&judgWhether!=''&&questionIndex!=problemData.length" @click="questionIndex.value+=1">下一题</div>
+							<div v-else :class="(radio==''&&radio2==''&&checkList.length==0&&isRunning)?'events':''">提交答案</div>
 						</div>
 					</template>
 				</div>
 			</div>
 			<div class="footer">
 				<div class="footerLeft">
-					<div class="zuo events"></div>
-					<div class="you"></div>
-					<div style="text-align: center;font-size: 24rpx;">
-						<image :src="urls+'wsc.png'" mode=""></image>
+					<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 style="text-align: center;font-size: 24rpx;">
-						<image :src="urls+'video-sc.png'" mode=""></image>
+					<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>
 				<div class="footerBtn">完成练习</div>
 				<div class="footerLeft">
 					<div>
 						<div class="icons" style="background-color: #1CADF5;">√</div>
-						<div class="texts" style="color: #1CADF5;">1</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;">0</div>
+						<div class="texts" style="color: #FF6668;">{{errorsIndex}}</div>
 					</div>
-					<div>
-						<div></div>
-						<div></div>
+					<div @click="dialogVisible=true">
+						<div><span style="color: #1CADF5;">{{questionIndex}}</span>/{{problemData.length}}</div>
+						<div>题号</div>
 					</div>
 				</div>
 			</div>
@@ -108,18 +109,22 @@
 					<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 } from 'vue';
+import { reactive, inject, watch, ref, onMounted,onBeforeUnmount,computed } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 const { $api,urls , navTo, 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([]);
@@ -127,30 +132,121 @@ const questionIndex = ref(1);
 const correctIndex = ref(0);
 const errorsIndex = ref(0);
 const accuracyRate = ref(0);
-const dialogVisible = ref(true);
-const problemData = reactive([
-	{
-		type:'single',
-		content:"君不见黄河之水天上来，下一句是？",
-		fraction:5,
-		trainChooses:"奔流到海不复回,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月",
-	  },{
-		type:'multiple',
-		content:"以下哪些是欧姆定律的适用条件？",
-		fraction:8,
-		trainChooses:"线性电阻,恒定温度,金属导体,半导体材料",
+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=""
+});
 
-	  },{
-		type:'judge',
-		content:"功率越大的电器，其电阻值越小",
-		fraction:2,
-		trainChooses:[
-		  "正确",
-		  "错误",
-		]
+// watch(problemData, (newVal, oldVal) => {
+//   problemList.value=[];
+//   newVal.forEach((item,i)=>{
+//     problemList.value.push({index:i+1,whether:""})
+//   })
+// });
+
+onLoad((options) => {
+	userInfo.value = uni.getStorageSync('userInfo') || {};
+	Authorization.value=uni.getStorageSync('Padmin-Token')||''
+	queryData();
+});
+onShow(()=>{
+	
+})
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer); // 清除定时器
+    timer = null; // 防止内存泄漏，确保下次不会再误用已清除的定时器
+  }
+});
+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) => {
+		resData.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[this.questionIndex-1].questionId,
+		collect:is
+	},'post',9100,header).then((resData) => {
+		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) => {
+		// debugger
+		// accuracyRate.value=resData.truePresent
+	});
+};
+//提交答案
+function submit(){
+	let indexs=questionIndex.value-1
+	let parm={
+	  questionId:problemData.value[indexs].questionId,
+	  userId:userInfo.value.userId,
+	  answer:this.problemData.value[indexs].answer
+	}
+	if(problemData.value[indexs].type=='single'){
+	  parm.submitAnswer=radio.value
+	}else if(this.problemData[indexs].type=='multiple'){
+	  parm.submitAnswer=this.checkList.join(',')
+	}else if(this.problemData[indexs].type=='judge'){
+	  parm.submitAnswer=this.radio2
+	}
+	startTrainingApi.submitAnswer(parm).then((res)=>{
+
+	  if(res&&res.code==200){
+		this.analysis=true
+		this.judgWhether=res.msg
+		this.problemList[indexs].whether=res.msg
+		if(res.msg=='正确'){
+		  this.correctIndex++
+		}else if(res.msg=='错误'){
+		  this.errorsIndex++
+		}
+		this.accuracyRates()
 	  }
-]);
-
+	})
+};
 function selected(i){
     radio.value=i
 };
@@ -194,9 +290,28 @@ 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
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -358,20 +473,20 @@ function clones(){
 				font-size: 30rpx;
 				text-align: center
 				.zuo{
-					width: 24rpx;
-					height: 24rpx;
+					width: 26rpx;
+					height: 26rpx;
 					border-top: 2px solid #666
 					border-left: 2px solid #666
 					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
-					margin-left: 50rpx;
+					margin-left: 60rpx;
 				}
 				.you{
-					width: 24rpx;
-					height: 24rpx;
+					width: 26rpx;
+					height: 26rpx;
 					border-right: 2px solid #666
 					border-bottom: 2px solid #666
 					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
-					margin-left: 30rpx;
+					// margin-left: 30rpx;
 					margin-right: 50rpx;
 				}
 				.icons{
@@ -423,6 +538,36 @@ function clones(){
 				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;
+			}
 		}
 	}
 }