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

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

@@ -422,7 +422,7 @@
                 }
             }
             .moreFun{
-                margin-left: 6px;
+                margin-left: 8px;
                 position: relative;
                 text-align: center;
                 width: 42px;
@@ -436,17 +436,15 @@
                 padding: 7px 6px;
                 height: 46px;
                 flex-shrink: 0;
-                &:hover{
-                    .btnBox{
-                        display: initial;
-                    } 
-                }
                 .btnBox {
-                    display: none;
                     position: absolute;
                     height: 86px;
                     right: -20px;
                     top: -84px;
+                    display: none;
+                    &.isMoreFunShow{
+                        display: initial;
+                    }
                     .btnCon {
                         border-radius: 17px;
                         display: flex;

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;
@@ -785,6 +787,7 @@ export default defineComponent({
 
     /** 音符切换 */
     const noteChangeShow = () => {
+      isMoreFunShow.value = false;
       if (playStatus.action) {
         if (playAction.listenLock) return;
         playAction.resetAction = true;
@@ -816,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;
@@ -881,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;
@@ -954,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);
@@ -1258,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;
@@ -1502,6 +1516,7 @@ export default defineComponent({
                                       class={styles.noteBtn}
                                       onClick={(e: any) => {
                                         e.stopPropagation();
+                                        isMoreFunShow.value = false;
                                         scrollNoteBox("left");
                                       }}
                                     >
@@ -1517,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>
@@ -1532,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}>
@@ -1582,6 +1603,7 @@ export default defineComponent({
                                             onTouchstart={(e: any) => {
                                               e.stopPropagation();
                                               e.preventDefault();
+                                              isMoreFunShow.value = false;
                                               isTouch = true;
                                               startNotePress(note, false);
                                             }}
@@ -1630,6 +1652,7 @@ export default defineComponent({
                                       class={styles.noteBtn}
                                       onClick={(e: any) => {
                                         e.stopPropagation();
+                                        isMoreFunShow.value = false;
                                         scrollNoteBox("right");
                                       }}
                                     >
@@ -1643,14 +1666,15 @@ export default defineComponent({
                                             </div>
                                     )}
                                 </div>
-                                <div class={styles.moreFun}>
+                                <div ref={moreFunDom} class={styles.moreFun} onClick={()=>{ isMoreFunShow.value = !isMoreFunShow.value }}>
                                   更多功能
-                                  <div class={styles.btnBox}>
+                                  <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) {
@@ -1672,6 +1696,7 @@ export default defineComponent({
                                           class={styles.btnGr}
                                           onClick={(e) => {
                                             e.stopPropagation();
+                                            isMoreFunShow.value = false;
                                             data.viewIndex++;
                                             if (data.viewIndex > data.viewTotal) {
                                               if (["pan-flute", "ocarina", "whistling"].includes(data.subject)) {
@@ -1692,6 +1717,7 @@ export default defineComponent({
                                         class={styles.btnGr}
                                         onClick={(e) => {
                                           e.stopPropagation();
+                                          isMoreFunShow.value = false;
                                           resetElement();
                                           data.tipShow = !data.tipShow;
                                           onResize();
@@ -1708,9 +1734,6 @@ export default defineComponent({
                               {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 ? "暂停" : "播放音阶"}