模式切换

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

@@ -233,6 +233,7 @@
         height: 38px;
         left: 27px;
         top: 17px;
+        cursor: pointer;
     }
     .name {
         position: absolute;
@@ -248,8 +249,15 @@
         display: flex;
         justify-content: space-between;
         padding: 0 36px;
+        &.twoModeBox{
+            justify-content: center;
+            > img + img{
+                margin-left: 150px;
+            }
+        }
         > img {
             width: calc((100% - 2*40px)/3);
+            max-width: 220px;
         }
     }
 }

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

@@ -519,18 +519,21 @@ export default defineComponent({
             }
           </div>
           {/* 模式切换 */}
-          <div 
-            id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
-            style={{ display: toggleBtn.value.display ? "" : "none" }}
-            class={[styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]} 
-            onClick={() => {
-                handleRessetState();
-                headTopData.modeType = "init";
-            }}
-          >
-            <img class={styles.img} src={iconMode} />
-            <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
-          </div>
+            { 
+            state.playType === "play" &&
+              <div 
+                id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
+                style={{ display: toggleBtn.value.display ? "" : "none" }}
+                class={[styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]} 
+                onClick={() => {
+                    handleRessetState();
+                    headTopData.modeType = "init";
+                }}
+              >
+                <img class={styles.img} src={iconMode} />
+                <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
+              </div>
+          }
           {/* 功能按钮 */}
           <div
             class={[styles.headRight]}

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

@@ -7,17 +7,11 @@ import glImg from "./image/gl.png"
 import pcImg from "./image/pc.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";
-
-
-/* todo */
-/*
-   打击乐和节奏练习 模式可能不是3个 到时候根据字段来判断
- */
+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"
 
 export default defineComponent({
    name: "modeView",
@@ -26,7 +20,7 @@ export default defineComponent({
       const data = reactive({
          showPC: false,
          showStudent: false,
-         showVip: false,
+         showVip: false
       })
       const openGuid = () => {
          // 加载后 判断 端口号 加载对应的引导
@@ -71,12 +65,26 @@ export default defineComponent({
       })
       return () => (
          <div class={[styles.modeView, headTopData.modeType !== "init" && styles.hidden]}>
-            <img src={backImg} class={styles.back} />
+            <img
+               src={backImg}
+               class={styles.back}
+               onClick={() => {
+                  headTopData.modeType = "show"
+               }}
+            />
             <img src={nameImg} class={styles.name} />
-            <div class={styles.modeBox}>
+            <div
+               class={[
+                  styles.modeBox,
+                  ((!state.isPercussion && !state.enableEvaluation) ||
+                     (state.isPercussion && state.enableEvaluation) ||
+                     (state.isPercussion && !state.enableEvaluation)) &&
+                     styles.twoModeBox
+               ]}
+            >
                <img src={lxImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("practise")} />
-               <img src={glImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("follow")} />
-               <img src={pcImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("evaluating")} />
+               {!state.isPercussion && <img src={glImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("follow")} />}
+               {state.enableEvaluation && <img src={pcImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("evaluating")} />}
             </div>
             {data.showVip && <TheVip />}
          </div>