fix: 调整视频详情视频观看倒计时-答题条件

pages/course/components/answerFloatBox.vue

@@ -3,7 +3,7 @@
 		<image src="/static/image/hall/baoxiang_icon.png" mode="aspectFill"></image>
 		<view class="complaintViewTextClass">
 			<view v-if="~~typeNum === 1" class="pointsOkTextClass">
-				已得<text class="pointsNumTextClass">{{pointsNum}}</text>积分
+				已得<text class="pointsNumTextClass">{{ pointsNum }}</text>积分
 			</view>
 			<view v-if="~~typeNum === 2" class="pointsOkTowTextClass" @tap="handleShowTomorrowTip">
 				<text>未答对\n明天再来</text>
@@ -14,101 +14,115 @@
 			</view>
 			<view v-if="~~typeNum === 4" class="pointsOkTowTextClass">
 				<text>
-					<text>再观看2:20</text>\n答题得奖励
+					<text v-if="remainSeconds > 0">再观看{{ formatTime(remainSeconds) }}\n</text>答题得奖励
 				</text>
-				<view class="answerBtnClass" @tap="handleShowAnswerMethods">答题</view>
+				<view v-if="remainSeconds <= 0" class="answerBtnClass" @tap="handleShowAnswerMethods">答题</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		props: {
-			typeNum: {
-				type: Number,
-				default: 1, //悬浮框类型：1、已得积分，2、未答对明天再来，3、未答对继续答题，4、答题得奖励
-			},
-			pointsNum: {
-				type: Number,
-				default: 20, //已得积分数量
-			}
+export default {
+	props: {
+		typeNum: {
+			type: Number,
+			default: 1, //悬浮框类型：1、已得积分，2、未答对明天再来，3、未答对继续答题，4、答题得奖励
+		},
+		pointsNum: {
+			type: Number,
+			default: 20, //已得积分数量
+		},
+		// 父组件传：剩余秒数
+		remainSeconds: {
+			type: Number,
+			default: 0
+		},
+	},
+	methods: {
+		handleShowAnswerMethods() {
+			this.$emit('handleShowAnswer')
 		},
-		methods: {
-			handleShowAnswerMethods() {
-				this.$emit('handleShowAnswer')
-			},
-			handleShowTomorrowTip() {
-				this.$emit('showTomorrowTipMethods')
+		handleShowTomorrowTip() {
+			this.$emit('showTomorrowTipMethods')
+		},
+		// 秒数 → 分:秒 格式
+		formatTime(seconds) {
+			if (seconds <= 0) {
+				return '00:00'
 			}
-		}
+			const m = Math.floor(seconds / 60)
+			const s = seconds % 60
+			return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+		},
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@mixin u-flex($flexD, $alignI, $justifyC) {
-		display: flex;
-		flex-direction: $flexD;
-		align-items: $alignI;
-		justify-content: $justifyC;
-	}
+@mixin u-flex($flexD, $alignI, $justifyC) {
+	display: flex;
+	flex-direction: $flexD;
+	align-items: $alignI;
+	justify-content: $justifyC;
+}
 
-	.complaintViewClass {
-		@include u-flex(column, center, center);
-		position: fixed;
-		right: 34rpx;
-		bottom: 400rpx;
+.complaintViewClass {
+	@include u-flex(column, center, center);
+	position: fixed;
+	right: 34rpx;
+	bottom: 400rpx;
 
-		image {
-			width: 210rpx;
-			height: 90rpx;
-		}
-
-		.complaintViewTextClass {
-			@include u-flex(column, center, center);
-			margin-top: -15rpx;
-			z-index: 10;
-			width: 210rpx;
-			min-height: 120rpx;
-			background: linear-gradient(180deg, #FFF9DC 0%, #FFDC97 100%);
-			border-radius: 20rpx;
-			border: 2rpx solid linear-gradient(180deg, rgba(255, 228, 105, 1), rgba(255, 178, 30, 1));
-			padding: 10rpx 10rpx 20rpx;
-			box-sizing: border-box;
-			text-align: center;
-			overflow: hidden;
-		}
+	image {
+		width: 210rpx;
+		height: 90rpx;
 	}
 
-	.pointsOkTextClass {
-		font-weight: 400;
-		font-size: 28rpx;
-		color: #FF2E3F;
-		line-height: 40rpx;
+	.complaintViewTextClass {
+		@include u-flex(column, center, center);
+		margin-top: -15rpx;
+		z-index: 10;
+		width: 210rpx;
+		min-height: 120rpx;
+		background: linear-gradient(180deg, #FFF9DC 0%, #FFDC97 100%);
+		border-radius: 20rpx;
+		border: 2rpx solid linear-gradient(180deg, rgba(255, 228, 105, 1), rgba(255, 178, 30, 1));
+		padding: 10rpx 10rpx 20rpx;
+		box-sizing: border-box;
+		text-align: center;
+		overflow: hidden;
 	}
+}
 
-	.pointsNumTextClass {
-		font-weight: 600;
-		font-size: 56rpx;
-		color: #FF2E3F;
-	}
+.pointsOkTextClass {
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #FF2E3F;
+	line-height: 40rpx;
+}
 
-	.pointsOkTowTextClass {
-		font-weight: 600;
-		font-size: 32rpx;
-		color: #FF2E3F;
-	}
+.pointsNumTextClass {
+	font-weight: 600;
+	font-size: 56rpx;
+	color: #FF2E3F;
+}
 
-	.answerBtnClass {
-		width: 150rpx;
-		height: 60rpx;
-		background: linear-gradient(135deg, #FF515F 0%, #F72234 100%);
-		border-radius: 30rpx;
-		margin-top: 10rpx;
-		font-weight: 600;
-		font-size: 32rpx;
-		color: #FFF2C3;
-		line-height: 55rpx;
-		text-align: center;
-	}
+.pointsOkTowTextClass {
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FF2E3F;
+}
+
+.answerBtnClass {
+	width: 150rpx;
+	height: 60rpx;
+	background: linear-gradient(135deg, #FF515F 0%, #F72234 100%);
+	border-radius: 30rpx;
+	margin-top: 10rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FFF2C3;
+	line-height: 55rpx;
+	text-align: center;
+}
 </style>

pages/course/info.vue

@@ -411,7 +411,7 @@
 		</popupBottom>
 
 		<!-- 右侧悬浮框 -->
-		<answerFloatBox :typeNum="4" @handleShowAnswer="handleAnswerMethods"
+		<answerFloatBox :typeNum="4" :remainSeconds="pageEntryRequiredTime" @handleShowAnswer="handleAnswerMethods"
 			@showTomorrowTipMethods="handleTomorrowTipMethods" />
 
 		<!-- 答题弹窗 -->
@@ -619,8 +619,7 @@ export default {
 			socket: null,
 			// 页面一进入-答题奖励相关
 			pageEntryTimer: null, // 页面一进入-答题奖励计时器
-			pageEntryDuration: 0, // 页面一进入-答题奖励当前累计计时（秒）
-			pageEntryRequiredTime: 0, // 页面一进入-答题奖励当前小节后台设定的奖励时间（秒）
+			pageEntryRequiredTime: 0, // 页面一进入-答题奖励当前小节后台设定的奖励时间（秒）(倒计时总时长)
 			hasGotPageEntryReward: false, // 页面一进入-答题奖励当前小节是否已领取奖励
 			isSocketOpen: false,
 			isSend: true,
@@ -666,11 +665,6 @@ export default {
 			this.checkFavorite();
 			this.getNewCommentArrList();
 			this.checkLike();
-
-			// 一进入页面显示时启动答题奖励计时器（需要先获取当前章节ID）
-			if (this.pickCatalog.videoId) {
-				this.startPageEntryTimer(this.pickCatalog.videoId);
-			}
 			// #ifndef H5
 			uni.onKeyboardHeightChange(this.keyboardHeightChange);
 			// #endif
@@ -842,52 +836,40 @@ export default {
 				this.allLookTimer = null;
 			}
 		},
+		// 检查章节奖励领取状态
+		checkPageEntryStatus(videoId) {
+			// 检查该章节是否已领取章节奖励
+			this.hasGotPageEntryReward = false;
+			// 启动答题奖励计时器（需要先获取当前章节ID）
+			console.log('欧克111',this.pageEntryRequiredTime)
+			if (videoId && !this.hasGotPageEntryReward) {
+				this.startPageEntryTimer();
+			}
+		},
 		// 启动章节奖励计时器
-		startPageEntryTimer(videoId) {
+		startPageEntryTimer() {
 			// 如果已领取章节奖励，不再计时
 			if (this.hasGotPageEntryReward) {
 				return;
 			}
 
-			// 如果切换了章节，重置计时
-			if (this.videoId !== videoId) {
-				this.resetPageEntryTimer();
-				this.videoId = videoId;
-				// 获取该章节的奖励时间（假设后台接口返回）
-				this.getPageEntryRequiredTime(videoId);
-			}
+			// 启动前或切换章节都先重置计时
+			this.resetPageEntryTimer();
 
 			// 如果章节奖励计时器已在运行，不再重复启动
 			if (this.pageEntryTimer) {
 				return;
 			}
-
+			console.log('欧克',this.pageEntryRequiredTime)
 			// 每秒计时
 			this.pageEntryTimer = setInterval(() => {
-				this.pageEntryDuration++;
-				console.log(`当前章节奖励计时: ${this.pageEntryDuration}秒，目标: ${this.pageEntryRequiredTime}秒`);
+				this.pageEntryRequiredTime--;
+				console.log(`当前章节奖励剩余计时: ${this.pageEntryRequiredTime}秒`);
 
 				// 检查是否满足章节奖励条件
 				this.checkPageEntryCondition();
 			}, 1000);
 		},
-		// 获取章节奖励所需时间（模拟后台接口）
-		getPageEntryRequiredTime(videoId) {
-			// TODO: 调用后台接口获取该章节的章节奖励时间（单位：分钟）
-			// 这里先模拟一个默认值，实际应该从接口获取
-			// 假设后台返回的是分钟，转换为秒
-			const requiredMinutes = 5; // 示例：5分钟
-			this.pageEntryRequiredTime = requiredMinutes * 60;
-
-			// 同时检查该章节是否已领取章节奖励
-			this.checkPageEntryStatus(videoId);
-		},
-		// 检查章节奖励领取状态
-		checkPageEntryStatus(videoId) {
-			// TODO: 调用后台接口检查该章节是否已领取章节奖励
-			// 这里先模拟未领取状态
-			this.hasGotPageEntryReward = false;
-		},
 		// 检查章节奖励条件
 		checkPageEntryCondition() {
 			if (this.hasGotPageEntryReward) {
@@ -895,7 +877,7 @@ export default {
 				return;
 			}
 
-			if (this.pageEntryDuration >= this.pageEntryRequiredTime) {
+			if (this.pageEntryRequiredTime <= 0) {
 				// 满足条件，领取章节奖励
 				this.getPageEntryReward();
 			}
@@ -913,7 +895,7 @@ export default {
 				this.hasGotPageEntryReward = true;
 				this.stopPageEntryTimer();
 				uni.showToast({
-				title: '恭喜获得章节奖励！',
+					title: '恭喜获得章节奖励！',
 					icon: 'success'
 				});
 				// } else {
@@ -939,9 +921,9 @@ export default {
 		// 重置章节奖励计时
 		resetPageEntryTimer() {
 			this.stopPageEntryTimer();
-			this.pageEntryDuration = 0;
 			this.hasGotPageEntryReward = false;
 		},
+
 		getCourseInfo() {
 			this.showDes = false
 			getCourseById(this.courseId).then(res => {
@@ -1450,6 +1432,14 @@ export default {
 				type: type
 			});
 			this.pickCatalog = this.catalogueList[index];
+			console.log(6666, this.pickCatalog)
+			// 获取章节奖励所需时间
+			// this.pageEntryRequiredTime = Number(this.pickCatalog.watchDurationMinutes) * 60;
+			this.pageEntryRequiredTime = Number(0.5) * 60;
+			console.log(`倒计时目标: ${this.pageEntryRequiredTime}秒`)
+			// 同时检查该章节是否已领取章节奖励
+			this.checkPageEntryStatus(this.pickCatalog.videoId);
+
 			this.pickCatalog.isFast = this.data.isFast
 			this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog
 				.packageJson) : []