Merge branch 'gyt-feature-tianyong' into online

src/pages/detail/CheckDelayPopup/index.module.less

@@ -13,6 +13,10 @@
         top: -5%;
         left: -20%;
     }
+    .delayPadBg {
+        width: 160%;
+        left: -30%;
+    }
     .delayAdorn {
         position: absolute;
         left: 50%;
@@ -24,13 +28,13 @@
     .leftAdorn {
         position: fixed;
         left: 0;
-        bottom: 0;
+        bottom: -1px;
         width: 1.66rem;
     }
     .rightAdorn {
         position: fixed;
         right: 0;
-        bottom: 0;
+        bottom: -1px;
         width: 1.28rem;
     }
 }
@@ -116,6 +120,8 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%,100%);
+    animation: showBtnBox .5s linear both;;
+    animation-delay: 0.5s;
     .delayBox {
         width: 4.68rem;
         position: relative;
@@ -160,7 +166,7 @@
         .dbBtn {
             position: absolute;
             right: 0.21rem;
-            bottom: 0.23rem;
+            bottom: 0.28rem;
             width: 1.21rem;
             height: 0.35rem;
             cursor: pointer;
@@ -168,6 +174,17 @@
         }
     }
 }
+
+@keyframes showBtnBox {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
 .heartbeat {
     animation: heartbeat 1.5s ease-in-out infinite both;
 }
@@ -436,4 +453,5 @@
         transform: scale(1);
         opacity: 1;
     }
-}
+}
+

src/pages/detail/CheckDelayPopup/index.tsx

@@ -1,5 +1,6 @@
 import { PropType, defineComponent, onMounted, watch } from "vue";
 import { Vue3Lottie } from 'vue3-lottie'
+import { browser } from '/src/helpers/utils'
 import styles from "./index.module.less";
 import delay_bg from "./image/bg.json"
 import left_adorn from "./image/left_ adorn.json"
@@ -41,6 +42,8 @@ interface IDelayData {
 	earPhoneType: string;
 }
 
+const browserInfo = browser()
+
 /** 延迟检测组件 */
 export default defineComponent({
 	name: "CheckDelayPopup",
@@ -54,7 +57,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		return () => (
 			<div class={styles.delayContainer}>
-				<Vue3Lottie class={styles.delayBg} animationData={delay_bg}></Vue3Lottie>
+				<Vue3Lottie class={[styles.delayBg, browserInfo.iPad ? styles.delayPadBg : '']} animationData={delay_bg}></Vue3Lottie>
 				<Vue3Lottie class={styles.leftAdorn} animationData={left_adorn}></Vue3Lottie>
 				<Vue3Lottie class={styles.rightAdorn} animationData={right_adorn}></Vue3Lottie>
 				{/*返回按钮*/}
@@ -64,7 +67,7 @@ export default defineComponent({
 				<Vue3Lottie class={styles.delayAdorn} animationData={step3} style={{ display: props.delayData.step === 4 ? '' : 'none' }}></Vue3Lottie>
 				<Vue3Lottie class={styles.delayAdorn} animationData={step4} style={{ display: props.delayData.step === 5 ? '' : 'none' }}></Vue3Lottie>
 				<Vue3Lottie class={styles.delayAdorn} animationData={step5} style={{ display: props.delayData.step >= 6 ? '' : 'none' }}></Vue3Lottie>
-				<div class={styles.delayBody}>
+				<div class={styles.delayBody} >
 					<div class={styles.delayBox}>
 						<div class={styles.dbTop}>
 							<img class={styles.topIcon} src={props.delayData.step <= 3 ? step_top_icon_1 : props.delayData.step === 4 ? step_top_icon_2 : props.delayData.step === 5 ? step_top_icon_3 : 

src/subpages/colexiu/buttons/evaluating.tsx

@@ -28,7 +28,7 @@ import iconEvaluatingStart from './icons/icon-evaluatingStart.png'
 import qs from 'query-string'
 import CheckDelayPopup from "/src/pages/detail/CheckDelayPopup";
 import Headphone, { HeadphoneData } from "/src/pages/detail/Headphone";
-import { modelType } from './index'
+import { modelType, followRef } from './index'
 
 /** 初始化评测音频 */
 export const evaluatCreateMusicPlayer = () => {
@@ -93,6 +93,9 @@ const delayData =  reactive({
   step: 1,
   earPhoneType: "" as "" | "有线耳机" | "蓝牙耳机",
 })
+
+let startTuneTimer: any = null
+
   /** 获取耳机状态 */
   const getWiredStatus = (): Promise<boolean> => {
     return new Promise((resolve) => {
@@ -149,11 +152,10 @@ const delayData =  reactive({
   }
   /** 评测效验 */
   const checkEvaluating = async () => {
-    delayData.erji = await getWiredStatus();
+    // delayData.erji = await getWiredStatus();
     delayData.time = await getDeviceDelay();
     // 没有设备延迟数据,显示检测组件,并持续检测耳机状态
     if (!delayData.time || delayData.isForce) {
-      delayData.open = (runtime.delayCheckFirst && searchParams.evaluatingRecord || !SettingState.sett.tuning) ? false : true
       delayData.count = 0;
       checkWiredStatus();
       if (runtime.delayCheckFirst && searchParams.evaluatingRecord) {
@@ -216,6 +218,12 @@ const delayData =  reactive({
 				postMessage({
 					api: "endTune"
 				})
+        // 提前关闭或者返回，需要重置step状态
+        if (delayData.open === false) {
+          setTimeout(() => {
+            delayData.step = 1
+          }, 500);
+        }
 			} else if (state === 'finishTune') {
         delayData.step = 6
 				// 效音完成
@@ -241,6 +249,7 @@ const delayData =  reactive({
 		const handleStopCheckDelay = () => {
 			runtime.delayCheckFirst = true
 			delayData.open = false
+      startButtonShow.value = true
       setTimeout(() => {
         delayData.checkStatus = 'init'
         delayData.step = 1
@@ -254,6 +263,7 @@ const delayData =  reactive({
 			delayData.checkStatus = 'init'
       delayData.step = 1
 			handleToggleTune('stop')
+      clearTimeout(startTuneTimer)
     }
 		/** 开始检测设备延迟 */
 		const handleStartCheckDelay = async () => {
@@ -265,8 +275,10 @@ const delayData =  reactive({
 				return;
 			}
 			delayData.checkStatus = 'ing';
-      setTimeout(() => {
-        startTune()
+      startTuneTimer = setTimeout(() => {
+        if (delayData.open === true) {
+          startTune()
+        }
       }, 2000)
 		}
 
@@ -886,6 +898,7 @@ export default defineComponent({
   setup(props, { expose }) {
     onMounted(async () => {
       console.log('进入评测模块')
+      delayData.open = (runtime.delayCheckFirst && searchParams.evaluatingRecord || !SettingState.sett.tuning) ? false : true
       if (!SettingState.eva.mute) {
         RuntimeUtils.changeAllMode();
       } else {
@@ -946,7 +959,7 @@ export default defineComponent({
           <Evaluating data={endResult.value} />
 
           <Transition name="finish">
-            {startButtonShow.value && (
+            {startButtonShow.value && !delayData.open && modelType.value !== 'init' && (
               <div
                 style={{
                   backgroundImage: `url(${iconEvaluatingStart})`,
@@ -977,21 +990,23 @@ export default defineComponent({
           )}
 
         {/* 延迟检测窗口 */}
-				<Popup 
-					teleport="body"
-					class="popup-scale" 
-					transition="van-scale" 
-					overlay={false}
-					show={delayData.open}
-					onClose={() => handleCheckDelayEnd()}
-				>
-					<CheckDelayPopup 
-						delayData={delayData}
-						onStartCheckDelay={() => handleStartCheckDelay()}
-						onClose={() => handleStopCheckDelay()} 
-            onBack={() => handleDelayBack()}
-					/>
-				</Popup>
+        <Transition>
+          <Popup 
+            teleport="body"
+            class="popup-scale" 
+            transition="van-scale"
+            overlay={false}
+            show={delayData.open}
+            onClose={() => handleCheckDelayEnd()}
+          >
+            <CheckDelayPopup 
+              delayData={delayData}
+              onStartCheckDelay={() => handleStartCheckDelay()}
+              onClose={() => handleStopCheckDelay()} 
+              onBack={() => handleDelayBack()}
+            />
+          </Popup>
+        </Transition>
         </Teleport>
       )
     }

src/subpages/colexiu/buttons/index.tsx

@@ -214,7 +214,7 @@ export default defineComponent({
 
           <div class={styles.centerButton}>
             <Transition name="finish">
-              {!startButtonShow.value && (
+              {!startButtonShow.value && modelType.value === 'evaluation' && (
                 <Button
                   class={[styles.button, styles.finish]}
                   onClick={() => {

src/subpages/colexiu/popups/follow/index.tsx

@@ -18,7 +18,7 @@ const togglePlayer = (show: boolean = false) => {
     globalPlayer.style.display = show ? '' : 'none'
   }
 }
-const data = reactive({
+export const data = reactive({
   list: [] as any, // 频率列表
   index: 0,
   start: false,