<template>
<view class="content">
<view class="top">
<view class="time">
<text style="margin-right: 14rpx;" class="iconfont"></text>
<text>倒计时：</text>
<u-count-down :time="info.ANSWERSHEETTIME * 60 * 1000" format="mm 分 ss 秒" auto-start millisecond @finish="fnCountDownFinish" />
</view>
</view>
<view class="topic">
<view class="title">
<text>
<text class="tag_title">
{{ handleCalcQuestType(options[current].QUESTIONTYPE) }}
</text>
{{ current + 1 }}.{{ options[current].QUESTIONDRY }}
</text>
</view>
<view v-show="options[current].QUESTIONTYPE === '1'" class="options">
<view class="item" :class="{ active: options[current].checked === 'A' }" @click="fnChooseTopic('radio', 'A')">
<text class="option">A</text>
<text class="text">{{ options[current].OPTIONA }}</text>
</view>
<view class="item" :class="{ active: options[current].checked === 'B' }" @click="fnChooseTopic('radio', 'B')">
<text class="option">B</text>
<text class="text">{{ options[current].OPTIONB }}</text>
</view>
<view class="item" :class="{ active: options[current].checked === 'C' }" @click="fnChooseTopic('radio', 'C')">
<text class="option">C</text>
<text class="text">{{ options[current].OPTIONC }}</text>
</view>
<view class="item" :class="{ active: options[current].checked === 'D' }" @click="fnChooseTopic('radio', 'D')">
<text class="option">D</text>
<text class="text">{{ options[current].OPTIOND }}</text>
</view>
</view>
<view v-show="options[current].QUESTIONTYPE === '2'" class="options">
<view class="item" :class="{
active:
options[current].checked &&
options[current].checked.indexOf('A') !== -1,
}" @click="fnChooseTopic('multiple', 'A')">
<text class="option">A</text>
<text class="text">{{ options[current].OPTIONA }}</text>
</view>
<view class="item" :class="{
active:
options[current].checked &&
options[current].checked.indexOf('B') !== -1,
}" @click="fnChooseTopic('multiple', 'B')">
<text class="option">B</text>
<text class="text">{{ options[current].OPTIONB }}</text>
</view>
<view class="item" :class="{
active:
options[current].checked &&
options[current].checked.indexOf('C') !== -1,
}" @click="fnChooseTopic('multiple', 'C')">
<text class="option">C</text>
<text class="text">{{ options[current].OPTIONC }}</text>
</view>
<view class="item" :class="{
active:
options[current].checked &&
options[current].checked.indexOf('D') !== -1,
}" @click="fnChooseTopic('multiple', 'D')">
<text class="option">D</text>
<text class="text">{{ options[current].OPTIOND }}</text>
</view>
</view>
<view v-show="options[current].QUESTIONTYPE === '3'" class="options">
<view class="item" :class="{ active: options[current].checked === 'A' }" @click="fnChooseTopic('judge', 'A')">
<text class="option">{{ options[current].OPTIONA }}</text>
<text class="text"></text>
</view>
<view class="item" :class="{ active: options[current].checked === 'B' }" @click="fnChooseTopic('judge', 'B')">
<text class="option">{{ options[current].OPTIONB }}</text>
<text class="text"></text>
</view>
</view>
<view v-show="options[current].QUESTIONTYPE === '4'" class="options">
<view class="item">
<u-textarea v-model="options[current].checked" auto-height count />
</view>
</view>
</view>
<view class="footer">
<u-button v-show="current !== 0" :style="{ width: '45%' }" text="上一题" @click="fnPreviousQuestion" />
<u-button v-show="current !== options.length - 1" type="primary"
:style="{ width: current === 0 ? '100%' : '45%' }" text="下一题" @click="fnNextQuestion" />
<u-button v-show="current === options.length - 1" type="primary" :style="{ width: '45%' }" text="交卷"
@click="fnHandInThePaper" />
</view>
</view>
</template>
<script>
// import {
// getExamExercises,
// getStrengthenExam,
// setTestPaperSubmission,
// } from "@/api";
export default {
data() {
return {
STAGEEXAMPAPERINPUT_ID: "",
STAGEEXAMPAPER_ID: "",
CLASS_ID: "",
POST_ID: "",
STUDENT_ID: "",
NUMBEROFEXAMS: "",
entrySite: "",
info: {},
options: [{}],
current: 0,
questionTypeMap: {
1: '单选',
2: '多选',
3: '判断',
4: '填空',
}
};
},
onLoad(query) {
// this.STAGEEXAMPAPERINPUT_ID = query.STAGEEXAMPAPERINPUT_ID;
// this.STAGEEXAMPAPER_ID = query.STAGEEXAMPAPER_ID;
// this.CLASS_ID = query.CLASS_ID;
// this.POST_ID = query.POST_ID;
// this.STUDENT_ID = query.STUDENT_ID;
// this.NUMBEROFEXAMS = query.NUMBEROFEXAMS;
// this.entrySite = query.entrySite;
this.fnGetData();
},
onBackPress(event) {
if (event.from === "backbutton") {
uni.$u.toast("考试过程中不允许退出");
return true;
}
return false;
},
computed: {
userInfo() {
return this.$store.getters.getUserInfo;
},
},
methods: {
async fnGetData() {
let resData = {};
// if (this.entrySite === "strengththen") {
// resData = await getStrengthenExam({
// STRENGTHEN_STAGEEXAMPAPER_INPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
// CLASS_ID: this.CLASS_ID,
// POST_ID: this.POST_ID,
// STUDENT_ID: this.STUDENT_ID,
// NUMBEROFEXAMS: this.NUMBEROFEXAMS,
// });
// } else {
// resData = await getExamExercises({
// STAGEEXAMPAPERINPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
// STAGEEXAMPAPER_ID: this.STAGEEXAMPAPER_ID,
// CLASS_ID: this.CLASS_ID,
// POST_ID: this.POST_ID,
// STUDENT_ID: this.STUDENT_ID,
// NUMBEROFEXAMS: this.NUMBEROFEXAMS,
// });
// }
// this.info = resData.pd;
this.info = { ...this.info, ANSWERSHEETTIME: 30 }
this.options = [
{
QUESTIONDRY: "题干题干题干题干题干1 ( ) .",
QUESTIONTYPE: "1",
OPTIONA: '这是选项A',
OPTIONB: '这是选项B',
OPTIONC: '这是选项C',
OPTIOND: '这是选项D',
},
{
QUESTIONDRY: "题干题干题干题干题干2 ()",
QUESTIONTYPE: "2",
OPTIONA: '这是选项A',
OPTIONB: '这是选项B',
OPTIONC: '这是选项C',
OPTIOND: '这是选项D',
},
{
QUESTIONDRY: "未带安全头盔可正常进入堆场进行工业,以上说法是否正确?",
QUESTIONTYPE: "3",
OPTIONA: '对',
OPTIONB: '错',
},
{
QUESTIONDRY: "当进入施工现场后, 应立刻对_____设施做全面检查?",
QUESTIONTYPE: "4",
OPTIONA: '对',
OPTIONB: '错',
},
];
// if (resData.NUMBEROFEXAMS > 0) {
// uni.showModal({
// title: "温馨提示",
// content: `您还可以考试${resData.NUMBEROFEXAMS}次！`,
// showCancel: false,
// });
// } else if (resData.NUMBEROFEXAMS === "-9999") {
// uni.showModal({
// title: "温馨提示",
// content: `加强学习考试开始，限时60分钟，请注意答题时间！`,
// showCancel: false,
// });
// } else {
// uni.showModal({
// title: "温馨提示",
// content: `您无考试次数！`,
// showCancel: false,
// success: (res) => {
// if (res.confirm) {
// uni.navigateBack();
// }
// },
// });
// }
},
fnChooseTopic(type, checked) {
if (!this.options[this.current].checked) {
this.$set(this.options[this.current], "checked", "");
}
if (type === "judge" || type === "radio") {
if (this.options[this.current].checked === checked) {
this.options[this.current].checked = "";
} else {
this.options[this.current].checked = checked;
}
}
if (type === "multiple") {
if (this.options[this.current].checked) {
const checkedArr = this.options[this.current].checked.split(",");
if (checkedArr.indexOf(checked) !== -1) {
checkedArr.splice(checkedArr.indexOf(checked), 1);
this.options[this.current].checked = checkedArr.join(",");
} else {
checkedArr.push(checked);
checkedArr.sort();
this.options[this.current].checked = checkedArr.join(",");
}
} else {
this.options[this.current].checked = checked;
}
}
},
handleCalcQuestType(type) {
return `(${this.questionTypeMap[type]})`
},
fnIsFinish() {
if (!this.options[this.current].checked) {
uni.showModal({
title: "温馨提示",
content: "请对本题进行作答。",
showCancel: false,
});
return false;
}
return true;
},
/**
* 下一题按钮点击事件
*/
fnNextQuestion() {
if (!this.fnIsFinish()) return;
this.current++;
},
/**
* 上一题按钮点击事件
*/
fnPreviousQuestion() {
this.current--;
},
/**
* 交卷按钮点击事件
*/
fnHandInThePaper() {
if (!this.fnIsFinish()) return;
uni.showModal({
title: "温馨提示",
content: `题目已全部做完，确认交卷吗？`,
success: (res) => {
if (res.confirm) {
this.fnSubmit();
}
}
});
},
fnCountDownFinish() {
uni.$u.toast("考试时间已结束");
for (let i = 0; i < this.options.length; i++) {
if (!this.options[i].checked) {
this.options[i].checked = "";
}
}
this.fnSubmit();
},
async fnSubmit() {
uni.navigateBack({ delta: 2 });
// for (let i = 0; i < this.options.length; i++) {
// if (this.options[i].QUESTIONTYPE === "2") {
// this.options[i].checked = this.options[i].checked.replace(/,/g, "");
// }
// }
// const resData = await setTestPaperSubmission({
// USERNAME: this.userInfo.NAME,
// entrySite: this.entrySite,
// STAGEEXAMPAPERINPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
// CLASS_ID: this.CLASS_ID,
// STUDENT_ID: this.STUDENT_ID,
// NUMBEROFEXAMS: this.NUMBEROFEXAMS,
// PASSSCORE: this.info.PASSSCORE,
// EXAMSCORE: this.info.EXAMSCORE,
// EXAMTIMEBEGIN: this.info.EXAMTIMEBEGIN,
// options: JSON.stringify(this.options),
// });
// if (resData.examResult === "0") {
// uni.showModal({
// title: "温馨提示",
// content: `您的成绩为${resData.examScore}分，很遗憾您没有通过本次考试，请再接再厉！`,
// showCancel: false,
// success: (res) => {
// if (res.confirm) {
// if (this.entrySite === "video_study")
// uni.navigateBack({ delta: 3 });
// else uni.navigateBack();
// }
// },
// });
// } else {
// uni.showModal({
// title: "温馨提示",
// content: `您的成绩为${resData.examScore}分，恭喜您通过本次考试，请继续保持！`,
// showCancel: false,
// success: (res) => {
// if (res.confirm) {
// if (this.entrySite === "video_study")
// uni.navigateBack({ delta: 3 });
// else if (this.entrySite === "strengththen")
// uni.navigateBack({ delta: 2 });
// else uni.navigateBack();
// }
// },
// });
// }
},
},
};
</script>
<style scoped lang="scss">
@import '/static/fonts/iconfont_timer.css';
.content {
.top {
padding: 17rpx;
.time {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: #363636;
font-size: 28rpx;
::v-deep {
.u-count-down__text {
display: inline;
color: #363636;
font-size: 28rpx;
line-height: normal;
}
}
}
}
.topic {
margin: 20rpx;
padding: 20rpx 20rpx 150rpx;
box-sizing: border-box;
.title {
font-size: 32rpx;
font-weight: 600;
.question-type {
border-radius: 40rpx;
padding: 4rpx 14rpx;
border: 1rpx solid #3c9cff;
font-size: 24rpx;
color: #3c9cff;
}
.tag_title {
font-size: 28rpx;
background-color: #b3b3b3;
color: #FFF;
border-radius: 8rpx;
padding: 2rpx 10rpx;
margin-right: 10rpx;
}
}
.options {
margin-top: 40rpx;
.item {
position: relative;
margin-top: 40rpx;
color: #696868;
&.active {
color: #3c9cff;
.option {
background-color: #3c9cff;
color: #fff;
}
}
.option {
background-color: #eee;
border-radius: 80rpx;
width: 65rpx;
height: 65rpx;
line-height: 65rpx;
text-align: center;
font-size: 30rpx;
display: inline-block;
}
.text {
margin-left: 30rpx;
height: 60rpx;
line-height: 60rpx;
}
}
}
}
.footer {
display: flex;
position: fixed;
bottom: 0;
justify-content: space-between;
width: 100%;
left: 0;
padding: 20rpx;
box-sizing: border-box;
background: #fff;
button {
border-radius: 10rpx;
}
}
}
</style>