|
|
<template>
|
|
|
<view class='wrap'>
|
|
|
<view class='detail'>
|
|
|
<view class="detail-audio" v-if="detailInfo.video">
|
|
|
<view class="detail-audio-text">{{detailInfo.video?splitName(detailInfo.video.original_name):''}}</view>
|
|
|
<view class="detail-audio-play">
|
|
|
|
|
|
<free-audio startPic='../../static/detail-play.png' endPic='../../static/detail-stop.png'
|
|
|
audioId='audio1' :url="detailInfo.video?detailInfo.video.url:''"></free-audio>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="detail-answer" v-if="question_list.length>0">
|
|
|
<view v-for="(item,index) in question_list">
|
|
|
<view class="detail-answer-item" v-if="index===currentIndex">
|
|
|
<view class='detail-answer-item-title'>
|
|
|
<span :class="{'detail-answer-item-title-more':item.type_name==='多选题'}">{{item.type_name}}</span>
|
|
|
<text v-html="item.title"></text>
|
|
|
</view>
|
|
|
<view class='detail-answer-answer'>
|
|
|
<view :class="{'detail-answer-answer-active':q.flag,
|
|
|
'detail-answer-answer-disbaled':showAnswer,
|
|
|
'detail-answer-answer-correct':q.is_correct===1&&showAnswer,
|
|
|
'detail-answer-answer-wrong':q.is_correct===0&&q.flag,}"
|
|
|
class="detail-answer-answer-item"
|
|
|
@click="answerChoose(item,q,qindex)" v-for="(q,qindex) in item.options">
|
|
|
<span>{{answerNum[qindex]}}</span>
|
|
|
<span>{{q.title}}</span>
|
|
|
</view>
|
|
|
<view class="detail-answer-answer-correctAnswer" v-if="showAnswer">
|
|
|
正确答案：{{item.correctAnswer.join("、")}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="detail-btn" v-if="!isSubmit">
|
|
|
<view v-if="currentIndex<question_list.length-1" class="detail-btn-next" @click="next">
|
|
|
下一题
|
|
|
</view>
|
|
|
<view v-else class="detail-btn-next" :class="{'detail-btn-disabled':isSubmit}" @click="submit">
|
|
|
完成打卡
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="detail-btn" v-else>
|
|
|
<view class="detail-btn-next" @click="goMap">
|
|
|
返回地图
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import freeAudio from '@/components/free-audio.vue'
|
|
|
import {toast} from '@/common/util.js'
|
|
|
export default {
|
|
|
components: {
|
|
|
freeAudio
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
detailInfo: {},
|
|
|
question_list: [],
|
|
|
currentIndex: 0,
|
|
|
answerNum: ["A", "B", "C", "D", "E", "F", "G", "H"],
|
|
|
myAnswers:[],
|
|
|
hasAnswer:false,
|
|
|
// goBack:false,
|
|
|
showAnswer:false,
|
|
|
isSubmit:false,
|
|
|
isNext:false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
async getDetail(id) {
|
|
|
const res = await this.$u.api.pointDetail({
|
|
|
id:id
|
|
|
})
|
|
|
this.detailInfo = res.points
|
|
|
},
|
|
|
splitName(str){
|
|
|
if(str.indexOf(".")>-1){
|
|
|
return str.split(".")[0]
|
|
|
}else{
|
|
|
return str
|
|
|
}
|
|
|
},
|
|
|
async getQuestion() {
|
|
|
let res = await this.$u.api.getQuestions()
|
|
|
res.questions.map(item => {
|
|
|
let type = 0
|
|
|
item.correctAnswer = []
|
|
|
|
|
|
item.options.map(i => {
|
|
|
i.flag = false
|
|
|
if (i.is_correct === 1) {
|
|
|
type++
|
|
|
item.correctAnswer.push(this.answerNum[i.myindex - 1])
|
|
|
}
|
|
|
})
|
|
|
item.type_name = type > 1 ? '多选题' : '单选题'
|
|
|
item.title = this.replaceAtSymbolsWithSpan(item.title)
|
|
|
})
|
|
|
this.question_list = res.questions
|
|
|
console.log(this.question_list)
|
|
|
},
|
|
|
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>'
|
|
|
);
|
|
|
},
|
|
|
answerChoose(item,q,qindex){
|
|
|
this.hasAnswer = false
|
|
|
if(item.type_name==='单选题'){
|
|
|
item['options'].map((item1,index1)=>{
|
|
|
item1.flag = false
|
|
|
if(qindex===index1){
|
|
|
q.flag = true
|
|
|
this.hasAnswer = true
|
|
|
}
|
|
|
})
|
|
|
}else if(item.type_name==='多选题'){
|
|
|
q.flag = !q.flag
|
|
|
item['options'].map((item1,index1)=>{
|
|
|
if(item1.flag===true){
|
|
|
this.hasAnswer = true
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
next(){
|
|
|
if(!this.hasAnswer){
|
|
|
toast('请先答题')
|
|
|
return
|
|
|
}
|
|
|
if(this.isNext){
|
|
|
return
|
|
|
}
|
|
|
this.isNext = true
|
|
|
if(this.currentIndex==this.question_list.length-1){
|
|
|
uni.showLoading({title:'提交中'})
|
|
|
|
|
|
}
|
|
|
this.showAnswer = true
|
|
|
let answer_id = []
|
|
|
let that = this
|
|
|
this.question_list[this.currentIndex]['options'].map(item=>{
|
|
|
if(item.flag===true){
|
|
|
answer_id.push(item.id)
|
|
|
}
|
|
|
})
|
|
|
this.myAnswers.push({
|
|
|
question_id: this.question_list[this.currentIndex].id,
|
|
|
answer_ids: answer_id.join('｜')
|
|
|
})
|
|
|
|
|
|
setTimeout(function(){
|
|
|
if(that.currentIndex==that.question_list.length-1){
|
|
|
that.$u.api.saveQuiz({
|
|
|
point_id: that.$route.query?.id,
|
|
|
answers: that.myAnswers
|
|
|
}).then(res=>{
|
|
|
uni.hideLoading()
|
|
|
that.isSubmit = true
|
|
|
toast("打卡成功")
|
|
|
// toast('打卡成功',1000,function(){
|
|
|
// setTimeout(function(){
|
|
|
// uni.redirectTo({
|
|
|
// url:'/pages/map/map'
|
|
|
// })
|
|
|
// },500)
|
|
|
|
|
|
// })
|
|
|
|
|
|
})
|
|
|
// .then(res=>{
|
|
|
// uni.hideLoading()
|
|
|
// that.isSubmit = false
|
|
|
// })
|
|
|
}else{
|
|
|
that.currentIndex++
|
|
|
that.showAnswer = false
|
|
|
that.hasAnswer = false
|
|
|
that.isNext = false
|
|
|
}
|
|
|
},1000)
|
|
|
|
|
|
|
|
|
// if(this.currentIndex<this.question_list.length-1){
|
|
|
// setTimeout(function(){
|
|
|
// that.currentIndex++
|
|
|
|
|
|
// this.$u.api.saveQuiz({
|
|
|
// point_id: this.$route.query?.id,
|
|
|
// answers: this.myAnswers
|
|
|
// }).then(res=>{
|
|
|
// toast('打卡成功')
|
|
|
// this.goBack = true
|
|
|
// })
|
|
|
// this.showAnswer = false
|
|
|
|
|
|
// },2000)
|
|
|
|
|
|
// }else{
|
|
|
// console.log(this.myAnswers)
|
|
|
// console.log("okk")
|
|
|
// this.$u.api.saveQuiz({
|
|
|
// point_id: this.$route.query?.id,
|
|
|
// answers: this.myAnswers
|
|
|
// }).then(res=>{
|
|
|
// toast('打卡成功')
|
|
|
// this.goBack = true
|
|
|
// })
|
|
|
// }
|
|
|
|
|
|
|
|
|
},
|
|
|
submit(){
|
|
|
this.next()
|
|
|
},
|
|
|
goMap(){
|
|
|
uni.redirectTo({
|
|
|
url:'/pages/map/map'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
console.log("this.vuex_point_id",this.vuex_point_id)
|
|
|
this.getDetail(option.id)
|
|
|
this.getQuestion()
|
|
|
|
|
|
},
|
|
|
onUnload() { //普通页面在 onUnload 生命周期中执行
|
|
|
uni.$emit('stop')
|
|
|
console.log("onUnload")
|
|
|
},
|
|
|
onHide() { //tabBar页面在onHide生命周期中执行
|
|
|
uni.$emit('stop')
|
|
|
console.log("onHide")
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
uni.$emit('stop')
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.wrap {
|
|
|
background: url(../../static/detail-bg1.png) top left;
|
|
|
background-size: 100% 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
overflow: scroll;
|
|
|
padding: 20rpx;
|
|
|
padding-top: 125rpx;
|
|
|
// padding-bottom:0;
|
|
|
.detail {
|
|
|
&-audio {
|
|
|
background: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 30rpx 20rpx;
|
|
|
min-height: 200rpx;
|
|
|
|
|
|
&-text {
|
|
|
color: #000000;
|
|
|
font-size: 32rpx;
|
|
|
padding-left:30rpx;
|
|
|
}
|
|
|
}
|
|
|
&-answer{
|
|
|
background: #fff;
|
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
|
padding: 30rpx 20rpx;
|
|
|
margin-top:30rpx;
|
|
|
&-item{
|
|
|
border-bottom:1px solid #ddd;
|
|
|
margin:0 -20rpx;
|
|
|
margin-bottom:30rpx;
|
|
|
&-title{
|
|
|
padding:30rpx;
|
|
|
line-height: 1.8;
|
|
|
font-family: "宋体";
|
|
|
color: rgba(0,0,0,0.8);
|
|
|
span{
|
|
|
background-color: #d7b245;
|
|
|
display: inline-block;
|
|
|
padding:0rpx 20rpx;
|
|
|
color:#fff;
|
|
|
margin-right:10rpx;
|
|
|
border-radius: 10rpx;
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
&-more{
|
|
|
background-color: cadetblue;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&-answer{
|
|
|
padding:30rpx;
|
|
|
padding-top:0;
|
|
|
&-item{
|
|
|
padding:20rpx 30rpx;
|
|
|
border:2px solid transparent;
|
|
|
border-radius:20rpx;
|
|
|
margin-bottom:20rpx;
|
|
|
span:first-child{
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
&-disbaled{
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
&-active{
|
|
|
border:2px solid #d22425;
|
|
|
span:first-child{
|
|
|
border:2px solid #d22425;
|
|
|
background:#d22425;
|
|
|
color:#fff;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
&-correct{
|
|
|
border:2px solid #56b81b;
|
|
|
span:first-child{
|
|
|
border:2px solid #56b81b;
|
|
|
background:#56b81b;
|
|
|
color:#fff;
|
|
|
}
|
|
|
}
|
|
|
&-wrong{
|
|
|
border:2px solid #d22425;
|
|
|
span:first-child{
|
|
|
border:2px solid #d22425;
|
|
|
background:#d22425;
|
|
|
color:#fff;
|
|
|
}
|
|
|
}
|
|
|
&-correctAnswer{
|
|
|
color:#333333;
|
|
|
padding-left:34rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
&-btn{
|
|
|
|
|
|
&-next{
|
|
|
box-shadow: 0.5px 3px 9px 0px rgba(235,107,85,0.3);
|
|
|
background:#e50015;
|
|
|
border-radius: 44rpx;
|
|
|
text-align: center;
|
|
|
height:88rpx;
|
|
|
color:#fff;
|
|
|
line-height: 88rpx;
|
|
|
font-size: 34rpx;
|
|
|
}
|
|
|
&-disabled{
|
|
|
background:#ddd;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</style> |
