feat: 课程详情新增答题提示框和明日再来提示框

pages/course/components/answerFloatBox.vue

@@ -5,7 +5,7 @@
 			<view v-if="~~typeNum === 1" class="pointsOkTextClass">
 				已得<text class="pointsNumTextClass">{{pointsNum}}</text>积分
 			</view>
-			<view v-if="~~typeNum === 2" class="pointsOkTowTextClass">
+			<view v-if="~~typeNum === 2" class="pointsOkTowTextClass" @tap="handleShowTomorrowTip">
 				<text>未答对\n明天再来</text>
 			</view>
 			<view v-if="~~typeNum === 3" class="pointsOkTowTextClass">
@@ -37,6 +37,9 @@
 		methods: {
 			handleShowAnswerMethods() {
 				this.$emit('handleShowAnswer')
+			},
+			handleShowTomorrowTip() {
+				this.$emit('showTomorrowTipMethods')
 			}
 		}
 	}

pages/course/components/answerPromptPopup.vue

@@ -0,0 +1,132 @@
+<template>
+	<u-popup :show="showPopup" mode="center" round="30" @close="close">
+		<view class="dialog-box">
+			<template v-if="~~typeStatus === 1">
+				<view class="dialog-title">恭喜你，回答正确</view>
+				<view class="points-text">
+					获得<text class="red-num">20</text>积分，自动到账
+				</view>
+			</template>
+			<template v-if="~~typeStatus === 2">
+				<view class="dialog-title">很遗憾答错了</view>
+				<view class="points-text">请继续努力哦</view>
+			</template>
+			<template v-if="~~typeStatus === 3">
+				<view class="dialog-title">今天答题次数已用完</view>
+				<view class="points-text">明天再来哦</view>
+			</template>
+			<view class="tips-text">每节课拥有3次答题机会</view>
+			<view v-if="~~typeStatus === 1" class="btn primary-btn">前往积分商城兑换</view>
+			<view class="btn outline-btn" @tap="close">继续观看</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false
+			},
+			typeStatus: {
+				type: Number,
+				default: 1, //提示类型：1、回答正确，2、回答错误，3、答题次数用完
+			}
+		},
+		data() {
+			return {
+				showPopup: false,
+			}
+		},
+		watch: {
+			isShow(newVal) {
+				this.showPopup = newVal
+			}
+		},
+
+		methods: {
+			// 关闭弹框
+			close() {
+				this.$emit('closeMethod')
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@mixin u-flex($flexD, $alignI, $justifyC) {
+		display: flex;
+		flex-direction: $flexD;
+		align-items: $alignI;
+		justify-content: $justifyC;
+	}
+
+	.dialog-box {
+		width: calc(100vw - 160rpx);
+		min-height: 440rpx;
+		background: #ffffff;
+		border-radius: 30rpx;
+		padding: 40rpx 40rpx 60rpx;
+		box-sizing: border-box;
+		@include u-flex(column, center, center);
+	}
+
+	/* 标题文字 */
+	.dialog-title {
+		font-weight: 600;
+		font-size: 40rpx;
+		color: #000000;
+		margin-bottom: 40rpx;
+	}
+
+	/* 积分文字行 */
+	.points-text {
+		font-weight: 600;
+		font-size: 36rpx;
+		color: rgba(0, 0, 0, 0.85);
+		line-height: 50rpx;
+		margin-bottom: 36rpx;
+	}
+
+	/* 红色积分数字 */
+	.red-num {
+		font-weight: 600;
+		font-size: 56rpx;
+		color: #FF233C;
+	}
+
+	/* 底部灰色小字 */
+	.tips-text {
+		font-weight: 400;
+		font-size: 32rpx;
+		color: rgba(0, 0, 0, 0.65);
+		margin-bottom: 40rpx;
+	}
+
+	/* 按钮通用样式 */
+	.btn {
+		width: 390rpx;
+		height: 84rpx;
+		line-height: 78rpx;
+		text-align: center;
+		font-size: 32rpx;
+		border-radius: 42rpx;
+		margin-bottom: 32rpx;
+		font-weight: 600;
+	}
+
+	/* 红色实心主按钮 */
+	.primary-btn {
+		background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
+		color: #ffffff;
+	}
+
+	/* 红色边框空心按钮 */
+	.outline-btn {
+		border: 2rpx solid #FF233C;
+		color: #FF233CFF;
+		background: transparent;
+		margin-bottom: 0;
+	}
+</style>

pages/course/info.vue

@@ -409,10 +409,17 @@
 			:smsNum="data.commentNum" :title="data.commentNum+'条评论'" :type="1" radius="32" maxHeight="1200">
 		</popupBottom>
 
-		<answerFloatBox :typeNum="4" @handleShowAnswer="handleAnswerMethods" />
+		<!-- 右侧悬浮框 -->
+		<answerFloatBox :typeNum="4" @handleShowAnswer="handleAnswerMethods"
+			@showTomorrowTipMethods="handleTomorrowTipMethods" />
 
+		<!-- 答题弹窗 -->
 		<questionsPopup :isShow="isShowQuestions" :typeStatus="1" @closeMethod="questionsCloseMethod"
 			@submitAnswer="handleSubmitAnswer" />
+
+		<!-- 答题提示框和明日再来提示框 -->
+		<answerPromptPopup :isShow="isShowAnswerPrompt" :typeStatus="answerPromptType"
+			@closeMethod="isShowAnswerPrompt = false" />
 	</view>
 </template>
 
@@ -449,6 +456,7 @@
 	import adMask from "@/components/adMask/adMask.vue"
 	import answerFloatBox from "./components/answerFloatBox.vue"
 	import questionsPopup from "./components/questionsPopup.vue"
+	import answerPromptPopup from "./components/answerPromptPopup.vue"
 
 	export default {
 		mixins: [MescrollCompMixin],
@@ -459,7 +467,8 @@
 			hallItem,
 			adMask,
 			answerFloatBox,
-			questionsPopup
+			questionsPopup,
+			answerPromptPopup
 		},
 		data() {
 			return {
@@ -475,6 +484,8 @@
 				videoId: null,
 				isLearning: false,
 				isShowQuestions: false,
+				isShowAnswerPrompt: false,
+				answerPromptType: 1,
 				inputContent: '',
 				newCommentList: [{
 						avatar: "",
@@ -762,7 +773,21 @@
 				this.isShowQuestions = false
 			},
 			// 点击提交答案后
-			handleSubmitAnswer() {},
+			handleSubmitAnswer() {
+				if (true) {
+					// 答对
+					this.answerPromptType = 1
+				} else {
+					// 答错
+					this.answerPromptType = 2
+				}
+				this.isShowAnswerPrompt = true
+			},
+			// 点击提示明日再来
+			handleTomorrowTipMethods() {
+				this.answerPromptType = 3
+				this.isShowAnswerPrompt = true
+			},
 			sendCommentMsg() {},
 			endCountsTime() {
 				if (this.timer) {