|
|
<template>
|
|
|
<div class="body">
|
|
|
<!-- <div class="bkg">
|
|
|
<u-image :lazy-load="false" :show-loading="false" mode="aspectFill" height="100vh" width="100vw"
|
|
|
:src="require('../../static/xtdk/answer-bg.png')"></u-image>
|
|
|
<u-image class="bg-bottom" :lazy-load="false" :show-loading="false" mode="aspectFill"
|
|
|
:src="require('../../static/xtdk/index-bg-bottom.png')"></u-image>
|
|
|
|
|
|
</div> -->
|
|
|
<div class="bottom">
|
|
|
|
|
|
</div>
|
|
|
<div class="container" :class="{'container_has':changebottom}">
|
|
|
<!-- <div class="container__bkg">
|
|
|
<u-image :lazy-load="false" :show-loading="false" width="100%" height="100%" mode="scaleToFill"
|
|
|
src="//cdn.langye.net/h5hssnx/answer-container-bkg.png"></u-image>
|
|
|
</div> -->
|
|
|
<div class="title">
|
|
|
(答题{{(now+1)}}/{{answers.length}})
|
|
|
</div>
|
|
|
|
|
|
<transition name="answering" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
|
<div :style="{ 'display': progress !== 1 ? 'none' : '' }" v-show="progress === 1">
|
|
|
<div class="question">
|
|
|
{{ questionTitle }}
|
|
|
</div>
|
|
|
<div class="answers">
|
|
|
<!-- -->
|
|
|
<div class="answers__item" :class="{ 'answers__item-active': index === flag,'unclickable': flag>-1}" v-for="(item, index) in questionAnswers"
|
|
|
@click="$u.throttle(() => answer(item, index))"
|
|
|
>
|
|
|
<div class="answers__item--num" :class="{ 'answers__item--num-active': index === flag }">
|
|
|
{{num(item.myindex)}}</div>
|
|
|
<div class="answers__item--text" :class="{ 'answers__item--text-active': index === flag }">
|
|
|
{{item.title}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div v-if="answers.length>0" class="answers_correct">正确答案：{{ correctAnswer }}</div> -->
|
|
|
</div>
|
|
|
|
|
|
</transition>
|
|
|
|
|
|
<transition name="answer-result" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
|
<div :style="{ 'display': progress !== 2 ? 'none' : '' }" class="answers correct"
|
|
|
v-show="progress === 2">
|
|
|
<template v-if="isCorrect">
|
|
|
<div class="answers__img">
|
|
|
<u-image :show-loading="false" mode="widthFix" :width="137" :height="261"
|
|
|
:src="require('@/static/xtdk/answer-correct.png')"></u-image>
|
|
|
</div>
|
|
|
|
|
|
<div class="answers__text">
|
|
|
恭喜你，答对了！
|
|
|
</div>
|
|
|
<div class="answers__text">
|
|
|
正确答案：{{ correctAnswer }}
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div class="answers__img">
|
|
|
<u-image :show-loading="false" mode="heightFix" :width="137" :height="261"
|
|
|
:src="require('@/static/xtdk/answer-wrong.png')"></u-image>
|
|
|
</div>
|
|
|
<div class="answers__text">
|
|
|
再接再厉！
|
|
|
</div>
|
|
|
<div class="answers__text">
|
|
|
正确答案：{{ correctAnswer }}
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<div class="answers__btn" @click="$u.throttle(next)">
|
|
|
<u-image :show-loading="false" mode="widthFix" :width="342" :height="96"
|
|
|
:src="require('@/static/xtdk/answer-next-btn.png')"></u-image>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
|
|
|
<transition name="answer-end" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
|
<div :style="{ 'display': progress !== 3 ? 'none' : '' }" class="answers correct"
|
|
|
v-show="progress === 3">
|
|
|
<div class="answers__img">
|
|
|
<u-image mode="widthFix" :width="answerImgWidth" :src="answerImg"></u-image>
|
|
|
</div>
|
|
|
<template>
|
|
|
<template v-if="isCorrect">
|
|
|
<div class="answers__text">
|
|
|
恭喜你，答对了！
|
|
|
</div>
|
|
|
<div class="answers__text">
|
|
|
正确答案：{{ correctAnswer }}
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
|
|
|
<div class="answers__text">
|
|
|
再接再厉！
|
|
|
</div>
|
|
|
<div class="answers__text">
|
|
|
正确答案：{{ correctAnswer }}
|
|
|
</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
|
|
|
<template>
|
|
|
<template v-if="!isTotalEnd">
|
|
|
<!-- <div class="answers__text answers__result">
|
|
|
打卡成功，已完成<span>{{ totalDone }}</span>个红色场馆的打卡，
|
|
|
完成{{ detail.points ? detail.points.length : 0}}家红色场馆打卡即可获得<span>荣誉证书</span>
|
|
|
</div> -->
|
|
|
|
|
|
<div class="answers__btn" @click="$u.throttle(toMap)">
|
|
|
<u-image mode="widthFix" :width="342"
|
|
|
:src="require('@/static/xtdk/answer-home-btn.png')"></u-image>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<!-- <div class="answers__text answers__result">
|
|
|
打卡成功，已完成所有红色场馆的打卡。 <br>快来生成你的证书吧!
|
|
|
</div> -->
|
|
|
|
|
|
<div class="answers__btn" @click="$u.throttle(toCertificate)">
|
|
|
<u-image mode="widthFix" :width="342"
|
|
|
:src="require('@/static/xtdk/answer-certificate-btn.png')"></u-image>
|
|
|
</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
isTotalEnd: false, //是否完成所有打卡
|
|
|
detail: {},
|
|
|
now: 0,
|
|
|
nowAnswer: {},
|
|
|
answers: [],
|
|
|
myAnswers: [], //回答答案数组
|
|
|
isCorrect: false,
|
|
|
|
|
|
progress: 1, //1答题中2答案3结束
|
|
|
flag: -1, //显示active index
|
|
|
correctAnswer:'',
|
|
|
signInfo:'',
|
|
|
changebottom:false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
async getDetail() {
|
|
|
const res = await this.$u.api.getPoints()
|
|
|
this.detail = res
|
|
|
},
|
|
|
async getQuestions(id) {
|
|
|
const res = await this.$u.api.getQuestions({
|
|
|
point_id: id
|
|
|
})
|
|
|
|
|
|
this.answers = res.questions
|
|
|
},
|
|
|
|
|
|
answer(item, index) {
|
|
|
this.correctAnswer = ''
|
|
|
this.flag = index
|
|
|
|
|
|
this.myAnswers.push({
|
|
|
question_id: this.answers[this.now].id,
|
|
|
answer_ids: item.id
|
|
|
})
|
|
|
this.isCorrect = !!item.is_correct
|
|
|
let correct = this.answers[this.now]?.options?.find(i => i.is_correct)
|
|
|
this.correctAnswer = `${this.num(correct?.myindex)}、${correct?.title}`
|
|
|
setTimeout(() => {
|
|
|
|
|
|
this.progress = this.now === (this.answers?.length - 1) ? 3 : 2
|
|
|
this.changebottom = true
|
|
|
// this.correctAnswer = ''
|
|
|
if (this.progress === 3) {
|
|
|
this.isTotalEnd = this.detail.points?.length == this.totalDone
|
|
|
this.$u.api.saveQuiz({
|
|
|
point_id: this.$route.query?.id ? this.$route.query.id : this.vuex_point_id,
|
|
|
answers: this.myAnswers
|
|
|
})
|
|
|
}
|
|
|
}, 500)
|
|
|
},
|
|
|
|
|
|
next() {
|
|
|
this.now++
|
|
|
this.flag = -1
|
|
|
this.progress = 1
|
|
|
this.changebottom = false
|
|
|
},
|
|
|
|
|
|
toMap() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/map/map'
|
|
|
})
|
|
|
},
|
|
|
async getPoster () {
|
|
|
const res = await this.$u.api.getPoster({
|
|
|
user_id: this.vuex_user.id,
|
|
|
type: 2
|
|
|
})
|
|
|
this.signInfo = res
|
|
|
},
|
|
|
async toCertificate() {
|
|
|
await this.getPoster()
|
|
|
if (!this.signInfo?.upload) {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/sign/sign'
|
|
|
})
|
|
|
}else{
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/certificate/certificate'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
answerImgWidth() {
|
|
|
if (this.isTotalEnd) {
|
|
|
return 137
|
|
|
}
|
|
|
if (this.isCorrect) {
|
|
|
return 137
|
|
|
}
|
|
|
return 137
|
|
|
},
|
|
|
answerImg() {
|
|
|
// if (this.isTotalEnd) {
|
|
|
// return require('@/static/xtdk/answer-correct.png')
|
|
|
// }
|
|
|
if (this.isCorrect) {
|
|
|
return require('@/static/xtdk/answer-correct.png')
|
|
|
}
|
|
|
return require('@/static/xtdk/answer-wrong.png')
|
|
|
},
|
|
|
totalDone() {
|
|
|
if (this.detail && this.detail.points) {
|
|
|
let id = this.$route.query?.id ? this.$route.query.id : this.vuex_point_id
|
|
|
let point = this.detail.points.find(i => i.id == id)
|
|
|
return point?.has_answer > 0 ? this.detail.point_answer_total : this.detail.point_answer_total + 1
|
|
|
}
|
|
|
return 1
|
|
|
},
|
|
|
|
|
|
// correctAnswer() {
|
|
|
// let correct = this.answers[this.now]?.options?.find(i => i.is_correct)
|
|
|
// return `${this.num(correct?.myindex)}、${correct?.title}`
|
|
|
// },
|
|
|
questionTitle() {
|
|
|
return this.answers[this.now]?.title
|
|
|
},
|
|
|
questionAnswers() {
|
|
|
return this.answers[this.now]?.options?.sort((a, b) => {
|
|
|
return a.myindex - b.myindex
|
|
|
})
|
|
|
},
|
|
|
|
|
|
num() {
|
|
|
return function(index) {
|
|
|
let map = new Map([
|
|
|
[1, 'A'],
|
|
|
[2, 'B'],
|
|
|
[3, 'C'],
|
|
|
[4, 'D'],
|
|
|
[5, 'E'],
|
|
|
[6, 'F'],
|
|
|
[7, 'G'],
|
|
|
[8, 'H'],
|
|
|
[9, 'I'],
|
|
|
])
|
|
|
return map.get(index)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
containerTitle() {
|
|
|
return function(number) {
|
|
|
let chineseNumber = "";
|
|
|
let chineseDigits = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
|
|
|
let chineseUnits = ["", "十", "百", "千", "万", "亿"];
|
|
|
|
|
|
if (number === 0) {
|
|
|
return chineseDigits[0];
|
|
|
}
|
|
|
|
|
|
let digits = [];
|
|
|
while (number > 0) {
|
|
|
digits.push(number % 10);
|
|
|
number = Math.floor(number / 10);
|
|
|
}
|
|
|
|
|
|
let unitIndex = 0;
|
|
|
for (let i = 0; i < digits.length; i++) {
|
|
|
let digit = digits[i];
|
|
|
let unit = chineseUnits[unitIndex];
|
|
|
|
|
|
if (digit === 0) {
|
|
|
if (unit === "万" || unit === "亿") {
|
|
|
chineseNumber = chineseUnits[unitIndex] + chineseNumber;
|
|
|
unitIndex++;
|
|
|
}
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
chineseNumber = chineseDigits[digit] + unit + chineseNumber;
|
|
|
unitIndex++;
|
|
|
|
|
|
if (unitIndex === 5) {
|
|
|
unitIndex = 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return `第${chineseNumber}题`;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.getQuestions(option.id);
|
|
|
this.getDetail();
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.body {
|
|
|
// padding: 100rpx 20rpx 0 20rpx;
|
|
|
background: url(../../static/xtdk/answer-bg.png) no-repeat top left;
|
|
|
background-size: 100% 100%;
|
|
|
background-color: #fdd5d6;
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
overflow: scroll;
|
|
|
}
|
|
|
.bottom{
|
|
|
height: 628rpx;
|
|
|
width: 100vw;
|
|
|
background: url(../../static/xtdk/index-bg-bottom.png) no-repeat top left;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
.bkg {
|
|
|
|
|
|
z-index: -1;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
min-height: 690rpx;
|
|
|
// padding-bottom: 96rpx;
|
|
|
// position: relative;
|
|
|
position: relative;
|
|
|
z-index:2;
|
|
|
width:90%;
|
|
|
background-color: #f9f6f6;
|
|
|
border-radius:40rpx;
|
|
|
margin:0 auto;
|
|
|
box-shadow: 0px 0px 20px -10px #d22425;
|
|
|
margin-top:40rpx;
|
|
|
padding-bottom:51rpx;
|
|
|
&__bkg {
|
|
|
|
|
|
z-index: 0;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
|
|
|
& .title {
|
|
|
// width: 51%;
|
|
|
// text-align: center;
|
|
|
// font-size: 50rpx;
|
|
|
// font-weight: 400;
|
|
|
// color: #FFFFFF;
|
|
|
|
|
|
// padding: 15rpx 0rpx;
|
|
|
// z-index: 1;
|
|
|
// position: relative;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
background-color: red;
|
|
|
padding:30rpx;
|
|
|
border-radius: 40rpx 40rpx 0 0 ;
|
|
|
border: 1px solid #d22425;
|
|
|
background-color: #d22425;
|
|
|
color:#fff;
|
|
|
border-bottom:none
|
|
|
}
|
|
|
|
|
|
& .question {
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
font-size: 35rpx;
|
|
|
|
|
|
margin-top: 40rpx;
|
|
|
padding: 0 51rpx;
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
& .correct {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
& .answers_correct{
|
|
|
margin:0 51rpx;
|
|
|
border-left:3px solid #d22425;
|
|
|
padding-left:15rpx;
|
|
|
color:#333333;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
& .answers {
|
|
|
& .unclickable{
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
// margin-top: 30rpx;
|
|
|
padding: 51rpx;
|
|
|
// padding-bottom:60rpx;
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
|
|
|
&__item {
|
|
|
display: flex;
|
|
|
// justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
align-items: center;
|
|
|
padding:20rpx;
|
|
|
background-color: #fff;
|
|
|
border:4rpx solid #fff;
|
|
|
border-radius: 20rpx;
|
|
|
color:#666666;
|
|
|
&-active{
|
|
|
border:4rpx solid #d22425;
|
|
|
}
|
|
|
&+div {
|
|
|
|
|
|
margin-top: 34rpx;
|
|
|
}
|
|
|
|
|
|
&--num {
|
|
|
// font-weight: 500;
|
|
|
// color: #666666;
|
|
|
// font-size: 32rpx;
|
|
|
// text-align: center;
|
|
|
// width: 60rpx;
|
|
|
// height: 60rpx;
|
|
|
// line-height: 60rpx;
|
|
|
// background: #fff;
|
|
|
// border: 1px solid #F85352;
|
|
|
// border-radius: 50%;
|
|
|
// transition: all 0.2s;
|
|
|
|
|
|
// margin-right: 13rpx;
|
|
|
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;
|
|
|
|
|
|
&-active {
|
|
|
background: #d22425;
|
|
|
border:2px solid #d22425;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&--text {
|
|
|
// line-height: 60rpx;
|
|
|
// flex: 1;
|
|
|
// font-weight: 500;
|
|
|
// font-size: 32rpx;
|
|
|
// color: #666;
|
|
|
// background: #fff;
|
|
|
// border: 1px solid #F85352;
|
|
|
// border-radius: 0 20rpx 20rpx 20rpx;
|
|
|
// transition: all 0.2s;
|
|
|
|
|
|
// padding: 0 54rpx;
|
|
|
|
|
|
// &-active {
|
|
|
// background: #F85352;
|
|
|
// color: #fff;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
&__text {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666666;
|
|
|
margin-top: 30rpx;
|
|
|
// margin-bottom: 20rpx;
|
|
|
text-align: center;
|
|
|
//line-height: 135rpx;
|
|
|
|
|
|
&>span {
|
|
|
font-size: 34rpx;
|
|
|
color: #C52A34;
|
|
|
}
|
|
|
}
|
|
|
&__btn{
|
|
|
margin-top:30rpx;
|
|
|
margin-bottom:50rpx;
|
|
|
}
|
|
|
|
|
|
&__result {
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
font-size: 20rpx;
|
|
|
line-height: 36rpx;
|
|
|
word-break: break-word;
|
|
|
|
|
|
padding: 0 calc(127rpx - 51rpx);
|
|
|
padding-top: 38rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.container_has{
|
|
|
background-image:url(../../static/xtdk/answer-bg-bottom.png);
|
|
|
background-color: #fff;
|
|
|
background-position: bottom left;
|
|
|
background-size: 100% 130rpx;
|
|
|
background-repeat:no-repeat;
|
|
|
}
|
|
|
.fade-in {
|
|
|
animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
|
}
|
|
|
|
|
|
@keyframes fade-in {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fade-out {
|
|
|
animation: fade-out .4s ease-out both;
|
|
|
}
|
|
|
|
|
|
@keyframes fade-out {
|
|
|
0% {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
</style> |
