|  | @@ -57,80 +57,72 @@ export default defineComponent({
 | 
	
		
			
				|  |  |          state.isVip = false;
 | 
	
		
			
				|  |  |          openGuid();
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | -      const pageVisible = usePageVisibility()
 | 
	
		
			
				|  |  | -      watch(
 | 
	
		
			
				|  |  | -         () => pageVisible.value,
 | 
	
		
			
				|  |  | -         val => {
 | 
	
		
			
				|  |  | -            if (val === "visible") {
 | 
	
		
			
				|  |  | -               if (storeData.user.vipMember) return
 | 
	
		
			
				|  |  | -               console.log("页面显示")
 | 
	
		
			
				|  |  | -               getUserInfo()
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -         }
 | 
	
		
			
				|  |  | -      )
 | 
	
		
			
				|  |  | -      watch(() => headTopData.modeType, (value,oldValue) => {
 | 
	
		
			
				|  |  | -         // headTopData.modeType 值 刚开始是 ""  所以 第一次切换时候不触发播放动画
 | 
	
		
			
				|  |  | -         if(!oldValue) return
 | 
	
		
			
				|  |  | -         nextTick(()=>{
 | 
	
		
			
				|  |  | -            if(value === "show"){
 | 
	
		
			
				|  |  | -               modeImgDom1.value?.pause()
 | 
	
		
			
				|  |  | -               modeImgDom2.value?.pause()
 | 
	
		
			
				|  |  | -               modeImgDom3.value?.pause()
 | 
	
		
			
				|  |  | -            }else if(value === "init"){
 | 
	
		
			
				|  |  | -               modeImgDom1.value?.play()
 | 
	
		
			
				|  |  | -               modeImgDom2.value?.play()
 | 
	
		
			
				|  |  | -               modeImgDom3.value?.play()
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -         })
 | 
	
		
			
				|  |  | -      })
 | 
	
		
			
				|  |  | -      onMounted(() => {
 | 
	
		
			
				|  |  | -         openGuid()
 | 
	
		
			
				|  |  | -      })
 | 
	
		
			
				|  |  | -      watch(
 | 
	
		
			
				|  |  | -         () => evaluatingData.socketErrorStatus,
 | 
	
		
			
				|  |  | -         () => {
 | 
	
		
			
				|  |  | -           if (evaluatingData.socketErrorStatus === 2) {
 | 
	
		
			
				|  |  | -             setTimeout(() => {
 | 
	
		
			
				|  |  | -               evaluatingData.socketErrorPop = false;
 | 
	
		
			
				|  |  | -             }, 1000);
 | 
	
		
			
				|  |  | -           }
 | 
	
		
			
				|  |  | -         }
 | 
	
		
			
				|  |  | -       );      
 | 
	
		
			
				|  |  | -      return () => (
 | 
	
		
			
				|  |  | -         <div class={[styles.modeView, headTopData.modeType !== "init" && styles.hidden]}>
 | 
	
		
			
				|  |  | -            <img
 | 
	
		
			
				|  |  | -               src={backImg}
 | 
	
		
			
				|  |  | -               class={styles.back}
 | 
	
		
			
				|  |  | -               onClick={() => {
 | 
	
		
			
				|  |  | -                  headTopData.modeType = "show"
 | 
	
		
			
				|  |  | -               }}
 | 
	
		
			
				|  |  | -            />
 | 
	
		
			
				|  |  | -            <img src={nameImg} class={styles.name} />
 | 
	
		
			
				|  |  | -            <div
 | 
	
		
			
				|  |  | -               class={[
 | 
	
		
			
				|  |  | -                  styles.modeBox,
 | 
	
		
			
				|  |  | -                  ((!state.isPercussion && !state.enableEvaluation) ||
 | 
	
		
			
				|  |  | -                     (state.isPercussion && state.enableEvaluation) ||
 | 
	
		
			
				|  |  | -                     (state.isPercussion && !state.enableEvaluation)) &&
 | 
	
		
			
				|  |  | -                     styles.twoModeBox
 | 
	
		
			
				|  |  | -               ]}
 | 
	
		
			
				|  |  | -            >
 | 
	
		
			
				|  |  | -               <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => 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>
 | 
	
		
			
				|  |  | -               }
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            {data.showVip && <TheVip />}
 | 
	
		
			
				|  |  | -            {/** 延迟检测中途,socket出错,网络提示弹窗 */}
 | 
	
		
			
				|  |  | -            <div>
 | 
	
		
			
				|  |  | -               <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatingData.socketErrorPop}>
 | 
	
		
			
				|  |  | -                  <AbnormalPop onConfirm={hanldeConfirmPop} onClose={hanldeClosePop} />
 | 
	
		
			
				|  |  | -               </Popup>
 | 
	
		
			
				|  |  | -            </div>            
 | 
	
		
			
				|  |  | -         </div>
 | 
	
		
			
				|  |  | -      )
 | 
	
		
			
				|  |  | -   }
 | 
	
		
			
				|  |  | -})
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +    const pageVisible = usePageVisibility();
 | 
	
		
			
				|  |  | +    watch(
 | 
	
		
			
				|  |  | +      () => pageVisible.value,
 | 
	
		
			
				|  |  | +      (val) => {
 | 
	
		
			
				|  |  | +        if (val === "visible") {
 | 
	
		
			
				|  |  | +          if (storeData.user.vipMember) return;
 | 
	
		
			
				|  |  | +          console.log("页面显示");
 | 
	
		
			
				|  |  | +          getUserInfo();
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +    watch(
 | 
	
		
			
				|  |  | +      () => headTopData.modeType,
 | 
	
		
			
				|  |  | +      (value, oldValue) => {
 | 
	
		
			
				|  |  | +        // headTopData.modeType 值 刚开始是 ""  所以 第一次切换时候不触发播放动画
 | 
	
		
			
				|  |  | +        if (!oldValue) return;
 | 
	
		
			
				|  |  | +        nextTick(() => {
 | 
	
		
			
				|  |  | +          if (value === "show") {
 | 
	
		
			
				|  |  | +            modeImgDom1.value?.pause();
 | 
	
		
			
				|  |  | +            modeImgDom2.value?.pause();
 | 
	
		
			
				|  |  | +            modeImgDom3.value?.pause();
 | 
	
		
			
				|  |  | +          } else if (value === "init") {
 | 
	
		
			
				|  |  | +            modeImgDom1.value?.play();
 | 
	
		
			
				|  |  | +            modeImgDom2.value?.play();
 | 
	
		
			
				|  |  | +            modeImgDom3.value?.play();
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +    onMounted(() => {
 | 
	
		
			
				|  |  | +      openGuid();
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +    watch(
 | 
	
		
			
				|  |  | +      () => evaluatingData.socketErrorStatus,
 | 
	
		
			
				|  |  | +      () => {
 | 
	
		
			
				|  |  | +        if (evaluatingData.socketErrorStatus === 2) {
 | 
	
		
			
				|  |  | +          setTimeout(() => {
 | 
	
		
			
				|  |  | +            evaluatingData.socketErrorPop = false;
 | 
	
		
			
				|  |  | +          }, 1000);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    );      
 | 
	
		
			
				|  |  | +    return () => (
 | 
	
		
			
				|  |  | +      <div class={[styles.modeView, headTopData.modeType !== "init" && styles.hidden]}>
 | 
	
		
			
				|  |  | +        <img
 | 
	
		
			
				|  |  | +          src={backImg}
 | 
	
		
			
				|  |  | +          class={styles.back}
 | 
	
		
			
				|  |  | +          onClick={() => {
 | 
	
		
			
				|  |  | +            headTopData.modeType = "show";
 | 
	
		
			
				|  |  | +          }}
 | 
	
		
			
				|  |  | +        />
 | 
	
		
			
				|  |  | +        <img src={nameImg} class={styles.name} />
 | 
	
		
			
				|  |  | +        <div class={[styles.modeBox, ((!state.isPercussion && !state.enableEvaluation) || (state.isPercussion && state.enableEvaluation) || (state.isPercussion && !state.enableEvaluation)) && styles.twoModeBox]}>
 | 
	
		
			
				|  |  | +          <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => 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>}
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        {data.showVip && <TheVip />}
 | 
	
		
			
				|  |  | +        {/** 延迟检测中途,socket出错,网络提示弹窗 */}
 | 
	
		
			
				|  |  | +        <div>
 | 
	
		
			
				|  |  | +            <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatingData.socketErrorPop}>
 | 
	
		
			
				|  |  | +              <AbnormalPop onConfirm={hanldeConfirmPop} onClose={hanldeClosePop} />
 | 
	
		
			
				|  |  | +            </Popup>
 | 
	
		
			
				|  |  | +        </div>         
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +});
 |