kpsz-answer-h5/pages/answer/index.vue

<template>
	<view class='wrap'>
		<view class="top">
			<view class='logintitle'>
				<image src="@/static/login_logo.png" mode="aspectFit"></image>
			</view>
		</view>

		<view class="answerwrap">
			<!-- 倒计时圆形进度条 -->
			<view class="timer-circle-wrapper">
				<view class="timer-circle">
					<svg class="timer-svg" viewBox="0 0 100 100">
						<circle class="timer-circle-bg" cx="50" cy="50" r="43" fill="none" stroke="#c3c8ca" stroke-width="7"></circle>
						<circle 
							class="timer-circle-progress" 
							cx="50" 
							cy="50" 
							r="43" 
							fill="none" 
							stroke="#4f79f1" 
							stroke-width="7"
							:stroke-dasharray="`${2 * Math.PI * 43 * (45 - seconds) / 45}, ${2 * Math.PI * 43}`"
							stroke-linecap="round"
							transform="rotate(-90 50 50)"
						></circle>
					</svg>
					<view class="timer-inner">
						<view class="timer-text">{{seconds}}</view>
					</view>
				</view>
			</view>
			
			<view>
				<view class='answercenter'>
					<!-- 连续答对提示 -->
					<view v-if="showStreakTip" class="streak-tip" :class="{ 'show': streakTipShow }" :key="streakCount">
						<text class="streak-text">连续答对 <text class="streak-num">X{{streakCount}}</text></text>
					</view>
					<view class='answertitle'>
						<view class="title-line">
							<view class="question-number">{{questionIndex+1}}/5</view>
							<view class="hasspan">
								<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
								<text v-html="question_list[questionIndex]?replaceAtSymbolsWithSpan(question_list[questionIndex]['title']):''"></text>
							</view>
						</view>
					</view>
					<view class='answercheck'
						v-for="(ans,ansindex) in question_list[questionIndex]?question_list[questionIndex].options:[]"
						:key="`${questionIndex}-${ans.id || ansindex}`">
						<view 
							@click="chooseAnswer(ans,ansindex)"
							:class="['answeritem-wrapper', {'active':ans.flag}, {'correct':ans.isanswer}, {'wrong':ans.iswrong}]">
							<view class="answeritem">
								<view class="answer-letter">{{answerNum[ansindex]}}</view>
								<text class="answer-text">{{ans.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='submit'>
				<u-button v-if="!answerSubmit" size="mini" :throttle-time="1000" shape="circle" type="default" :custom-style="parStyle"
					@click="nextQue">下一题</u-button>
				<u-button v-if="answerSubmit" size="mini" :throttle-time="1000" shape="circle" type="default" :custom-style="parStyle"
					@click="nextQue">提交</u-button>
			</view>
		</view>
		
		<!-- 答题结果弹窗 -->
		<view v-show="showResult" class="result-popup" @click.stop>
			<view class="result-content">
				<image 
					:src="isAllCorrect ? require('@/static/answer_right.png') : require('@/static/answer_error.png')" 
					class="result-image"
					mode="aspectFit"
				></image>
				<view class="result-text">
					<text v-if="isAllCorrect">恭喜你！全部答对了！</text>
					<text v-else>答对 <text class="correct-num">{{correctNum}}</text> 题！继续努力</text>
				</view>
				<view class="result-buttons">
					<u-button 
						v-if="isAllCorrect"
						size="mini" 
						:throttle-time="1000" 
						shape="circle" 
						type="default" 
						:custom-style="parStyle"
						@click="goToPrize"
					>立即抽奖</u-button>
					<u-button 
						v-else
						size="mini" 
						:throttle-time="1000" 
						shape="circle" 
						type="default" 
						:custom-style="parStyle"
						@click="continueAnswer"
					>继续答题</u-button>
					<u-button 
						size="mini" 
						:throttle-time="1000" 
						shape="circle" 
						type="default" 
						:custom-style="parStyle"
						@click="goBack"
					>返回</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isNull,
		toast
	} from "@/common/util.js"
	export default {
		data() {
			return {
				parStyle: {
					'background': 'linear-gradient(to right, #58b3fe, #446efd)',
					'color': '#fff',
					'font-size': '32rpx',
					'padding': '30rpx',
					'width': '100%',
					'height': '90rpx'
				},
				seconds: 45,
				timer: null,
				question_list: [],
				questionIndex: 0,
				answercount: 0, //第几次答题
				maxCount: 2,
				answerNum: ["A", "B", "C", "D", "E", "F", "G", "H"],
				myAnswer: [],
				correctNum: 0, // 答对的题目数量
				correctScore: 0, // 得分
				correctAnswer: '', // 正确答案
				answerSubmit: false, // 最后一题
				hasFlag: false, // 是否选中
				showAnswer: false,
				timeicon: '',
				logintitle: '',

				isanswer: false, // 控制答案结束前不能点击到下一题
				islock: false,
				showResult: false, // 控制结果弹窗显示
				isAllCorrect: false, // 是否全部答对
				streakCount: 0, // 连续答对数量
				showStreakTip: false, // 是否显示连续答对提示
				streakTipShow: false, // 控制动画触发
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
			this.getQuestion()
			this.startTimer()
		},
		onUnload() {
			clearTimeout(this.timer)
		},
		methods: {
			async getUserInfo() {
				const res = await this.$u.api.user()
				this.$u.vuex('vuex_user', res);
				this.userInfo = res;
				if (isNull(res.mobile)) {
					uni.redirectTo({
						url: '/pages/login/index'
					})
				}
			},
			async getQuestion() {
				let that = this
				const res = await this.$u.api.questions()
				let data = res.questions
				data.map(item => {
					let type = 0
					item.correctAnswer = []
					item.options.map(i => {
						i.flag = false
						i.isanswer = false
						i.iswrong = false
						if (i.is_correct === 1) {
							type++
							item.correctAnswer.push(that.answerNum[i.myindex - 1])
						}
					})
					item.type_name = type > 1 ? '多选题' : '单选题'
					console.log("item.type_name",item.type_name)
				})
				console.log("data",data)
				this.question_list = data
			},
			
			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>'
					);
			},
			chooseAnswer(ans, ansindex) {
				// 如果已经显示了正确答案，不允许用户再点击
				if (this.isanswer) {
					return
				}
				
				this.hasFlag = false
				if (this.question_list[this.questionIndex]['type_name'] === '单选题') {
					this.question_list[this.questionIndex]['options'].map(item => {
						item.flag = false
					})
					ans.flag = !ans.flag
					this.hasFlag = true
					// ans.flag = !ans.flag
				} else {
					ans.flag = !ans.flag
					this.question_list[this.questionIndex]['options'].map(item => {
						if (item.flag == true) {
							this.hasFlag = true
						}
					})
				}
				console.log("hasFlag", this.hasFlag)
			},
			submitQue() {
				let that = this
				if (this.myAnswer.length > 0) {
					let count = 0
					this.myAnswer.map(item => {
						if (item.isCorrect === true) {
							count++
						}
					})
					this.correctNum = count
					this.correctScore = (count / 5) * 100 // 总共5题
				} else {
					this.correctScore = 0
					this.correctNum = 0
				}
				this.islock = true
				clearInterval(this.timer)
				
				// 判断是否全部答对
				this.isAllCorrect = this.correctNum === 5
				
				// 提交答案
				this.$u.api.saveQuestion({
					score: this.correctScore,
					answers: this.myAnswer
				}).then(res=>{
					// 显示结果弹窗
					this.showResult = true
				}).catch(err => {
					console.error('提交答案失败:', err)
					// 即使提交失败也显示结果
					this.showResult = true
				})

			},
			goToPrize() {
				uni.redirectTo({
					url: '/pages/prize/index'
				})
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/me/me'
				})
			},
			continueAnswer() {
				// 重新加载当前页面
				uni.reLaunch({
					url: '/pages/answer/index'
				})
			},
			nextQue() {
				let that = this
				// this.isanswer = false
				if (this.isanswer) {
					return
				}
				if (!this.hasFlag) {
					toast("请先选择答案")
					return
				}
				this.hasFlag = false
				if (this.questionIndex > 4) {
					this.answerSubmit = true
					return
				}

				let ansid = []
				let count = 0
				this.question_list[this.questionIndex]['options'].map(item => {
					if (item.flag === true) {
						ansid.push(item.id)
					}

					if (!item.flag && item.is_correct === 1) {
						count++
					}

				})
				let isCurrentCorrect = count === 0 // 当前题目是否答对
				
				this.myAnswer.push({
					question_id: this.question_list[this.questionIndex]['id'],
					answer_ids: ansid.join("|"),
					isCorrect: isCurrentCorrect
				})

				this.correctAnswer = this.question_list[this.questionIndex]['correctAnswer'].join(',')

				// 判断选择的是否正确  加样式
				this.question_list[this.questionIndex]['options'].map(item => {
					if (item.is_correct === 1) {
						item.isanswer = true
					} else if (item.flag == true && item.is_correct === 0) {
						item.iswrong = true
					}
				})
				this.isanswer = true
				if (that.answerSubmit) {
					that.submitQue()
					return
				}
				setTimeout(function() {
					that.correctAnswer = ''
					that.isanswer = false
					
					// 判断是否答对，更新连续答对数
					if (isCurrentCorrect) {
						that.streakCount++
						// 如果连续答对1题以上，显示提示
						if (that.streakCount > 0) {
							// 先重置动画状态
							that.streakTipShow = false
							that.showStreakTip = true
							// 等待 DOM 更新后触发动画
							that.$nextTick(() => {
								setTimeout(() => {
									that.streakTipShow = true
									// 2秒后自动隐藏
									setTimeout(() => {
										that.streakTipShow = false
										setTimeout(() => {
											that.showStreakTip = false
										}, 300) // 等待动画完成
									}, 2000)
								}, 10)
							})
						}
					} else {
						// 答错了，重置连续答对数
						that.streakCount = 0
						that.streakTipShow = false
						that.showStreakTip = false
					}
					
					that.questionIndex++
					
					// 重置选项状态
					if (that.question_list[that.questionIndex]) {
						that.question_list[that.questionIndex]['options'].map(item => {
							item.flag = false
							item.isanswer = false
							item.iswrong = false
						})
					}
					
					// 强制更新视图，确保选项正确渲染
					that.$nextTick(() => {
						that.$forceUpdate()
					})
					
					// 重置倒计时
					that.resetTimer()
					if (that.questionIndex >= 4) {
						that.answerSubmit = true
						// return
					}
				}, 1500)

			},
			startTimer() {
				// 每题45秒倒计时
				this.seconds = 45
				this.timer = setInterval(() => {
					if (this.seconds > 0) {
						this.seconds--
					} else {
						clearInterval(this.timer)
						if (!this.islock) {
							// 倒计时结束，检查是否已作答
							if (!this.hasFlag) {
								// 未作答，自动显示正确答案并记录为错误
								this.autoNextQuestion()
							} else {
								// 已作答，正常提交
								this.submitQue()
							}
						}
					}
				}, 1000)
			},
			autoNextQuestion() {
				// 倒计时结束未作答，自动显示正确答案并跳转
				let that = this
				
				// 显示正确答案
				this.question_list[this.questionIndex]['options'].forEach((item, index) => {
					if (item.is_correct === 1) {
						// 使用 $set 确保响应式更新
						this.$set(this.question_list[this.questionIndex]['options'][index], 'isanswer', true)
					}
				})
				this.isanswer = true
				
				// 强制更新视图，确保样式生效
				this.$forceUpdate()
				
				// 记录为错误（未作答）
				this.myAnswer.push({
					question_id: this.question_list[this.questionIndex]['id'],
					answer_ids: "",
					isCorrect: false
				})
				
				// 未作答，重置连续答对数
				this.streakCount = 0
				this.streakTipShow = false
				this.showStreakTip = false
				
				// 1.5秒后自动跳转到下一题
				setTimeout(function() {
					that.isanswer = false
					
					// 检查是否是最后一题
					if (that.questionIndex >= 4) {
						// 最后一题，直接提交
						that.submitQue()
					} else {
						// 不是最后一题，跳转到下一题
						that.questionIndex++
						
						// 重置选项状态
						if (that.question_list[that.questionIndex]) {
							that.question_list[that.questionIndex]['options'].map(item => {
								item.flag = false
								item.isanswer = false
								item.iswrong = false
							})
						}
						
						// 强制更新视图，确保选项正确渲染
						that.$nextTick(() => {
							that.$forceUpdate()
						})
						
						// 重置倒计时
						that.resetTimer()
						
						if (that.questionIndex >= 4) {
							that.answerSubmit = true
						}
					}
				}, 1500)
			},
			resetTimer() {
				// 重置倒计时为45秒
				clearInterval(this.timer)
				this.seconds = 45
				this.startTimer()
			},
			countdown(duration, onTick, onEnd) {
				let remainingTime = duration * 60;

				const tick = () => {
					if (remainingTime > -1) {
						const minutes = Math.floor(remainingTime / 60);
						const seconds = remainingTime % 60;
						onTick(minutes, seconds);
						remainingTime--;
						this.timer = setTimeout(tick, 1000);
					} else {
						console.log("remainingTime", remainingTime)
						console.log("2--", this.islock)
						onEnd();
					}
				};
				tick();
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		/* height: 100%; */
		width: 100%;
		height: 100vh;
		width: 100vw;
		background-image: url('../../static/login_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		overflow: scroll;
	}

	.top {
		width: 100%;
		// height: 440rpx;
		/* background-image: url('../../static/bgtop1.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom:30rpx;
		// position: relative;
		// top: 0;
		// left: 0
	}

	.logintitle {
		padding-top: 100rpx;
		padding-left:60rpx;
		&>image{
			width: 489rpx;
			height: 244rpx;
		}
	}

	.bottom {
		width: 100%;
		height: 533rpx;
		/* background-image: url('../../static/bgbottom.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		bottom: 0;
		left: 0
	}

	.answerwrap {
		position: relative;
		z-index: 2;
		width: 90%;
		background-color: #eff8fd;
		border-radius: 40rpx;
		margin: 0 auto;
		box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.1);
		padding-bottom: 40rpx;
		margin-top: 50rpx;
	}
	
	.timer-circle-wrapper {
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		
		.timer-circle {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			
			.timer-svg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100rpx;
				height: 100rpx;
				transform: rotate(0deg);
			}
			
			.timer-inner {
				position: relative;
				z-index: 2;
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.timer-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #4f79f1;
			}
		}
		
	}

	.answercenter {
		position: relative;
		
		.streak-tip {
			position: absolute;
			right: 30rpx;
			top: 40rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			z-index: 11;
			
			.streak-icon {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #4cd964;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			
			.streak-text {
				font-size: 28rpx;
				color: #333;
				white-space: nowrap;
				opacity: 0;
				transform: translateX(-30rpx);
				transition: opacity 0.3s ease-out, transform 0.3s ease-out;
			}
			
			.streak-num {
				color: #4f79f1;
				font-weight: bold;
			}
			
			&.show .streak-text {
				opacity: 1;
				transform: translateX(0);
			}
		}
	}

	.answertitle {
		padding: 100rpx 30rpx 30rpx;
		line-height: 1.8;
		font-family: "宋体";
		color: rgba(0, 0, 0, 0.8);
		
		.title-line {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			font-size: 32rpx;
			.question-number {
				font-size: 32rpx;
				color: #4f79f1;
				font-weight: bold;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
		}
	}

	.answertitle .hasspan {
		flex: 1;
		min-width: 0;
	}
	
	.answertitle .question-type {
		color: #4f79f1;
		font-size: 32rpx;
		flex-shrink: 0;
		margin-left: 10rpx;
	}

	.borderb {
		display: inline-block;
		width: 10rpx;
		border-bottom: 1px solid #666;
	}

	.answercheck {
		padding: 30rpx;
		padding-top: 0rpx;
		
		&:last-child .answeritem-wrapper {
			margin-bottom: 0;
		}
	}

	.answeritem-wrapper {
		margin-bottom: 20rpx;
		border-radius: 100rpx;
		padding: 4rpx 20rpx;
		background-color: #fff;
		border: 4rpx solid transparent;
		transition: border-color 0.3s, background-color 0.3s;
		box-sizing: border-box;
	}

	.answeritem-wrapper.active {
		border: 4rpx solid #4f79f1;
		background-color: #fff;
	}

	.answeritem-wrapper.wrong {
		border: 4rpx solid #ff0000;
		background-color: #fff;
	}

	.answeritem-wrapper.correct {
		border: 4rpx solid #4f79f1;
		background-color: #fff;
	}

	.answeritem {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 46rpx;
		color: #333;
		display: flex;
		align-items: center;
		
		.answer-letter {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 50rpx;
			height: 50rpx;
			background-color: #4f79f1;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			flex-shrink: 0;
		}
		
		.answer-text {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
	}

	.submit {
		width: 50%;
		margin: 0rpx auto;
		position: relative;
		z-index: 9;
		padding-bottom: 40rpx;
		margin-top:40rpx;
	}

	.answertip {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/* padding-top:397rpx;
		padding-bottom:300rpx; */
		z-index: 9;
	}

	.answertipitem {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 77%;
	}

	.answrap {
		/* background: url(../../static/answertipbg1.png); */
		width: 483rpx;
		height: 563rpx;
		background-size: 100% 100%;
		font-size: 28rpx;
		width: 100%;
	}

	.answrap100 {
		/* background: url(../../static/answertipbg.png); */
		height: 612rpx;
		background-size: 100% 100%;
		width: 100%;
	}

	.ansscore {
		padding-top: 120rpx;
		text-align: center;
	}

	.ansflag {
		/* background: url(../../static/answer100flag.png); */
		width: 119%;
		height: 164rpx;
		background-size: 100% 100%;
		position: absolute;
		top: 240rpx;
		left: -56rpx;
	}

	.answrap100 .ansflag {
		top: 290rpx;
	}

	.ansicon {
		position: absolute;
		left: 235rpx;
		top: -20rpx;
	}

	.ansicon80 {
		position: absolute;
		left: 165rpx;
		top: -80rpx;
	}

	/* 	.answer100>view:first-child{
		margin-top: 236rpx;
		margin-left: 210rpx;
	} */
	.answerBtn {
		/* margin-top: 236rpx;
		margin-left: 210rpx; */
		/* display:flex;
		margin-top:100rpx;
		margin-left:80rpx */
		text-align: center;
		/* margin-top: 120rpx; */
		position: absolute;
		top: 355rpx;
		left: 0rpx;
		width: 100%;
	}

	.answrap100 .answerBtn {
		top: 410rpx;
	}

	.answerBtn view {
		box-shadow: 1rpx 7rpx 18rpx 0rpx #2754a5;
		color: #333;
		padding: 16rpx 60rpx;
		margin: 10rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		display: inline-block;

	}

	.answerBtn view:last-child {
		color: #fff;
		background: linear-gradient(90deg, to right, #2754a5, #2b83bb);
	}

	.answertip span.ansfont {
		color: #0095e5;
		font-size: 90rpx;
	}

	.answer80 {
		/* background: url(../../static/answer80.png); */
		width: 483rpx;
		height: 641rpx;
		background-size: 100% 100%;
	}
	
	// 答题结果弹窗
	.result-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.result-content {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.result-image {
			width: 725rpx;
			height: 956rpx;
		}
		
		.result-text {
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translateX(-50%);
			font-size: 40rpx;
			color: #2f6cf6;
			font-weight: bold;
			text-align: center;
			white-space: nowrap;
			
			.correct-num {
				color: #fd9d0c;
				font-weight: bold;
			}
		}
		
		.result-buttons {
			position: absolute;
			top:60%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 30rpx;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 0 50rpx;
			box-sizing: border-box;
			
			::v-deep .u-btn {
				flex: 0 0 auto;
				width: 45%!important;
			}
		}
	}
</style>