|
|
<template>
|
|
|
<div class="body">
|
|
|
<div class="bkg">
|
|
|
<u-image :lazy-load="false" :show-loading="false" mode="aspectFill" height="100vh" width="100vw" src="//cdn.langye.net/h5hssnx/answer-bkg.png"></u-image>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<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">
|
|
|
{{ containerTitle(now+1) }}
|
|
|
</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" 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>
|
|
|
</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="194" src="//cdn.langye.net/h5hssnx/correct.png"></u-image>
|
|
|
</div>
|
|
|
|
|
|
<div class="answers__text">
|
|
|
恭喜你，答对了！
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div class="answers__img">
|
|
|
<u-image :show-loading="false" mode="widthFix" :width="194" src="//cdn.langye.net/h5hssnx/error.png"></u-image>
|
|
|
</div>
|
|
|
|
|
|
<div class="answers__text">
|
|
|
正确答案：{{ correctAnswer }}
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<div class="answers__btn" @click="$u.throttle(next)">
|
|
|
<u-image :show-loading="false" mode="widthFix" :width="381" src="//cdn.langye.net/h5hssnx/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>
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
<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="381" :src="require('@/static/back-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="381" :src="require('@/static/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
|
|
|
};
|
|
|
},
|
|
|
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.flag = index
|
|
|
this.myAnswers.push({
|
|
|
question_id: this.answers[this.now].id,
|
|
|
answer_ids: item.id
|
|
|
})
|
|
|
this.isCorrect = !!item.is_correct
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
this.progress = this.now === (this.answers?.length - 1) ? 3 : 2
|
|
|
|
|
|
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
|
|
|
},
|
|
|
|
|
|
toMap () {
|
|
|
uni.navigateTo({ url:'/pages/map/map' })
|
|
|
},
|
|
|
|
|
|
toCertificate () {
|
|
|
uni.navigateTo({ url:'/pages/certificate/certificate'})
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
answerImgWidth () {
|
|
|
if (this.isTotalEnd) {
|
|
|
return 370
|
|
|
}
|
|
|
if (this.isCorrect) {
|
|
|
return 194
|
|
|
}
|
|
|
return 184
|
|
|
},
|
|
|
answerImg () {
|
|
|
if (this.isTotalEnd) {
|
|
|
return require('@/static/error2.png')
|
|
|
}
|
|
|
if (this.isCorrect) {
|
|
|
return require('@/static/correct.png')
|
|
|
}
|
|
|
return require('@/static/error.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;
|
|
|
}
|
|
|
.bkg {
|
|
|
|
|
|
z-index: -1;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
min-height: 790rpx;
|
|
|
|
|
|
padding-bottom: 96rpx;
|
|
|
position: relative;
|
|
|
&__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;
|
|
|
}
|
|
|
|
|
|
& .question {
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
font-size: 35rpx;
|
|
|
|
|
|
margin-top: 96rpx;
|
|
|
padding: 0 51rpx;
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
& .correct {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
& .answers {
|
|
|
|
|
|
margin-top: 58rpx;
|
|
|
padding: 0 51rpx;
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
&__item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
|
|
|
& + 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;
|
|
|
&-active {
|
|
|
background: #F85352;
|
|
|
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;
|
|
|
padding-top: 52rpx;
|
|
|
text-align: center;
|
|
|
//line-height: 135rpx;
|
|
|
|
|
|
& > span {
|
|
|
font-size: 34rpx;
|
|
|
color: #C52A34;
|
|
|
}
|
|
|
}
|
|
|
&__result {
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
font-size: 20rpx;
|
|
|
line-height: 36rpx;
|
|
|
word-break: break-word;
|
|
|
|
|
|
padding: 0 calc(127rpx - 51rpx);
|
|
|
padding-top: 38rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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>
|
