<template>
<view>
<view id="top-box" class="cu-bar bg-white solid-bottom">
<view class="action text-black">
<text v-if="currentType===1">判断题</text>
<text v-else-if="currentType===2">单选题</text>
<text v-else-if="currentType===3">多选题</text>
<text v-else-if="currentType===4">填空题</text>
<text v-else-if="currentType===5">问答题</text>
<text>,本次考试共 {{subjectList.length}} 题</text>
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showCardModal" data-target="modalCard">答题卡</button>
</view>
</view>
<view class="cu-modal" :class="modalCard=='modalCard'?'show':''" @tap="hideCardModal">
<view class="cu-dialog" @tap.stop>
<scroll-view class="page padding" :scroll-y=true :style="{'height':datikaHeight}" >
<view class="cu-bar solid-bottom">
<view class="action">
<text class="cuIcon-title text-red"></text>答题卡
</view>
</view>
<view class="grid col-5 ">
<view class="margin-tb-sm text-center" v-for="(subject,index) in subjectList" :key="index">
<button class="cu-btn round" :class="[subject.userAnswer.length===0?'line-grey':'bg-red']" @click="AppointedSubject(index)" >{{index+1}}</button>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="cu-modal padding " :class="modalError=='modalError'?'show':''" @tap="hideErrorModal">
<view class="cu-dialog bg-white" @tap.stop>
<view class="cu-bar solid-bottom ">
<view class="action">
<text class="cuIcon-title text-red"></text>试题纠错
</view>
</view>
<radio-group class="block" >
<view class="cu-list menu text-left">
<view class="cu-item cu-item-error" v-for="error in errorList" >
<radio :value="error"></radio>
<view class="title text-black margin-left">{{error}}</view>
</view>
</view>
</radio-group>
<view class="padding flex flex-direction ">
<button class="cu-btn bg-red margin-tb-sm lg" @click="SubmitError">提 交</button>
</view>
</view>
</view>
<form>
<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" :style="{'height':swiperHeight}">
<swiper-item v-for="(subject,index) in subjectList">
<view v-if="index-subjectIndex>=-1&&index-subjectIndex<=1">
<view class="cu-bar bg-white solid-bottom">
<view class="action text-black">
<text class="cuIcon-title text-red"></text><rich-text :nodes="subject.title"></rich-text>
</view>
</view>
<view>
<radio-group class="block" @change="RadioboxChange" v-if="subject.type===1||subject.type===2">
<view class="cu-form-group" v-for="option in subject.optionList">
<radio :value="option.id" :checked="subject.userAnswer.indexOf(option.id) > -1?true:false"></radio>
<view class="title text-black"><rich-text :nodes="option.content"></rich-text></view>
</view>
</radio-group>
<checkbox-group class="block" @change="CheckboxChange" v-else-if="subject.type===3">
<view class="cu-form-group" v-for="option in subject.optionList">
<checkbox :value="option.id" :class="subject.userAnswer.indexOf(option.id) > -1?'checked':''" :checked="subject.userAnswer.indexOf(option.id) > -1?true:false"></checkbox>
<view class="title text-black"><rich-text :nodes="option.content"></rich-text></view>
</view>
</checkbox-group>
<view v-else-if="subject.type===4">
<view class="cu-form-group solid-bottom">
<view class="title text-black">
答：
</view>
<input placeholder="文本输入框" name="input" v-model="subject.userAnswer" @blur="textInput" ></input>
</view>
</view>
<view v-else-if="subject.type===5">
<view class="cu-bar cu-bar-title bg-white margin-top">
<view class="action text-black">
答：
</view>
</view>
<view class="cu-form-group solid margin">
<textarea maxlength="-1" @blur="textInput" v-model="subject.userAnswer" placeholder="多行文本输入框"></textarea>
</view>
</view>
</view>
<view v-show="subject.showAnswer" class="margin-top solid-top">
<view class="cu-bar">
<view class="action text-grey">
<text>正确答案：</text>
<text class="solid-bottom padding-left text-green">{{subject.answer}}</text>
</view>
</view>
<view class="cu-bar cu-bar-title">
<view class="action text-grey">
<text>解析：</text>
</view>
</view>
<view class="text-content padding text-grey">
{{subject.explain}}
</view>
</view>
</view>
</swiper-item>
</swiper>
</form>
<view id="foot-box" class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="MoveSubject(-1)">
<view class="cuIcon-cu-image">
<text class="lg cuIcon-back text-gray"></text>
</view>
<view class="text-gray">上一题</view>
</view>
<view class="action" @click="MoveSubject(1)">
<view class="cuIcon-cu-image">
<text class="lg text-gray cuIcon-right"></text>
</view>
<view class="text-gray">下一题</view>
</view>
<view class="action">
<view class="cuIcon-cu-image">
<text class="lg text-gray">{{minute}}</text>
</view>
<view class="text-gray" style="margin-top: 6px;">剩余时间</view>
</view>
<view class="action" @tap="alertJiaojuan()" data-target="modalError">
<view class="cuIcon-cu-image">
<text class="lg text-gray cuIcon-notice"></text>
</view>
<view class="text-gray">交卷</view>
</view>
<view class="action" @tap="ucenter()" data-target="modalError">
<view class="cuIcon-cu-image">
<text class="lg text-gray cuIcon-people"></text>
</view>
<view class="text-gray">我的</view>
</view>
</view>
<view class="share" v-if="showShare">
</view>
</view>
</template>
<script>
var _self;
export default {
data() {
return {
exam_id:0,
showShare:false,
userFavor:false,//是否已收藏
currentType: 0, //当前题型
subjectIndex: 0,//跳转索引
autoShowAnswer: false,//答错是否显答案
autoRadioNext:false,//判断题、单项题，自动移下一题
swiperHeight: '800px',//
datikaHeight: '400px',//答题卡高度
title: '',
minute:'',
subjectList:[],
modalCard: null ,//显示答题卡
modalError:null , //纠错卡
errorList:['题目不完整','答案不正确','含有错别字','图片不存在','解析不完整','其他错误'],
djs:false,
share_title:'',
share_img:'',
share_url:'',
end_time:''
}
},
onShow() {
//_self.share()
},
onReady() {
//var tempHeight = 800;
//var _me = this;
},
onLoad(options) {
_self = this;
_self.exam_id = options.exam_id;
if(options.job=='clear'){
uni.clearStorageSync();
}else{
if(options.f == 'uc'){
_self.get_question();
}else{
let s = uni.getStorageSync('state');
if(s == 'testing'){
_self.set_data();
}else{
_self.get_question();
}
}
setTimeout(_self.xintiao,60000);
}
_self.get_share_data();
},
methods: {
dateFormat(fmt,date){
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
},
xintiao(){
uni.request({
url: _self.api + '?m=wechat&a=xintiao',
method: 'GET',
header:this.get_header(),
success: res => {
// todo
}
});
},
get_question(){
uni.showLoading({
title:'获取试题...',
})
uni.request({
url: _self.api + '?m=exam&a=get_question&exam_id=' + _self.exam_id,
method: 'GET',
header:this.get_header(),
success: res => {
if (res.data.status == 1) {
uni.setStorageSync('exam_id',res.data.exam_id);
uni.setStorageSync('state',res.data.state);
uni.setStorageSync('title',res.data.title);
uni.setStorageSync('questions',res.data.questions);
uni.setStorageSync('minute',res.data.minute);
uni.setStorageSync('end_time',res.data.end_time);
_self.set_data();
}else if (res.data.status == 404) {
location.href = res.data.gourl;
}else{
uni.showToast({
title:res.data.msg!=''?res.data.msg:"获取数据失败~",
icon:"none"
})
}
},
complete() {
uni.hideLoading();
}
});
},
set_data(){
let state = uni.getStorageSync('state');
let title = uni.getStorageSync('title');
let questions = uni.getStorageSync('questions');
let minute = uni.getStorageSync('minute');
if(state == 'testing'){
_self.djs = true;
}else{
_self.djs = false;
}
uni.setNavigationBarTitle({
title: title
});
_self.minute = minute;
_self.subjectList = questions;
_self.currentType = _self.subjectList[0].type;
let end_time = uni.getStorageSync('end_time');
if(uni.getSystemInfoSync().platform == 'ios'){
end_time = end_time.replace(/-/g, "/");
}
_self.daojishi();
},
daojishi(){
if(_self.djs){
let end_time = _self.end_time;
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date(end_time);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var m,s;
if (!isNaN(leftTime) && leftTime>=0) {
m = Math.floor(leftTime/1000/60);
s = Math.floor(leftTime/1000%60);
//将倒计时赋值到div中
_self.minute = (m<10?'0'+m:m) + ':' + (s<10?'0'+s:s);
//递归每秒调用countTime方法，显示动态时间效果
setTimeout(_self.daojishi,1000);
}else{
_self.djs = false;
}
}
},
alertJiaojuan(){
let s = uni.getStorageSync('state');
if(s == 'testing'){
uni.showModal({
title: '提示',
content: '确定要交卷吗?',
success: function (res) {
if (res.confirm) {
_self.jiaojuan();
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}else{
uni.showToast({
title:"您没有正在考试~",
icon:"none"
})
}
},
jiaojuan(){
uni.showLoading({
title:'正在提交...',
})
let a = [];
for(let v of _self.subjectList) {
a.push(v.id + '_' + v.userAnswer);
};
uni.request({
url: _self.api + '?m=exam&a=jiaojuan',
method: 'POST',
header:this.get_header('post'),
data:{answer:a.join(',')},
success: res => {
if (res.data.status == 1) {
uni.clearStorageSync();
uni.setStorageSync('minute','00:00');
uni.showModal({
title: '提示',
content: '考试成绩为:'+res.data.score+',是否立即分享到朋友圈获取答案?',
success: function (res) {
if (res.confirm) {
_self.share();
} else if (res.cancel) {
uni.showModal({
title: '提示',
content: '您是否选择留取联系方式以获取答案?',
success: function (res) {
if (res.confirm) {
uni.redirectTo({
url:'../uni-center/info?exam_id=' + _self.exam_id
})
} else if (res.cancel) {
uni.redirectTo({
url:'../uni-center/uni-center'
})
}
}
});
}
}
});
}else{
uni.showToast({
title:res.data.msg!=''?res.data.msg:"提交失败~",
icon:"none"
})
}
},
complete() {
uni.hideLoading();
}
});
},
get_share_data(){
uni.request({
url: _self.api + '?m=wechat&a=get_share',
method: 'GET',
header:this.get_header(),
success: res => {
if (res.data.status == 1) {
_self.share_img = res.data.data.img;
_self.share_title = res.data.data.title;
_self.share_url = res.data.data.url;
}
}
});
},
share(){
// #ifdef H5
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.share({
title: _self.share_title,
desc: _self.share_title,
img: _self.share_img
});
}
_self.showShareWxImg();
// #endif
},
showShareWxImg(){
_self.showShare = true;
},
ucenter: function(e){
/*uni.navigateTo({
url:'../uni-center/uni-center'
})*/
let s = uni.getStorageSync('state');
if(s == 'testing'){
uni.showModal({
title: '提示',
content: '确定要放弃考试吗?',
success: function (res) {
if (res.confirm) {
uni.navigateTo({
url:'../uni-center/uni-center'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}else{
uni.navigateTo({
url:'../uni-center/uni-center'
})
}
},
showCardModal: function(e) {
this.modalCard = e.currentTarget.dataset.target
},
hideCardModal: function(e) {
this.modalCard = null
},
showErrorModal: function(e) {
this.modalError = e.currentTarget.dataset.target
},
hideErrorModal: function(e) {
this.modalError = null
},
SwiperChange: function(e) { //滑动事件
let index = e.target.current;
if (index != undefined) {
this.subjectIndex = index;
this.currentType = this.subjectList[index].type;
this.userFavor = this.subjectList[index].userFavor;
}
},
RadioboxChange : function(e) { //单选选中
var items = this.subjectList[this.subjectIndex].optionList;
var values = e.detail.value;
this.subjectList[this.subjectIndex].userAnswer = values;
if(this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1){
this.subjectIndex += 1;
};
uni.setStorageSync('questions',this.subjectList);
},
CheckboxChange: function(e) { //复选选中
var items = this.subjectList[this.subjectIndex].optionList;
var values = e.detail.value;
this.subjectList[this.subjectIndex].userAnswer = "";
for (var i = 0, lenI = items.length; i < lenI; ++i) {
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].id == values[j]) {
this.subjectList[this.subjectIndex].userAnswer += items[i].id;
break
}
}
}
uni.setStorageSync('questions',this.subjectList);
},
textInput : function(e) { //填空题
this.subjectList[this.subjectIndex].userAnswer = e.detail.value;
uni.setStorageSync('questions',this.subjectList);
},
ShowAnswerChange: function(e) { //显示答案
if(this.subjectList[this.subjectIndex].showAnswer)
{
this.subjectList[this.subjectIndex].showAnswer=false;
}
else{
this.subjectList[this.subjectIndex].showAnswer=true;
}
},
FavorSubject: function(e) { //收藏题
if(this.userFavor)
{
this.userFavor=false;
this.subjectList[this.subjectIndex].userFavor=false;
}
else{
this.userFavor=true;
this.subjectList[this.subjectIndex].userFavor=true;
}
},
MoveSubject: function(e) { //上一题、下一题
if (e === -1 && this.subjectIndex != 0) {
this.subjectIndex -= 1;
}
if (e === 1 && this.subjectIndex < this.subjectList.length - 1) {
this.subjectIndex += 1;
}
},
AppointedSubject: function(e) { //题卡指定
this.modalCard = null;
this.subjectIndex = e;
},
SubmitError: function(e) { //提交纠错
this.modalError = null;
}
}
}
</script>
<style>
@import "../../colorui/animation.css";
page {
background-color: #FFFFFF;
}
.cu-form-group {
justify-content: flex-start
}
.cu-form-group .title {
padding-left: 30upx;
padding-right: 0upx;
}
.cu-form-group+.cu-form-group {
border-top: none;
}
.cu-bar-title {
min-height: 50upx;
}
.cu-list.menu>.cu-item-error{justify-content: flex-start;}
rich-text{display: inline-block; padding: 10px 0; line-height: 1.8;}
.midimg{vertical-align: middle;}
.cu-form-group .title {height: unset; line-height:unset; }
.share{
background-image: url(/statics/images/guide2.png);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: fixed;
background-color: #000;
z-index: 99999;
top: 0;
left: 0;
opacity: 0.7;
}
</style>
9***@qq.com
- 发布：2020-03-23 11:41
- 更新：2020-03-23 11:41
- 阅读：1019
setTimeout 页面滑动后时间不准确的问题
分类：uni-app
0 个回复