gym-music-score/src/page-instrument/header-top/modeView.tsx

import { defineComponent, onMounted, watch, reactive, ref, nextTick } from "vue";
import styles from "./index.module.less";
import backImg from "./image/icon-back.png";
import nameImg from "./image/zt.png";
import lxMode from "./image/lxMode.json";
import glMode from "./image/glMode.json";
import pcMode from "./image/pcMode.json";
import lxImg from "./image/lxImg.png";
import glImg from "./image/glImg.png";
import pcImg from "./image/pcImg.png";
import { headTopData } from "./index";
import TheVip from "../custom-plugins/the-vip";
import { getQuery } from "/src/utils/queryString";
import { storeData } from "/src/store";
import state from "/src/state";
import { studentQueryUserInfo } from "../api";
import { usePageVisibility } from "@vant/use";
import { Vue3Lottie } from "vue3-lottie";
import { popImgs, hanldeConfirmPop, hanldeClosePop, evaluatingData } from "/src/view/evaluating"
import { Popup } from "vant";
import AbnormalPop from "/src/view/abnormal-pop";
import { smoothAnimationState } from "../view-detail/smoothAnimation";

export default defineComponent({
  name: "modeView",
  setup() {
    const query = getQuery();
    const data = reactive({
      showVip: false,
    });
    // const modeImgDom1 = ref();
    // const modeImgDom2 = ref();
    // const modeImgDom3 = ref();
    const openGuid = () => {
      // 加载后 判断 端口号 加载对应的引导
      if (storeData.platformType !== "STUDENT" || storeData.user.clientType !== "STUDENT") {
      } else {
        // 从课堂乐器学生端课件预览默认不显示会员
        if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {

        } else {
          // 不是vip
          data.showVip = true;
          state.isVip = true;
        }
      }
    };

    const getUserInfo = async () => {
      const res = await studentQueryUserInfo();
      const student = res?.data || {};
      storeData.user.vipMember = student.vipMember;
      // console.log("🚀 ~ student:", student);
      if (storeData.user.vipMember) {
        data.showVip = false;
        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={() => {
            if(state.isSingleLine){
              smoothAnimationState.isShow.value = state.melodyLine;
            }
            // 返回的时候 跳转到之前记录的模式
            if(headTopData.oldModeType !== "practise"){
              // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
              evaluatingData.needCheckErjiStatus = false;
              headTopData.handleChangeModeType(headTopData.oldModeType)
            }
            headTopData.modeType = "show";
          }}
        />
        <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={() => {
            if(state.isSingleLine){
              smoothAnimationState.isShow.value = state.melodyLine;
            }
            headTopData.handleChangeModeType("practise")
            }}></Vue3Lottie> */}
          <img class={styles.modeImg} src={lxImg} 
            onClick={() => {
              if(state.isSingleLine){
                smoothAnimationState.isShow.value = state.melodyLine;
              }
              headTopData.handleChangeModeType("practise")
            }} />
          {!state.isPercussion && 
              // <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("follow")}></Vue3Lottie>
              <img class={styles.modeImg} src={glImg} 
                onClick={() => headTopData.handleChangeModeType("follow")} />
          }
          {state.enableEvaluation && 
            // <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
            //   // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
            //   evaluatingData.needCheckErjiStatus = true;
            //   headTopData.handleChangeModeType("evaluating")
            // }}></Vue3Lottie>
            <img class={styles.modeImg} src={pcImg} 
              onClick={() => {
                  // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
                  evaluatingData.needCheckErjiStatus = true;
                  headTopData.handleChangeModeType("evaluating")
                }} />
          }
        </div>
        {data.showVip && <TheVip />}
        {/** 延迟检测中途，socket出错，网络提示弹窗 */}
        {/* {
          state.modeType !== 'evaluating' && 
          <div>
              <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale", evaluatingData.socketErrorStatus === 2 && styles.socketErrorStatus]} transition="van-scale" v-model:show={evaluatingData.socketErrorPop} overlay-style={evaluatingData.socketErrorStatus === 2?{ background: "initial" }:{}}>
                <AbnormalPop onConfirm={hanldeConfirmPop} onClose={hanldeClosePop} />
              </Popup>
          </div>            
        } */}
      </div>
    );
  },
});