359 lines
9.1 KiB
Vue
359 lines
9.1 KiB
Vue
<template>
|
||
<view>
|
||
<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">考试详情</block>
|
||
</cu-custom>
|
||
<view class="container">
|
||
<view class="top">
|
||
<view class="suject line_b">
|
||
<text class="line-2">考试科目：{{ info.EXAMNAME }}</text>
|
||
</view>
|
||
<view class="questions">
|
||
<text>当前试题{{ current + 1 }}/{{ info.QUESTIONLIST.length }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="topic">
|
||
<view class="title">
|
||
<text>
|
||
{{ current + 1 }}.{{ info.QUESTIONLIST[current].QUESTIONDRY }}
|
||
</text>
|
||
<text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '1'">
|
||
(单选)
|
||
</text>
|
||
<text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '2'">
|
||
(多选)
|
||
</text>
|
||
<text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '3'">
|
||
(判断)
|
||
</text>
|
||
<text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '4'">
|
||
(填空)
|
||
</text>
|
||
</view>
|
||
<view
|
||
class="options"
|
||
v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '1'"
|
||
>
|
||
<view
|
||
class="item"
|
||
:class="{ active: info.QUESTIONLIST[current].ANSWER === 'A' }"
|
||
>
|
||
<text class="option">A</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIONA }}</text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{ active: info.QUESTIONLIST[current].ANSWER === 'B' }"
|
||
>
|
||
<text class="option">B</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIONB }}</text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{ active: info.QUESTIONLIST[current].ANSWER === 'C' }"
|
||
>
|
||
<text class="option">C</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIONC }}</text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{ active: info.QUESTIONLIST[current].ANSWER === 'D' }"
|
||
>
|
||
<text class="option">D</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIOND }}</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="options"
|
||
v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '2'"
|
||
>
|
||
<view
|
||
class="item"
|
||
:class="{
|
||
active:
|
||
info.QUESTIONLIST[current].ANSWER &&
|
||
info.QUESTIONLIST[current].ANSWER.indexOf('A') !== -1,
|
||
}"
|
||
>
|
||
<text class="option">A</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIONA }}</text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{
|
||
active:
|
||
info.QUESTIONLIST[current].ANSWER &&
|
||
info.QUESTIONLIST[current].ANSWER.indexOf('B') !== -1,
|
||
}"
|
||
>
|
||
<text class="option">B</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIONB }}</text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{
|
||
active:
|
||
info.QUESTIONLIST[current].ANSWER &&
|
||
info.QUESTIONLIST[current].ANSWER.indexOf('C') !== -1,
|
||
}"
|
||
>
|
||
<text class="option">C</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIONC }}</text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{
|
||
active:
|
||
info.QUESTIONLIST[current].ANSWER &&
|
||
info.QUESTIONLIST[current].ANSWER.indexOf('D') !== -1,
|
||
}"
|
||
>
|
||
<text class="option">D</text>
|
||
<text class="text">{{ info.QUESTIONLIST[current].OPTIOND }}</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="options"
|
||
v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '3'"
|
||
>
|
||
<view
|
||
class="item"
|
||
:class="{ active: info.QUESTIONLIST[current].ANSWER === 'A' }"
|
||
>
|
||
<text class="option">{{ info.QUESTIONLIST[current].OPTIONA }}</text>
|
||
<text class="text"></text>
|
||
</view>
|
||
<view
|
||
class="item"
|
||
:class="{ active: info.QUESTIONLIST[current].ANSWER === 'B' }"
|
||
>
|
||
<text class="option">{{ info.QUESTIONLIST[current].OPTIONB }}</text>
|
||
<text class="text"></text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="options"
|
||
v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '4'"
|
||
>
|
||
<view class="item">
|
||
<view class="textarea">{{info.QUESTIONLIST[current].ANSWER}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="correct-answer">
|
||
<text>正确答案</text>
|
||
<view v-if="info.QUESTIONLIST[current].QUESTIONTYPE === '3'">
|
||
{{ info.QUESTIONLIST[current].ANSWERRIGHT === "A" ? "对" : "错" }}
|
||
</view>
|
||
<view v-else>{{ info.QUESTIONLIST[current].ANSWERRIGHT || "无" }}</view>
|
||
<text>权威解读</text>
|
||
<view>{{ info.QUESTIONLIST[current].DESCR || "无" }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<button
|
||
class="cu-btn"
|
||
:style="{
|
||
width: current === info.QUESTIONLIST.length - 1 ? '100%' : '45%',
|
||
}"
|
||
v-show="current !== 0"
|
||
@click="current--"
|
||
>
|
||
上一题
|
||
</button>
|
||
<button
|
||
class="cu-btn bg-blue"
|
||
:style="{ width: current === 0 ? '100%' : '45%' }"
|
||
v-show="current !== info.QUESTIONLIST.length - 1"
|
||
@click="current++"
|
||
>
|
||
下一题
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {basePath, loginUser} from "@/common/tool";
|
||
export default {
|
||
data() {
|
||
return {
|
||
info: {
|
||
QUESTIONLIST:[{}]
|
||
},
|
||
current: 0,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.getData(options.STAGESTUDENTRELATION_ID, options.CLASS_ID)
|
||
},
|
||
methods: {
|
||
getData(STAGESTUDENTRELATION_ID, CLASS_ID) {
|
||
uni.showLoading({
|
||
title: '请稍候'
|
||
})
|
||
uni.request({
|
||
url: basePath + '/app/stageexam/findResult',
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
header: {
|
||
'Content-type': 'application/x-www-form-urlencoded'
|
||
},
|
||
data: {
|
||
CORPINFO_ID:loginUser.CORPINFO_ID,
|
||
USER_ID:loginUser.USER_ID,
|
||
STAGESTUDENTRELATION_ID,
|
||
CLASS_ID,
|
||
},
|
||
success: (res) => {
|
||
uni.hideLoading(); //结束加载中动画
|
||
var resData = res.data;
|
||
if ("success" == resData.result) {
|
||
this.info = resData.pd;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 0 20upx 20upx;
|
||
background-color: #fff;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.top {
|
||
background: url("/static/study/bgimg1.png") no-repeat top center;
|
||
background-size: 100% 100%;
|
||
margin-top: 20upx;
|
||
border-radius: 20upx;
|
||
padding: 40upx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
|
||
.suject {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 32upx;
|
||
}
|
||
|
||
.questions {
|
||
color: #eeecec;
|
||
font-size: 30upx;
|
||
padding-top: 20upx;
|
||
}
|
||
}
|
||
|
||
.topic {
|
||
margin-top: 20upx;
|
||
margin-bottom: 80upx;
|
||
padding: 20upx;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
font-size: 32upx;
|
||
font-weight: 600;
|
||
|
||
.question-type {
|
||
border-radius: 40upx;
|
||
padding: 4upx 14upx;
|
||
border: 1upx solid #3c9cff;
|
||
font-size: 28upx;
|
||
color: #3c9cff;
|
||
}
|
||
}
|
||
|
||
.options {
|
||
margin-top: 40upx;
|
||
|
||
.item {
|
||
position: relative;
|
||
margin-top: 40upx;
|
||
color: #696868;
|
||
|
||
&.active {
|
||
color: #3c9cff;
|
||
|
||
.option {
|
||
background-color: #3c9cff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.option {
|
||
background-color: #eee;
|
||
border-radius: 80upx;
|
||
width: 65upx;
|
||
height: 65upx;
|
||
line-height: 65upx;
|
||
text-align: center;
|
||
font-size: 30upx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.text {
|
||
margin-left: 30upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
}
|
||
|
||
.textarea{
|
||
min-height: 200upx;
|
||
border-radius: 6upx;
|
||
border: 1px solid #ccc;
|
||
padding: 10upx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
|
||
.correct-answer {
|
||
margin-top: 40upx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
margin-top: 40upx;
|
||
color: #696868;
|
||
font-size: 30upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
view {
|
||
margin-top: 20upx;
|
||
color: #333;
|
||
padding: 20upx;
|
||
background-color: #eee;
|
||
border-radius: 10upx;
|
||
font-size: 30upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
position: fixed;
|
||
bottom: 0;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
left: 0;
|
||
padding: 20upx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-top: 1px solid #eee;
|
||
|
||
button {
|
||
border-radius: 10upx;
|
||
}
|
||
}
|
||
|
||
.line_b {
|
||
width: 100%;
|
||
border-bottom: 1upx solid rgba(255, 255, 255, 0.3);
|
||
padding-bottom: 20upx;
|
||
}
|
||
</style>
|