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

import { defineComponent, onMounted, watch, reactive, ref, nextTick, computed } from "vue";
import styles from "./index.module.less";
import backImg from "./image/icon-back.png";
import titmeImg from "./image/modeTitle.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 modeTitle from "./image/modeTitle.json";
import modeVip from "./image/mode_vip.png";
import modesVip from "./image/mode_svip.png";
import { headTopData, checkMusicBuy } from "./index";
import { getQuery } from "/src/utils/queryString";
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";
import { browser } from "/src/utils";
import { stat } from "fs";

export default defineComponent({
  name: "modeView",
  setup() {
    const modeImgDom1 = ref();
    const modeImgDom2 = ref();
    const modeImgDom3 = ref();
    const modeImgDom4 = ref();
    watch(
      () => headTopData.modeType,
      (value, oldValue) => {
        // headTopData.modeType 值 刚开始是 ""  所以 第一次切换时候不触发播放动画
        if (!oldValue) return;
        nextTick(() => {
          if (value === "show") {
            modeImgDom1.value?.pause();
            modeImgDom2.value?.pause();
            modeImgDom3.value?.pause();
            modeImgDom4.value?.stop();
          } else if (value === "init") {
            modeImgDom1.value?.play();
            modeImgDom2.value?.play();
            modeImgDom3.value?.play();
            modeImgDom4.value?.goToAndPlay(0);
          }
        });
      }
    );
    watch(
      () => evaluatingData.socketErrorStatus,
      () => {
        if (evaluatingData.socketErrorStatus === 2) {
          setTimeout(() => {
            evaluatingData.socketErrorPop = false;
          }, 1000);
        }
      }
    );      
    const browserInfo = browser();
    const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;

    // vip图标
    const showVip = computed(() => {
			return state.vipType === "NOT_VIP" && state.paymentType !== "FREE" && !state.musicBuyInfo.buyed
		});
    // svip图标
    const showsVip = computed(() => {
			return !state.vipType?.includes("SVIP") && state.paymentType !== "FREE" && !state.musicBuyInfo.buyed
		});

    return () => (
      <div class={[styles.modeView, isPad && styles.isiPad, 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";
          }}
        />
        {/* <img src={titmeImg} class={styles.modeTitle} /> */}
        {
          <Vue3Lottie ref={modeImgDom4} class={styles.modeTitle} animationData={modeTitle} autoPlay={false} loop={false} delay={2000}></Vue3Lottie>
        }
        <div class={[styles.modeBox, ((!state.isPercussion && !state.enableEvaluation) || (state.isPercussion && state.enableEvaluation) || (state.isPercussion && !state.enableEvaluation)) && styles.twoModeBox]}>
          <div class={styles.modeItem}>
            <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => {
              if (checkMusicBuy(state.musicBuyInfo)) {
                if(state.isSingleLine){
                  smoothAnimationState.isShow.value = state.melodyLine;
                }
                headTopData.handleChangeModeType("practise")
              }
              }}></Vue3Lottie>
              {
                showVip.value && <img class={styles.vipIcon} src={modeVip} />
              }
          </div>

          {/* <img class={styles.modeImg} src={lxImg} 
            onClick={() => {
              if(state.isSingleLine){
                smoothAnimationState.isShow.value = state.melodyLine;
              }
              headTopData.handleChangeModeType("practise")
            }} /> */}
          {!state.isPercussion && 
            <div class={styles.modeItem}>
              <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => { 
                if (checkMusicBuy(state.musicBuyInfo)) {
                  headTopData.handleChangeModeType("follow")
                }
                }}></Vue3Lottie>
              { showsVip.value && <img class={styles.svipIcon} src={modesVip} /> }
            </div>
              // <img class={styles.modeImg} src={glImg} 
              //   onClick={() => headTopData.handleChangeModeType("follow")} />
          }
          {state.enableEvaluation && 
            <div class={styles.modeItem}>
              <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
                if (checkMusicBuy(state.musicBuyInfo)) {
                  // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
                  evaluatingData.needCheckErjiStatus = true;
                  headTopData.handleChangeModeType("evaluating")
                }
              }}></Vue3Lottie>
              { showsVip.value && <img class={styles.svipIcon} src={modesVip} /> }
            </div>
            // <img class={styles.modeImg} src={pcImg} 
            //   onClick={() => {
            //       // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
            //       evaluatingData.needCheckErjiStatus = true;
            //       headTopData.handleChangeModeType("evaluating")
            //     }} />
          }
        </div>
        {/** 延迟检测中途，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>
    );
  },
});