|
@@ -139,6 +139,14 @@
|
|
|
剩余: {{ formatTime(remainingTime) }}
|
|
|
</span>
|
|
|
</div> -->
|
|
|
+
|
|
|
+ <!-- 在模板部分添加倒计时蒙层 -->
|
|
|
+ <div class="countdown-overlay" v-if="showCountdown">
|
|
|
+ <div class="countdown-content">
|
|
|
+ <div class="countdown-number">{{ countdownValue }}</div>
|
|
|
+ <div class="countdown-text">准备开始回答</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -248,6 +256,9 @@ export default {
|
|
|
mediaRecorderTimeout: null, // 用于存储MediaRecorder的超时机制
|
|
|
maxRecordingTime: 300, // 最大录制时间(秒)- 从60秒改为300秒(5分钟)
|
|
|
remainingTime: 300, // 剩余录制时间(秒)- 从60秒改为300秒
|
|
|
+ countdownValue: 10, // 倒计时数值
|
|
|
+ showCountdown: false, // 是否显示倒计时蒙层
|
|
|
+ countdownTimer: null,
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -273,6 +284,9 @@ export default {
|
|
|
beforeDestroy() {
|
|
|
// 组件销毁前停止摄像头
|
|
|
this.stopUserCamera();
|
|
|
+
|
|
|
+ // 清除倒计时定时器
|
|
|
+ this.clearCountdown();
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化相机
|
|
@@ -817,12 +831,85 @@ export default {
|
|
|
if (this.currentVideoIndex >= 1) {
|
|
|
// 对于问题视频,显示"开始回答"按钮
|
|
|
this.showStartRecordingButton = true;
|
|
|
+ this.startCountdown();
|
|
|
+ // 如果是第二段视频播放完成,自动开始倒计时
|
|
|
+ // if (this.currentVideoIndex >= 1) {
|
|
|
+
|
|
|
+ // }
|
|
|
} else {
|
|
|
// 对于介绍视频(第一个视频),显示"开始面试"按钮
|
|
|
this.showAnswerButton = true;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ // 添加新方法:开始倒计时
|
|
|
+ startCountdown() {
|
|
|
+ // 显示倒计时蒙层
|
|
|
+ this.showCountdown = true;
|
|
|
+ this.countdownValue = 10;
|
|
|
+
|
|
|
+ // 开始倒计时
|
|
|
+ this.countdownTimer = setInterval(() => {
|
|
|
+ this.countdownValue--;
|
|
|
+
|
|
|
+ if (this.countdownValue <= 0) {
|
|
|
+ // 倒计时结束,清除定时器
|
|
|
+ this.clearCountdown();
|
|
|
+
|
|
|
+ // 隐藏"开始回答"按钮
|
|
|
+ this.showStartRecordingButton = false;
|
|
|
+
|
|
|
+ // 开始录制
|
|
|
+ this.startRecordingAnswer();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加新方法:清除倒计时
|
|
|
+ clearCountdown() {
|
|
|
+ if (this.countdownTimer) {
|
|
|
+ clearInterval(this.countdownTimer);
|
|
|
+ this.countdownTimer = null;
|
|
|
+ }
|
|
|
+ this.showCountdown = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 修改 handleStartRecordingClick 方法,使其可以终止倒计时
|
|
|
+ handleStartRecordingClick() {
|
|
|
+ // 隐藏"开始回答"按钮
|
|
|
+ this.showStartRecordingButton = false;
|
|
|
+
|
|
|
+ // 如果倒计时正在进行,清除倒计时
|
|
|
+ this.clearCountdown();
|
|
|
+
|
|
|
+ // 直接开始录制
|
|
|
+ this.startRecordingAnswer();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 修改 stopRecordingAnswer 方法,确保清除倒计时
|
|
|
+ stopRecordingAnswer() {
|
|
|
+ // 如果倒计时正在进行,先清除倒计时
|
|
|
+ this.clearCountdown();
|
|
|
+
|
|
|
+ // 检查录制时长
|
|
|
+ const recordingDuration = this.getRecordingDuration();
|
|
|
+ const minimumDuration = 5; // 最小录制时长(秒)
|
|
|
+
|
|
|
+ if (recordingDuration < minimumDuration) {
|
|
|
+ // 录制时间过短,显示提示
|
|
|
+ uni.showToast({
|
|
|
+ title: '录制时间过短,请至少录制5秒',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ // 不执行停止录制逻辑,继续录制
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 录制时长足够,直接停止
|
|
|
+ this.completeRecordingStop();
|
|
|
+ },
|
|
|
+
|
|
|
// 添加新方法:开始录制用户回答
|
|
|
startRecordingAnswer() {
|
|
|
console.log('开始录制用户回答');
|
|
@@ -1268,6 +1355,13 @@ export default {
|
|
|
stopRecordingAnswer() {
|
|
|
console.log('停止录制用户回答');
|
|
|
|
|
|
+ // 如果倒计时正在进行,先清除倒计时
|
|
|
+ if (this.countdownTimer) {
|
|
|
+ clearInterval(this.countdownTimer);
|
|
|
+ this.countdownTimer = null;
|
|
|
+ this.showCountdown = false;
|
|
|
+ }
|
|
|
+
|
|
|
// 检查录制时长
|
|
|
const recordingDuration = this.getRecordingDuration();
|
|
|
const minimumDuration = 5; // 最小录制时长(秒),从3秒改为5秒
|
|
@@ -2101,7 +2195,10 @@ export default {
|
|
|
// 隐藏"开始回答"按钮
|
|
|
this.showStartRecordingButton = false;
|
|
|
|
|
|
- // 开始录制
|
|
|
+ // 如果倒计时正在进行,清除倒计时
|
|
|
+ this.clearCountdown();
|
|
|
+
|
|
|
+ // 直接开始录制
|
|
|
this.startRecordingAnswer();
|
|
|
},
|
|
|
|
|
@@ -2708,7 +2805,7 @@ video::-webkit-media-controls-fullscreen-button {
|
|
|
bottom: 50px; /* 统一与其他按钮的位置 */
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- z-index: 20;
|
|
|
+ z-index: 101;
|
|
|
}
|
|
|
|
|
|
.start-recording-button {
|
|
@@ -2811,4 +2908,36 @@ video::-webkit-media-controls-fullscreen-button {
|
|
|
.uploading {
|
|
|
background-color: #e74c3c;
|
|
|
}
|
|
|
+
|
|
|
+/* 添加倒计时蒙层样式 */
|
|
|
+.countdown-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ z-index: 100;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.countdown-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.countdown-number {
|
|
|
+ font-size: 80px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.countdown-text {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
</style>
|