Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/music-score into ktyq-online-new

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

@@ -650,6 +650,14 @@ export default defineComponent({
             if (state.playState === "play" || followData.start || evaluatingData.startBegin) {
               headerColumnHide.value = !headerColumnHide.value;
             }
+            if(state.playState === "paused") {
+              window.parent.postMessage(
+                {
+                  api: "changeTogge"
+                },
+                "*"
+              );
+            }
           }}
         >
           {/* 曲谱渲染 */}

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

@@ -307,6 +307,7 @@
                     line-height: 16px;
                     padding: 7px 6px;
                     height: 46px;
+                    flex-shrink: 0;
                 }
 
                 .backBtn {
@@ -320,6 +321,7 @@
 
             :global {
                 .van-tabs__wrap {
+                    display: none !important;
                     width: 100%;
                     display: flex;
                     justify-content: center;
@@ -354,7 +356,6 @@
                 }
 
                 .van-tabs__content {
-                    padding-top: 16px;
                     height: 130px;
 
                     .van-tab__panel {
@@ -363,45 +364,142 @@
                 }
             }
 
-            .btnBox {
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-top: -16px;
-
-                .btnCon {
-                    border-radius: 17px;
-                    display: flex;
-                    background: rgba(255, 255, 255, 0.5);
-                    padding: 6px 5px 3px 6px;
-
-                    .btnGr {
-                        background: url("./image/btnBg.png") no-repeat;
-                        background-size: 100% 100%;
-                        width: 93px;
-                        height: 56px;
+            // .btnBox {
+            //     height: 100%;
+            //     display: flex;
+            //     justify-content: center;
+            //     align-items: center;
+            //     margin-top: -16px;
+
+            //     .btnCon {
+            //         border-radius: 17px;
+            //         display: flex;
+            //         background: rgba(255, 255, 255, 0.5);
+            //         padding: 6px 5px 3px 6px;
+
+            //         .btnGr {
+            //             background: url("./image/btnBg.png") no-repeat;
+            //             background-size: 100% 100%;
+            //             width: 93px;
+            //             height: 56px;
+            //             display: flex;
+            //             flex-direction: column;
+            //             align-items: center;
+            //             justify-content: center;
+            //             cursor: pointer;
+            //             margin-left: 5px;
+
+            //             &:first-child {
+            //                 margin-left: 0;
+            //             }
+
+            //             >img {
+            //                 width: 19px;
+            //                 height: 19px;
+            //             }
+
+            //             >span {
+            //                 font-weight: 500;
+            //                 font-size: 14px;
+            //                 color: #616161;
+            //                 line-height: 20px;
+            //             }
+            //         }
+            //     }
+            // }
+            .restoreBox{
+                width: 0;
+                height: 0;
+                position: relative;
+                .restoreBtn{
+                    position: absolute;
+                    right: -51px;
+                    top: -68px;
+                    width: 72px;
+                    height: 31px;
+                    background: url("./image/restore.png") no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+            .moreFun{
+                margin-left: 8px;
+                position: relative;
+                text-align: center;
+                width: 42px;
+                background: linear-gradient(180deg, #F4EFED 0%, #D9CEC7 100%);
+                box-shadow: 0px 1px 2px 0px #9F9690, inset 0px -2px 0px 0px #CDC0B5, inset 0px 2px 1px 0px #FFFFFF;
+                border-radius: 21px;
+                font-weight: 600;
+                font-size: 12px;
+                color: #616161;
+                line-height: 16px;
+                padding: 7px 6px;
+                height: 46px;
+                flex-shrink: 0;
+                .btnBox {
+                    position: absolute;
+                    height: 86px;
+                    right: -20px;
+                    top: -84px;
+                    display: none;
+                    &.isMoreFunShow{
+                        display: initial;
+                    }
+                    .btnCon {
+                        border-radius: 17px;
                         display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        justify-content: center;
-                        cursor: pointer;
-                        margin-left: 5px;
-
-                        &:first-child {
-                            margin-left: 0;
-                        }
-
-                        >img {
-                            width: 19px;
-                            height: 19px;
+                        background: #DFD7D3;
+                        padding: 6px 5px 3px 6px;
+                        border: 2px solid #EBE5E3;
+                        position: relative;
+                        .triangle{
+                            position: absolute;
+                            bottom: -9px;
+                            right: 30px;
+                            width: 0;
+                            height: 0;
+                            border-left: 9px solid transparent;
+                            border-right: 9px solid transparent;
+                            border-top: 9px solid #EBE5E3;
+                            &::after{
+                                content: "";
+                                position: absolute;
+                                bottom: 2.5px;
+                                left: -6.5px;
+                                border-left: 7px solid transparent;
+                                border-right: 7px solid transparent;
+                                border-top: 7px solid #DFD7D3;
+                                z-index: 1;
+                            }
                         }
-
-                        >span {
-                            font-weight: 500;
-                            font-size: 14px;
-                            color: #616161;
-                            line-height: 20px;
+    
+                        .btnGr {
+                            background: url("./image/btnBg.png") no-repeat;
+                            background-size: 100% 100%;
+                            width: 93px;
+                            height: 56px;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
+                            cursor: pointer;
+                            margin-left: 5px;
+    
+                            &:first-child {
+                                margin-left: 0;
+                            }
+    
+                            >img {
+                                width: 19px;
+                                height: 19px;
+                            }
+    
+                            >span {
+                                font-weight: 500;
+                                font-size: 14px;
+                                color: #616161;
+                                line-height: 20px;
+                            }
                         }
                     }
                 }
@@ -685,7 +783,7 @@
     position: relative;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center;
     height: 65px;
     flex-shrink: 0;
     cursor: pointer;

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

@@ -23,6 +23,7 @@ import useDrag from "/src/hooks/useDrag";
 import Dragbom from "/src/hooks/useDrag/dragbom";
 import useDragGuidance from "/src/hooks/useDrag/useDragGuidance";
 import { FINER_INSTRUMENT_POINT } from "./fingeringPoint";
+import { useClickAway } from "@vant/use";
 
 export default defineComponent({
   name: "viewFigner",
@@ -232,6 +233,7 @@ export default defineComponent({
     // 切换当前模式
     const onChangeFingeringModel = (e: any) => {
       e.stopPropagation();
+      isMoreFunShow.value = false;
       //
       if (playAction.listenLock) return;
       if (playAction.showAnswerLoading) return;
@@ -283,7 +285,12 @@ export default defineComponent({
           data.viewIndex = 1;
         }
       }
-
+      // 音阶模式 默认设置正反面
+      if(data.fingeringMode === "scaleMode"){
+        if(["hulusi-flute", "ocarina", "whistling", "piccolo", "baroque-recorder"].includes(data.subject)){
+          data.viewIndex = 2;
+        }
+      }
       const o: any = {
         "pan-flute": 2,
         ocarina: 2,
@@ -780,6 +787,7 @@ export default defineComponent({
 
     /** 音符切换 */
     const noteChangeShow = () => {
+      isMoreFunShow.value = false;
       if (playStatus.action) {
         if (playAction.listenLock) return;
         playAction.resetAction = true;
@@ -811,7 +819,9 @@ export default defineComponent({
     };
 
     // 开始播放音阶
-    const onGamutPlayOrPause = async () => {
+    const onGamutPlayOrPause = async (e:Event) => {
+      e.stopPropagation();
+      isMoreFunShow.value = false;
       playAction.resetAction = false;
       if (playStatus.gamut) {
         playStatus.gamut = false;
@@ -876,7 +886,9 @@ export default defineComponent({
       userAnswer: {} as any, // 用户答的数据
       timer: null as any,
     });
-    const onActionPlay = async () => {
+    const onActionPlay = async (e:Event) => {
+      e.stopPropagation();
+      isMoreFunShow.value = false;
       playAction.resetAction = false;
       if (playAction.listenLock) return;
       if (playAction.showAnswerLoading) return;
@@ -949,7 +961,9 @@ export default defineComponent({
     };
 
     // 显示答案
-    const onShowAnswer = async () => {
+    const onShowAnswer = async (e:Event) => {
+      e.stopPropagation();
+      isMoreFunShow.value = false;
       if (playAction.listenLock) return;
       playAction.showAnswerLoading = true;
       scrollAnswer(playAction.standardAnswer.realKey);
@@ -1253,6 +1267,11 @@ export default defineComponent({
       tnoteShowBoxClass = "tnoteShowBoxClass_drag";
       tnoteShowBoxDragData = useDrag([`${tnoteShowBoxClass} .dragTopBox`, `${tnoteShowBoxClass} .dragbomBox`], tnoteShowBoxClass, toRef(data, "tnoteShow"), storeData.user.id as string);
     }
+    const moreFunDom = ref()
+    const isMoreFunShow = ref(false)
+    useClickAway(moreFunDom, () => {
+			isMoreFunShow.value = false;
+		});
     return () => {
       const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
       const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
@@ -1497,6 +1516,7 @@ export default defineComponent({
                                       class={styles.noteBtn}
                                       onClick={(e: any) => {
                                         e.stopPropagation();
+                                        isMoreFunShow.value = false;
                                         scrollNoteBox("left");
                                       }}
                                     >
@@ -1512,7 +1532,10 @@ export default defineComponent({
                                   {!!data.tones.length && data.fingeringMode === "scaleMode" && (
                                     <>
                                       {fingerData.fingeringInfo.name == "hulusi-flute" ? (
-                                        <div id="finger-note-1" class={[styles.note, styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
+                                        <div id="finger-note-1" class={[styles.note, styles.btnGrToggleBtn]} onClick={() => {
+                                          isMoreFunShow.value = false;
+                                          data.tnoteShow = true
+                                        }}>
                                           <img draggable={false} src={noteImg} />
                                           <div class={styles.nameBox}>
                                             <div class={styles.name}>全按作</div>
@@ -1527,7 +1550,10 @@ export default defineComponent({
                                           </div>
                                         </div>
                                       ) : (
-                                        <div id="finger-note-1" class={[styles.note, styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
+                                        <div id="finger-note-1" class={[styles.note, styles.btnGrToggleBtn]} onClick={() => {
+                                          isMoreFunShow.value = false;
+                                          data.tnoteShow = true
+                                        }}>
                                           <img draggable={false} src={noteImg} />
                                           <div>
                                             <div class={styles.name}>
@@ -1577,6 +1603,7 @@ export default defineComponent({
                                             onTouchstart={(e: any) => {
                                               e.stopPropagation();
                                               e.preventDefault();
+                                              isMoreFunShow.value = false;
                                               isTouch = true;
                                               startNotePress(note, false);
                                             }}
@@ -1625,6 +1652,7 @@ export default defineComponent({
                                       class={styles.noteBtn}
                                       onClick={(e: any) => {
                                         e.stopPropagation();
+                                        isMoreFunShow.value = false;
                                         scrollNoteBox("right");
                                       }}
                                     >
@@ -1632,13 +1660,79 @@ export default defineComponent({
                                     </Button>
                                   )}
                                 </div>
+                                <div class={styles.restoreBox}>
+                                  {instrumentTranstion.value && (
+                                            <div class={[styles.restoreBtn]} onClick={() => resetElement()}>
+                                            </div>
+                                    )}
+                                </div>
+                                <div ref={moreFunDom} class={styles.moreFun} onClick={()=>{ isMoreFunShow.value = !isMoreFunShow.value }}>
+                                  更多功能
+                                  <div class={[styles.btnBox, isMoreFunShow.value ? styles.isMoreFunShow : ""]} >
+                                    <div class={styles.btnCon}>
+                                      <div
+                                        class={[styles.btnGr]}
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          isMoreFunShow.value = false;
+                                          //
+                                          // 播放音阶时不能切换
+                                          if (playStatus.gamut) {
+                                            return;
+                                          }
+                                          // 开始答题不能切换
+                                          if (playAction.listenLock) {
+                                            return;
+                                          }
+
+                                          data.changeSubjectShow = true;
+                                        }}
+                                      >
+                                        <img src={icons.icon_change_instrument} />
+                                        <span>切换乐器</span>
+                                      </div>
+                                      {data.subject !== "melodica" && data.fingeringMode === "scaleMode" && (
+                                        <div
+                                          class={styles.btnGr}
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            data.viewIndex++;
+                                            if (data.viewIndex > data.viewTotal) {
+                                              if (["pan-flute", "ocarina", "whistling"].includes(data.subject)) {
+                                                data.viewIndex = 1;
+                                              } else {
+                                                data.viewIndex = 0;
+                                              }
+                                            }
+
+                                            getFingeringData();
+                                          }}
+                                        >
+                                          <img src={icons.icon_toggle} />
+                                          <span>视图</span>
+                                        </div>
+                                      )}
+                                      <div
+                                        class={styles.btnGr}
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          isMoreFunShow.value = false;
+                                          resetElement();
+                                          data.tipShow = !data.tipShow;
+                                          onResize();
+                                        }}
+                                      >
+                                        <img src={icons.icon_2_1} />
+                                        <span>说明</span>
+                                      </div>
+                                      <div class={styles.triangle}></div>
+                                    </div>
+                                  </div>
+                                </div>
                               </div>
                               {data.fingeringMode !== "scaleMode" && (
                                 <div
                                   class={styles.optionBtns}
-                                  onClick={(e: any) => {
-                                    e.stopPropagation();
-                                  }}
                                 >
                                   <Button class={[styles.oBtn, styles.gamut, playStatus.action && styles.disabled]} round onClick={onGamutPlayOrPause}>
                                     {playStatus.gamut ? "暂停" : "播放音阶"}
@@ -1654,7 +1748,7 @@ export default defineComponent({
                             </>
                           ) : (
                             <>
-                              <div class={styles.btnBox}>
+                              {/* <div class={styles.btnBox}>
                                 <div class={styles.btnCon}>
                                   <div
                                     class={[styles.btnGr]}
@@ -1714,7 +1808,7 @@ export default defineComponent({
                                     </div>
                                   )}
                                 </div>
-                              </div>
+                              </div> */}
                             </>
                           )}
                         </Tab>