428 lines
11 KiB
Vue
428 lines
11 KiB
Vue
<template>
|
||
<view class="main-content">
|
||
<headers :showBack="true" :themeType="true">
|
||
<view class="headerName">
|
||
开始考试
|
||
</view>
|
||
</headers>
|
||
<view class="content-part">
|
||
<text class="rest-time">剩余时间：{{ timeLeft }}</text>
|
||
<view class="beginexam" v-for="(item,index) in stList" :key="index" v-show="index == stIndex">
|
||
<view class="questionTitle">
|
||
<text class="text">{{index + 1}}、</text>
|
||
<text class="text">{{item.questionName}}({{item.score||0}}分)</text>
|
||
</view>
|
||
<view class="radio-content">
|
||
<radio-group @change="radioChange" class="radio-boxs" v-if="item.type == 1">
|
||
<label class="radio" v-for="(item2,index2) in item.optionList">
|
||
<radio :value="item2.optionCode" /><text>{{item2.optionCode}}、</text><text
|
||
class="question-desc">{{item2.optionDesc}}</text>
|
||
</label>
|
||
</radio-group>
|
||
<checkbox-group @change="checkChange" class="check-boxs" v-if="item.type == 2">
|
||
<label class="check" v-for="(item2,index2) in item.optionList">
|
||
<checkbox :value="item2.optionCode" /><text>{{item2.optionCode}}、</text><text
|
||
class="question-desc">{{item2.optionDesc}}</text>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
</view>
|
||
<view class="progress-style" v-show="stList.length > 0">
|
||
<progress :percent="((stIndex + 1) * 100 / stList.length).toFixed(0)" :stroke-width="11"
|
||
backgroundColor="#F5F5F5" />
|
||
</view>
|
||
<view class="step-btn" v-show="stList.length > 0">
|
||
<button type="primary" class="btn-front" @click="goFront" v-show="stIndex > 0">上一题</button>
|
||
<button type="primary" class="btn-front" @click="goNext"
|
||
v-show="stIndex < stList.length - 1">下一题</button>
|
||
<button type="primary" class="btn" @click="goHiidden">交卷</button>
|
||
</view>
|
||
<view class="placeholderBox" v-if="stList.length == 0">
|
||
<image src="/static/exam/noCourseData.png" class="noDataImg" style="width: 180rpx; height: 160rpx;">
|
||
</image>
|
||
<!-- <view class="text">
|
||
暂无数据
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
totalTime: 10, // 假设考试总时长为60分钟
|
||
timer: null, // 计时器
|
||
percent: 0,
|
||
stIndex: 0,
|
||
stList: [],
|
||
pageData: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDataFn();
|
||
},
|
||
onLoad(options) {
|
||
console.log(options, 123456)
|
||
this.pageData = JSON.parse(options.transportData)
|
||
console.log(this.pageData.examDuration)
|
||
},
|
||
onShow() {
|
||
this.totalTime = +this.pageData.examDuration * 60;
|
||
this.startTimer();
|
||
},
|
||
onHide() {
|
||
this.stopTimer();
|
||
},
|
||
onUnload() {
|
||
this.stopTimer();
|
||
},
|
||
computed: {
|
||
timeLeft() {
|
||
let hours = Math.floor(this.totalTime / 3600);
|
||
let minutes = Math.floor((this.totalTime % 3600) / 60);
|
||
let seconds = this.totalTime % 60;
|
||
|
||
hours = hours < 10 ? '0' + hours : hours;
|
||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||
seconds = seconds < 10 ? '0' + seconds : seconds;
|
||
|
||
return `${hours}:${minutes}:${seconds}`;
|
||
},
|
||
},
|
||
methods: {
|
||
// 自动交卷
|
||
autoSubmit() {
|
||
var that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
showCancel: false,
|
||
content: '考试时间已到，正在交卷...',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let requestData = {
|
||
examAnswerQuestionList: that.stList
|
||
}
|
||
that.sendRequest({
|
||
url: "xmgl/workerExam/submit",
|
||
data: that.stList,
|
||
method: 'post',
|
||
success(res) {
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
icon: "none"
|
||
})
|
||
let responseData = res.result;
|
||
let transportData = {
|
||
...that.pageData,
|
||
...responseData
|
||
}
|
||
uni.redirectTo({
|
||
url: `/pages/personLocation/exam/examresult/examresult?examData=` +
|
||
JSON.stringify(transportData)
|
||
});
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
startTimer() {
|
||
this.timer = setInterval(() => {
|
||
if (this.totalTime > 0) {
|
||
this.totalTime -= 1;
|
||
} else {
|
||
this.stopTimer();
|
||
this.autoSubmit();
|
||
// 考虑考试时间到，需要做的操作，比如提示考试结束
|
||
}
|
||
}, 1000);
|
||
},
|
||
stopTimer() {
|
||
console.log('我计时器已卸载')
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
},
|
||
getDataFn() {
|
||
var that = this
|
||
let requestData = {
|
||
paperId: this.pageData.examPaperId
|
||
}
|
||
this.sendRequest({
|
||
url: "xmgl/workerExam/queryQuestionById",
|
||
data: requestData,
|
||
method: 'post',
|
||
success(res) {
|
||
console.log('试题信息', res)
|
||
if (res.result && res.result.length > 0) {
|
||
that.stList = res.result;
|
||
// var tab = document.querySelector('.uni-progress-inner-bar');
|
||
// var p = document.createElement('p');
|
||
// p.className = "uni-progress-info"
|
||
// p.innerText = (((that.stIndex + 1) * 100) / that.stList.length).toFixed(0) + '%'
|
||
// tab.appendChild(p);
|
||
// const query = uni.createSelectorQuery().in(this);
|
||
// query.select('.uni-progress-inner-bar').boundingClientRect(data => {
|
||
// // data 是选中元素的大小位置信息
|
||
// console.log(data)
|
||
// const element = data[0]
|
||
// var p = document.createElement('p');
|
||
// p.className = "uni-progress-info"
|
||
// p.innerText = (((that.stIndex + 1) * 100) / that.stList.length).toFixed(
|
||
// 0) + '%'
|
||
// element.appendChild(p);
|
||
// }).exec();
|
||
that.stList.map(item => {
|
||
item.trainRecordId = that.pageData.trainRecordId
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
radioChange(evt) {
|
||
console.log(evt)
|
||
this.stList[this.stIndex].answer = evt.detail.value
|
||
let that = this;
|
||
// 当到达最后一题时
|
||
if (that.stIndex == that.stList.length - 1) {
|
||
return;
|
||
}
|
||
// uni.showLoading()
|
||
// setTimeout(function() {
|
||
// that.stIndex++;
|
||
// var progressTip = document.querySelector('.uni-progress-info');
|
||
// progressTip.innerText = (((that.stIndex + 1) * 100) / that.stList.length).toFixed(0) + '%'
|
||
// uni.hideLoading()
|
||
// }, 500)
|
||
},
|
||
checkChange(evt) {
|
||
console.log(evt)
|
||
this.stList[this.stIndex].answer = evt.detail.value.join('')
|
||
let that = this;
|
||
// 当到达最后一题时
|
||
if (that.stIndex == that.stList.length - 1) {
|
||
return;
|
||
}
|
||
// uni.showLoading()
|
||
// setTimeout(function() {
|
||
// that.stIndex++;
|
||
// var progressTip = document.querySelector('.uni-progress-info');
|
||
// progressTip.innerText = (((that.stIndex + 1) * 100) / that.stList.length).toFixed(0) + '%'
|
||
// uni.hideLoading()
|
||
// }, 500)
|
||
},
|
||
// 去上一题
|
||
goFront(index) {
|
||
let that = this;
|
||
that.stIndex--;
|
||
// var progressTip = document.querySelector('.uni-progress-info');
|
||
// progressTip.innerText = (((that.stIndex + 1) * 100) / that.stList.length).toFixed(0) + '%'
|
||
},
|
||
// 去下一题
|
||
goNext(index) {
|
||
let that = this;
|
||
that.stIndex++;
|
||
// var progressTip = document.querySelector('.uni-progress-info');
|
||
// progressTip.innerText = (((that.stIndex + 1) * 100) / that.stList.length).toFixed(0) + '%'
|
||
// uni.hideLoading()
|
||
},
|
||
goHiidden() {
|
||
var that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定交卷吗?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let requestData = {
|
||
examAnswerQuestionList: that.stList
|
||
}
|
||
that.sendRequest({
|
||
url: "xmgl/workerExam/submit",
|
||
data: that.stList,
|
||
method: 'post',
|
||
success(res) {
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
icon: "none"
|
||
})
|
||
let responseData = res.result;
|
||
let transportData = {
|
||
...that.pageData,
|
||
...responseData
|
||
}
|
||
uni.redirectTo({
|
||
url: `/pages/personLocation/exam/examresult/examresult?examData=` +
|
||
JSON.stringify(transportData)
|
||
});
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main-content {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.content-part {
|
||
// height: 100%;
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.rest-time {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 5rpx;
|
||
}
|
||
}
|
||
|
||
.beginexam {
|
||
padding: 26.92rpx 32.69rpx;
|
||
height: 58%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
// overflow-y: scroll;
|
||
.questionTitle {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
.text {
|
||
display: inline-block;
|
||
font-size: 34.62rpx;
|
||
color: #272D45;
|
||
}
|
||
|
||
.text:nth-child(2) {
|
||
font-size: 34rpx;
|
||
width: 52%;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
}
|
||
|
||
.radio-content {
|
||
flex: 1;
|
||
overflow-y: scroll;
|
||
|
||
.radio-boxs {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.radio {
|
||
display: flex;
|
||
align-items: flex;
|
||
|
||
.question-desc {
|
||
display: inline-block;
|
||
width: 82%;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radio-boxs>label {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.check-boxs {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.check {
|
||
display: flex;
|
||
align-items: flex;
|
||
|
||
.question-desc {
|
||
display: inline-block;
|
||
width: 82%;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
}
|
||
}
|
||
|
||
.check-boxs>label {
|
||
padding: 20rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-style {
|
||
padding: 26.92rpx 32.69rpx;
|
||
}
|
||
|
||
.step-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: calc(100% - 80.76rpx);
|
||
height: auto;
|
||
position: absolute;
|
||
bottom: 180.77rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
button {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
// .btn {
|
||
// width: calc(100% - 80.76rpx);
|
||
// position: absolute;
|
||
// bottom: 180.77rpx;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// }
|
||
|
||
// .btn-front {
|
||
// width: calc(100% - 80.76rpx);
|
||
// position: absolute;
|
||
// bottom: 290rpx;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// }
|
||
}
|
||
|
||
|
||
|
||
/deep/ .uni-radio-input {
|
||
width: 26.92rpx;
|
||
height: 26.92rpx;
|
||
}
|
||
|
||
/deep/ .uni-radio-input::before {
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
/deep/ .uni-progress-bar {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
/deep/ .uni-progress-inner-bar {
|
||
border-radius: 10rpx;
|
||
position: relative;
|
||
background: linear-gradient(111deg, #5383F6 0%, #7FF0FF 100%);
|
||
}
|
||
|
||
/deep/ .uni-progress-info {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
color: white;
|
||
font-size: 24rpx;
|
||
top: -6rpx;
|
||
}
|
||
</style> |