切换模式 加上动画特效

src/page-instrument/header-top/index.module.less

@@ -255,11 +255,11 @@
         padding: 0 36px;
         &.twoModeBox{
             justify-content: center;
-            > img + img{
+            > .modeImg + .modeImg{
                 margin-left: 150px;
             }
         }
-        > img {
+        > .modeImg {
             width: calc((100% - 2*40px)/3);
             max-width: 220px;
         }

src/page-instrument/header-top/modeView.tsx

@@ -1,10 +1,10 @@
-import { defineComponent, onMounted, watch, reactive } from "vue"
+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 lxImg from "./image/lx.png"
-import glImg from "./image/gl.png"
-import pcImg from "./image/pc.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"
@@ -12,6 +12,7 @@ import { storeData } from "/src/store"
 import state from "/src/state"
 import { studentQueryUserInfo } from "../api"
 import { usePageVisibility } from "@vant/use"
+import { Vue3Lottie } from "vue3-lottie";
 
 export default defineComponent({
    name: "modeView",
@@ -22,6 +23,9 @@ export default defineComponent({
          showStudent: false,
          showVip: false
       })
+      const modeImgDom1 = ref()
+      const modeImgDom2 = ref()
+      const modeImgDom3 = ref()
       const openGuid = () => {
          // 加载后 判断 端口号 加载对应的引导
          if (storeData.platformType !== "STUDENT" || storeData.user.clientType !== "STUDENT") {
@@ -60,6 +64,21 @@ export default defineComponent({
             }
          }
       )
+      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()
       })
@@ -82,9 +101,13 @@ export default defineComponent({
                      styles.twoModeBox
                ]}
             >
-               <img src={lxImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("practise")} />
-               {!state.isPercussion && <img src={glImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("follow")} />}
-               {state.enableEvaluation && <img src={pcImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("evaluating")} />}
+               <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 />}
          </div>