walk-suzhou-wx/pages/detail/detail.vue

<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>