|
@@ -15,7 +15,8 @@ import { usePageVisibility } from "@vant/use";
|
|
|
import { watch } from "vue";
|
|
|
import icon_loading_img from "./image/icon_loading_img.png";
|
|
|
import state, { IPlatform } from "/src/state";
|
|
|
-import { getSubjectList } from "../api";
|
|
|
+import { api_musicalInstrumentList, api_subjectList, getSubjectList } from "../api";
|
|
|
+import ChangeSubject from "./change-subject";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: "viewFigner",
|
|
@@ -40,6 +41,7 @@ export default defineComponent({
|
|
|
const code = mappingVoicePart(query.code, "INSTRUMENT");
|
|
|
const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
|
|
|
const data = reactive({
|
|
|
+ linkSource: query.linkSource, // 来源,目前只有课件里使用
|
|
|
loading: true,
|
|
|
subject: subject as any,
|
|
|
realKey: 0,
|
|
@@ -68,6 +70,8 @@ export default defineComponent({
|
|
|
loadingSoundFonts: true,
|
|
|
loadingSoundProgress: 0,
|
|
|
|
|
|
+ changeSubjectShow: false,
|
|
|
+
|
|
|
huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
|
|
|
paddingTop: "",
|
|
|
paddingLeft: "",
|
|
@@ -106,7 +110,7 @@ export default defineComponent({
|
|
|
const getAPPData = async (type: "top" | "left") => {
|
|
|
const screenData = await isSpecialShapedScreen();
|
|
|
if (screenData?.content) {
|
|
|
- // console.log("🚀 ~ screenData:", screenData.content);
|
|
|
+ console.log("🚀 ~ screenData:", screenData.content);
|
|
|
const { isSpecialShapedScreen, notchHeight } = screenData.content;
|
|
|
if (isSpecialShapedScreen) {
|
|
|
if (type === "top") {
|
|
@@ -120,10 +124,10 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
const getHeadTop = () => {
|
|
|
- if (!browsInfo.ios && fingerData.fingeringInfo.orientation === 1) {
|
|
|
+ if (fingerData.fingeringInfo.orientation === 1) {
|
|
|
getAPPData("top");
|
|
|
}
|
|
|
- if (!browsInfo.ios && fingerData.fingeringInfo.orientation === 0) {
|
|
|
+ if (fingerData.fingeringInfo.orientation === 0) {
|
|
|
getAPPData("left");
|
|
|
}
|
|
|
};
|
|
@@ -161,7 +165,7 @@ export default defineComponent({
|
|
|
};
|
|
|
const getFingeringData = async () => {
|
|
|
const subject: any = data.subject + (data.viewIndex === 0 ? "" : data.viewIndex);
|
|
|
- console.log("🚀 ~ subject:", subject);
|
|
|
+ console.log("🚀 ~ subject:模式", subject, data.viewIndex, data.fingeringMode);
|
|
|
fingerData.subject = await getFingeringConfig(subject);
|
|
|
};
|
|
|
const createAudio = (url: string) => {
|
|
@@ -201,24 +205,25 @@ export default defineComponent({
|
|
|
data.loadingSoundFonts = false;
|
|
|
};
|
|
|
|
|
|
- const selectSubjectType = (subject: string) => {
|
|
|
- data.subjects.forEach((item: any) => {
|
|
|
- if (item.value === subject) {
|
|
|
- item.className = styles.selected;
|
|
|
- } else {
|
|
|
- item.className = "";
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
+ // const selectSubjectType = (subject: string) => {
|
|
|
+ // data.subjects.forEach((item: any) => {
|
|
|
+ // if (item.value === subject) {
|
|
|
+ // item.className = styles.selected;
|
|
|
+ // } else {
|
|
|
+ // item.className = "";
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // };
|
|
|
|
|
|
// 切换当前模式
|
|
|
- const onChangeFingeringModel = () => {
|
|
|
+ const onChangeFingeringModel = (e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
//
|
|
|
if (playAction.listenLock) return;
|
|
|
if (playAction.showAnswerLoading) return;
|
|
|
- data.loadingImg = true
|
|
|
+ data.loadingImg = true;
|
|
|
if (data.fingeringMode === "scaleMode") {
|
|
|
- if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
|
+ if (["pan-flute", "ocarina", "whistling"].includes(data.subject)) {
|
|
|
data.viewIndex = 1;
|
|
|
} else {
|
|
|
data.viewIndex = 0;
|
|
@@ -226,6 +231,7 @@ export default defineComponent({
|
|
|
const o: any = {
|
|
|
"pan-flute": 2,
|
|
|
ocarina: 2,
|
|
|
+ whistling: 2,
|
|
|
piccolo: 2,
|
|
|
"hulusi-flute": 2,
|
|
|
"baroque-recorder": 2,
|
|
@@ -249,17 +255,16 @@ export default defineComponent({
|
|
|
const __init = async (loadSong = true) => {
|
|
|
data.loadingDom = true;
|
|
|
getNotes();
|
|
|
-
|
|
|
- selectSubjectType(data.subject);
|
|
|
+ // selectSubjectType(data.subject);
|
|
|
|
|
|
if (data.fingeringMode === "fingeringMode") {
|
|
|
if (data.subject === "pan-flute") {
|
|
|
data.viewIndex = 3;
|
|
|
- } else if (["pan-flute", "ocarina", "melodica"].includes(data.subject)) {
|
|
|
+ } else if (["pan-flute", "ocarina", "melodica", "whistling"].includes(data.subject)) {
|
|
|
data.viewIndex = 1;
|
|
|
}
|
|
|
} else {
|
|
|
- if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
|
+ if (["pan-flute", "ocarina", "whistling"].includes(data.subject)) {
|
|
|
data.viewIndex = 1;
|
|
|
}
|
|
|
}
|
|
@@ -267,6 +272,7 @@ export default defineComponent({
|
|
|
const o: any = {
|
|
|
"pan-flute": 2,
|
|
|
ocarina: 2,
|
|
|
+ whistling: 2,
|
|
|
piccolo: 2,
|
|
|
"hulusi-flute": 2,
|
|
|
"baroque-recorder": 2,
|
|
@@ -285,23 +291,29 @@ export default defineComponent({
|
|
|
// 获取声部
|
|
|
const getSubjects = async () => {
|
|
|
try {
|
|
|
- const subjects = await getSubjectList({
|
|
|
+ // api_subjectList
|
|
|
+ const subjects = await api_musicalInstrumentList({
|
|
|
enableFlag: true,
|
|
|
- delFlag: 0,
|
|
|
- page: 1,
|
|
|
- rows: 999,
|
|
|
});
|
|
|
- const rows = subjects.data.rows || [];
|
|
|
+
|
|
|
+ const rows = subjects.data || [];
|
|
|
rows.forEach((row: any) => {
|
|
|
- data.subjects.push({
|
|
|
+ const tempList: any = {
|
|
|
text: row.name,
|
|
|
- value: mappingVoicePart(row.code, "INSTRUMENT"),
|
|
|
- className: "",
|
|
|
- });
|
|
|
+ value: mappingVoicePart(row.code, "INSTRUMENT"), // mappingVoicePart(row.code, "INSTRUMENT"),
|
|
|
+ id: row.id,
|
|
|
+ };
|
|
|
+ data.subjects.push(tempList);
|
|
|
});
|
|
|
- // console.log(data.subjects, "subjects");
|
|
|
- } catch {
|
|
|
+
|
|
|
+ // data.subjects.forEach((item: any) => {
|
|
|
+ // if (item.value === data.subject && item.children?.length > 1) {
|
|
|
+ // data.subject = item.children[0].value;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ } catch (e) {
|
|
|
//
|
|
|
+ console.log(e, "e");
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -338,6 +350,7 @@ export default defineComponent({
|
|
|
if (showNote) {
|
|
|
data.realKey = item.realKey;
|
|
|
}
|
|
|
+ console.log('key:', item.realKey, data.soundFonts)
|
|
|
data.noteAudio = data.soundFonts[item.realKey];
|
|
|
if (data.noteAudio) {
|
|
|
data.noteAudio.play();
|
|
@@ -357,7 +370,7 @@ export default defineComponent({
|
|
|
handleStop();
|
|
|
if (props.isComponent) {
|
|
|
// 返回的时候默认横屏
|
|
|
- api_setRequestedOrientation(0);
|
|
|
+ // api_setRequestedOrientation(0);
|
|
|
emit("close");
|
|
|
return;
|
|
|
} else if (state.platform === IPlatform.PC) {
|
|
@@ -391,10 +404,10 @@ export default defineComponent({
|
|
|
// 排箫,默认0.9显示
|
|
|
const setDefaultScale = () => {
|
|
|
if (data.subject === "pan-flute") {
|
|
|
- data.transform.scale = 0.9
|
|
|
- data.transform.startScale = 0.9
|
|
|
+ data.transform.scale = 0.9;
|
|
|
+ data.transform.startScale = 0.9;
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
onMounted(() => {
|
|
|
loadElement();
|
|
@@ -402,7 +415,7 @@ export default defineComponent({
|
|
|
});
|
|
|
const loadElement = () => {
|
|
|
const fingeringContainer = document.getElementById("fingeringContainer");
|
|
|
- setDefaultScale()
|
|
|
+ setDefaultScale();
|
|
|
// console.log("🚀 ~ fingeringContainer:", fingeringContainer);
|
|
|
const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
|
|
|
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
|
|
@@ -449,7 +462,12 @@ 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) {
|
|
|
+
|
|
|
+ let scale = 1;
|
|
|
+ if (data.subject === "pan-flute") {
|
|
|
+ scale = 0.9;
|
|
|
+ }
|
|
|
+ if (transform.scale !== scale || transform.x !== 0 || transform.y !== 0 || transform.startScale !== scale || transform.startX !== 0 || transform.startY !== 0) {
|
|
|
return true;
|
|
|
} else {
|
|
|
return false;
|
|
@@ -461,7 +479,11 @@ export default defineComponent({
|
|
|
() => pageVisible.value,
|
|
|
(val) => {
|
|
|
if (val === "hidden") {
|
|
|
- console.log("页面隐藏停止播放");
|
|
|
+ clearTimeout(playAction.timer);
|
|
|
+ playAction.listenLock = false;
|
|
|
+ playAction.listenTipsStatus = false;
|
|
|
+ playAction.exampleAnser = {};
|
|
|
+ resetMode(true, 0);
|
|
|
handleStop();
|
|
|
gaumntPause();
|
|
|
}
|
|
@@ -470,8 +492,28 @@ export default defineComponent({
|
|
|
/** 课件播放 */
|
|
|
const changePlay = (res: any) => {
|
|
|
if (res?.data?.api === "setPlayState") {
|
|
|
+ clearTimeout(playAction.timer);
|
|
|
+ playAction.listenLock = false;
|
|
|
+ playAction.listenTipsStatus = false;
|
|
|
+ playAction.exampleAnser = {};
|
|
|
+ resetMode(true, 0);
|
|
|
handleStop();
|
|
|
gaumntPause();
|
|
|
+
|
|
|
+ // 重置乐器
|
|
|
+ if (res?.data?.data.code) {
|
|
|
+ data.subject = code;
|
|
|
+ data.viewIndex = 0;
|
|
|
+ data.tipShow = false;
|
|
|
+ data.loadingDom = true;
|
|
|
+ fingerData.fingeringInfo = subjectFingering(data.subject);
|
|
|
+ data.activeTone = {} as any;
|
|
|
+ resetElement();
|
|
|
+ // 设置屏幕方向
|
|
|
+ setTimeout(() => {
|
|
|
+ __init();
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -580,6 +622,7 @@ export default defineComponent({
|
|
|
/** 0: 未答,1: 答对,2: 答错 */
|
|
|
userAnswerStatus: 0 as 0 | 1 | 2, // 用户回答状态
|
|
|
userAnswer: {} as any, // 用户答的数据
|
|
|
+ timer: null as any,
|
|
|
});
|
|
|
const onActionPlay = async () => {
|
|
|
playAction.resetAction = false;
|
|
@@ -607,7 +650,7 @@ export default defineComponent({
|
|
|
const fingeringPlay = (note: any, timer = 1500, showNote = true) => {
|
|
|
return new Promise((resolve) => {
|
|
|
noteClick(note, showNote);
|
|
|
- setTimeout(() => {
|
|
|
+ playAction.timer = setTimeout(() => {
|
|
|
resolve(note);
|
|
|
}, timer);
|
|
|
});
|
|
@@ -622,7 +665,7 @@ export default defineComponent({
|
|
|
playAction.listenModeStatus = true; // 是否开始听音
|
|
|
playAction.listenLock = true; // 锁
|
|
|
playAction.listenTipsStatus = true;
|
|
|
- setTimeout(() => {
|
|
|
+ playAction.timer = setTimeout(() => {
|
|
|
playAction.listenTipsStatus = false;
|
|
|
playAction.listenLock = false; // 锁
|
|
|
}, 2000);
|
|
@@ -642,7 +685,7 @@ export default defineComponent({
|
|
|
data.realKey = 0;
|
|
|
playAction.exampleAnser = {};
|
|
|
gaumntPause();
|
|
|
- setTimeout(async () => {
|
|
|
+ playAction.timer = setTimeout(async () => {
|
|
|
// 设置答题数据
|
|
|
randomIndex = Math.floor(Math.random() * data.notes.length);
|
|
|
playAction.standardAnswer = data.notes[randomIndex];
|
|
@@ -737,35 +780,35 @@ export default defineComponent({
|
|
|
const containerBox = computed(() => {
|
|
|
if (state.platform === IPlatform.PC || query.modelType) {
|
|
|
return {
|
|
|
- paddingTop: "1rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: "",
|
|
|
};
|
|
|
}
|
|
|
if (data.fingeringMode === "scaleMode") {
|
|
|
if (data.subject === "hulusi-flute") {
|
|
|
return {
|
|
|
- paddingTop: "3.1rem",
|
|
|
- paddingBottom: ".8rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
+ paddingBottom: ".5rem",
|
|
|
};
|
|
|
} else if (data.subject === "piccolo" || data.subject === "baroque-recorder") {
|
|
|
return {
|
|
|
- paddingTop: "4rem",
|
|
|
- paddingBottom: ".8rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
+ paddingBottom: ".5rem",
|
|
|
};
|
|
|
} else if (data.subject === "pan-flute") {
|
|
|
return {
|
|
|
- paddingTop: "0",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: "0",
|
|
|
};
|
|
|
- } else if (data.subject === "ocarina") {
|
|
|
+ } else if (data.subject === "ocarina" || data.subject === "whistling") {
|
|
|
return {
|
|
|
- paddingTop: "1.2rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: "0",
|
|
|
};
|
|
|
} else if (data.subject === "melodica") {
|
|
|
return {
|
|
|
- paddingTop: "2.8rem",
|
|
|
- paddingBottom: "1.8rem",
|
|
|
+ paddingTop: "1.8rem",
|
|
|
+ paddingBottom: "0.2rem",
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
@@ -776,28 +819,28 @@ export default defineComponent({
|
|
|
} else {
|
|
|
if (data.subject === "hulusi-flute") {
|
|
|
return {
|
|
|
- paddingTop: "3.1rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: "0rem",
|
|
|
};
|
|
|
} else if (data.subject === "piccolo" || data.subject === "baroque-recorder") {
|
|
|
return {
|
|
|
- paddingTop: "3rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: ".5rem",
|
|
|
};
|
|
|
} else if (data.subject === "pan-flute") {
|
|
|
return {
|
|
|
- paddingTop: "0",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: "0",
|
|
|
};
|
|
|
- } else if (data.subject === "ocarina") {
|
|
|
+ } else if (data.subject === "ocarina" || data.subject === "whistling") {
|
|
|
return {
|
|
|
- paddingTop: "1rem",
|
|
|
+ paddingTop: "1.3rem",
|
|
|
paddingBottom: "0",
|
|
|
};
|
|
|
} else if (data.subject === "melodica") {
|
|
|
return {
|
|
|
- paddingTop: "2.8rem",
|
|
|
- paddingBottom: "0.8rem",
|
|
|
+ paddingTop: "1.8rem",
|
|
|
+ paddingBottom: "0.2rem",
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
@@ -897,12 +940,24 @@ export default defineComponent({
|
|
|
const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
|
|
|
const canTizhi = Array.isArray(relationship[1]);
|
|
|
return (
|
|
|
- <div class={[styles.fingerBox, state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? styles.fingerBottom : styles.fingerRight]}>
|
|
|
+ <div
|
|
|
+ class={[styles.fingerBox, state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? styles.fingerBottom : styles.fingerRight, data.linkSource === "class" ? styles.linkSourceClass : ""]}
|
|
|
+ onClick={() => {
|
|
|
+ if (data.linkSource === "class") {
|
|
|
+ window.parent.postMessage(
|
|
|
+ {
|
|
|
+ api: "clickViewFigner",
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
<div
|
|
|
class={styles.head}
|
|
|
style={{
|
|
|
- paddingTop: data.paddingTop ? data.paddingTop : "",
|
|
|
- paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ paddingTop: data.paddingTop && !browser().ios ? data.paddingTop : "",
|
|
|
+ paddingLeft: data.paddingLeft && !browser().ios ? data.paddingLeft : "",
|
|
|
}}
|
|
|
>
|
|
|
<div class={styles.left}>
|
|
@@ -910,65 +965,26 @@ export default defineComponent({
|
|
|
<img src={icons.icon_back} />
|
|
|
</button>
|
|
|
|
|
|
- <Popover
|
|
|
- placement="bottom"
|
|
|
- class={styles.popoverContainer}
|
|
|
- actions={data.subjects}
|
|
|
- onUpdate:show={() => {
|
|
|
+ <div
|
|
|
+ class={[styles.baseBtn, styles.changeInstrumentBtn]}
|
|
|
+ onClick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ //
|
|
|
// 播放音阶时不能切换
|
|
|
- if (playStatus.gamut) return;
|
|
|
+ if (playStatus.gamut) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
// 开始答题不能切换
|
|
|
- if (playStatus.action) return;
|
|
|
- }}
|
|
|
- onSelect={(val: any) => {
|
|
|
- if (data.subject === val.value) return;
|
|
|
- const originalSubject = JSON.parse(JSON.stringify(data.subject));
|
|
|
- data.subject = val.value;
|
|
|
- data.viewIndex = 0;
|
|
|
- data.tipShow = false;
|
|
|
- data.loadingDom = true;
|
|
|
- fingerData.fingeringInfo = subjectFingering(data.subject);
|
|
|
- data.activeTone = {} as any;
|
|
|
- resetElement();
|
|
|
- resetMode(true, 0);
|
|
|
- api_setRequestedOrientation(orientationDirection.value);
|
|
|
- // 设置屏幕方向
|
|
|
- setTimeout(() => {
|
|
|
- const before = ["hulusi-flute", "piccolo", "baroque-recorder"].includes(originalSubject) ? 1 : 0;
|
|
|
- if (orientationDirection.value !== before) {
|
|
|
- data.paddingTop = "";
|
|
|
- data.paddingLeft = "";
|
|
|
- }
|
|
|
+ if (playAction.listenLock) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- __init();
|
|
|
- }, 100);
|
|
|
+ data.changeSubjectShow = true;
|
|
|
}}
|
|
|
>
|
|
|
- {{
|
|
|
- reference: () => (
|
|
|
- <div
|
|
|
- class={styles.baseBtn}
|
|
|
- onClick={(e) => {
|
|
|
- //
|
|
|
- // 播放音阶时不能切换
|
|
|
- if (playStatus.gamut) {
|
|
|
- e.stopPropagation();
|
|
|
- e.preventDefault();
|
|
|
- }
|
|
|
- // 开始答题不能切换
|
|
|
- // if (playStatus.action) return;
|
|
|
- if (playAction.listenLock) {
|
|
|
- e.stopPropagation();
|
|
|
- e.preventDefault();
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <img src={icons.icon_change_instrument} />
|
|
|
- <span>切换乐器</span>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- }}
|
|
|
- </Popover>
|
|
|
+ <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>
|
|
@@ -977,7 +993,13 @@ export default defineComponent({
|
|
|
</div>
|
|
|
{/* */}
|
|
|
</div>
|
|
|
- <div class={styles.fingerContent}>
|
|
|
+ <div
|
|
|
+ class={styles.fingerContent}
|
|
|
+ style={{
|
|
|
+ paddingTop: data.paddingTop ? data.paddingTop : "",
|
|
|
+ paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ }}
|
|
|
+ >
|
|
|
<div class={styles.wrapFinger}>
|
|
|
<div
|
|
|
id="fingeringContainer"
|
|
@@ -995,9 +1017,7 @@ export default defineComponent({
|
|
|
class={[styles.fingeringContainer]}
|
|
|
>
|
|
|
<div class={styles.imgs}>
|
|
|
- {
|
|
|
- !data.loadingImg && <img src={data.fingeringMode === "scaleMode" ? fingerData.subject?.json?.full : fingerData.subject?.json?.full1} />
|
|
|
- }
|
|
|
+ {!data.loadingImg && <img src={data.fingeringMode === "scaleMode" ? fingerData.subject?.json?.full : fingerData.subject?.json?.full1} />}
|
|
|
{rs.map((key: number | string, index: number) => {
|
|
|
const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
|
|
|
return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
|
|
@@ -1020,11 +1040,22 @@ export default defineComponent({
|
|
|
{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")}>
|
|
|
+ <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]}>
|
|
|
+ <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}>
|
|
@@ -1103,13 +1134,24 @@ export default defineComponent({
|
|
|
</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={() => scrollNoteBox("right")}>
|
|
|
+ <Button
|
|
|
+ class={styles.noteBtn}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ scrollNoteBox("right");
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Icon name="arrow" />
|
|
|
</Button>
|
|
|
)}
|
|
|
</div>
|
|
|
{data.fingeringMode !== "scaleMode" && (
|
|
|
- <div class={styles.optionBtns}>
|
|
|
+ <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>
|
|
@@ -1125,7 +1167,13 @@ export default defineComponent({
|
|
|
<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)}>
|
|
|
+ <Button
|
|
|
+ class={styles.tipClose}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ data.tipShow = false;
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Icon name="cross" size={19} color="#fff" />
|
|
|
</Button>
|
|
|
</div>
|
|
@@ -1155,7 +1203,16 @@ export default defineComponent({
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
- <div class={styles.fixedRightBtns}>
|
|
|
+ <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
|
|
@@ -1163,7 +1220,7 @@ export default defineComponent({
|
|
|
onClick={() => {
|
|
|
data.viewIndex++;
|
|
|
if (data.viewIndex > data.viewTotal) {
|
|
|
- if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
|
+ if (["pan-flute", "ocarina", "whistling"].includes(data.subject)) {
|
|
|
data.viewIndex = 1;
|
|
|
} else {
|
|
|
data.viewIndex = 0;
|
|
@@ -1234,7 +1291,13 @@ export default defineComponent({
|
|
|
<div class={styles.tones}>
|
|
|
<div class={styles.toneTitle}>
|
|
|
<div class={styles.tipTitleName}>移调</div>
|
|
|
- <Button class={styles.tipClose} onClick={() => (data.tnoteShow = false)}>
|
|
|
+ <Button
|
|
|
+ class={styles.tipClose}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ data.tnoteShow = false;
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Icon name="cross" size={19} color="#fff" />
|
|
|
</Button>
|
|
|
</div>
|
|
@@ -1250,7 +1313,8 @@ export default defineComponent({
|
|
|
round
|
|
|
plain
|
|
|
type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
|
|
|
- onClick={() => {
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
data.popupActiveTone = tone;
|
|
|
setNotes();
|
|
|
}}
|
|
@@ -1279,9 +1343,16 @@ export default defineComponent({
|
|
|
</Space>
|
|
|
</div>
|
|
|
<div class={styles.toneAction}>
|
|
|
- <img onClick={() => (data.tnoteShow = false)} src={icons.icon_action_cancel} />
|
|
|
<img
|
|
|
- onClick={() => {
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ data.tnoteShow = false;
|
|
|
+ }}
|
|
|
+ src={icons.icon_action_cancel}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
data.activeTone = data.popupActiveTone;
|
|
|
setNotes();
|
|
|
data.tnoteShow = false;
|
|
@@ -1294,6 +1365,48 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</Popup>
|
|
|
|
|
|
+ <Popup
|
|
|
+ v-model:show={data.changeSubjectShow}
|
|
|
+ class={styles.changeSubjectPopup}
|
|
|
+ onClick={(e: any) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <ChangeSubject
|
|
|
+ subjectList={data.subjects}
|
|
|
+ subject={data.subject}
|
|
|
+ onClose={() => (data.changeSubjectShow = false)}
|
|
|
+ onConfirm={(code: any) => {
|
|
|
+ if (data.subject === code) {
|
|
|
+ data.changeSubjectShow = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const originalSubject = JSON.parse(JSON.stringify(data.subject));
|
|
|
+ data.subject = code;
|
|
|
+ data.viewIndex = 0;
|
|
|
+ data.tipShow = false;
|
|
|
+ data.loadingDom = true;
|
|
|
+ fingerData.fingeringInfo = subjectFingering(data.subject);
|
|
|
+ data.activeTone = {} as any;
|
|
|
+ resetElement();
|
|
|
+ resetMode(true, 0);
|
|
|
+ // api_setRequestedOrientation(orientationDirection.value);
|
|
|
+
|
|
|
+ data.changeSubjectShow = false;
|
|
|
+ // 设置屏幕方向
|
|
|
+ setTimeout(() => {
|
|
|
+ const before = ["hulusi-flute", "piccolo", "baroque-recorder"].includes(originalSubject) ? 0 : 0;
|
|
|
+ if (orientationDirection.value !== before) {
|
|
|
+ data.paddingTop = "";
|
|
|
+ data.paddingLeft = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ __init();
|
|
|
+ }, 100);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
{props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex fingeringMode={data.fingeringMode} showGuide={false} list={["finger"]} />}
|
|
|
</div>
|
|
|
);
|