xietaitai-shop-wx/pages/answer/answer.vue

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