This commit is contained in:
2025-11-05 08:51:21 +08:00
parent 73664abe4b
commit 9a706c1275

View File

@@ -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:"线性电阻,恒定温度,金属导体,半导体材料",
},{
type:'judge',
content:"功率越大的电器,其电阻值越小",
fraction:2,
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=""
});
// 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;
}
}
}
}