ui
首先是考试的倒计时
<view class="" style="float: right;margin-right: 5%;">
距离考试结束:<u-count-down :timestamp="timestamp"></u-count-down>
</view>
这里讲一下思路,直接上代码不太好
下面的这里是根据题型的下标分别进行考试和渲染,区分考过的和没考过,考过的用红色区分
下面是代码,这里是已经接过的,仅供参考,希望对你有帮助
<template>
<view>
<u-navbar :title="examName" :background="background" title-color="#FFFFFF" back-icon-color="#FFFFFF">
<!-- <text style="color: #fff;">{{examName}}</text> -->
</u-navbar>
<!-- 答题卡 -->
<view class="content">
<!-- 题目 -->
<text>{{examNames}}</text>
<text>{{examRemark}}</text>
<text>{{singleChoiceSort}}.{{singleChoiceQuestion}}</text>
<!-- 单选题目 -->
<view class="" v-if="isDanxuan">
<u-radio-group @change="radioGroupChange" v-model='value'>
<u-radio @change="radioChange(index)" v-for="(item, index) in optionList" :key="index" :name="item.singleChoiceOptionChar">
{{item.singleChoiceOptionChar+'.'+item.singleChoiceOptionName}}
</u-radio>
</u-radio-group>
</view>
<!-- 多选题目-->
<view class="duoxuan" v-if="isDuoxuan" v-for="(item, index) in optionList" :key="index" @click="checkbox(index)">
<checkbox v-for="(ites,indes) in multipleChoiceOptionChar" :key='indes' :checked="true" :value="item.multipleChoiceOptionChar"
v-model="multipleChoiceOptionChar" v-if="item.multipleChoiceOptionChar==ites" @click="checkBox(index)">
{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}
</checkbox>
<checkbox v-for="(ites,indes) in multipleChoiceOptionChar" :key='indes' v-if="item.multipleChoiceOptionChar!=ites && multipleChoiceOptionChar!=nulll"
@change="checkboxGroupChange" @click="checkBox(index)">
{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}
</checkbox>
<!--
<checkbox v-if="multipleChoiceOptionChar.length<1">
{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}
</checkbox> -->
<!-- v-for="(item, index) in optionList" :key="index" @click="checkbox(index)" -->
</view>
<view class="uni-form-item uni-column" v-if="multipleChoiceOptionChar.length<1&&isDuoxuan">
<checkbox-group v-model="multipleChoiceOptionChar" name="ai" @change="chk" v-for="(item, index) in optionList" :key="index">
<checkbox :value="item.multipleChoiceOptionChar" class="chebox" />{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}
</checkbox-group>
</view>
<!-- 判断题目 -->
<view class="" v-if="isjudgment">
<!-- <u-radio-group @change="radioGroupChangeJudgment">
<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
{{item.text}}
</u-radio>
</u-radio-group> -->
<u-radio-group v-model="isjudgmentVlues" @change="radioGroupChangeJudgment">
<u-radio @change="radioChange1" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
{{item.text}}
</u-radio>
</u-radio-group>
</view>
<!-- 简答题 -->
<view v-if="issimptop">
<u-input v-model="textareaText" :type="type" :border="border" :height="height" :auto-height="autoHeight" @input='textareclick' />
</view>
</view>
<!-- 考试倒计时 -->
<view class="" style="float: right;margin-right: 5%;">
距离考试结束:<u-count-down :timestamp="timestamp"></u-count-down>
</view>
<!-- 选择 -->
<!-- 上题下题 -->
<view class="boxTixing">
<!-- <u-button type="success" style="background-color: #FFF;border: 1px solid #E2E2E2; color: #000000;">上一题</u-button>
<u-button type="success" style="background-color: #FFF;border: 1px solid #E2E2E2; color: #000000;">下一题</u-button> -->
<u-button type="success" @click="complete">完成</u-button>
</view>
<!-- 选项 -->
<view class="contents">
<ul class='contentUl' v-if='isanswer'>
<li v-for="(item,index) in singleChoiceList" :key='index' @click='choice(item.singleChoice,item.optionList,index)'
:class="answerJson.bigSubjectList[0].smallSubjectList[index].single.finish==true?'addColor':'addColorwhith'">
{{index+1}}
</li>
<li v-for="(item,index) in selectTypelist[1].multipleChoiceList" :key='index' @click="checkboxClick(item.multipleChoice,index,item.optionList)"
:class="answerJson.bigSubjectList[1].smallSubjectList[index].multiple.answerCharList.length>0?'addColor':'addColorwhith'">
{{singleChoiceList.length+index+1}}
</li>
<li v-for="(item,index) in selectTypelist[2].judgmentList" :key='index' @click="judgeClick(index)" :class="answerJson.bigSubjectList[2].smallSubjectList[index].judgment.finish==true?'addColor':'addColorwhith'">
{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+index+1}}
</li>
<li v-for="(item,index) in selectTypelist[3].simpleTopicList" :key='index' @click="simpleTop(index)" :class="answerJson.bigSubjectList[3].smallSubjectList[index].simpleTopic.finish==true?'addColor':'addColorwhith'">
{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+selectTypelist[3].simpleTopicList.length+index+1+singleChoiceList.length}}
</li>
</ul>
<!-- 没有做过 -->
<ul class='contentUl' v-if='isanswer==false'>
<li v-for="(item,index) in singleChoiceList" :key='index' @click='choice(item.singleChoice,item.optionList,index)'>
{{index+1}}
</li>
<li v-for="(item,index) in selectTypelist[1].multipleChoiceList" :key='index' @click="checkboxClick(item.multipleChoice,index,item.optionList)">
{{singleChoiceList.length+index+1}}
</li>
<li v-for="(item,index) in selectTypelist[2].judgmentList" :key='index' @click="judgeClick(index)">
{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+index+1}}
</li>
<li v-for="(item,index) in selectTypelist[3].simpleTopicList" :key='index' @click="simpleTop(index)">
{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+selectTypelist[3].simpleTopicList.length+index+1+singleChoiceList.length}}
</li>
</ul>
</view>
<!-- <u-empty text="暂无考试内容,请等待~" mode="list" v-if="isanswer"></u-empty> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import helper from '../../../../common/helper.js'
import jquery from '../../../../common/jquery-1.8.3.min.js'
export default {
data() {
return {
background: {
backgroundColor: '#FF0036',
},
examName: '考试',
selectTypelist: [], //所有题目
singleChoiceList: [], //单选
examNames: '单选题', //题目类型
examRemark: '',
singleChoiceSort: 1, //题目数
singleChoiceQuestion: 0, //考试题目
optionList: [], //单选选择
singleChoiceOptionChar: '',
// u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
value: '',
index: 0, //单选下标
getAnswerSheet: [], //答题卡
// bigSubjectList:[],//答题数据
bigSubjectListType: ['A', 'B', 'C', 'D'],
answerJson: null,
isDanxuan: true,
isDuoxuan: false,
isjudgment: false,
issimptop: false,
multipleChoiceOptionChar: [],
//多选显示
checked: true,
ischecked: false,
checkboxClickIndex: 0, //多选下标
checkBoxlist: ['A', 'B', 'C', 'D', 'E'], //复选框选项
indexlist: [],
list: [{
name: 1,
text: '正确',
disabled: false,
},
{
name: 0,
text: '错误',
disabled: false
},
],
isjudgmentVlues: '',
isjudgmentIndex: 0,
type: 'textarea',
border: true,
height: 200,
autoHeight: true,
textareaText: '',
issimpleTopIndex: 0,
timestamp: 86400,
cls: [],
clslist: [],
userId: '',
pattern: 0, //是否为正式考试
isanswer: false, //考试内容是否存在
}
},
onLoad(option) {
this.pattern = option.pattern
uni.getStorage({
key: 'id_key',
success: (res) => {
this.userId = res.data
}
})
},
created() {
this.skilis()
this.skilisType()
this.countDown()
// this.radioChange()
},
methods: {
// 考试
skilis() {
// alert(this.customerId)
let that = this
uni.request({
url: helper.kileApi + 'app/examAnswerSheet/getAnswerSheet',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
examId: 9,
userId: that.userId,
},
success: (res) => {
this.getAnswerSheet = res.data.data
if (this.getAnswerSheet != null) {
this.answerJson = JSON.parse(this.getAnswerSheet.answerJson)
}
console.log(res.data.data)
if (this.answerJson != null) {
this.isanswer = true
this.value = this.answerJson.bigSubjectList[0].smallSubjectList[0].single.answerChar
this.examName = res.data.data.examName
} else {
}
console.log(this.answerJson)
}
})
},
// 题型
skilisType() {
// alert(this.customerId)
let that = this
uni.request({
url: helper.kileApi + 'app/examAnswerSheet/getSelfExamSelect',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
examId: 9,
userId: that.userId,
},
success: (res) => {
that.selectTypelist = res.data.data
console.log(that.selectTypelist[0].select.examRemark)
that.singleChoiceList = that.selectTypelist[0].singleChoiceList
that.examNames = that.selectTypelist[0].select.examName
that.examRemark = that.selectTypelist[0].select.examRemark
uni.setStorage({
key: 'selectTypelist',
data: that.singleChoiceList,
success() {
console.log('成功了')
},
fail() {
console.log('缓存失败了')
}
});
console.log(that.examRemark)
that.optionList = that.selectTypelist[0].singleChoiceList[0].optionList
that.singleChoiceQuestion = that.selectTypelist[0].singleChoiceList[0].singleChoice.singleChoiceQuestion
}
})
uni.getStorage({
key: 'singleChoiceList',
success: (res) => {
// console.log("获取id")
console.log(res.data);
that.singleChoiceList = res.data
that.singleChoiceList = that.selectTypelist[0].singleChoiceList
that.examNames = that.selectTypelist[0].select.examName
that.examRemark = that.selectTypelist[0].select.examRemark
that.optionList = that.selectTypelist[0].singleChoiceList[0].optionList
that.singleChoiceQuestion = that.selectTypelist[0].singleChoiceList[0].singleChoice.singleChoiceQuestion
}
});
console.log(that.examRemark)
},
// 单选
choice(singleChoice, optionList, index) {
this.index = index
this.singleChoiceSort = this.index + 1
this.singleChoiceQuestion = singleChoice.singleChoiceQuestion
this.examNames = this.selectTypelist[0].select.examName
this.examRemark = this.selectTypelist[0].select.examRemark
// 选择的选项
this.value = this.answerJson.bigSubjectList[0].smallSubjectList[index].single.answerChar
this.optionList = optionList
this.singleChoiceOptionChar = optionList.singleChoiceOptionChar
// console.log(this.value)
this.isDanxuan = true
this.isDuoxuan = false
this.isjudgment = false
this.issimptop = false
},
// 选中某个单选框时,由radio时触发
radioChange(e) {
// alert("1")
// this.skilis()
console.log(e);
// console.log(JSON.toString(this.getAnswerSheet.answerJson))
// console.log(this.selectTypelist[0].singleChoiceList[this.index].singleChoice.singleChoiceAnswer)
// console.log(this.getAnswerSheet.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.answerChar)
// 添加对象answer
// this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.answer = this.bigSubjectListType[e]
this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.finish = true
console.log(this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single)
this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.answerChar = this.bigSubjectListType[e]
this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)
// let s=12
console.log(typeof this.getAnswerSheet.answerJson == 'string')
let that = this
// var jsondata = JSON.stringify(this.getAnswerSheet)
// uni.request({
// url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheetObject',
// method: 'POST',
// header: {
// 'content-type': 'application/x-www-form-urlencoded;charset=utf-8;charset=utf-8',
// },
// data: this.getAnswerSheet,
// success: (res) => {
// // this.examName = res.data.data.examName
// }
// })
},
// 选中任一radio时,由radio-group触发
radioGroupChange(e) {
// console.log(e);
},
//
checkboxClick(multipleChoice, index, optionList) {
// alert(index)
console.log(index)
console.log(optionList)
console.log(multipleChoice)
this.examNames = this.selectTypelist[1].select.examName
this.examRemark = this.selectTypelist[1].select.examRemark
this.singleChoiceSort = this.singleChoiceList.length + index + 1
this.singleChoiceQuestion = multipleChoice.multipleChoiceQuestion
this.optionList = optionList
// this.value = this.answerJson.bigSubjectList[0].smallSubjectList[0].single.answerChar
this.isDanxuan = false
this.isjudgment = false
this.isDuoxuan = true
this.issimptop = false
this.checkboxClickIndex = index
if (this.answerJson.bigSubjectList[1].smallSubjectList[this.checkboxClickIndex] != null) {
this.multipleChoiceOptionChar = this.answerJson.bigSubjectList[1].smallSubjectList[this.checkboxClickIndex].multiple
.answerCharList
console.log(this.multipleChoiceOptionChar)
} else {
this.multipleChoiceOptionChar = multipleChoice
console.log(this.multipleChoiceOptionChar)
}
console.log(this.multipleChoiceOptionChar)
// $('.contentUl li').addClass
},
chk: function(e) {
this.cls = e.detail.value //定义cls获取复选框的数组值
this.cls = this.cls.join(",") //将数组转化为字符串向后台传递
console.log(this.cls)
// console.log(this.)
if (this.cls != "") {
this.clslist.push(this.cls)
}
this.answerJson.bigSubjectList[1].smallSubjectList[this.checkboxClickIndex].multiple.answerCharList = this.clslist
this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)
let that = this
// var jsondata = JSON.stringify(this.getAnswerSheet)
uni.request({
// url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheetObject',
url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheet',
method: 'POST',
header: {
'content-type': 'application/json;charset=utf-8',
},
data: this.getAnswerSheet,
success: (res) => {
this.examName = res.data.data.examName
}
})
console.log(this.clslist)
},
// 判断
judgeClick(index) {
// console.log(index)
this.isjudgment = true
this.isDanxuan = false
this.isDuoxuan = false
this.issimptop = false
// console.log(this.selectTypelist[2].judgmentList[index].judgmentQuestion)
this.examNames = this.selectTypelist[2].select.examName
this.examRemark = this.selectTypelist[2].select.examRemark
this.singleChoiceQuestion = this.selectTypelist[2].judgmentList[index].judgmentQuestion
this.singleChoiceSort = this.singleChoiceList.length + this.selectTypelist[1].multipleChoiceList.length + index + 1
this.isjudgmentVlues = this.value = this.answerJson.bigSubjectList[2].smallSubjectList[index].judgment.answer
this.isjudgmentIndex = index
// alert(this.isjudgmentIndex)
// console.log(isjudgmentVlues)
},
radioGroupChangeJudgment(e) {
console.log(e)
this.answerJson.bigSubjectList[2].smallSubjectList[this.isjudgmentIndex].judgment.answer = e
this.answerJson.bigSubjectList[2].smallSubjectList[this.isjudgmentIndex].judgment.finish = true
console.log(this.answerJson.bigSubjectList[2].smallSubjectList[this.isjudgmentIndex].judgment.answer)
this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)
if (typeof this.getAnswerSheet.answerJson == 'string') {
try {
JSON.parse(this.getAnswerSheet.answerJson);
return true;
} catch (e) {
console.log(e);
return false;
}
}
let that = this
// var jsondata = JSON.stringify(this.getAnswerSheet)
uni.request({
url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheet',
method: 'POST',
header: {
'content-type': 'application/json;charset=utf-8',
},
data: this.getAnswerSheet,
success: (res) => {
this.examName = res.data.data.examName
}
})
},
// 简单题
simpleTop(index) {
this.isjudgment = false
this.isDanxuan = false
this.isDuoxuan = false
this.issimptop = true
this.issimpleTopIndex = index
// alert(this.issimpleTopIndex)
this.examNames = this.selectTypelist[3].select.examName
this.examRemark = this.selectTypelist[3].select.examRemark
// console.log(this.selectTypelist[3].simpleTopicList[index].simpleTopicQuestion)
this.singleChoiceQuestion = this.selectTypelist[3].simpleTopicList[index].simpleTopicQuestion
this.singleChoiceSort = this.singleChoiceList.length + this.selectTypelist[1].multipleChoiceList.length + this.selectTypelist[
3].simpleTopicList.length + index + 1 + this.singleChoiceList.length
this.textareaText = this.answerJson.bigSubjectList[3].smallSubjectList[index].simpleTopic.answer
},
// 提交简答
textareclick(e) {
console.log(e)
this.answerJson.bigSubjectList[3].smallSubjectList[this.issimpleTopIndex].simpleTopic.answer = e
console.log(this.answerJson.bigSubjectList[3].smallSubjectList[this.issimpleTopIndex].simpleTopic.answer)
this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)
let that = this
// var jsondata = JSON.stringify(this.getAnswerSheet)
uni.request({
url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheet',
method: 'POST',
header: {
'content-type': 'application/json;charset=utf-8',
},
data: this.getAnswerSheet,
success: (res) => {
this.examName = res.data.data.examName
}
})
},
// 倒计时
countDown() {
// alert(this.customerId)
let that = this
uni.request({
url: helper.kileApi + 'app/examAnswerSheet/getSurplusTime',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data: {
examId: 9,
userId: that.userId,
},
success: (res) => {
this.timestamp = res.data.data / 60
console.log(res.data.data)
}
})
},
// 完成
complete() {
// 提交考试模式
this.getAnswerSheet.pattern = this.pattern
this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)
// var jsondata = JSON.stringify(this.getAnswerSheet)
uni.request({
url: helper.kileApi + 'app/examAnswerSheet/submitAnswerSheet',
// url: helper.kileApi + 'app/examAnswerSheet/submitAnswerSheetObject',
method: 'POST',
header: {
'content-type':'application/json;charset=utf-8',
},
data: this.getAnswerSheet,
success: (res) => {
if (res.data.status == 200) {
this.$refs.uToast.show({
title: '提交成功',
type: 'success',
url:'/pages/index/examination/examination_careful'
// url: '/pages/index/mytechnology/skill/skills'
})
} else {
this.$refs.uTips.show({
title: res.data.msg,
type: 'success',
duration: '2300'
})
}
}
})
},
}
}
</script>
<style>
/* 答题卡 */
.content {
width: 90%;
height: 238px;
margin-left: 5%;
margin-top: 15px;
/* border: 1px solid red; */
}
.contents {
width: 90%;
height: auto;
margin-left: 5%;
margin-top: 30px;
border: 1px solid #ECECEC;
position: absolute;
}
.duoxuan uni-checkbox {
margin-top: 5px;
}
.duoxuan uni-checkbox:nth-child(2) {
display: none;
border: 1px solid red;
}
.duoxuan uni-checkbox:nth-child(3) {
display: none;
border: 1px solid red;
}
.addColor {
color: red;
}
.redColor {
border: 1px solid red
}
.addColorwhith {
color: #000000;
}
.content text:nth-child(1) {
display: inline-block;
width: 100%;
height: auto;
font-size: 18px;
font-weight: bold;
}
.boxTixing {
width: 100%;
height: 30px;
margin-top: 58px;
/* border: 1px solid red; */
}
.u-btn--success {
width: 20%;
height: 100%;
display: inline-block;
line-height: 30px;
text-align: center;
margin-left: 3px;
margin-left: 3%;
}
.content text:nth-child(2) {
display: inline-block;
width: 100%;
height: auto;
font-size: 16px;
margin-top: 5px;
}
.u-btn[data-v-059e7e79] {
padding: 0 0px;
z-index: 1;
}
.content text:nth-child(3) {
display: inline-block;
width: 100%;
height: auto;
font-size: 18px;
margin-top: 5px;
border-bottom: 1px solid #ECECEC;
}
.contentUl {
width: 90%;
height: auto;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 0px;
margin-left: 5%;
position: relative;
}
.contentUl text {
display: none;
position: relative;
left: 10px;
top: 5px;
margin-top: 15px;
/* padding-bottom: 0px; */
}
.contentUl li {
width: 25px;
height: 25px;
border: 1px solid #ECECEC;
float: left;
margin-left: 10px;
margin-top: 11px;
line-height: 25px;
text-align: center;
}
</style>