341 lines
8.7 KiB
Vue
341 lines
8.7 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<!-- <uni-nav-bar @clickLeft="goBack()" height="110upx" leftWidth="200upx" leftText="考试记录" leftIcon="left" border
|
|
backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar> -->
|
|
<!-- 小标题栏 -->
|
|
<view class="container">
|
|
<view class="sub-header">
|
|
<u-row>
|
|
<u-col span="4">
|
|
<view><text style="color:red">{{currentExam.total_score}}</text>分</view>
|
|
</u-col>
|
|
<u-col span="4">
|
|
<!-- <view style="text-align: center;"><span class="header-card">{{currentQuestion.type}}</span></view> -->
|
|
</u-col>
|
|
<u-col span="4">
|
|
<view style="text-align: right;"><span>第{{currentIndex+1}}/{{currentExam.detail.length}} 题</span></view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
<!-- <scroll-view class="content" scroll-y="true" v-bind:style="{height:scollHeight+'px'}"> -->
|
|
<scroll-view class="content" scroll-y="true">
|
|
<view class="name">
|
|
<view><text style="margin-right: 10upx;">{{currentIndex+1}} 、</text> {{currentQuestion.name}}</view>
|
|
<view v-if="currentQuestion.img">
|
|
{{currentQuestion.img}}
|
|
</view>
|
|
</view>
|
|
<view class="options">
|
|
<checkbox-group v-if="currentQuestion.type=='多选'">
|
|
<label class="option" v-for="item in currentOptions" :key="item.id" >
|
|
<view class="option-item1" >
|
|
<checkbox :value="item.value" :checked="item.checked" color="#2979ff" :disabled="item.disabled"/>
|
|
</view >
|
|
<view class="option-item2" >{{item.value}}.{{item.text}}</view>
|
|
</label>
|
|
</checkbox-group>
|
|
<radio-group v-else>
|
|
<label class="option" v-for="item in currentOptions" :key="item.id">
|
|
<view class="option-item1">
|
|
<radio :value="item.value" :checked="item.checked" color="#2979ff" :disabled="item.disabled"></radio>
|
|
</view>
|
|
<view class="option-item2">
|
|
{{item.value}}.{{item.text}}
|
|
</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="answer">
|
|
<view v-if="currentQuestion.type=='多选'">
|
|
<view>正确答案:{{currentQuestion.right.join("")}}</view>
|
|
<view v-if="currentQuestion.user_answer">您的答案:{{currentQuestion.user_answer.join("")}}</view>
|
|
<view v-else style="color:red">您未作答</view>
|
|
</view>
|
|
<view v-else>
|
|
<view>正确答案:{{currentQuestion.right}}</view>
|
|
<view v-if="currentQuestion.user_answer">您的答案:{{currentQuestion.user_answer}}</view>
|
|
<view v-else style="color:red">您未作答</view>
|
|
</view>
|
|
<view v-if="currentQuestion.user_answer">
|
|
<view v-if="currentQuestion.is_right" style="color:green;font-weight: bold;">回答正确!</view>
|
|
<view v-else style="color:red;font-weight: bold;">回答有误!</view>
|
|
</view>
|
|
</view>
|
|
<view style="height:20upx"></view>
|
|
</scroll-view>
|
|
<u-popup v-model="showM" mode="bottom" height="40%">
|
|
<view class="questionArea" style="display:flex">
|
|
<block v-for="(item, index) in currentExam.detail" :key="index">
|
|
<view class="questionItem questionItem-select" v-if="item.user_answer&&item.is_right" @click="jumpQuestion(index)">{{index+1}}</view>
|
|
<view class="questionItem questionItem-wrong" v-else-if="item.user_answer&&!item.is_right" @click="jumpQuestion(index)">{{index+1}}</view>
|
|
<view class="questionItem questionItem-unselect" v-else @click="jumpQuestion(index)">{{index+1}}</view>
|
|
</block>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 底部栏 -->
|
|
<view class="footer" id="footer">
|
|
<u-button @click='previousQ()' throttle-time="200" :plain="true" type="primary">上一题</u-button>
|
|
<u-button @click="showM = !showM" type="primary">答题卡</u-button>
|
|
<u-button @click='nextQ()' throttle-time="200" :plain="true" type="primary">下一题</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentExam:{},
|
|
currentIndex:0,
|
|
currentOptions:[],
|
|
currentQuestion:{question_:{}},
|
|
showM:false,
|
|
keyid:0,
|
|
start_time:null,
|
|
scollHeight:0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.currentExam = uni.getStorageSync('currentExam');
|
|
debugger;
|
|
console.log(this.currentExam)
|
|
let res = uni.getSystemInfoSync()
|
|
let ratio = 750 / res.windowWidth;
|
|
this.scollHeight = res.windowHeight*ratio - 230
|
|
this.initQuestion()
|
|
},
|
|
methods: {
|
|
initQuestion(){
|
|
var currentQuestion = this.currentExam.detail[this.currentIndex]
|
|
this.currentQuestion = currentQuestion
|
|
let options_ = []
|
|
let origin = currentQuestion.options
|
|
this.currentOptions = []
|
|
for (let key in origin) {
|
|
let option = {
|
|
value:key,
|
|
text:origin[key],
|
|
id: this.keyid++,
|
|
checked:false,
|
|
disabled:true,
|
|
}
|
|
if (currentQuestion.user_answer) {
|
|
if (key == currentQuestion.user_answer || currentQuestion.user_answer.indexOf(key) != -1) {
|
|
option.checked = true
|
|
}
|
|
} else {
|
|
option.checked = false
|
|
}
|
|
options_.push(option)
|
|
}
|
|
this.currentOptions = options_;
|
|
},
|
|
nextQ(){
|
|
let index = this.currentIndex + 1
|
|
if(index<this.currentExam.detail.length){
|
|
this.currentIndex = index
|
|
this.initQuestion()
|
|
}
|
|
},
|
|
goBack(){
|
|
uni.navigateBack(1)
|
|
},
|
|
previousQ(){
|
|
let index = this.currentIndex - 1
|
|
if(index >= 0){
|
|
this.currentIndex = index
|
|
this.initQuestion()
|
|
}
|
|
},
|
|
jumpQuestion(index){
|
|
this.currentIndex = index
|
|
this.initQuestion()
|
|
this.showM = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $u-bg-color;
|
|
|
|
}
|
|
>>>.uni-navbar__header,
|
|
>>>.uni-status-bar{
|
|
background-image: linear-gradient(270deg,
|
|
#0ca7ee 0%,
|
|
#005aff 100%,
|
|
#2a8cff 100%,
|
|
#54bdff 100%),
|
|
linear-gradient(#e60012,
|
|
#e60012);
|
|
}
|
|
.content{
|
|
margin-top:8upx;
|
|
margin-bottom: 120upx;
|
|
.name {
|
|
font-size:34upx;
|
|
padding: 8upx 20upx;
|
|
color:$u-content-color;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.options {
|
|
margin-top:8upx;
|
|
background-color: #FFFFFF;
|
|
padding: 6upx 20upx;
|
|
.option {
|
|
padding: 10upx 0upx;
|
|
display: flex;
|
|
font-size: 36upx;
|
|
.option-item1{
|
|
justify-content: flex-start
|
|
}
|
|
.option-item2{
|
|
justify-content: flex-start;
|
|
color:$u-main-color;
|
|
}
|
|
}
|
|
|
|
}
|
|
.answer{
|
|
margin-top:8upx;
|
|
background-color: #FFFFFF;
|
|
padding: 6upx 20upx;
|
|
font-size: 32upx;
|
|
}
|
|
.resolution{
|
|
margin-top:8upx;
|
|
background-color: #FFFFFF;
|
|
padding: 6upx 20upx;
|
|
font-size: 32upx;
|
|
}
|
|
}
|
|
.sub-header {
|
|
//width: 750upx;
|
|
// position: fixed;
|
|
// margin-top: 130upx;
|
|
padding: 4upx 20upx;
|
|
color: #000;
|
|
font-size: 33upx;
|
|
font-weight: bold;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.header-card {
|
|
padding: 6upx 20upx;
|
|
// border: 1px solid $u-type-primary-dark;
|
|
border-radius: 15upx;
|
|
color: #FFFFFF;
|
|
background-color: $u-type-primary-dark;
|
|
}
|
|
.footer {
|
|
width: 100%;
|
|
height: 100upx;
|
|
padding: 30upx 60upx;
|
|
position: fixed;
|
|
bottom: 10upx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 32upx;
|
|
box-sizing: border-box;
|
|
color: #4c8af3;
|
|
box-shadow: 0 0 5px 1px #eee;
|
|
background-color: #FFFFFF;
|
|
|
|
&-card {
|
|
padding: 10upx 20upx;
|
|
border: 1px solid #2a8cff;
|
|
border-radius: 15upx;
|
|
color: #FFFFFF;
|
|
background-color: #2a8cff;
|
|
}
|
|
}
|
|
|
|
// .header{
|
|
// display: flex;
|
|
// height: 70upx;
|
|
// background-color: orange;
|
|
// font-size: 36upx;
|
|
// .content {
|
|
// align-self: center;
|
|
// .text{
|
|
// margin-left:10upx
|
|
// }
|
|
// }
|
|
// .rbutton {
|
|
// margin-left: auto;
|
|
// align-self: center;
|
|
// margin-right: 10upx
|
|
// }
|
|
// }
|
|
.header {
|
|
width: 750upx;
|
|
//position: fixed;
|
|
//position: relative;
|
|
text-align: center;
|
|
line-height: 60upx;
|
|
font-size: 36upx;
|
|
font-weight: 600;
|
|
color: #2a8cff;
|
|
// letter-spacing: 10upx;
|
|
background-color: #FFFFFF;
|
|
|
|
&-button {
|
|
width: 80upx;
|
|
height: 40upx;
|
|
line-height: 40upx;
|
|
position: absolute;
|
|
top: 4upx;
|
|
right: 10upx;
|
|
padding: 10upx 20upx;
|
|
border-radius: 15upx;
|
|
letter-spacing: 2upx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
background-color: #fa3534;
|
|
}
|
|
|
|
.scoreText {
|
|
color: #00b060;
|
|
font-size: 35upx;
|
|
}
|
|
}
|
|
.questionArea {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20upx;
|
|
|
|
.questionItem {
|
|
width: 80upx;
|
|
height: 80upx;
|
|
margin: 10upx 22upx;
|
|
line-height: 80upx;
|
|
font-size: 35upx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
color: #ffffff;
|
|
}
|
|
.questionItem-select {
|
|
// color: #FFFFFF;
|
|
background-color: #2a8cff;
|
|
|
|
}
|
|
|
|
.questionItem-unselect {
|
|
// color: #FFFFFF;
|
|
background-color: #bbbbbb;
|
|
}
|
|
.questionItem-wrong {
|
|
// color: #FFFFFF;
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |