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/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 { 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";

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