|
|
@@ -295,7 +295,7 @@ export default defineComponent({
|
|
|
className: "",
|
|
|
});
|
|
|
});
|
|
|
- console.log(data.subjects, "subjects");
|
|
|
+ // console.log(data.subjects, "subjects");
|
|
|
} catch {
|
|
|
//
|
|
|
}
|
|
|
@@ -414,7 +414,6 @@ export default defineComponent({
|
|
|
});
|
|
|
//
|
|
|
mc.on("hammer.input", function (ev) {
|
|
|
- // console.log("🚀 ~ ev:", ev.type, ev.isFinal);
|
|
|
if (ev.isFinal) {
|
|
|
data.transform.startScale = data.transform.scale;
|
|
|
data.transform.startX = data.transform.x;
|
|
|
@@ -434,6 +433,16 @@ export default defineComponent({
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ // 判断乐器是否移动
|
|
|
+ const instrumentTranstion = computed(() => {
|
|
|
+ const transform = data.transform;
|
|
|
+ if (transform.scale !== 1 || transform.x !== 0 || transform.y !== 0 || transform.startScale !== 1 || transform.startX !== 0 || transform.startY !== 0) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
const pageVisible = usePageVisibility();
|
|
|
watch(
|
|
|
() => pageVisible.value,
|
|
|
@@ -471,10 +480,16 @@ export default defineComponent({
|
|
|
|
|
|
/** 音符切换 */
|
|
|
const noteChangeShow = () => {
|
|
|
- // 播放音阶时不能切换
|
|
|
- if (playStatus.gamut) return;
|
|
|
- // 开始答题不能切换
|
|
|
- if (playStatus.action) return;
|
|
|
+ if (playStatus.action) {
|
|
|
+ if (playAction.listenLock) return;
|
|
|
+ playAction.resetAction = true;
|
|
|
+ resetMode(true, 0);
|
|
|
+ }
|
|
|
+ // // 播放音阶时不能切换
|
|
|
+ // if (playStatus.gamut) return;
|
|
|
+ // // 开始答题不能切换
|
|
|
+ // if (playStatus.action) return;
|
|
|
+ playStatus.gamut = false;
|
|
|
gaumntPause();
|
|
|
if (data.noteType === "all") {
|
|
|
data.noteType = "#c";
|
|
|
@@ -482,10 +497,15 @@ export default defineComponent({
|
|
|
data.noteType = "all";
|
|
|
}
|
|
|
getNotes();
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ playAction.resetAction = false;
|
|
|
+ }, 2000);
|
|
|
};
|
|
|
|
|
|
// 开始播放音阶
|
|
|
const onGamutPlayOrPause = async () => {
|
|
|
+ playAction.resetAction = false;
|
|
|
if (playStatus.gamut) {
|
|
|
playStatus.gamut = false;
|
|
|
gaumntPause();
|
|
|
@@ -543,11 +563,13 @@ export default defineComponent({
|
|
|
listenModeStatus: false, // 是否开始了模式
|
|
|
listenLock: false,
|
|
|
listenTipsStatus: false, // 开始播放状态
|
|
|
+ resetAction: false, // 是否重置
|
|
|
/** 0: 未答，1: 答对，2: 答错 */
|
|
|
userAnswerStatus: 0 as 0 | 1 | 2, // 用户回答状态
|
|
|
userAnswer: {} as any, // 用户答的数据
|
|
|
});
|
|
|
const onActionPlay = async () => {
|
|
|
+ playAction.resetAction = false;
|
|
|
if (playAction.listenLock) return;
|
|
|
if (playAction.showAnswerLoading) return;
|
|
|
playStatus.action = true;
|
|
|
@@ -875,10 +897,6 @@ export default defineComponent({
|
|
|
<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}
|
|
|
@@ -931,43 +949,13 @@ export default defineComponent({
|
|
|
),
|
|
|
}}
|
|
|
</Popover>
|
|
|
-
|
|
|
- {data.subject !== "melodica" && data.fingeringMode === "scaleMode" && (
|
|
|
- <div
|
|
|
- class={styles.baseBtn}
|
|
|
- onClick={() => {
|
|
|
- data.viewIndex++;
|
|
|
- if (data.viewIndex > data.viewTotal) {
|
|
|
- if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
|
- data.viewIndex = 1;
|
|
|
- } else {
|
|
|
- data.viewIndex = 0;
|
|
|
- }
|
|
|
- }
|
|
|
- getFingeringData();
|
|
|
- }}
|
|
|
- >
|
|
|
- <img src={icons.icon_toggle} />
|
|
|
- <span>切换视图</span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div class={styles.rightBtn}>
|
|
|
- <div class={styles.baseBtn} onClick={() => resetElement()}>
|
|
|
- <img src={icons.icon_2_0} />
|
|
|
- <span>还原</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={styles.baseBtn}
|
|
|
- onClick={() => {
|
|
|
- resetElement();
|
|
|
- data.tipShow = !data.tipShow;
|
|
|
- }}
|
|
|
- >
|
|
|
- <img src={icons.icon_2_1} />
|
|
|
- <span>使用说明</span>
|
|
|
+ <div class={styles.baseBtn} onClick={onChangeFingeringModel}>
|
|
|
+ <img src={modeText.value.icon} />
|
|
|
+ <span>{modeText.value.text}</span>
|
|
|
</div>
|
|
|
+ {/* */}
|
|
|
</div>
|
|
|
+ {/* */}
|
|
|
</div>
|
|
|
<div class={styles.fingerContent}>
|
|
|
<div class={styles.wrapFinger}>
|
|
|
@@ -1008,13 +996,12 @@ 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>}
|
|
|
-
|
|
|
+ {playAction.resetAction && <div class={[styles.tipsT, styles.playTips5]}></div>}
|
|
|
{((data.noteType !== "#c" && (orientationDirection.value === 0 || (orientationDirection.value === 1 && state.platform === IPlatform.PC))) || (orientationDirection.value === 1 && state.platform === IPlatform.APP)) && (
|
|
|
<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" && (
|
|
|
@@ -1146,36 +1133,103 @@ export default defineComponent({
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
- {!!data.tones.length && data.fingeringMode === "scaleMode" && (
|
|
|
- <>
|
|
|
- {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
- <div id="finger-note-1" class={[styles.toggleBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
|
|
|
- <div>
|
|
|
- 全按作
|
|
|
- <div class={[styles.noteKey]}>
|
|
|
- {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
|
|
|
+ <div class={styles.fixedRightBtns}>
|
|
|
+ <div class={styles.rightBtn}>
|
|
|
+ {data.subject !== "melodica" && data.fingeringMode === "scaleMode" && (
|
|
|
+ <div
|
|
|
+ class={styles.baseBtn}
|
|
|
+ onClick={() => {
|
|
|
+ data.viewIndex++;
|
|
|
+ if (data.viewIndex > data.viewTotal) {
|
|
|
+ if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
|
+ data.viewIndex = 1;
|
|
|
+ } else {
|
|
|
+ data.viewIndex = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getFingeringData();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={icons.icon_toggle} />
|
|
|
+ <span>视图</span>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div
|
|
|
+ class={styles.baseBtn}
|
|
|
+ onClick={() => {
|
|
|
+ resetElement();
|
|
|
+ data.tipShow = !data.tipShow;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={icons.icon_2_1} />
|
|
|
+ <span>使用</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class={styles.noteName}>
|
|
|
- <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
- {data.activeTone.key}
|
|
|
- </div>
|
|
|
- {data.activeTone.step < 0 ? <span class={styles.dot}></span> : null}
|
|
|
+ <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div>
|
|
|
+ 全按作
|
|
|
+ <div class={[styles.noteKey, styles.noteKeyBtn]}>
|
|
|
+ {/* {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null} */}
|
|
|
+ <span class={styles.dot}></span>
|
|
|
+
|
|
|
+ <div class={styles.noteName}>
|
|
|
+ {/* <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup> */}
|
|
|
+ <sup>#</sup>
|
|
|
+ {/* {data.activeTone.key} */}5
|
|
|
</div>
|
|
|
+ {/* {data.activeTone.step < 0 ? <span class={styles.dot}></span> : null} */}
|
|
|
</div>
|
|
|
- <img src={icons.icon_arrow} />
|
|
|
</div>
|
|
|
- ) : (
|
|
|
- <div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ {/* <img src={icons.icon_arrow} /> */}
|
|
|
+ </div>
|
|
|
+ {/* <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div style={{ display: "flex" }}>
|
|
|
<div style={{ marginTop: "-4px" }}>
|
|
|
<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
{data.activeTone.name}
|
|
|
</div>
|
|
|
调
|
|
|
- <img src={icons.icon_arrow} />
|
|
|
+ <img src={icons.icon_arrow} />
|
|
|
</div>
|
|
|
- )}
|
|
|
- </>
|
|
|
- )}
|
|
|
+ </div> */}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={[styles.baseBtn, !instrumentTranstion.value && styles.resetBtn]} style={{ marginTop: "8px" }} onClick={() => resetElement()}>
|
|
|
+ <img src={icons.icon_2_0} />
|
|
|
+ <span>还原</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* {!!data.tones.length && data.fingeringMode === "scaleMode" && (
|
|
|
+ <>
|
|
|
+ {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
+ <div id="finger-note-1" class={[styles.toggleBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div>
|
|
|
+ 全按作
|
|
|
+ <div class={[styles.noteKey]}>
|
|
|
+ {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
|
|
|
+
|
|
|
+ <div class={styles.noteName}>
|
|
|
+ <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {data.activeTone.key}
|
|
|
+ </div>
|
|
|
+ {data.activeTone.step < 0 ? <span class={styles.dot}></span> : null}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src={icons.icon_arrow} />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div style={{ marginTop: "-4px" }}>
|
|
|
+ <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {data.activeTone.name}
|
|
|
+ </div>
|
|
|
+ 调
|
|
|
+ <img src={icons.icon_arrow} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )} */}
|
|
|
+ </div>
|
|
|
|
|
|
<Popup class="tonePopup" v-model:show={data.tnoteShow} position={state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? "bottom" : "right"}>
|
|
|
<div class={styles.tones}>
|
