From 33413c6be7f338ba1ee92b3218e5c078364675dc Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 24 七月 2024 17:29:07 +0800 Subject: [PATCH] 提交 --- pages/tabBar/firstPage/exam.vue | 139 ++++++++++++++++++++++++++++++++------------- 1 files changed, 98 insertions(+), 41 deletions(-) diff --git a/pages/tabBar/firstPage/exam.vue b/pages/tabBar/firstPage/exam.vue index 9a64d19..9771e02 100644 --- a/pages/tabBar/firstPage/exam.vue +++ b/pages/tabBar/firstPage/exam.vue @@ -16,10 +16,10 @@ </view> </view> <view class="m-p-15"> - <view class="timer" v-if="viewType == 1"> + <view class="timer" v-if="viewType == 1 && bank.examPaper.limited == 1"> <u--image :showLoading="true" :src="sandPic" width="18px" height="18px"></u--image> <view class="timer-b"> - <span>开考时间:</span> + <span>剩余时间:</span> <span>{{ formattedTime }}</span> </view> </view> @@ -34,7 +34,7 @@ </view> <view class="content"> <u-checkbox-group - v-if="currentQ.questionType==2" + v-if="viewType == 1 && currentQ.questionType==2" v-model="currentB" placement="column" class="myRadio" @@ -52,7 +52,28 @@ > </u-checkbox> </u-checkbox-group> - <u-radio-group v-model="currentA" class="myRadio" iconPlacement="right" placement="column" @change="groupChange" v-if="currentQ.questionType==1||currentQ.questionType==3" :disabled="viewType==1?false:true"> + + <u-checkbox-group + v-if="viewType == 2 && currentQ.questionType==2" + v-model="currentB" + placement="column" + class="myRadio" + iconPlacement="right" + :disabled="viewType==1?false:true" + @change="checkboxChange" + > + <u-checkbox + :customStyle="{marginBottom: '15px'}" + v-for="(item, index) in currentQ.content.items" + :key="index" + :label="item.prefix +':'+ item.content" + :name="item.prefix" + :class="{'picked': currentQ.answer.includes(item.prefix),'wronged': currentB.includes(item.prefix) && !currentQ.answer.includes(item.prefix)}" + > + </u-checkbox> + </u-checkbox-group> + + <u-radio-group v-model="currentA" class="myRadio" iconPlacement="right" placement="column" @change="groupChange" v-if="viewType == 1 && (currentQ.questionType==1||currentQ.questionType==3)" :disabled="viewType==1?false:true"> <u-radio :customStyle="{marginBottom: '15px'}" v-for="(item, index) in currentQ.content.items" @@ -66,9 +87,22 @@ </u-radio> </u-radio-group> - <u-button style="width: 80%;margin: 30px auto" + <u-radio-group v-model="currentA" class="myRadio" iconPlacement="right" placement="column" @change="groupChange" v-if="viewType == 2 && (currentQ.questionType==1||currentQ.questionType==3)" :disabled="viewType==1?false:true"> + <u-radio + :customStyle="{marginBottom: '15px'}" + v-for="(item, index) in currentQ.content.items" + :key="index" + shape="square" + :label="item.prefix +':'+ item.content" + :name="item.prefix" + @change="radioChange" + :class="{'picked': currentQ.answer == item.prefix, 'wronged': currentA == item.prefix && currentA != currentQ.answer}" + > + </u-radio> + </u-radio-group> + <u-button style="width: 80%;margin: 5px auto 15px" v-if="currentQ.questionType==2 && currentB.length>0 && viewType ==1" - type="primary" shape="circle" text="确认答案" @click="confirmAnswer"></u-button> + type="primary" shape="circle" text="确认答案" @click="confirmAnswer(2)"></u-button> <view class="answers" v-if="viewType == 2 && currentQ.studentAnswer && currentQ.studentAnswer.answer"> <view>你的答案: <span :class="currentQ.answer == currentQ.studentAnswer.answer?'right':'wrong'">{{currentQ.studentAnswer.answer}}</span> @@ -85,9 +119,9 @@ <u-button v-if="curTotalIndex < idList.length - 1" style="width: 30%" type="error" shape="circle" size="small" text="下一题" @click="nextQ"></u-button> <u-button v-if="curTotalIndex == idList.length - 1 && viewType == 2" style="width: 30%" type="primary" shape="circle" size="small" text="退出" @click="goBack"></u-button> </view> - <u-popup :show="showPanel" :round="40" mode="right" @close="close" @open="open"> + <u-popup :show="showPanel" :round="40" mode="bottom" @close="close" @open="open"> <view class="panel"> - <view :class="item.passed==1?'right-a':item.passed==0?'wrong-a':''" v-for="(item,index) in idList" @click="toQuestion(item,index)"> + <view :class="(viewType==2 && item.passed==1)?'right-a':(viewType==2 && item.passed==0)?'wrong-a':''" v-for="(item,index) in idList" @click="toQuestion(item,index)"> {{index + 1}} </view> </view> @@ -129,7 +163,8 @@ startTime: null, elapsedTime: 0, timerInterval: null, - showPanel: false + showPanel: false, + limitTime: 0 } }, onReady(){ @@ -140,7 +175,7 @@ this.viewType = e.type && JSON.parse(decodeURIComponent(e.type)) this.startTime = this.bank.startTime?this.bank.startTime:0 this.getQuestionIds(this.bank.paperId) - + this.limitTime = this.bank.examPaper.limited == 1?this.bank.examPaper.limitTime:0 }, onShow(){ @@ -152,7 +187,7 @@ }, computed: { formattedTime() { - const totalSeconds = Math.floor(this.elapsedTime / 1000); + const totalSeconds = Math.floor((this.limitTime * 60) - this.elapsedTime / 1000); const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; @@ -174,7 +209,8 @@ if(res.code == 200){ let list = res.data || [] if(list.length>0){ - t.idList = list.sort((a, b) => a.id - b.id) + // t.idList = list.sort((a, b) => a.id - b.id) + this.idList = list }else{ t.idList = [] uni.showToast({ @@ -192,7 +228,7 @@ const curIdList = this.idList.slice(this.curTotalIndex,this.curTotalIndex + 20) this.currentId = this.idList[this.curTotalIndex].id await this.getQuestionsByIds(curIdList) - this.currentQ = this.questionList[0] + this.currentQ = this.questionList.find(i=>i.id == this.currentId) this.showAnswer() this.showPanel = false }, @@ -219,12 +255,13 @@ if(res.code == 200){ let list = res.data || [] if(list.length>0){ - this.idList = list.sort((a, b) => a.id - b.id) + // this.idList = list.sort((a, b) => a.id - b.id) + this.idList = list this.curTotalIndex = this.bank.questionId ? this.idList.findIndex(i=>i.id == this.bank.questionId):0 const curIdList = this.idList.slice(this.curTotalIndex,this.curTotalIndex + 20) this.currentId = this.idList[this.curTotalIndex].id await this.getQuestionsByIds(curIdList) - this.currentQ = this.questionList[0] + this.currentQ = this.questionList.find(i=>i.id == this.currentId) this.showAnswer() }else{ this.idList = [] @@ -243,12 +280,13 @@ if(res.code == 200){ let list = res.data || [] if(list.length>0){ - this.idList = list.sort((a, b) => a - b) + // this.idList = list.sort((a, b) => a - b) + this.idList = list this.curTotalIndex = 0 const curIdList = this.idList.slice(0,20) this.currentId = this.idList[0].id await this.getQuestionsByIds(curIdList) - this.currentQ = this.questionList[0] + this.currentQ = this.questionList.find(i=>i.id == this.currentId) this.showAnswer() }else{ this.idList = [] @@ -279,14 +317,14 @@ }, groupChange(n) { if(this.currentA !== ''){ - this.confirmAnswer() + this.confirmAnswer(1) } }, radioChange(n) { console.log('radioChange', n); }, - confirmAnswer(){ + confirmAnswer(type){ const data = { answer: this.currentQ.questionType==2?this.currentB.join(','):this.currentA, paperId: this.bank.paperId, @@ -296,8 +334,13 @@ postExamAnswer(data).then(res=>{ if(res.code == 200){ this.currentQ.passed = res.data - // this.currentQ.exExerciseAnswer.passed = res.data.passed - this.currentQ.studentAnswer.answer = res.data.answer + if (!this.currentQ.studentAnswer) { + Vue.set(this.currentQ, 'studentAnswer', {}); + } + Vue.set(this.currentQ.studentAnswer, 'answer', data.answer); + if(type == 2){ + this.nextQ() + } // uni.$u.toast('答案已提交') }else{ uni.$u.toast(res.message) @@ -308,13 +351,13 @@ prevQ(){ if(this.curTotalIndex - 1>=0){ this.curTotalIndex-- - if(this.curTotalIndex == 0){ - this.getQuestionsByIds([this.idList[0]]).then(()=>{ - // this.currentQ = this.questionList[this.questionList.length-1] - this.$set(this, 'currentQ', this.questionList[this.questionList.length-1]) - this.showAnswer() - }) - }else{ + // if(this.curTotalIndex == 0){ + // this.getQuestionsByIds([this.idList[0]]).then(()=>{ + // // this.currentQ = this.questionList[this.questionList.length-1] + // this.$set(this, 'currentQ', this.questionList[this.questionList.length-1]) + // this.showAnswer() + // }) + // }else{ this.currentId = this.idList[this.curTotalIndex].id if(this.questionList.find(i=>i.id == this.currentId)){ this.$set(this, 'currentQ', this.questionList.find(i=>i.id == this.currentId)) @@ -324,11 +367,11 @@ const curIdList = this.idList.slice(startIndex, this.curTotalIndex+1); this.getQuestionsByIds(curIdList).then(()=>{ // this.currentQ = this.questionList[this.questionList.length-1] - this.$set(this, 'currentQ', this.questionList[this.questionList.length-1]) + this.$set(this, 'currentQ', this.questionList.find(i=>i.id == this.currentId)) this.showAnswer() }) } - } + // } }else{ uni.showToast({ title: '已经是第一题了', @@ -347,8 +390,8 @@ }else{ const curIdList = this.idList.slice(this.curTotalIndex,this.curTotalIndex + 20) this.getQuestionsByIds(curIdList).then(()=>{ - this.$set(this, 'currentQ', this.questionList[0]) - // this.currentQ = this.questionList[0] + this.$set(this, 'currentQ', this.questionList.find(i=>i.id == this.currentId)) + // this.$set(this, 'currentQ', this.questionList[0]) this.showAnswer() }) } @@ -405,6 +448,7 @@ title: '本次考试结束', duration: 1500 }) + clearInterval(this.timerInterval) setTimeout(()=>{ const url = uni.getStorageSync("prevPage"); if(url){ @@ -464,8 +508,7 @@ } .panel{ - height: 100vh; - width: 60vw; + height: 60vh; background: #f2f2f2; overflow-y: auto; padding: 15px; @@ -477,7 +520,8 @@ &>view{ padding: 5px; - min-width: calc(20% - 12px); + box-sizing: border-box; + min-width: 33px; border-radius: 4px; text-align: center; background: rgba(41,121,255,0); @@ -485,7 +529,7 @@ color: #333; background: #f2f2f2; transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); - box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15); + box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1); cursor: pointer; &:active { @@ -558,7 +602,7 @@ border-radius: 4px; color: #2979ff; background: #f5f7fa; - border: 1px solid rgba(41,121,255,.4); + border: 1px solid rgba(41,121,255,.2); box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1); transition: box-shadow .25s ease !important; } @@ -571,7 +615,7 @@ .questions{ width: 100%; - margin-top: 40px; + margin-top: 40rpx; .title{ font-size: 16px; margin-bottom: 20px; @@ -606,7 +650,7 @@ align-items: center; justify-content: space-around; z-index: 99; - bottom: 60px; + bottom: 20px; left: 0; } @@ -622,14 +666,14 @@ box-sizing: border-box; border-radius: 8px; background: #f5f7fa; - border: 1px solid #fff; + border: 1.5px solid #fff; box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1); transition: box-shadow .25s ease !important; } .myRadio{ /deep/ .picked{ - border: 2px solid #2979ff; + border: 1.5px solid #2979ff; .u-radio__icon-wrap,.u-checkbox__icon-wrap{ border-color: #fff !important; @@ -641,6 +685,19 @@ color: #2979ff } } + /deep/ .wronged{ + border: 1.5px solid #ed6464; + + .u-radio__icon-wrap,.u-checkbox__icon-wrap{ + border-color: #fff !important; + span{ + color: #fff !important; + } + } + span{ + color: #ed6464 + } + } } /deep/ .u-checkbox:active { -- Gitblit v1.9.2