walk-suzhou-wx/pages/answer/answer copy.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="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">
				(答题{{(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" 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;
	}

	.bg-bottom {
		height: 628rpx !important;
		width: 100vw;
		background: url(../../static/xtdk/index-bg-bottom.png) no-repeat top left;
		background-size: 100% 100%;
		position: absolute;
		bottom: 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>