445 lines
11 KiB
Vue
445 lines
11 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- header -->
|
||
<u-sticky zIndex="10">
|
||
<view class="answer-header">
|
||
<view class="flex">
|
||
<view class="flex-item">答题进度<text>{{questionsIndex + 1}}</text>/{{questions.length}}</view>
|
||
<view class="flex-item">
|
||
剩余时间
|
||
<u-count-down class="flex-item-down" :time="Number(outTime) * 60 * 1000" format="mm:ss" @finish="answerNext('time')"></u-count-down>
|
||
</view>
|
||
</view>
|
||
<u-line-progress
|
||
inactiveColor="rgba(255,255,255,.5)"
|
||
:percentage="percentageVal"
|
||
activeColor="#fff"
|
||
></u-line-progress>
|
||
</view>
|
||
</u-sticky>
|
||
<!-- 答题卡 -->
|
||
<view class="block" v-if="questions.length > 0">
|
||
<block v-if="isShowAnswer">
|
||
<!-- 题目类型 -->
|
||
<view class="answer-type">
|
||
<text v-if="questions[questionsIndex].type == 1">单选题</text>
|
||
<text v-if="questions[questionsIndex].type == 2">多选题</text>
|
||
<text v-if="questions[questionsIndex].type == 3">判断题</text>
|
||
</view>
|
||
<!-- 题目 -->
|
||
<view class="answer-q">{{questions[questionsIndex].title}}</view>
|
||
<!-- 答案 -->
|
||
<view class="answer-list">
|
||
<!-- 对错/单选 -->
|
||
<block v-if="questions[questionsIndex].type == 1 || questions[questionsIndex].type == 3">
|
||
<radio-group @change="onAnswer">
|
||
<label
|
||
class="answer-item"
|
||
v-for="(item, index) in questions[questionsIndex].options"
|
||
:key="index"
|
||
:class="{'active': item.option_id == answerArr[questionsIndex].option_ids}"
|
||
>
|
||
<radio class="answer-checkbox" :value="item.option_id" />
|
||
<text class="answer-index">{{item.order.text}}.</text>
|
||
<view class="answer-text">{{item.title}}</view>
|
||
<view class="answer-icon">
|
||
<u-icon v-if="item.option_id == answerArr[questionsIndex].option_ids" name="checkbox-mark" size="38rpx" color="#446EFE"></u-icon>
|
||
</view>
|
||
</label>
|
||
</radio-group>
|
||
</block>
|
||
<!-- 多选题 -->
|
||
<block v-if="questions[questionsIndex].type == 2">
|
||
<checkbox-group @change="onAnswer">
|
||
<label
|
||
class="answer-item"
|
||
v-for="(item, index) in questions[questionsIndex].options"
|
||
:key="index"
|
||
:class="{'active': isAnswer(item.option_id, answerArr[questionsIndex], 2)}"
|
||
>
|
||
<checkbox class="answer-checkbox" :value="item.option_id"></checkbox>
|
||
<text class="answer-index">{{item.order.text}}.</text>
|
||
<view class="answer-text">{{item.title}}</view>
|
||
<view class="answer-icon">
|
||
<u-icon v-if="isAnswer(item.option_id, answerArr[questionsIndex], 2)" name="checkbox-mark" size="38rpx" color="#446EFE"></u-icon>
|
||
</view>
|
||
</label>
|
||
</checkbox-group>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="answer-loding">
|
||
<u-loading-icon mode="circle" text="加载中..."></u-loading-icon>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<!-- 答题卡 -->
|
||
<!-- answerShow -->
|
||
<u-popup :show="answerShow" closeable round @close="answerShow = false">
|
||
<view class="answer-lay-content">
|
||
<view class="answer-lay-title">答题卡</view>
|
||
<view class="answer-lay-flex">
|
||
<view class="answer-lay-flex-title">智能组卷（客观一）</view>
|
||
<view class="answer-lay-flex-text">
|
||
<text>未答题</text>
|
||
<text>已答题</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y style="height: 60vh;" v-if="answerArr.length > 0">
|
||
<view class="answer-lay-list">
|
||
<view class="answer-item" :class="{'active': item.option_ids != ''}" v-for="(item,index) in answerArr" :key="index">
|
||
<view class="number">{{index + 1}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 下一题 -->
|
||
<view class="footer-flex" v-if="questions.length > 0">
|
||
<view class="footer-btn" @click="answerShow = true">
|
||
<u-icon class="footer-icon" name="order" size="48rpx" color="#111"></u-icon>
|
||
<view>答题卡</view>
|
||
</view>
|
||
<button class="footer-next" :disabled="answerArr[questionsIndex].option_ids == '' || !isShowAnswer" @click="answerNext">{{(this.questionsIndex + 1) == this.questions.length ? '提交': '下一题'}}</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { questions, answers } from "@/apis/interfaces/college.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
outTime : 0,
|
||
percentageVal : 0,
|
||
questionsIndex: 0,
|
||
questions : [],
|
||
answerArr : [],
|
||
answerShow : false,
|
||
isShowAnswer : true
|
||
};
|
||
},
|
||
computed: {
|
||
isAnswer(){
|
||
return (id, answer, type) => {
|
||
let optionIds = answer.option_ids || []
|
||
let isFindIndex = optionIds.findIndex(val => val == id)
|
||
return isFindIndex >= 0
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.outTime = this.$Route.query.time || 60
|
||
questions(this.$Route.query.id).then(res => {
|
||
this.questions = res;
|
||
this.percentageVal += Number((100 / res.length).toFixed())
|
||
this.answerArr = new Array(res.length).fill({question_id:'', option_ids:''})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
// 选择答案
|
||
onAnswer(e){
|
||
let { value } = e.detail
|
||
this.$set(this.answerArr, this.questionsIndex, {
|
||
question_id: this.questions[this.questionsIndex].question_id,
|
||
option_ids : value
|
||
})
|
||
},
|
||
// 下一题
|
||
answerNext(type){
|
||
if(type != 'time'){
|
||
if(this.answerArr[this.questionsIndex] == '') return
|
||
if(this.questionsIndex < (this.questions.length - 1)){
|
||
this.isShowAnswer = false
|
||
setTimeout(() => {
|
||
this.questionsIndex++
|
||
this.percentageVal += Number((100 / this.questions.length).toFixed())
|
||
this.isShowAnswer = true
|
||
},200)
|
||
return
|
||
}
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask : true
|
||
})
|
||
answers(this.$Route.query.id, {
|
||
type : 2,
|
||
answers: this.answerArr
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
this.$Router.replace({
|
||
name: 'CollegeResults',
|
||
params: {
|
||
id: res.answer_id
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content{
|
||
background-color: $main-color;
|
||
padding-bottom: 200rpx;
|
||
}
|
||
// 加载题
|
||
.answer-loding{
|
||
height: 50vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
// 答题卡
|
||
.answer-lay-content{
|
||
.answer-lay-title{
|
||
line-height: 70rpx;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: solid 1rpx #F6F6F6;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.answer-lay-flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30rpx 30rpx 20rpx;
|
||
&-title{
|
||
font-size: 30rpx;
|
||
color: #111;
|
||
width: 50%;
|
||
@extend .nowrap;
|
||
}
|
||
&-text{
|
||
font-size: 30rpx;
|
||
width: 50%;
|
||
text-align: right;
|
||
text{
|
||
margin-left: 30rpx;
|
||
padding-left: 35rpx;
|
||
color: #333;
|
||
position: relative;
|
||
&::after{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
margin-top: -12rpx;
|
||
height: 16rpx;
|
||
width: 16rpx;
|
||
content: " ";
|
||
border-radius: 50%;
|
||
background: $main-color;
|
||
border:solid 7rpx #E4E8F7;
|
||
}
|
||
&:first-child::after{
|
||
background-color: #999999;
|
||
border-color: #e7e7e7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.answer-lay-list{
|
||
padding: 10rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
.answer-item{
|
||
width: calc(20% - 40rpx);
|
||
padding-top: calc(20% - 42rpx);
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background: white;
|
||
border:solid 1rpx #EEEEEE;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin: 20rpx;
|
||
color: #999999;
|
||
font-weight: bold;
|
||
.number{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
margin-top: -22rpx;
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
font-size: 32rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
&.active{
|
||
background: #E4E8F7;
|
||
border-color: #E4E8F7;
|
||
color: $main-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// header
|
||
.answer-header{
|
||
padding: 20rpx 30rpx 50rpx;
|
||
.flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 60rpx;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
color: rgba(255, 255, 255, .7);
|
||
font-size: 30rpx;
|
||
.flex-item{
|
||
text{
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
.flex-item-down{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// footer
|
||
.footer-flex{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 30rpx 30rpx 50rpx;
|
||
background: white;
|
||
height: 90rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 9;
|
||
.footer-next{
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
width: calc(100% - 150rpx);
|
||
background: $main-color;
|
||
border-radius: 45rpx;
|
||
color: white;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
padding: 0;
|
||
margin: 0;
|
||
&[disabled]{
|
||
opacity: .7;
|
||
background: $main-color;
|
||
color: white;
|
||
}
|
||
}
|
||
.footer-btn{
|
||
width: 100rpx;
|
||
text-align: center;
|
||
line-height: 30rpx;
|
||
font-size: 26rpx;
|
||
color: #111;
|
||
text-align: center;
|
||
.footer-icon{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
// 答题卡
|
||
.block{
|
||
background: white;
|
||
border-radius: 20rpx;
|
||
margin: 0 30rpx 30rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
&::after{
|
||
content: " ";
|
||
width: 90%;
|
||
height: 100rpx;
|
||
background: rgba(255, 255, 255, .5);
|
||
position: absolute;
|
||
left: 5%;
|
||
bottom: -30rpx;
|
||
border-radius: 20rpx;
|
||
z-index: -1;
|
||
}
|
||
// 类型
|
||
.answer-type{
|
||
padding: 30rpx;
|
||
text{
|
||
background: $main-color;
|
||
color: white;
|
||
display: inline-block;
|
||
line-height: 50rpx;
|
||
height: 50rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
// 题目
|
||
.answer-q{
|
||
padding: 0 30rpx;
|
||
font-size: 34rpx;
|
||
line-height: 50rpx;
|
||
color: #111;
|
||
}
|
||
// 答题
|
||
.answer-list{
|
||
padding: 30rpx;
|
||
.answer-item{
|
||
display: block;
|
||
background: #f8f8f8;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
.answer-checkbox{
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
}
|
||
.answer-index{
|
||
width: 50rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #111;
|
||
}
|
||
.answer-text{
|
||
width: calc(100% - 100rpx);
|
||
line-height: 40rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
.answer-icon{
|
||
width: 50rpx;
|
||
text-align: right;
|
||
}
|
||
&.active{
|
||
color: #446EFE;
|
||
background: #E4E8F7;
|
||
.answer-index{
|
||
color: #446EFE;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|