|
|
<template> <view id="brushQuestions"> <view class="content"> <view class="row row1"> <view class="userInfoBox"> <view class="examNo"> <view class="h3">洛阳学车</view> <view class="card">第0{{ randomNumber }}号台</view> <view class="back" @click="goBack"> <u-icon name="arrow-left" size="16"></u-icon> </view> </view> <view class="user"> <view class="card"> <view class="h3">考生信息</view> <view class="avatar"> <image src="@/static/images/avatarbg.png" mode=""></image> </view> <view class="txt">用户： <text style="margin-top: 10rpx;">{{ phone }}</text></view> <!-- <view class="txt">性别：男</view> --> <view class="txt">类型：{{ usecarStore.carInfo.carTypeName}}</view> <view class="txt">科目：科目{{ usecarStore.carInfo.stepType==1?'一': '四'}}</view> </view> </view> </view> <view class="examConBox"> <view class="leftBox"> <view class="h3">考试题目</view> <view class="questionTxt"> <view class="txt">{{currentIndex+1}}.{{ questionBank.title }}</view> <view class="txt" v-for="(item,index) in questionBank.optionArr"> <view class="text"><text >{{item.key}}</text> {{item.text}}</view> </view> </view> <view class="answer flex-b"> <view class="lab">您的答案： <text v-if="questionBank.types==3">{{ curOption.answer=='true'?'A':'B'}}</text> <text v-else>{{ curOption.answer}}</text> </view> <view class="rightSelect flex"> <view class="lab">选项：</view> <view class="optio flex" v-for="(item,index) in questionBank.optionArr" > <view class="optionItem" :class="{ active: curOption.answer?.includes(item.key)}" @click="chooseOption(item)">{{item.key}}</view> </view> </view> </view> </view> <view class="rightBox"> <!-- 右边盒子 --> <table style="width: 100%;height: 100%;" v-if="ansCard.length"> <tr> <th class="blueItem br">题目</th> <th v-for="(item,index) in usecarStore.carInfo.stepType==1?10:5" class="blueItem br">{{index+1}}列</th> </tr> <tr v-for="(item,index) in ansCard"> <td class="blueItem bb">{{index+1}}行</td> <td v-for="(item2,index2) in item" class="ansItem" :class="{green: item2.answer==item2.answerMy}" @click="ansCardClick(item2)"> <text v-if="item2.types==3&&item2.answerMy" class="flex" style="justify-content: center;"> <up-icon name="checkmark" color="#55ff7f" size="18" v-if="item2.answer==item2.answerMy"></up-icon> <up-icon name="close" color="#ff0000" size="18" v-else></up-icon> </text> <text v-else>{{ item2.answerMy }}</text> </td> </tr> </table> </view> </view> </view> <view class="row row2"> <view class="timeBox"> <view class="h3">考试时间</view> <view class="time"><up-count-down :time="info.totalExamTime * 60 * 1000" format="mm:ss" @finish="finishFn" ref="countDownRef"></up-count-down></view> </view> <view class="leftTpsBox"> <view class="card"> <view class="h3">操作提示</view> <view class="txt">本题为{{types[questionBank.types-1]}}，请在备选答案中选择 {{ questionBank.types==2? '多': '一'}}个你认为正确的答案！</view> </view> </view> <view class="rightBtnBox"> <button class="btn hui" @click="debounce(nextQuestion(-1), 500)" :class="{disable: currentIndex==0}" :disabled="currentIndex==0">上一题</button> <button class="btn hui" @click="debounce(nextQuestion(1), 500)" :class="{disable: currentIndex>=questionBankList.length-1}" :disabled="currentIndex>=questionBankList.length-1">下一题</button> <view class="btn"@click="handApaper">交 卷</view> </view> </view> <view class="picBox"> <view class="h3">考题图片</view> <view class="imgBox"> <image :src="questionBank.img" v-if="questionBank.img" @click="previewImg" mode="aspectFit"></image> </view> <u-popup :show="show" mode="center" :closeable="true" @close="show=false" bgColor="transparent"> <view class="imgView"> <!-- <view class="closeIcon" @click="show=false"> <u-icon name="close-circle" color="#fff" size="28"></u-icon> </view> --> <view class="img"> <image :src="questionBank.img" mode="aspectFit"></image> </view> </view> </u-popup> </view> </view> <u-popup :show="showCommit" mode="center" :closeable="true" round="10" @close="closeCommitPopup" > <view class="commitView"> <view class="commitTit">考试确认窗口</view> <view class="commitTxt">你当前考试答对{{yesNum}}题，答错{{ questionBankList.length-yesNum-noNum}}题，未答{{ noNum }}题。 </view> <view class="commitTxt">1、点击【确认交卷】，将提交考试成绩，考试结束。</view> <view class="commitTxt">2、点击【继续考试】，将关闭本窗口，继续考试。</view> <view class="commitBtn"> <view class="btn border" @click="submitBtnFn">确定交卷</view> <view class="btn" @click="closeCommitPopup">继续考试</view> </view> </view> </u-popup> <u-popup :show="showNoPass" mode="center" :closeable="true" @close="showNoPass=false" round="10" > <view class="commitView"> <view class="commitTit">考试不合格</view> <view class="commitTxt">学员、您本次成绩为{{grade}}分</view> <view class="commitTxt">考试不合格，预祝您下次顺利</view> <view class="commitBtn"> <view class="btn" @click="goBack">确定</view> </view> <view class="djs"> <up-count-down :time="4 * 1000" format="ss" @finish="goBack" style="color: red;"></up-count-down> <view class="djsTxt"> <text style="color: red;">秒</text>自动关闭，自动回到页面</view> </view> </view> </u-popup> <u-popup :show="showWrong" mode="center" :closeable="true" round="10" @close="showWrongClose" > <view class="commitView"> <view class="commitTit">错题学习</view> <view class="commitTxt">{{ questionBank.title }}</view> <view class="commitTxt" v-for="(item,index) in questionBank.optionArr" > <view class="text"><text >{{item.key}}</text> {{item.text}}</view> </view> <view class="rowBg"> <view class="ans">正确答案： <text v-if="questionBank.types==3">{{ questionBank.answer=='true'?'A':'B'}}</text> <text v-else>{{ questionBank.answer}}</text> </view> <view class="ans blue">你的答案： <text v-if="questionBank.types==3">{{ questionBank.answerMy=='true'?'A':'B'}}</text> <text v-else>{{ questionBank.answerMy}}</text> </view> </view> <view class="commitBtn"> <view class="btn" @click="showWrongClose">继续考试</view> </view> <view class="djs"> <view class="djsTxt">页面将在</view> <up-count-down :time="6 * 1000" format="ss" style="color: red;" @finish="showWrongClose" ></up-count-down> <view class="djsTxt"> <text style="color: red;">秒</text> 后自动关闭并返还考试主页面</view> </view> </view> </u-popup>
</view> </template><script setup> import { detectOrient } from '@/utils/utils.js' import { startExamDo, startExam, questionExam } from '@/config/api.js' import { ref, onMounted, nextTick } from 'vue' import { debounce } from '@/uni_modules/uview-plus'; import { onLoad, } from "@dcloudio/uni-app" import carStore from '@/store/modules/car.js' let usecarStore = carStore() let randomNumber = '' onLoad((options)=>{ randomNumber = options.randomNumber }) const types = ref([ '单选题', '多选题', '判断题' ]) let phone = uni.getStorageSync('loginInfo')?.phone const showCommit = ref(false) const showNoPass = ref(false) const showWrong = ref(false) const show = ref(false)
onMounted(()=>{ detectOrient('#brushQuestions') }) function previewImg() { show.value = true } function goBack() { uni.navigateBack() } // 请求数据
const questionBank = ref({}) const questionBankList = ref([]) let ansCard = ref([]) let examInfo = ref({}) let currentIndex = ref(0) async function startQuestionFn() { try{ uni.showLoading({ title: '正在加载...' }) let obj = { carType: usecarStore.carInfo.carType, stepType: usecarStore.carInfo.stepType, examType: 2, } const {data: res} = await startExam(obj) uni.hideLoading() questionBank.value = res.questionBank[0] questionBankList.value = res.questionBank let size = usecarStore.carInfo.stepType==1?10:5 ansCard.value = chunk(questionBankList.value, size) initOptionArr() examInfo.value = res }catch(e){ uni.hideLoading() } } startQuestionFn() // 搞个二维数组来
function chunk(arr, size) { if(arr.length==0) return [] let result = [] let tmp = [] arr.forEach((item,index)=>{ if(tmp.length==0) { result.push(tmp) } item.index = index tmp.push(item) if(tmp.length==size) { tmp = [] } }) return result } function initOptionArr() { questionBank.value.optionArr = [] let abcd = [ 'a', 'b', 'c', 'd', 'e', 'f' ] abcd.forEach((k,i)=>{ let option = 'option'+k if(questionBank.value[option]) { let obj = { key: k.toLocaleUpperCase(), text: questionBank.value[option], index: i+1 } questionBank.value.optionArr.push(obj) } }) // 如果是判断题
// if(questionBank.value.types==3) {
// questionBank.value.optionArr[0].key1 = 'true'
// questionBank.value.optionArr[1].key1 = 'false'
// }
// console.log(questionBank.value.optionArr)
} // 选择答案
const curOption = ref({}) async function chooseOption(item) { if(questionBank.value.answerMy) return console.log(item) if(questionBank.value.types != 2) { item.answer = item.key curOption.value = item }else if(questionBank.value.types == 2){ if(!curOption.value.answer) curOption.value.answer = '' if(curOption.value.answer.includes(item.key)) { curOption.value.answer = curOption.value.answer.replace(item.key, '') return } curOption.value.answer = (curOption.value.answer + item.key).split('').sort().join('') // console.log(curOption.value.ans)
} } // 下一题
async function nextQuestion(num) { // 如果有答案,给答题卡上添加
if(curOption.value.answer) { questionBank.value.answerMy = curOption.value.answer if(questionBank.value.types==3) questionBank.value.answerMy = curOption.value.answer=='A'? 'true': 'false' } // 如果答错了 并且是第一次点
if(questionBank.value.answerMy&&questionBank.value.answer != questionBank.value.answerMy&&curOption.value.isNext != 'next') { curOption.value.isNext = 'next' showWrong.value = true if (countDownRef.value) { countDownRef.value.pause(); } return false } curOption.value = {} currentIndex.value = currentIndex.value + num getQuestionFn() } // 请求下一题
async function getQuestionFn() { console.log(currentIndex.value) questionBank.value = questionBankList.value[currentIndex.value] curOption.value = {} curOption.value.isNext = '' if(questionBank.value.answerMy) curOption.value.answer = questionBank.value.answerMy initOptionArr() } // 点击题卡片里
function ansCardClick(item) { currentIndex.value = item.index getQuestionFn() } function goOnExam() { showWrong.value = false } // 交卷
let grade = ref(0) async function submitBtnFn() { // 如果是最后一题也把答案交上去
if(curOption.value.answer) questionBank.value.answerMy = curOption.value.answer let wrongArr = questionBankList.value.filter(item=>item.answer!=item.answerMy) let worngId = wrongArr.map(item=>item.id).join(',') // grade = 100分/总题数 * 做对题数
grade.value = info.value.funllScore / questionBankList.value.length * (questionBankList.value.length - wrongArr.length) let obj = { "answer": null, "carType": usecarStore.carInfo.carType, "examId": examInfo.value.id, "examType": 2, "grade": grade.value, "isEnd": 1, "pass": 1, "sort": examInfo.value.sort, "stepType": usecarStore.carInfo.stepType, "userId": examInfo.value.userId, "wrongQuestionIds": worngId } const res = await startExamDo(obj) console.log(res) // uni.$u.toast('已交卷')
if(showCommit.value) showCommit.value = false if(grade.value<info.value.score) { showNoPass.value = true }else { setTimeout(()=>{ uni.navigateBack() },1500) } } function finishFn() { uni.$u.toast('考试时间已到，准备自动为您交卷') setTimeout(()=>{ submitBtnFn() },1500) } // 点击交卷
const countDownRef = ref(null) const yesNum = ref(0) const noNum = ref(0) function handApaper() { // 如果是最后一题也要把题算上去
if(curOption.value.answer) questionBank.value.answerMy = curOption.value.answer yesNum.value = questionBankList.value.filter(item=>item.answer==item.answerMy).length noNum.value = questionBankList.value.filter(item=>item.answerMy==undefined).length console.log(questionBankList.value) // 不有没有做完的题
if(noNum) { showCommit.value = true if (countDownRef.value) { countDownRef.value.pause(); } }else { submitBtnFn() } } // 关闭交卷弹框
function closeCommitPopup() { showCommit.value = false if (countDownRef.value) { countDownRef.value.start(); } } // 关闭错题弹框
function showWrongClose() { showWrong.value = false if (countDownRef.value) { countDownRef.value.start(); } curOption.value = {} currentIndex.value = currentIndex.value + 1 getQuestionFn() } // 合格标准
let info = ref({}) async function questionExamFn() { const {data:res} = await questionExam({stepType: usecarStore.carInfo.stepType, carType: usecarStore.carInfo.carType}) info.value = res } questionExamFn()</script>
<style lang="scss" scoped> uni-page-body { width: 100%; height: 100%; }
html { width: 100vh; height: 100vw; -webkit-transform: rotate(90deg); -webkit-transform-origin: 50vw 50vw; transform: rotate(90deg); transform-origin: 50vw 50vw;
}
image { display: block; width: 100%; height: 100%; } .imgView { position: relative; background: none; // max-width: 80%;
// padding: 50px;
.closeIcon { position: absolute; color: #fff; top: 40rpx; left: 40rpx; z-index: 99; background-color: #333; border-radius: 50%; } .img { // width: calc(100vh - 200rpx);
// height: calc(100vw - 100rpx);
width: 750rpx; height: 750rpx; } } .content { padding: 30rpx 30rpx 0rpx 30rpx; width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #F7FBFE; font-size: 20rpx; // display: flex;
.h3 { position: absolute; top: -16rpx; left: 0; width: 100%; text-align: center; color: $themC; } .row { width: 100%; display: flex; .userInfoBox { width: 140rpx; // height: 408rpx;
// background-color: pink;
display: flex; flex-direction: column; .examNo { width: 100%; height: 60rpx; background: #FFFFFF; border: 1px solid #F0F0F0; position: relative; .card { line-height: 70rpx; text-align: center; padding-left: 20rpx; } .back { position: absolute; left: -20rpx; top: 50%; transform: translateY(-50%); width: 40rpx; height: 40rpx; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; u-icon { } } } .user { // position: relative;
flex: 1; height: 0; padding: 10rpx 0 0 0rpx; .h3 { } .card { padding-left: 15rpx; position: relative; background: #FFFFFF; border: 1px solid #F0F0F0; height: 100%; .avatar { width: 90rpx; height: 90rpx; border-radius: 50%; overflow: hidden; margin-top: 36rpx; margin-bottom: 20rpx; img { } } .txt { margin: 10px 0; font-size: 18rpx; } } } } .examConBox { width: 0; flex: 1; display: flex; // height: 408rpx;
padding-left: 20rpx; .leftBox { flex: 2; background-color: #fff; position: relative; display: flex; flex-direction: column; .h3 { left: 40rpx; text-align: left; } .questionTxt { padding: 30rpx; flex: 1; line-height: 2em; .txt { } } .answer.flex-b { height: 60rpx; border-top: 1px solid #F0F0F0; padding-left: 20rpx; .lab { } .rightSelect { .lab { } .optio { padding-left: 20rpx; .optionItem { width: 38rpx; height: 38rpx; border: 1px solid #F0F0F0; font-size: 18rpx; color: #333; text-align: center; line-height: 38rpx; margin-right: 20rpx; &.active { color: #fff; background-color: $themC; } } } } } } .rightBox { flex: 1.4; background-color: #fff; table { display: table; border-collapse: collapse; border-spacing: 0px; table-layout: fixed; td, th { width: 9.09%; // text-overflow: ellipsis;
overflow: hidden; white-space: nowrap; } // border-color: gray;
} .ansItem { font-size: 24rpx; text-align: center; border-bottom: 1px solid #E1DFDF; border-right: 1px solid #E1DFDF; color: #ff0000; &.green { color: #55ff7f; } &.red { color: red; } } .blueItem { background-color: $themC; color: #fff; text-align: center; font-size: 24rpx; &.br { border-right: 1px solid #fff; &:last-child { border: none; } } &.bb { border-top: 1px solid #fff; // &:last-child {
// border: none;
// }
} } } } &.row1 { flex: 4; } &.row2 { height: 100rpx; padding: 20rpx 0; .timeBox { width: 140rpx; height: 100%; background-color: #fff; border: 1px solid #F0F0F0; position: relative; .h3 { font-weight: 400; } .time { font-weight: bold; font-size: 24rpx; color: #333333; line-height: 60rpx; text-align: center; } } .leftTpsBox { padding-left: 20rpx; flex: 2; position: relative; .card { background-color: #fff; height: 100%; } .h3 { text-align: left; left: 40rpx; } .txt { padding: 14rpx 20rpx 0 20rpx; } } .rightBtnBox { flex: 1; padding-left: 20rpx; display: flex; // justify-content: space-between;
justify-content: flex-end; .btn { width: 133rpx; margin: 0 0 0 20rpx; text-align: center; font-size: 24rpx; height: 60rpx; line-height: 60rpx; background: #3776FF; line-height: 60rpx; color: #fff; border: none; border-radius: 8rpx; &.disable { opacity: 0.4; } &.hui { background: #F4F4F4; color: #333; // border: 1rpx solid #E1DFDF;
} } } } } .picBox { width: 100%; flex: 1.8; background-color: #fff; border: 1px solid #F0F0F0; padding: 20rpx; position: relative; .h3 { text-align: left; left: 40rpx; } .imgBox { width: 650px; // max-height: 163rpx;
// background-color: skyblue;
height: 100%; overflow: hidden; margin: 0 auto; } } } .commitView { width: 780rpx; // height: 400rpx;
background: #FFFFFF; border-radius: 10rpx; padding: 40rpx; .commitTit { font-weight: bold; font-size: 32rpx; color: #333333; line-height: 40rpx; margin-bottom: 34rpx; text-align: center; } .commitTxt { font-family: PingFang SC; font-weight: 500; font-size: 24rpx; color: #333333; line-height: 42rpx; } .rowBg { width: 100%; height: 64rpx; background: #F4F4F4; border-radius: 10rpx; font-size: 24rpx; margin-top: 20rpx; color: #333333; line-height: 64rpx; display: flex; align-items: center; padding: 0 0 0 20rpx; .blue { color: #3776FF; margin-left: 30rpx; } } .commitBtn { display: flex; align-items: center; justify-content: center; margin: 50rpx 0 20rpx 0; .btn.border { background: none; color: #3776FF; border: 1px solid #3776FF; } .btn { width: 180rpx; height: 60rpx; background: #3776FF; border-radius: 10rpx; font-weight: 500; font-size: 24rpx; color: #FFFFFF; text-align: center; line-height: 60rpx; margin: 0 20rpx; } } } .djs { display: flex; align-items: center; justify-content: center; margin-top: 6rpx; .djsTxt { font-size: 24rpx; color: #999; margin: -4rpx 0 0 2rpx; } }</style>
<style lang="scss">.djs { :deep .u-count-down__text { color: red !important; }}</style>
|
