feat: 耳机弹窗功能优化

src/helpers/customMusicScore.ts

@@ -592,14 +592,19 @@ const transSinglePage = () => {
 	if (state.isSingleLine && !state.isSimplePage) {
 		const svgPage = document?.getElementById('osmdSvgPage1')?.getBoundingClientRect();
 		const staffLine = document?.querySelector('.staffline')?.getBoundingClientRect();
-		if (svgPage && staffLine && svgPage.height > 200) {
+		if (svgPage && staffLine && svgPage.height > 200 && state.platform !== 'PC') {
 			// 需要上移的距离
-			console.log('need',svgPage.height,staffLine.height)
+			// console.log('need',svgPage.height,staffLine.height)
 			const rate = svgPage.height > 400 ? 1.2 : 2;
 			const needTransTop = (svgPage.height - staffLine.height) / rate;
 			// @ts-ignore
 			document.getElementById('osmdSvgPage1').style.transform = `translateY(-${needTransTop}px)`;
 			// document.querySelector('.staffline').style.transform = `translateY(-${needTransTop}px)`;
+			// const musicLine =  document.querySelector('.staffline').querySelector('.vf-measure').querySelector('.vf-custom-bg').getBoundingClientRect();
+			// const needTransDistance = svgPage.height / 2 - (musicLine.top - svgPage.top)
+			// console.log('svg移动距离',needTransDistance)
+			// // @ts-ignore
+			// document.getElementById('osmdSvgPage1').style.transform = `translateY(${needTransDistance}px)`
 		}
 	}
 }

src/page-instrument/evaluat-model/index.tsx

@@ -140,8 +140,14 @@ export default defineComponent({
         // const erji = await checkUseEarphone();
         const res = await getEarphone();
         const erji = res?.content?.checkIsWired || false;
-        console.log("耳机状态111", res);
-        evaluatingData.earphoneMode = true;
+        // 是否已经提示过耳机弹窗，重新进入评测页面，重置该状态为false，手动关掉耳机弹窗，改变该状态为true，本次评测都不在提示耳机状态弹窗
+        if (!evaluatingData.onceErjiPopShow) {
+          evaluatingData.earphoneMode = true;
+        } else {
+          clearTimeout(checkErjiTimer);
+          checkErjiTimer = null;
+          return;
+        }
         evaluatingData.earPhoneType = res?.content?.type || "";
         if (evaluatingData.earPhoneType === "有线耳机") {
           clearTimeout(checkErjiTimer);
@@ -303,7 +309,7 @@ export default defineComponent({
         speed: evaluatSpeed,
         heardLevel: state.setting.evaluationDifficulty,
         // beatLength: Math.round((state.fixtime * 1000) / rate),
-        beatLength: actualBeatLength,
+        beatLength: actualBeatLength / rate,
         evaluationCriteria: state.evaluationStandard,
         speedRate: parseFloat(rate.toFixed(2)), // 播放倍率
       };
@@ -506,7 +512,10 @@ export default defineComponent({
         await api_startDelayCheck({});
       } else {
         evaluatingData.checkEnd = true;
-        checkEarphoneStatus();
+        // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
+        if (evaluatingData.needCheckErjiStatus) {
+          checkEarphoneStatus();
+        }
       }
       evaluatingData.isDisabledPlayMusic = true;
       // handlePerformDetection();
@@ -587,6 +596,7 @@ export default defineComponent({
           <Earphone
             earphoneType={evaluatingData.earPhoneType}
             onClose={() => {
+              evaluatingData.onceErjiPopShow = true;
               clearTimeout(checkErjiTimer);
               checkErjiTimer = null;
               // #11035,可能刚好关闭耳机弹窗的时候，第二次又出现了弹窗

src/page-instrument/header-top/modeView.tsx

@@ -110,6 +110,8 @@ export default defineComponent({
             smoothAnimationState.isShow.value = state.melodyLine;
             // 返回的时候 跳转到之前记录的模式
             if(headTopData.oldModeType !== "practise"){
+              // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
+              evaluatingData.needCheckErjiStatus = false;
               headTopData.handleChangeModeType(headTopData.oldModeType)
             }
             headTopData.modeType = "show";
@@ -122,7 +124,11 @@ export default defineComponent({
             headTopData.handleChangeModeType("practise")
             } }></Vue3Lottie>
           {!state.isPercussion && <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("follow")}></Vue3Lottie>}
-          {state.enableEvaluation && <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("evaluating")}></Vue3Lottie>}
+          {state.enableEvaluation && <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
+            // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
+            evaluatingData.needCheckErjiStatus = true;
+            headTopData.handleChangeModeType("evaluating")
+          }}></Vue3Lottie>}
         </div>
         {data.showVip && <TheVip />}
         {/** 延迟检测中途，socket出错，网络提示弹窗 */}

src/page-instrument/view-detail/index.tsx

@@ -328,7 +328,7 @@ export default defineComponent({
                 height: state.fingeringInfo.name === "hulusi-flute" ? "86%" : "80%",
                 right: state.playBtnDirection === "right" ? "initial" : 0,
                 left: state.playBtnDirection === "right" ? 0 : "initial",
-                top: state.fingeringInfo.name === "ocarina" ? "60px" : 0,
+                top: state.fingeringInfo.name === "ocarina" || state.fingeringInfo.name === "whistling" ? "60px" : 0,
               },
             };
           } else {
@@ -341,7 +341,7 @@ export default defineComponent({
                 width: state.fingeringInfo.width,
                 height: state.fingeringInfo.name === "hulusi-flute" ? "86%" : "80%",
                 left: 0,
-                top: state.fingeringInfo.name === "ocarina" ? "60px" : 0,
+                top: state.fingeringInfo.name === "ocarina" || state.fingeringInfo.name === "whistling" ? "60px" : 0,
               },
             };
           }

src/view/evaluating/index.tsx

@@ -114,6 +114,8 @@ export const evaluatingData = reactive({
   needReplayEvaluat: false, // 手动取消评测，需要自动开始评测
   needPlayTick: false, // 评测时，mp3节拍器需要等待音频开始播放后再执行播放节拍器的圆点动画
   tipErjiShow: false, // 评测提示弹窗
+  onceErjiPopShow: false, // 是否已经提示过耳机弹窗，重新进入评测页面，重置该状态为false，手动关掉耳机弹窗，改变该状态为true，本次评测都不在提示耳机状态弹窗
+  needCheckErjiStatus: true, // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
 });
 
 const sendOffsetTime = async (offsetTime: number) => {
@@ -785,7 +787,7 @@ export default defineComponent({
       // evaluatingData.resulstMode = true;
       // evaluatingData.resultData = {...getLeveByScore(10), score: 10, intonation: 10, cadence: 30, integrity: 40}
       // console.log("🚀 ~ evaluatingData.resultData:", evaluatingData.resultData)
-
+      evaluatingData.onceErjiPopShow = false;
       evaluatingData.evaluatings = {};
       evaluatingData.soundEffectFrequency = 0;
       evaluatingData.checkStep = 0;

src/view/selection/index.module.less

@@ -161,7 +161,7 @@
 .followTipUp, .followTipDown {
     display: flex;
     align-items: center;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0,0,0,0.7);
     position: relative;
     padding: 6px 10px;
     border-radius: 16px;