|
@@ -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>
|
|
|
+ );
|
|
|
+ },
|
|
|
+});
|