Explorar o código

评测模式 启动 倒计时和节拍器的时候 不让点击

黄琪勇 hai 1 ano
pai
achega
022a4bfb4e

+ 1 - 1
src/page-instrument/evaluat-model/countdown/index.tsx

@@ -31,7 +31,7 @@ export function startCountdown() {
 				clearTimeout(_time)
 				countdownData.isAnimating = false
 				countdownData.step--
-			}, 300)
+			}, 300) // css 动画是300毫秒 所以这里加了定时器
 		}
 	}, 1000)
 	return new Promise( resolve => {

+ 9 - 0
src/page-instrument/evaluat-model/index.module.less

@@ -118,4 +118,13 @@
     visibility: hidden;
     background: transparent;
     opacity: 0;
+}
+
+.beginMask{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10000;
 }

+ 4 - 1
src/page-instrument/evaluat-model/index.tsx

@@ -463,7 +463,10 @@ export default defineComponent({
         
         {/* 倒计时 */}
         <Countdown />
-
+        {/* 遮罩 */}
+        {
+          evaluatingData.isBeginMask && <div class={styles.beginMask}></div>
+        }
         <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatingData.earphoneMode}>
           <Earphone
             earphoneType={evaluatingData.earPhoneType}

+ 4 - 0
src/view/evaluating/index.tsx

@@ -114,6 +114,7 @@ export const evaluatingData = reactive({
 	jsonLoadDone: true, // 延迟检测的动画dom加载完成状态
 	hideResultModal: false, // 评测作业,如果不是完整评测,需要隐藏评测结果弹窗
 	oneselfCancleEvaluating: false, // 是否是自主取消评测,自主取消评测,不生产评测记录
+	isBeginMask: false // 倒计时和系统节拍器时候的遮罩,防止用户点击
 });
 
 const sendOffsetTime = async (offsetTime: number) => {
@@ -372,6 +373,7 @@ export const handleStartBegin = async (preTimes?: number) => {
 	}
 	evaluatingData.startBegin = true;
 	if (evaluatingData.isDisabledPlayMusic) {
+		evaluatingData.isBeginMask = true
 		// 先播放倒计时
 		await startCountdown()
 		state.playState = state.playState === "paused" ? "play" : "paused";
@@ -385,12 +387,14 @@ export const handleStartBegin = async (preTimes?: number) => {
 				if (!tickend) {
 					state.playState = "paused";
 					evaluatingData.startBegin = false;
+					evaluatingData.isBeginMask = false
 					return;
 				}
 			}else{
 				handleStartTick()
 			}
 		}
+		evaluatingData.isBeginMask = false
 		onPlay();
 	}
 	if (evaluatingData.isErrorState) return