You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
579 lines
13 KiB
579 lines
13 KiB
<template>
|
|
<view class='wrap'>
|
|
<view class="top">
|
|
<view class='logintitle'>
|
|
|
|
<u-image style="margin:0 auto" :fade="false" :src="logintitle" width="702rpx" height="88rpx"></u-image>
|
|
<view style="color:#0095e5;text-align: center;font-size: 30rpx;margin: 0 auto;margin-top:20rpx;">
|
|
——排查身边灾害隐患</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="answerwrap">
|
|
<view class='answertop'>
|
|
<view>(答题{{questionIndex+1}}/5)</view>
|
|
<view>
|
|
<u-image style="display: inline-block;margin-right:5px" :fade="false" width="24rpx" height="24rpx"
|
|
:src='timeicon'></u-image>
|
|
{{minutes}}:{{seconds}}
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class='answercenter'>
|
|
<view class='answertitle'>
|
|
<span
|
|
:class="[{'more':question_list[questionIndex]['type_name']==='多选题'}]">{{question_list[questionIndex]?question_list[questionIndex]['type_name']:''}}</span>
|
|
<text class="hasspan"
|
|
v-html="question_list[questionIndex]?replaceAtSymbolsWithSpan(question_list[questionIndex]['title']):''"></text>
|
|
</view>
|
|
<view class='answercheck'
|
|
v-for="(ans,ansindex) in question_list[questionIndex]?question_list[questionIndex].options:[]">
|
|
<view @click="chooseAnswer(ans,ansindex)"
|
|
:class="['answeritem',{'active':ans.flag},{'correct':ans.isanswer},{'wrong':ans.iswrong}]">
|
|
<span>{{answerNum[ansindex]}}</span>{{ans.title}}
|
|
<!-- {{ans.is_correct}}--- -->
|
|
<!-- :class="ans.flag?'answeritem active':'answeritem'" -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='answerbottom'>
|
|
<span></span>正确答案：{{correctAnswer}}
|
|
</view>
|
|
</view>
|
|
<view class='submit'>
|
|
<u-button v-if="!answerSubmit" size="mini" :throttle-time="1000" shape="circle" type="default" :custom-style="parStyle"
|
|
@click="nextQue">下一题</u-button>
|
|
<u-button v-if="answerSubmit" size="mini" :throttle-time="1000" shape="circle" type="default" :custom-style="parStyle"
|
|
@click="nextQue">提交</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isNull,
|
|
toast
|
|
} from "@/common/util.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
parStyle: {
|
|
'background': 'linear-gradient(to right, #2754a5, #2b83bb)',
|
|
'color': '#fff',
|
|
'font-size': '28rpx',
|
|
'padding': '20rpx 30rpx',
|
|
'margin-left': '15rpx',
|
|
'margin-top': '80rpx',
|
|
'width': '100%',
|
|
'height': '80rpx'
|
|
|
|
},
|
|
minutes: 0,
|
|
seconds: 0,
|
|
timer: null,
|
|
question_list: [],
|
|
questionIndex: 0,
|
|
answercount: 0, //第几次答题
|
|
maxCount: 2,
|
|
answerNum: ["A", "B", "C", "D", "E", "F", "G", "H"],
|
|
myAnswer: [],
|
|
correctNum: 0, // 答对的题目数量
|
|
correctScore: 0, // 得分
|
|
correctAnswer: '', // 正确答案
|
|
answerSubmit: false, // 最后一题
|
|
hasFlag: false, // 是否选中
|
|
showAnswer: false,
|
|
timeicon: require('../../static/time.png'),
|
|
logintitle: require("../../static/logo3.png"),
|
|
|
|
isanswer: false, // 控制答案结束前不能点击到下一题
|
|
islock: false,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo()
|
|
},
|
|
onLoad() {
|
|
let configs = uni.getStorageSync("activeConfig") ? uni.getStorageSync("activeConfig").config : []
|
|
let answertime = 15
|
|
configs.map(item => {
|
|
if (item.key == 'answer_time') {
|
|
answertime = parseInt(item.value)
|
|
}
|
|
})
|
|
this.getQuestion()
|
|
this.countdown(answertime, (minutes, seconds) => {
|
|
this.minutes = minutes.toString().padStart(2, '0')
|
|
this.seconds = seconds.toString().padStart(2, '0')
|
|
}, () => {
|
|
console.log("1--", this.islock)
|
|
if (!this.islock) {
|
|
|
|
this.submitQue()
|
|
}
|
|
});
|
|
},
|
|
onUnload() {
|
|
clearTimeout(this.timer)
|
|
},
|
|
methods: {
|
|
async getUserInfo() {
|
|
const res = await this.$u.api.user()
|
|
this.$u.vuex('vuex_user', res);
|
|
this.userInfo = res;
|
|
if (isNull(res.mobile)) {
|
|
uni.redirectTo({
|
|
url: '/pages/login/index'
|
|
})
|
|
}
|
|
},
|
|
async getQuestion() {
|
|
let that = this
|
|
const res = await this.$u.api.questions()
|
|
this.answercount = res.today_ask_count // 今日是否已答题
|
|
let data = res.questions
|
|
if (this.answercount) {
|
|
uni.redirectTo({
|
|
url: '/pages/me/me'
|
|
})
|
|
return
|
|
}
|
|
data.map(item => {
|
|
let type = 0
|
|
item.correctAnswer = []
|
|
item.options.map(i => {
|
|
i.flag = false
|
|
if (i.is_correct === 1) {
|
|
type++
|
|
item.correctAnswer.push(that.answerNum[i.myindex - 1])
|
|
}
|
|
})
|
|
item.type_name = type > 1 ? '多选题' : '单选题'
|
|
console.log("item.type_name",item.type_name)
|
|
})
|
|
console.log("data",data)
|
|
this.question_list = data
|
|
},
|
|
|
|
replaceAtSymbolsWithSpan(str) {
|
|
return str.replace(/@/g,
|
|
'<span style="display: inline-block;width:40px;border-bottom:1px solid #666;margin: 0 3px;margin-bottom: -2px;"></span>'
|
|
);
|
|
},
|
|
chooseAnswer(ans, ansindex) {
|
|
this.hasFlag = false
|
|
if (this.question_list[this.questionIndex]['type_name'] === '单选题') {
|
|
this.question_list[this.questionIndex]['options'].map(item => {
|
|
item.flag = false
|
|
})
|
|
ans.flag = !ans.flag
|
|
this.hasFlag = true
|
|
// ans.flag = !ans.flag
|
|
} else {
|
|
ans.flag = !ans.flag
|
|
this.question_list[this.questionIndex]['options'].map(item => {
|
|
if (item.flag == true) {
|
|
this.hasFlag = true
|
|
}
|
|
})
|
|
}
|
|
console.log("hasFlag", this.hasFlag)
|
|
},
|
|
submitQue() {
|
|
let that = this
|
|
if (this.myAnswer.length > 0) {
|
|
let count = 0
|
|
this.myAnswer.map(item => {
|
|
if (item.isCorrect === true) {
|
|
count++
|
|
}
|
|
})
|
|
this.correctNum = count
|
|
this.correctScore = (count / 10) * 100
|
|
} else {
|
|
this.correctScore = 0
|
|
}
|
|
this.islock = true
|
|
// this.showAnswer = true
|
|
console.log("3--", this.islock)
|
|
this.$u.api.saveQuestion({
|
|
score: this.correctScore,
|
|
answers: this.myAnswer
|
|
}).then(res=>{
|
|
clearTimeout(this.timer)
|
|
toast('答题已完成',1500,function(){
|
|
setTimeout(function(){
|
|
uni.redirectTo({
|
|
url:'/pages/me/me'
|
|
})
|
|
},1500)
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
nextQue() {
|
|
let that = this
|
|
// this.isanswer = false
|
|
if (this.isanswer) {
|
|
return
|
|
}
|
|
if (!this.hasFlag) {
|
|
toast("请先选择答案")
|
|
return
|
|
}
|
|
this.hasFlag = false
|
|
if (this.questionIndex > 4) {
|
|
this.answerSubmit = true
|
|
return
|
|
}
|
|
|
|
let ansid = []
|
|
let count = 0
|
|
this.question_list[this.questionIndex]['options'].map(item => {
|
|
if (item.flag === true) {
|
|
ansid.push(item.id)
|
|
}
|
|
|
|
if (!item.flag && item.is_correct === 1) {
|
|
count++
|
|
}
|
|
|
|
})
|
|
this.myAnswer.push({
|
|
question_id: this.question_list[this.questionIndex]['id'],
|
|
answer_ids: ansid.join("|"),
|
|
isCorrect: count > 0 ? false : true
|
|
})
|
|
|
|
this.correctAnswer = this.question_list[this.questionIndex]['correctAnswer'].join(',')
|
|
|
|
// 判断选择的是否正确 加样式
|
|
this.question_list[this.questionIndex]['options'].map(item => {
|
|
if (item.is_correct === 1) {
|
|
item.isanswer = true
|
|
} else if (item.flag == true && item.is_correct === 0) {
|
|
item.iswrong = true
|
|
}
|
|
})
|
|
this.isanswer = true
|
|
if (that.answerSubmit) {
|
|
that.submitQue()
|
|
return
|
|
}
|
|
setTimeout(function() {
|
|
that.correctAnswer = ''
|
|
that.isanswer = false
|
|
that.questionIndex++
|
|
if (that.questionIndex == 4) {
|
|
that.answerSubmit = true
|
|
// return
|
|
}
|
|
}, 1500)
|
|
|
|
},
|
|
countdown(duration, onTick, onEnd) {
|
|
let remainingTime = duration * 60;
|
|
|
|
const tick = () => {
|
|
if (remainingTime > -1) {
|
|
const minutes = Math.floor(remainingTime / 60);
|
|
const seconds = remainingTime % 60;
|
|
onTick(minutes, seconds);
|
|
remainingTime--;
|
|
this.timer = setTimeout(tick, 1000);
|
|
} else {
|
|
console.log("remainingTime", remainingTime)
|
|
console.log("2--", this.islock)
|
|
onEnd();
|
|
}
|
|
};
|
|
tick();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wrap {
|
|
/* height: 100%; */
|
|
width: 100%;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-image: url('../../static/bg.jpg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
overflow: scroll;
|
|
}
|
|
|
|
.top {
|
|
width: 100%;
|
|
// height: 440rpx;
|
|
/* background-image: url('../../static/bgtop1.png'); */
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
margin-bottom:30rpx;
|
|
// position: relative;
|
|
// top: 0;
|
|
// left: 0
|
|
}
|
|
|
|
.logintitle {
|
|
padding-top: 90rpx;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 533rpx;
|
|
/* background-image: url('../../static/bgbottom.png'); */
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 0
|
|
}
|
|
|
|
.answerwrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 90%;
|
|
background-color: #f9f6f6;
|
|
border-radius: 40rpx;
|
|
margin: 0 auto;
|
|
box-shadow: 0px 0px 20px -10px #0095e5;
|
|
// margin-top: -40rpx;
|
|
}
|
|
|
|
.answertop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: red;
|
|
padding: 30rpx;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
border: 1px solid #0095e5;
|
|
background-color: #0095e5;
|
|
color: #fff;
|
|
border-bottom: none
|
|
}
|
|
|
|
.answercenter {}
|
|
|
|
.answertitle {
|
|
padding: 30rpx;
|
|
line-height: 1.8;
|
|
font-family: "宋体";
|
|
color: rgba(0, 0, 0, 0.8);
|
|
/* font-weight: bold; */
|
|
|
|
}
|
|
|
|
.answertitle span {
|
|
background-color: #2754a5;
|
|
display: inline-block;
|
|
padding: 0rpx 20rpx;
|
|
color: #fff;
|
|
margin-right: 10rpx;
|
|
border-radius: 10rpx;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.answertitle span.more {
|
|
background-color: cadetblue;
|
|
}
|
|
|
|
.borderb {
|
|
display: inline-block;
|
|
width: 10rpx;
|
|
border-bottom: 1px solid #666;
|
|
}
|
|
|
|
.answercheck {
|
|
padding: 30rpx;
|
|
padding-top: 0rpx;
|
|
}
|
|
|
|
.answeritem {
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
border: 4rpx solid #fff;
|
|
border-radius: 20rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.answeritem.active,
|
|
.answeritem.wrong {
|
|
border: 4rpx solid #0095e5;
|
|
}
|
|
|
|
.answeritem.correct {
|
|
border: 4rpx solid green;
|
|
}
|
|
|
|
.answeritem span {
|
|
display: inline-block;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border: 2px solid #999;
|
|
color: #999;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 10rpx
|
|
}
|
|
|
|
.answeritem.active span,
|
|
.answeritem.wrong span {
|
|
border: 2px solid #0095e5;
|
|
background-color: #0095e5;
|
|
color: #fff;
|
|
}
|
|
|
|
.answeritem.correct span {
|
|
border: 2px solid green;
|
|
background-color: green;
|
|
color: #fff;
|
|
}
|
|
|
|
.answerbottom {
|
|
padding: 30rpx;
|
|
padding-top: 10rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.answerbottom span {
|
|
display: inline-block;
|
|
width: 10rpx;
|
|
height: 50rpx;
|
|
border-radius: 10rpx;
|
|
background-color: green;
|
|
vertical-align: middle;
|
|
margin-right: 20rpx
|
|
}
|
|
|
|
.submit {
|
|
width: 50%;
|
|
margin: 30px auto;
|
|
// margin-bottom: -250rpx;
|
|
position: relative;
|
|
z-index: 9
|
|
}
|
|
|
|
.answertip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
/* padding-top:397rpx;
|
|
padding-bottom:300rpx; */
|
|
z-index: 9;
|
|
}
|
|
|
|
.answertipitem {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 77%;
|
|
}
|
|
|
|
.answrap {
|
|
/* background: url(../../static/answertipbg1.png); */
|
|
width: 483rpx;
|
|
height: 563rpx;
|
|
background-size: 100% 100%;
|
|
font-size: 28rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.answrap100 {
|
|
/* background: url(../../static/answertipbg.png); */
|
|
height: 612rpx;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.ansscore {
|
|
padding-top: 120rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.ansflag {
|
|
/* background: url(../../static/answer100flag.png); */
|
|
width: 119%;
|
|
height: 164rpx;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 240rpx;
|
|
left: -56rpx;
|
|
}
|
|
|
|
.answrap100 .ansflag {
|
|
top: 290rpx;
|
|
}
|
|
|
|
.ansicon {
|
|
position: absolute;
|
|
left: 235rpx;
|
|
top: -20rpx;
|
|
}
|
|
|
|
.ansicon80 {
|
|
position: absolute;
|
|
left: 165rpx;
|
|
top: -80rpx;
|
|
}
|
|
|
|
/* .answer100>view:first-child{
|
|
margin-top: 236rpx;
|
|
margin-left: 210rpx;
|
|
} */
|
|
.answerBtn {
|
|
/* margin-top: 236rpx;
|
|
margin-left: 210rpx; */
|
|
/* display:flex;
|
|
margin-top:100rpx;
|
|
margin-left:80rpx */
|
|
text-align: center;
|
|
/* margin-top: 120rpx; */
|
|
position: absolute;
|
|
top: 355rpx;
|
|
left: 0rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.answrap100 .answerBtn {
|
|
top: 410rpx;
|
|
}
|
|
|
|
.answerBtn view {
|
|
box-shadow: 1rpx 7rpx 18rpx 0rpx #2754a5;
|
|
color: #333;
|
|
padding: 16rpx 60rpx;
|
|
margin: 10rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 10rpx;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.answerBtn view:last-child {
|
|
color: #fff;
|
|
background: linear-gradient(90deg, to right, #2754a5, #2b83bb);
|
|
}
|
|
|
|
.answertip span.ansfont {
|
|
color: #0095e5;
|
|
font-size: 90rpx;
|
|
}
|
|
|
|
.answer80 {
|
|
/* background: url(../../static/answer80.png); */
|
|
width: 483rpx;
|
|
height: 641rpx;
|
|
background-size: 100% 100%;
|
|
}
|
|
</style> |