Merge branch 'iteration-beat-one'

src/page-instrument/view-figner/index.module.less

@@ -14,6 +14,10 @@
     background: rgba(215, 205, 199, 1);
     user-select: none;
 
+    .hiddens {
+        display: none;
+    }
+
     &.fingerRight {
         background: url('./image/icon_bg_t.png') no-repeat;
         background-size: cover;
@@ -111,6 +115,7 @@
     --van-popover-action-font-size: 14px;
     --van-popover-radius: 12px;
     --van-popover-action-width: 85px;
+    z-index: 9999;
     padding: 6Px 0;
     background-color: #fff;
     box-shadow: 0 0.05333rem 0.32rem rgba(50, 50, 51, .12);
@@ -532,26 +537,26 @@
     }
 
     .playTips {
-        width: 91px;
-        height: 23px;
+        width: 107px;
+        height: 28px;
         background: url('./image/tips1.png') no-repeat center center / contain;
     }
 
     .playTips2 {
-        width: 122px;
-        height: 23px;
+        width: 147px;
+        height: 28px;
         background: url('./image/tips4.png') no-repeat center center / contain;
     }
 
     .playError {
-        width: 83px;
-        height: 23px;
+        width: 94px;
+        height: 28px;
         background: url('./image/tips3.png') no-repeat center center / contain;
     }
 
     .playSuccess {
-        width: 83px;
-        height: 23px;
+        width: 94px;
+        height: 28px;
         background: url('./image/tips2.png') no-repeat center center / contain;
     }
 }
@@ -582,8 +587,8 @@
         height: 20px;
         background: url('./image/icon_btn_green_sub.png') no-repeat center / contain;
         position: absolute;
-        bottom: 2px;
-        right: -2px;
+        top: 2px;
+        left: -2px;
 
         &.errorAnswer {
             background: url('./image/icon_btn_red_sub.png') no-repeat center / contain;

src/page-instrument/view-figner/index.tsx

@@ -91,6 +91,7 @@ export default defineComponent({
       ],
       fingeringMode: query.type || ("scaleMode" as "fingeringMode" | "listenMode" | "scaleMode"), // 模式
       noteType: "all" as "#c" | "all", // 音调
+      loadingDom: false, // 切换乐器时需要重置
     });
     const fingerData = reactive({
       relationshipIndex: 0,
@@ -233,19 +234,20 @@ export default defineComponent({
         data.fingeringMode = "fingeringMode";
       } else if (data.fingeringMode === "fingeringMode") {
         data.fingeringMode = "scaleMode";
+        data.viewIndex = 0;
         data.noteType = "all";
       }
       resetMode(true, 0);
-      __init();
+      __init(false);
     };
 
-    const __init = () => {
+    const __init = async (loadSong = true) => {
+      data.loadingDom = true;
       getNotes();
 
       selectSubjectType(data.subject);
 
       if (data.fingeringMode === "fingeringMode") {
-        console.log(data.subject, "data.subject");
         if (data.subject === "pan-flute") {
           data.viewIndex = 3;
         } else if (["pan-flute", "ocarina", "melodica"].includes(data.subject)) {
@@ -266,8 +268,12 @@ export default defineComponent({
       };
       data.viewTotal = o[data.subject] || 1;
       getFingeringData();
-      getSounFonts();
+      if (loadSong) {
+        await getSounFonts();
+      }
+
       getHeadTop();
+      data.loadingDom = false;
     };
 
     // 获取声部
@@ -449,6 +455,7 @@ export default defineComponent({
       if (playStatus.gamut) return;
       // 开始答题不能切换
       if (playStatus.action) return;
+      gaumntPause();
       if (data.noteType === "all") {
         data.noteType = "#c";
       } else {
@@ -671,7 +678,6 @@ export default defineComponent({
     });
 
     const containerBox = computed(() => {
-      console.log(state.platform, query.modelType, data.fingeringMode, "fingering");
       if (state.platform === IPlatform.PC || query.modelType) {
         return {
           paddingTop: "1rem",
@@ -713,7 +719,7 @@ export default defineComponent({
       } else {
         if (data.subject === "hulusi-flute") {
           return {
-            paddingTop: "2.1rem",
+            paddingTop: "3.1rem",
             paddingBottom: "0rem",
           };
         } else if (data.subject === "piccolo") {
@@ -846,6 +852,11 @@ export default defineComponent({
               <button class={[styles.backBtn]} onClick={() => handleBack()}>
                 <img src={icons.icon_back} />
               </button>
+
+              <div class={styles.baseBtn} onClick={onChangeFingeringModel}>
+                <img src={modeText.value.icon} />
+                <span>{modeText.value.text}</span>
+              </div>
               <Popover
                 placement="bottom"
                 class={styles.popoverContainer}
@@ -854,7 +865,7 @@ export default defineComponent({
                   if (data.subject === val.value) return;
                   data.subject = val.value;
                   data.viewIndex = 0;
-
+                  data.loadingDom = true;
                   fingerData.fingeringInfo = subjectFingering(data.subject);
                   console.log(fingerData.fingeringInfo);
                   resetElement();
@@ -902,11 +913,6 @@ export default defineComponent({
               )}
             </div>
             <div class={styles.rightBtn}>
-              <div class={styles.baseBtn} onClick={onChangeFingeringModel}>
-                <img src={modeText.value.icon} />
-                <span>{modeText.value.text}</span>
-              </div>
-
               <div class={styles.baseBtn} onClick={() => resetElement()}>
                 <img src={icons.icon_2_0} />
                 <span>还原</span>
@@ -962,9 +968,13 @@ export default defineComponent({
                 {playAction.listenTipsStatus && <div class={[styles.tipsT, data.fingeringMode === "fingeringMode" ? styles.playTips2 : styles.playTips]}></div>}
                 {playAction.userAnswerStatus === 1 && <div class={[styles.tipsT, styles.playSuccess]}></div>}
                 {playAction.userAnswerStatus === 2 && <div class={[styles.tipsT, styles.playError]}></div>}
-                <Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
-                  <Icon name="arrow-left" />
-                </Button>
+
+                {data.noteType !== "#c" && orientationDirection.value === 0 && (
+                  <Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
+                    <Icon name="arrow-left" />
+                  </Button>
+                )}
+
                 <div class={[styles.noteContent, data.fingeringMode !== "scaleMode" && orientationDirection.value === 0 && styles.noteContentOther, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad]}>
                   {/* 判断是否为音阶模式 */}
                   {data.fingeringMode !== "scaleMode" && (
@@ -1021,6 +1031,7 @@ export default defineComponent({
                               class={[
                                 styles.noteKey,
                                 ((data.realKey === note.realKey && !playStatus.action) ||
+                                  (playStatus.action && playAction.exampleAnser.realKey === note.realKey) ||
                                   (playStatus.action && ((playAction.showAnswerLoading && playAction.standardAnswer.realKey === note.realKey) || (playAction.userAnswerStatus === 1 && playAction.userAnswer.realKey === note.realKey))) ||
                                   (playStatus.action && playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey)) &&
                                   styles.keyActive,
@@ -1042,9 +1053,11 @@ export default defineComponent({
                     </div>
                   </div>
                 </div>
-                <Button class={styles.noteBtn} onClick={() => scrollNoteBox("right")}>
-                  <Icon name="arrow" />
-                </Button>
+                {data.noteType !== "#c" && orientationDirection.value === 0 && (
+                  <Button class={styles.noteBtn} onClick={() => scrollNoteBox("right")}>
+                    <Icon name="arrow" />
+                  </Button>
+                )}
               </div>
               {data.fingeringMode !== "scaleMode" && (
                 <div class={styles.optionBtns}>
@@ -1060,7 +1073,7 @@ export default defineComponent({
                 </div>
               )}
             </div>
-            <div class={[styles.tips, data.tipShow ? "" : styles.tipHidden]}>
+            <div class={[styles.tips, data.loadingDom ? styles.hiddens : "", data.tipShow ? "" : styles.tipHidden]}>
               <div class={styles.tipTitle}>
                 <div class={styles.tipTitleName}>{fingerData.fingeringInfo.code}使用说明</div>
                 <Button class={styles.tipClose} onClick={() => (data.tipShow = false)}>