|
|
@@ -17,6 +17,7 @@ import icon_loading_img from "./image/icon_loading_img.png";
|
|
|
import state, { IPlatform } from "/src/state";
|
|
|
import { api_musicalInstrumentList, api_subjectList, getSubjectList } from "../api";
|
|
|
import ChangeSubject from "./change-subject";
|
|
|
+import { Tabs,Tab } from "vant"
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: "viewFigner",
|
|
|
@@ -935,6 +936,17 @@ export default defineComponent({
|
|
|
status: true,
|
|
|
};
|
|
|
};
|
|
|
+ const userTabActive=ref<"1"|"2">("1")
|
|
|
+ const userTabs=[
|
|
|
+ {
|
|
|
+ name:"音阶",
|
|
|
+ value:"1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"功能",
|
|
|
+ value:"2"
|
|
|
+ }
|
|
|
+ ]
|
|
|
return () => {
|
|
|
const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
|
|
|
const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
|
|
|
@@ -953,46 +965,51 @@ export default defineComponent({
|
|
|
}
|
|
|
}}
|
|
|
>
|
|
|
- <div
|
|
|
- class={styles.head}
|
|
|
- style={{
|
|
|
- paddingTop: data.paddingTop && !browser().ios ? data.paddingTop : "",
|
|
|
- paddingLeft: data.paddingLeft && !browser().ios ? data.paddingLeft : "",
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class={styles.left}>
|
|
|
- <button class={[styles.backBtn]} onClick={() => handleBack()}>
|
|
|
- <img src={icons.icon_back} />
|
|
|
- </button>
|
|
|
-
|
|
|
+ {/* 老师端过来隐藏 */}
|
|
|
+ {
|
|
|
+ query.platform!=='pc'&&(
|
|
|
<div
|
|
|
- class={[styles.baseBtn, styles.changeInstrumentBtn]}
|
|
|
- onClick={(e) => {
|
|
|
- e.stopPropagation();
|
|
|
- //
|
|
|
- // 播放音阶时不能切换
|
|
|
- if (playStatus.gamut) {
|
|
|
- return;
|
|
|
- }
|
|
|
- // 开始答题不能切换
|
|
|
- if (playAction.listenLock) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- data.changeSubjectShow = true;
|
|
|
+ class={styles.head}
|
|
|
+ style={{
|
|
|
+ paddingTop: data.paddingTop && !browser().ios ? data.paddingTop : "",
|
|
|
+ paddingLeft: data.paddingLeft && !browser().ios ? data.paddingLeft : "",
|
|
|
}}
|
|
|
>
|
|
|
- <img src={icons.icon_change_instrument} />
|
|
|
- <span>切换乐器</span>
|
|
|
- </div>
|
|
|
- <div class={styles.baseBtn} onClick={onChangeFingeringModel}>
|
|
|
- <img src={modeText.value.icon} />
|
|
|
- <span>{modeText.value.text}</span>
|
|
|
+ <div class={styles.left}>
|
|
|
+ <button class={[styles.backBtn]} onClick={() => handleBack()}>
|
|
|
+ <img src={icons.icon_back} />
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class={[styles.baseBtn, styles.changeInstrumentBtn]}
|
|
|
+ onClick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ //
|
|
|
+ // 播放音阶时不能切换
|
|
|
+ if (playStatus.gamut) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 开始答题不能切换
|
|
|
+ if (playAction.listenLock) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ data.changeSubjectShow = true;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={icons.icon_change_instrument} />
|
|
|
+ <span>切换乐器</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.baseBtn} onClick={onChangeFingeringModel}>
|
|
|
+ <img src={modeText.value.icon} />
|
|
|
+ <span>{modeText.value.text}</span>
|
|
|
+ </div>
|
|
|
+ {/* */}
|
|
|
+ </div>
|
|
|
+ {/* */}
|
|
|
</div>
|
|
|
- {/* */}
|
|
|
- </div>
|
|
|
- {/* */}
|
|
|
- </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
<div
|
|
|
class={styles.fingerContent}
|
|
|
style={{
|
|
|
@@ -1003,7 +1020,7 @@ export default defineComponent({
|
|
|
<div class={styles.wrapFinger}>
|
|
|
<div
|
|
|
id="fingeringContainer"
|
|
|
- class={styles.boxFinger}
|
|
|
+ class={[styles.boxFinger,query.platform==='pc'?styles.pcBoxFinger:""]}
|
|
|
style={{
|
|
|
paddingTop: containerBox.value.paddingTop,
|
|
|
paddingBottom: containerBox.value.paddingBottom,
|
|
|
@@ -1029,142 +1046,491 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class={styles.notes}
|
|
|
- style={{
|
|
|
- paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
- }}
|
|
|
- >
|
|
|
- {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={(e: any) => {
|
|
|
- e.stopPropagation();
|
|
|
- scrollNoteBox("left");
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon name="arrow-left" />
|
|
|
- </Button>
|
|
|
- )}
|
|
|
+ {/* 老师端过来隐藏 */}
|
|
|
+ {
|
|
|
+ query.platform==='pc'?(
|
|
|
+ <div class={styles.userTab}>
|
|
|
+ <Tabs v-model:active={userTabActive.value} class={styles.userTabBox}>
|
|
|
+ {
|
|
|
+ userTabs.map(item=>{
|
|
|
+ return <Tab title={item.name} name={item.value}>
|
|
|
+ {
|
|
|
+ item.value==="1"?(<>
|
|
|
+ <div
|
|
|
+ class={styles.notes}
|
|
|
+ style={{
|
|
|
+ paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {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>}
|
|
|
+ <div class={styles.changeMusBtn} onClick={onChangeFingeringModel}>
|
|
|
+ <span>{modeText.value.text}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[styles.noteContent, data.fingeringMode !== "scaleMode" && orientationDirection.value === 0 && styles.noteContentOther, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad]}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {((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={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ scrollNoteBox("left");
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon name="arrow-left" />
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ {/* 判断是否为音阶模式 */}
|
|
|
+ {data.fingeringMode !== "scaleMode" && (
|
|
|
+ <div draggable={false} class={styles.note} onClick={noteChangeShow}>
|
|
|
+ <img draggable={false} src={data.noteType === "all" ? icons.icon_btn_orange : icons.icon_btn_orange2} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {/* [styles.noteContent, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad] */}
|
|
|
+ <div class={styles.lastNoteContent}>
|
|
|
+ <div ref={noteBoxRef} class={styles.noteBox}>
|
|
|
+ {data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
|
|
|
+ const steps = new Array(Math.abs(note.step)).fill(1);
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ id={index == 0 ? "finger-note-0" : ""}
|
|
|
+ draggable={false}
|
|
|
+ class={[styles.note, "note-class"]}
|
|
|
+ key={note.realKey}
|
|
|
+ onClick={async () => {
|
|
|
+ // 判断是否在播放音阶
|
|
|
+ if (playStatus.gamut) return;
|
|
|
+ if (playAction.listenLock) return;
|
|
|
+ if (playAction.showAnswerLoading) return;
|
|
|
+ if (playStatus.action) {
|
|
|
+ playAction.userAnswer = note;
|
|
|
+ // 判断用户答题
|
|
|
+ const userResult = note.realKey === playAction.standardAnswer.realKey ? 1 : 2;
|
|
|
+ playAction.userAnswerStatus = userResult;
|
|
|
+ playAction.listenLock = true;
|
|
|
+ data.realKey = note.realKey;
|
|
|
+ await fingeringPlay(note, 1000);
|
|
|
+ resetMode(userResult === 1 ? true : false, 0);
|
|
|
+ data.realKey = 0;
|
|
|
+
|
|
|
+ // 如果是指法模式显示完之后要还原
|
|
|
+ if (data.fingeringMode === "fingeringMode" && userResult === 2) {
|
|
|
+ // 延迟显示，因为重置的时候有一个异步操作
|
|
|
+ setTimeout(() => {
|
|
|
+ data.realKey = playAction.standardAnswer.realKey;
|
|
|
+ }, 10);
|
|
|
+ }
|
|
|
+ playAction.listenLock = false;
|
|
|
+ } else {
|
|
|
+ noteClick(note);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img draggable={false} src={resultImg(note).icon} />
|
|
|
+
|
|
|
+ {playStatus.action && ((playAction.showAnswerLoading && playAction.standardAnswer.realKey === note.realKey) || (playAction.userAnswerStatus === 1 && playAction.userAnswer.realKey === note.realKey)) ? <span class={styles.showAnswer}></span> : ""}
|
|
|
+ {playStatus.action && playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey ? <span class={[styles.showAnswer, styles.errorAnswer]}></span> : ""}
|
|
|
+ <div
|
|
|
+ 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,
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {/* 显示对应的点 */}
|
|
|
+ {note.step > 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
|
|
|
+
|
|
|
+ <div class={styles.noteName}>
|
|
|
+ <sup>{note.mark && (note.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {note.key}
|
|
|
+ </div>
|
|
|
+ {/* 显示对应的点 */}
|
|
|
+ {note.step < 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </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={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ scrollNoteBox("right");
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon name="arrow" />
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </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 ? "暂停" : "播放音阶"}
|
|
|
+ </Button>
|
|
|
+ <Button class={[styles.oBtn, styles.play, playStatus.gamut && styles.disabled]} round onClick={onActionPlay}>
|
|
|
+ {listenText.value}
|
|
|
+ </Button>
|
|
|
+ <Button class={[styles.oBtn, styles.success, !playStatus.answer && styles.disabled]} round onClick={onShowAnswer}>
|
|
|
+ 显示答案
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </>):(<>
|
|
|
+ <div class={styles.btnBox}>
|
|
|
+ <div class={styles.btnCon}>
|
|
|
+ <div
|
|
|
+ class={[styles.btnGr]}
|
|
|
+ onClick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ //
|
|
|
+ // 播放音阶时不能切换
|
|
|
+ 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={() => {
|
|
|
+ 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={() => {
|
|
|
+ resetElement();
|
|
|
+ data.tipShow = !data.tipShow;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={icons.icon_2_1} />
|
|
|
+ <span>说明</span>
|
|
|
+ </div>
|
|
|
+ {!!data.tones.length && data.fingeringMode === "scaleMode" && (
|
|
|
+ <>
|
|
|
+ {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
+ <div id="finger-note-1" class={[styles.btnGr, styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div class={styles.nameBox}>
|
|
|
+ 全按作
|
|
|
+ <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>
|
|
|
+ {data.activeTone.key}
|
|
|
+ </div>
|
|
|
+ {data.activeTone.step < 0 ? <span class={styles.dot}></span> : null}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class={styles.arrowImg} src={icons.icon_arrow} />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div id="finger-note-1" class={[styles.btnGr, styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div>
|
|
|
+ <div class={styles.name}>
|
|
|
+ <div>
|
|
|
+ <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {data.activeTone.name}
|
|
|
+ </div>
|
|
|
+ 调
|
|
|
+ </div>
|
|
|
+ <img class={styles.arrowImg} src={icons.icon_arrow} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {
|
|
|
+ instrumentTranstion.value &&
|
|
|
+ <div class={[styles.btnGr]} onClick={() => resetElement()}>
|
|
|
+ <img src={icons.icon_2_0} />
|
|
|
+ <span>还原</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </>)
|
|
|
+ }
|
|
|
+ </Tab>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ ):
|
|
|
+ (
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ class={styles.notes}
|
|
|
+ style={{
|
|
|
+ paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {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={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ 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]}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {/* 判断是否为音阶模式 */}
|
|
|
+ {data.fingeringMode !== "scaleMode" && (
|
|
|
+ <div draggable={false} class={styles.note} onClick={noteChangeShow}>
|
|
|
+ <img draggable={false} src={data.noteType === "all" ? icons.icon_btn_orange : icons.icon_btn_orange2} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* [styles.noteContent, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad] */}
|
|
|
+ <div class={styles.lastNoteContent}>
|
|
|
+ <div ref={noteBoxRef} class={styles.noteBox}>
|
|
|
+ {data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
|
|
|
+ const steps = new Array(Math.abs(note.step)).fill(1);
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ id={index == 0 ? "finger-note-0" : ""}
|
|
|
+ draggable={false}
|
|
|
+ class={[styles.note, "note-class"]}
|
|
|
+ key={note.realKey}
|
|
|
+ onClick={async () => {
|
|
|
+ // 判断是否在播放音阶
|
|
|
+ if (playStatus.gamut) return;
|
|
|
+ if (playAction.listenLock) return;
|
|
|
+ if (playAction.showAnswerLoading) return;
|
|
|
+ if (playStatus.action) {
|
|
|
+ playAction.userAnswer = note;
|
|
|
+ // 判断用户答题
|
|
|
+ const userResult = note.realKey === playAction.standardAnswer.realKey ? 1 : 2;
|
|
|
+ playAction.userAnswerStatus = userResult;
|
|
|
+ playAction.listenLock = true;
|
|
|
+ data.realKey = note.realKey;
|
|
|
+ await fingeringPlay(note, 1000);
|
|
|
+ resetMode(userResult === 1 ? true : false, 0);
|
|
|
+ data.realKey = 0;
|
|
|
+
|
|
|
+ // 如果是指法模式显示完之后要还原
|
|
|
+ if (data.fingeringMode === "fingeringMode" && userResult === 2) {
|
|
|
+ // 延迟显示，因为重置的时候有一个异步操作
|
|
|
+ setTimeout(() => {
|
|
|
+ data.realKey = playAction.standardAnswer.realKey;
|
|
|
+ }, 10);
|
|
|
+ }
|
|
|
+ playAction.listenLock = false;
|
|
|
+ } else {
|
|
|
+ noteClick(note);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img draggable={false} src={resultImg(note).icon} />
|
|
|
+
|
|
|
+ {playStatus.action && ((playAction.showAnswerLoading && playAction.standardAnswer.realKey === note.realKey) || (playAction.userAnswerStatus === 1 && playAction.userAnswer.realKey === note.realKey)) ? <span class={styles.showAnswer}></span> : ""}
|
|
|
+ {playStatus.action && playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey ? <span class={[styles.showAnswer, styles.errorAnswer]}></span> : ""}
|
|
|
+ <div
|
|
|
+ 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,
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {/* 显示对应的点 */}
|
|
|
+ {note.step > 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
|
|
|
+
|
|
|
+ <div class={styles.noteName}>
|
|
|
+ <sup>{note.mark && (note.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {note.key}
|
|
|
+ </div>
|
|
|
+ {/* 显示对应的点 */}
|
|
|
+ {note.step < 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ scrollNoteBox("right");
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon name="arrow" />
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </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 ? "暂停" : "播放音阶"}
|
|
|
+ </Button>
|
|
|
+ <Button class={[styles.oBtn, styles.play, playStatus.gamut && styles.disabled]} round onClick={onActionPlay}>
|
|
|
+ {listenText.value}
|
|
|
+ </Button>
|
|
|
+ <Button class={[styles.oBtn, styles.success, !playStatus.answer && styles.disabled]} round onClick={onShowAnswer}>
|
|
|
+ 显示答案
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ {/* 老师端过来隐藏 */}
|
|
|
+ {
|
|
|
+ query.platform!=='pc'&&(
|
|
|
<div
|
|
|
- class={[styles.noteContent, data.fingeringMode !== "scaleMode" && orientationDirection.value === 0 && styles.noteContentOther, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad]}
|
|
|
+ class={styles.fixedRightBtns}
|
|
|
+ style={{
|
|
|
+ paddingTop: data.paddingTop ? data.paddingTop : "",
|
|
|
+ paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ }}
|
|
|
onClick={(e: any) => {
|
|
|
e.stopPropagation();
|
|
|
}}
|
|
|
>
|
|
|
- {/* 判断是否为音阶模式 */}
|
|
|
- {data.fingeringMode !== "scaleMode" && (
|
|
|
- <div draggable={false} class={styles.note} onClick={noteChangeShow}>
|
|
|
- <img draggable={false} src={data.noteType === "all" ? icons.icon_btn_orange : icons.icon_btn_orange2} />
|
|
|
+ <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", "whistling"].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>
|
|
|
- )}
|
|
|
-
|
|
|
- {/* [styles.noteContent, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad] */}
|
|
|
- <div class={styles.lastNoteContent}>
|
|
|
- <div ref={noteBoxRef} class={styles.noteBox}>
|
|
|
- {data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
|
|
|
- const steps = new Array(Math.abs(note.step)).fill(1);
|
|
|
- return (
|
|
|
- <div
|
|
|
- id={index == 0 ? "finger-note-0" : ""}
|
|
|
- draggable={false}
|
|
|
- class={[styles.note, "note-class"]}
|
|
|
- key={note.realKey}
|
|
|
- onClick={async () => {
|
|
|
- // 判断是否在播放音阶
|
|
|
- if (playStatus.gamut) return;
|
|
|
- if (playAction.listenLock) return;
|
|
|
- if (playAction.showAnswerLoading) return;
|
|
|
- if (playStatus.action) {
|
|
|
- playAction.userAnswer = note;
|
|
|
- // 判断用户答题
|
|
|
- const userResult = note.realKey === playAction.standardAnswer.realKey ? 1 : 2;
|
|
|
- playAction.userAnswerStatus = userResult;
|
|
|
- playAction.listenLock = true;
|
|
|
- data.realKey = note.realKey;
|
|
|
- await fingeringPlay(note, 1000);
|
|
|
- resetMode(userResult === 1 ? true : false, 0);
|
|
|
- data.realKey = 0;
|
|
|
-
|
|
|
- // 如果是指法模式显示完之后要还原
|
|
|
- if (data.fingeringMode === "fingeringMode" && userResult === 2) {
|
|
|
- // 延迟显示，因为重置的时候有一个异步操作
|
|
|
- setTimeout(() => {
|
|
|
- data.realKey = playAction.standardAnswer.realKey;
|
|
|
- }, 10);
|
|
|
- }
|
|
|
- playAction.listenLock = false;
|
|
|
- } else {
|
|
|
- noteClick(note);
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <img draggable={false} src={resultImg(note).icon} />
|
|
|
|
|
|
- {playStatus.action && ((playAction.showAnswerLoading && playAction.standardAnswer.realKey === note.realKey) || (playAction.userAnswerStatus === 1 && playAction.userAnswer.realKey === note.realKey)) ? <span class={styles.showAnswer}></span> : ""}
|
|
|
- {playStatus.action && playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey ? <span class={[styles.showAnswer, styles.errorAnswer]}></span> : ""}
|
|
|
- <div
|
|
|
- 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,
|
|
|
- ]}
|
|
|
- >
|
|
|
- {/* 显示对应的点 */}
|
|
|
- {note.step > 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
|
|
|
+ {!!data.tones.length && data.fingeringMode === "scaleMode" && (
|
|
|
+ <>
|
|
|
+ {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
+ <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi, styles.active]} 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>{note.mark && (note.mark === "rise" ? "#" : "b")}</sup>
|
|
|
- {note.key}
|
|
|
+ <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>
|
|
|
- {/* 显示对应的点 */}
|
|
|
- {note.step < 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
|
|
|
</div>
|
|
|
+ <img src={icons.icon_arrow} />
|
|
|
</div>
|
|
|
- );
|
|
|
- })}
|
|
|
- </div>
|
|
|
+ ) : (
|
|
|
+ <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi2, styles.active]} onClick={() => (data.tnoteShow = true)}>
|
|
|
+ <div class={styles.oterhD}>
|
|
|
+ <div>
|
|
|
+ <div style={{ marginTop: "-4px" }}>
|
|
|
+ <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {data.activeTone.name}
|
|
|
+ </div>
|
|
|
+ 调
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
</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={(e: any) => {
|
|
|
- e.stopPropagation();
|
|
|
- scrollNoteBox("right");
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon name="arrow" />
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- </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 ? "暂停" : "播放音阶"}
|
|
|
- </Button>
|
|
|
- <Button class={[styles.oBtn, styles.play, playStatus.gamut && styles.disabled]} round onClick={onActionPlay}>
|
|
|
- {listenText.value}
|
|
|
- </Button>
|
|
|
- <Button class={[styles.oBtn, styles.success, !playStatus.answer && styles.disabled]} round onClick={onShowAnswer}>
|
|
|
- 显示答案
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div class={[styles.tips, data.loadingDom ? styles.hiddens : "", data.tipShow ? "" : styles.tipHidden]}>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ {/* 老师端加上遮罩点击关闭 */}
|
|
|
+ {
|
|
|
+ query.platform==='pc'&&data.tipShow&&(
|
|
|
+ <div class={[styles.tipsOverlay,data.tipShow?styles.tipsOverlayBg:'']} onClick={()=>{data.tipShow=false}}></div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ <div class={[styles.tips, data.loadingDom ? styles.hiddens : "", data.tipShow ? "" : styles.tipHidden,query.platform==='pc'&&data.tipShow?styles.tipsPcBg:""]}>
|
|
|
<div class={styles.tipTitle}>
|
|
|
<div class={styles.tipTitleName}>{fingerData.fingeringInfo.code}使用说明</div>
|
|
|
<Button
|
|
|
@@ -1203,89 +1569,6 @@ export default defineComponent({
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
- <div
|
|
|
- class={styles.fixedRightBtns}
|
|
|
- style={{
|
|
|
- paddingTop: data.paddingTop ? data.paddingTop : "",
|
|
|
- paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
- }}
|
|
|
- onClick={(e: any) => {
|
|
|
- e.stopPropagation();
|
|
|
- }}
|
|
|
- >
|
|
|
- <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", "whistling"].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>
|
|
|
-
|
|
|
- {!!data.tones.length && data.fingeringMode === "scaleMode" && (
|
|
|
- <>
|
|
|
- {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
- <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi, styles.active]} 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>
|
|
|
- {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.baseBtn, styles.toggleBtnhulusi2, styles.active]} onClick={() => (data.tnoteShow = true)}>
|
|
|
- <div class={styles.oterhD}>
|
|
|
- <div>
|
|
|
- <div style={{ marginTop: "-4px" }}>
|
|
|
- <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
- {data.activeTone.name}
|
|
|
- </div>
|
|
|
- 调
|
|
|
- </div>
|
|
|
- <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>
|
|
|
- </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}>
|
黄琪勇
