ソースを参照

添加选择题目计时

yangg 2 ヶ月 前
コミット
bf35bf8e84

+ 112 - 51
pages/camera/camera.vue

@@ -49,7 +49,11 @@
 					</view>
 
 					<view class="options">
-						<!-- 只渲染非开放问题 (questionType: 1 或 2) -->
+						<!-- 只渲染非开放问题 (questionType: 1 或 2) 'option-wrong': showResult && (
+									currentQuestion.questionType === 1 ? 
+									(selectedOption === index && index !== currentQuestion.correctAnswer) : 
+									(selectedOptions.includes(index) && !currentQuestion.correctAnswers.includes(index))
+								)-->
 						<view 
 							v-if="currentQuestion.questionType !== 0"
 							v-for="(option, index) in currentQuestion.options" 
@@ -60,31 +64,32 @@
 								'option-correct': showResult && (
 									currentQuestion.questionType === 1 ? index === currentQuestion.correctAnswer : currentQuestion.correctAnswers.includes(index)
 								),
-								'option-wrong': showResult && (
-									currentQuestion.questionType === 1 ? 
-									(selectedOption === index && index !== currentQuestion.correctAnswer) : 
-									(selectedOptions.includes(index) && !currentQuestion.correctAnswers.includes(index))
-								)
+								
 							}" 
 							@click="selectOption(index)">
-							<!-- 选项前添加单选/多选标识 -->
-							<text class="option-prefix">{{currentQuestion.questionType === 1 ? '●' : '☐'}}</text>
+							<!-- 使用字母标识 A、B、C、D、E 等 -->
+							<text class="option-prefix">{{ String.fromCharCode(65 + index) }}.</text>
 							<text class="option-text">{{ option.option_text || (typeof option === 'string' ? option : JSON.stringify(option)) }}</text>
 						</view>
 					</view>
 
+					<!-- 添加计时器显示 -->
 					<!-- <view class="timer-container">
-						<text class="timer-text">本题剩余时间 {{remainingTime}}</text>
+						<text class="timer-text">本题剩余({{remainingTime}})</text>
 					</view> -->
 					
-					<button class="next-button" @click="nextQuestion(option)" 
-						:disabled="
-							(currentQuestion.questionType === 0 && openQuestionAnswer.trim() === '') || 
-							(currentQuestion.questionType === 1 && selectedOption === null) || 
-							(currentQuestion.questionType === 2 && selectedOptions.length === 0)
-						">
-						{{showResult ? '下一题' : '提交答案'}}
-					</button>
+					<view class="bottom-button-container">
+						<view class="bottom-button-wrapper">
+							<button class="next-button" @click="nextQuestion(option)" 
+								:disabled="
+									(currentQuestion.questionType === 0 && openQuestionAnswer.trim() === '') || 
+									(currentQuestion.questionType === 1 && selectedOption === null) || 
+									(currentQuestion.questionType === 2 && selectedOptions.length === 0)
+								">
+								本题剩余{{remainingTime}}&nbsp;&nbsp;&nbsp;{{"进入下一题"}}<!-- showResult ? '进入下一题' : '提交答案' -->
+							</button>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -319,17 +324,32 @@
 				// 记录开始时间
 				this.questionStartTime = new Date();
 				
-				// 模拟倒计时
-				let seconds = 30; // 每题30秒
+				// 设置倒计时时间(秒)
+				let seconds = 60; // 每题60秒,可以根据需要调整
+				this.remainingTime = `01:00`;
+				
 				this.timerInterval = setInterval(() => {
 					seconds--;
 					if (seconds <= 0) {
 						clearInterval(this.timerInterval);
-						// 时间到,自动提交答案
+						// 时间到,自动提交答案并进入下一题
 						if (!this.showResult) {
 							this.checkAnswer();
+							// 短暂延迟后自动进入下一题
+							setTimeout(() => {
+								if (this.currentQuestionIndex < this.questions.length - 1) {
+									this.goToNextQuestion();
+								} else {
+									// 如果是最后一题,显示结束模态框或跳转
+									uni.navigateTo({
+										url: '/pages/interview/interview'
+									});
+								}
+							}, 1500); // 1.5秒后自动进入下一题
 						}
 					}
+					
+					// 格式化显示时间
 					const min = Math.floor(seconds / 60).toString().padStart(2, '0');
 					const sec = (seconds % 60).toString().padStart(2, '0');
 					this.remainingTime = `${min}:${sec}`;
@@ -389,25 +409,50 @@
 				
 				// 显示结果
 				this.showResult = true;
+				
+				// 保存当前题目的答案
+				this.saveAnswer();
+				
+				// 提交答案
+				this.submitCurrentAnswer().catch(error => {
+					console.error('提交答案失败:', error);
+				});
 			},
 
 			nextQuestion(data) {
 				// 如果还没有显示结果,先检查答案并提交
 				if (!this.showResult) {
 					this.checkAnswer();
-					// 保存当前题目的答案并立即提交
-					this.saveAnswer(data);
-					this.submitCurrentAnswer(data).then(() => {
-						// 提交成功后显示结果
-						this.showResult = true;
+					
+					// 保存当前题目的答案
+					this.saveAnswer();
+					
+					// 提交答案
+					this.submitCurrentAnswer().then(() => {
+						// 提交成功后,短暂延迟后自动进入下一题
+						setTimeout(() => {
+							// 如果是最后一题,跳转到面试页面
+							if (this.currentQuestionIndex >= this.questions.length - 1) {
+								uni.navigateTo({
+									url: '/pages/interview/interview'
+								});
+							} else {
+								// 否则进入下一题
+								this.goToNextQuestion();
+							}
+						}, 500); // 1秒后自动进入下一题
 					}).catch(error => {
 						console.error('提交答案失败:', error);
-						uni.showToast({
-							title: '提交答案失败,请重试',
-							icon: 'none'
-						});
-						// 即使提交失败也显示结果
-						this.showResult = true;
+						// 即使提交失败也继续下一题
+						setTimeout(() => {
+							if (this.currentQuestionIndex >= this.questions.length - 1) {
+								uni.navigateTo({
+									url: '/pages/interview/interview'
+								});
+							} else {
+								this.goToNextQuestion();
+							}
+						}, 1000);
 					});
 					return;
 				}
@@ -415,19 +460,8 @@
 				// 如果已经显示结果,点击"下一题"按钮时执行
 				// 如果是最后一题,直接跳转到手部照片采集页面
 				if (this.currentQuestionIndex >= this.questions.length - 1) {
-					// 直接跳转到手部照片采集页面,不显示结束模态框
 					uni.navigateTo({
-						url: '/pages/interview/interview', // 假设这是手部照片采集页面的路径
-						success: () => {
-							console.log('成功跳转到手部照片采集页面');
-						},
-						fail: (err) => {
-							console.error('跳转失败:', err);
-							uni.showToast({
-								title: '跳转失败,请手动返回首页',
-								icon: 'none'
-							});
-						}
+						url: '/pages/interview/interview'
 					});
 					return;
 				}
@@ -986,6 +1020,8 @@
 		font-size: 28rpx;
 		transition: all 0.3s;
 		border: 1px solid #e0e0e0;
+		display: flex;
+		align-items: center;
 	}
 
 	.option-selected {
@@ -1008,13 +1044,42 @@
 	}
 	
 	.timer-container {
-		text-align: center;
+		text-align: right;
 		margin: 20rpx 0;
 	}
 	
 	.timer-text {
 		font-size: 24rpx;
 		color: #666;
+		background-color: #f0f0f0;
+		padding: 6rpx 12rpx;
+		border-radius: 6rpx;
+	}
+
+	.bottom-button-container {
+		position: fixed;
+		bottom: 30px;
+		left:7%;
+		right: 0;
+		background-color: #ffffff;
+		/* border-top: 1px solid #e0e0e0; */
+		padding: 20rpx;
+		display: flex;
+		justify-content: center;
+	}
+
+	.bottom-button-wrapper {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.timer-display {
+		font-size: 28rpx;
+		color: #666;
+		padding: 10rpx 20rpx;
+		border-radius: 6rpx;
 	}
 
 	.next-button {
@@ -1022,16 +1087,11 @@
 		color: #ffffff;
 		border-radius: 10rpx;
 		font-size: 30rpx;
-		margin: 20rpx auto;
 		height: 80rpx;
 		line-height: 80rpx;
 		width: 90%;
 		text-align: center;
-	}
-	
-	.next-button[disabled] {
-		background-color: #cccccc;
-		color: #999999;
+		margin: 0;
 	}
 
 	.footer {
@@ -1281,7 +1341,8 @@
 
 	.option-prefix {
 		margin-right: 10rpx;
-		color: #0039b3;
 		font-weight: bold;
+		color: #333;
+		min-width: 30rpx;
 	}
 </style>

+ 44 - 29
unpackage/dist/dev/mp-weixin/pages/camera/camera.js

@@ -160,13 +160,23 @@ const _sfc_main = {
       if (this.questions.length === 0)
         return;
       this.questionStartTime = /* @__PURE__ */ new Date();
-      let seconds = 30;
+      let seconds = 60;
+      this.remainingTime = `01:00`;
       this.timerInterval = setInterval(() => {
         seconds--;
         if (seconds <= 0) {
           clearInterval(this.timerInterval);
           if (!this.showResult) {
             this.checkAnswer();
+            setTimeout(() => {
+              if (this.currentQuestionIndex < this.questions.length - 1) {
+                this.goToNextQuestion();
+              } else {
+                common_vendor.index.navigateTo({
+                  url: "/pages/interview/interview"
+                });
+              }
+            }, 1500);
           }
         }
         const min = Math.floor(seconds / 60).toString().padStart(2, "0");
@@ -213,37 +223,42 @@ const _sfc_main = {
         this.isAnswerCorrect = this.selectedOption === this.currentQuestion.correctAnswer;
       }
       this.showResult = true;
+      this.saveAnswer();
+      this.submitCurrentAnswer().catch((error) => {
+        console.error("提交答案失败:", error);
+      });
     },
     nextQuestion(data) {
       if (!this.showResult) {
         this.checkAnswer();
-        this.saveAnswer(data);
-        this.submitCurrentAnswer(data).then(() => {
-          this.showResult = true;
+        this.saveAnswer();
+        this.submitCurrentAnswer().then(() => {
+          setTimeout(() => {
+            if (this.currentQuestionIndex >= this.questions.length - 1) {
+              common_vendor.index.navigateTo({
+                url: "/pages/interview/interview"
+              });
+            } else {
+              this.goToNextQuestion();
+            }
+          }, 500);
         }).catch((error) => {
           console.error("提交答案失败:", error);
-          common_vendor.index.showToast({
-            title: "提交答案失败,请重试",
-            icon: "none"
-          });
-          this.showResult = true;
+          setTimeout(() => {
+            if (this.currentQuestionIndex >= this.questions.length - 1) {
+              common_vendor.index.navigateTo({
+                url: "/pages/interview/interview"
+              });
+            } else {
+              this.goToNextQuestion();
+            }
+          }, 1e3);
         });
         return;
       }
       if (this.currentQuestionIndex >= this.questions.length - 1) {
         common_vendor.index.navigateTo({
-          url: "/pages/interview/interview",
-          // 假设这是手部照片采集页面的路径
-          success: () => {
-            console.log("成功跳转到手部照片采集页面");
-          },
-          fail: (err) => {
-            console.error("跳转失败:", err);
-            common_vendor.index.showToast({
-              title: "跳转失败,请手动返回首页",
-              icon: "none"
-            });
-          }
+          url: "/pages/interview/interview"
         });
         return;
       }
@@ -528,17 +543,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, $options.currentQuestion.questionType !== 0 ? {
     m: common_vendor.f($options.currentQuestion.options, (option, index, i0) => {
       return {
-        a: common_vendor.t(option.option_text || (typeof option === "string" ? option : JSON.stringify(option))),
-        b: index,
-        c: ($options.currentQuestion.questionType === 1 ? $data.selectedOption === index : $data.selectedOptions.includes(index)) ? 1 : "",
-        d: $data.showResult && ($options.currentQuestion.questionType === 1 ? index === $options.currentQuestion.correctAnswer : $options.currentQuestion.correctAnswers.includes(index)) ? 1 : "",
-        e: $data.showResult && ($options.currentQuestion.questionType === 1 ? $data.selectedOption === index && index !== $options.currentQuestion.correctAnswer : $data.selectedOptions.includes(index) && !$options.currentQuestion.correctAnswers.includes(index)) ? 1 : "",
+        a: common_vendor.t(String.fromCharCode(65 + index)),
+        b: common_vendor.t(option.option_text || (typeof option === "string" ? option : JSON.stringify(option))),
+        c: index,
+        d: ($options.currentQuestion.questionType === 1 ? $data.selectedOption === index : $data.selectedOptions.includes(index)) ? 1 : "",
+        e: $data.showResult && ($options.currentQuestion.questionType === 1 ? index === $options.currentQuestion.correctAnswer : $options.currentQuestion.correctAnswers.includes(index)) ? 1 : "",
         f: common_vendor.o(($event) => $options.selectOption(index), index)
       };
-    }),
-    n: common_vendor.t($options.currentQuestion.questionType === 1 ? "●" : "☐")
+    })
   } : {}, {
-    o: common_vendor.t($data.showResult ? "下一题" : "提交答案"),
+    n: common_vendor.t($data.remainingTime),
+    o: common_vendor.t("进入下一题"),
     p: common_vendor.o(($event) => $options.nextQuestion(_ctx.option)),
     q: $options.currentQuestion.questionType === 0 && $data.openQuestionAnswer.trim() === "" || $options.currentQuestion.questionType === 1 && $data.selectedOption === null || $options.currentQuestion.questionType === 2 && $data.selectedOptions.length === 0,
     r: $data.showEndModal

ファイルの差分が大きいため隠しています
+ 0 - 0
unpackage/dist/dev/mp-weixin/pages/camera/camera.wxml


+ 32 - 7
unpackage/dist/dev/mp-weixin/pages/camera/camera.wxss

@@ -165,6 +165,8 @@
 		font-size: 28rpx;
 		transition: all 0.3s;
 		border: 1px solid #e0e0e0;
+		display: flex;
+		align-items: center;
 }
 .option-selected {
 		background-color: #e6f7ff;
@@ -182,27 +184,49 @@
 		color: #333;
 }
 .timer-container {
-		text-align: center;
+		text-align: right;
 		margin: 20rpx 0;
 }
 .timer-text {
 		font-size: 24rpx;
 		color: #666;
+		background-color: #f0f0f0;
+		padding: 6rpx 12rpx;
+		border-radius: 6rpx;
+}
+.bottom-button-container {
+		position: fixed;
+		bottom: 30px;
+		left:7%;
+		right: 0;
+		background-color: #ffffff;
+		/* border-top: 1px solid #e0e0e0; */
+		padding: 20rpx;
+		display: flex;
+		justify-content: center;
+}
+.bottom-button-wrapper {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+}
+.timer-display {
+		font-size: 28rpx;
+		color: #666;
+		padding: 10rpx 20rpx;
+		border-radius: 6rpx;
 }
 .next-button {
 		background-color: #0039b3;
 		color: #ffffff;
 		border-radius: 10rpx;
 		font-size: 30rpx;
-		margin: 20rpx auto;
 		height: 80rpx;
 		line-height: 80rpx;
 		width: 90%;
 		text-align: center;
-}
-.next-button[disabled] {
-		background-color: #cccccc;
-		color: #999999;
+		margin: 0;
 }
 .footer {
 		height: 100rpx;
@@ -420,6 +444,7 @@
 }
 .option-prefix {
 		margin-right: 10rpx;
-		color: #0039b3;
 		font-weight: bold;
+		color: #333;
+		min-width: 30rpx;
 }

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません