|
|
@@ -21,7 +21,13 @@ import {
|
|
|
} from "/src/view/fingering/fingering-config";
|
|
|
import { Howl } from "howler";
|
|
|
import { storeData } from "/src/store";
|
|
|
-import { api_back, api_cloudLoading, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
|
|
|
+import {
|
|
|
+ api_back,
|
|
|
+ api_cloudLoading,
|
|
|
+ api_setRequestedOrientation,
|
|
|
+ api_setStatusBarVisibility,
|
|
|
+ isSpecialShapedScreen,
|
|
|
+} from "/src/helpers/communication";
|
|
|
import Hammer from "hammerjs";
|
|
|
import { Button, Icon, Loading, Popup, Progress, Space } from "vant";
|
|
|
import GuideIndex from "./guide/guide-index";
|
|
|
@@ -30,6 +36,7 @@ import { browser } from "/src/utils";
|
|
|
import { usePageVisibility } from "@vant/use";
|
|
|
import { watch } from "vue";
|
|
|
import icon_loading_img from "./image/icon_loading_img.png";
|
|
|
+import icon_popup_top from "./image/icon_popup_top.png";
|
|
|
import state from "/src/state";
|
|
|
|
|
|
export default defineComponent({
|
|
|
@@ -83,8 +90,8 @@ export default defineComponent({
|
|
|
loadingSoundProgress: 0,
|
|
|
|
|
|
huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
|
|
|
- paddingTop: '',
|
|
|
- paddingLeft:'',
|
|
|
+ paddingTop: "",
|
|
|
+ paddingLeft: "",
|
|
|
});
|
|
|
const fingerData = reactive({
|
|
|
relationshipIndex: 0,
|
|
|
@@ -95,16 +102,16 @@ export default defineComponent({
|
|
|
state.fingeringInfo = fingerData.fingeringInfo;
|
|
|
}
|
|
|
|
|
|
- const getAPPData = async (type: 'top' | 'left') => {
|
|
|
+ const getAPPData = async (type: "top" | "left") => {
|
|
|
const screenData = await isSpecialShapedScreen();
|
|
|
if (screenData?.content) {
|
|
|
// console.log("🚀 ~ screenData:", screenData.content);
|
|
|
const { isSpecialShapedScreen, notchHeight } = screenData.content;
|
|
|
if (isSpecialShapedScreen) {
|
|
|
- if (type === 'top'){
|
|
|
+ if (type === "top") {
|
|
|
data.paddingTop = 25 + "px";
|
|
|
}
|
|
|
- if(type === 'left'){
|
|
|
+ if (type === "left") {
|
|
|
data.paddingLeft = 25 + "px";
|
|
|
}
|
|
|
}
|
|
|
@@ -112,10 +119,10 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
if (!props.isComponent && !browsInfo.ios && fingerData.fingeringInfo.orientation === 1) {
|
|
|
- getAPPData('top');
|
|
|
+ getAPPData("top");
|
|
|
}
|
|
|
if (!props.isComponent && !browsInfo.ios && fingerData.fingeringInfo.orientation === 0) {
|
|
|
- getAPPData('left');
|
|
|
+ getAPPData("left");
|
|
|
}
|
|
|
|
|
|
const getNotes = () => {
|
|
|
@@ -175,7 +182,7 @@ export default defineComponent({
|
|
|
};
|
|
|
onBeforeMount(() => {
|
|
|
getNotes();
|
|
|
- if (['pan-flute', 'ocarina'].includes(data.subject)){
|
|
|
+ if (["pan-flute", "ocarina"].includes(data.subject)) {
|
|
|
data.viewIndex = 1;
|
|
|
}
|
|
|
getFingeringData();
|
|
|
@@ -341,17 +348,18 @@ export default defineComponent({
|
|
|
: styles.fingerRight,
|
|
|
]}
|
|
|
>
|
|
|
- <div class={[styles.head, styles.backHead, data.paddingTop && styles.paddingTop]}>
|
|
|
+ <div
|
|
|
+ class={styles.head}
|
|
|
+ style={{
|
|
|
+ paddingTop: data.paddingTop ? data.paddingTop : "",
|
|
|
+ paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ }}
|
|
|
+ >
|
|
|
<div class={styles.left}>
|
|
|
<button class={[styles.backBtn]} onClick={() => handleBack()}>
|
|
|
<img src={icons.icon_back} />
|
|
|
</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={[styles.head, data.paddingTop && styles.paddingTop]}>
|
|
|
- <div class={styles.left}>
|
|
|
- {data.subject === "pan-flute" && (
|
|
|
+ {data.subject !== "melodica" && (
|
|
|
<div
|
|
|
class={styles.baseBtn}
|
|
|
onClick={() => {
|
|
|
@@ -362,17 +370,18 @@ export default defineComponent({
|
|
|
getFingeringData();
|
|
|
}}
|
|
|
>
|
|
|
- 切换视图
|
|
|
+ <img src={icons.icon_toggle} />
|
|
|
+ <span>切换视图</span>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
<div class={styles.rightBtn}>
|
|
|
- <div class={[styles.item]} onClick={() => resetElement()}>
|
|
|
+ <div class={styles.baseBtn} onClick={() => resetElement()}>
|
|
|
<img src={icons.icon_2_0} />
|
|
|
<span>还原</span>
|
|
|
</div>
|
|
|
<div
|
|
|
- class={[styles.item]}
|
|
|
+ class={styles.baseBtn}
|
|
|
onClick={() => {
|
|
|
resetElement();
|
|
|
data.tipShow = !data.tipShow;
|
|
|
@@ -412,7 +421,12 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class={[styles.notes, data.paddingLeft && styles.paddingLeft]}>
|
|
|
+ <div
|
|
|
+ class={styles.notes}
|
|
|
+ style={{
|
|
|
+ paddingLeft: data.paddingLeft ? data.paddingLeft : "",
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
|
|
|
<Icon name="arrow-left" />
|
|
|
</Button>
|
|
|
@@ -464,20 +478,23 @@ export default defineComponent({
|
|
|
<div class={styles.tipTitle}>
|
|
|
<div class={styles.tipTitleName}>{fingerData.fingeringInfo.code}使用说明</div>
|
|
|
<Button class={styles.tipClose} onClick={() => (data.tipShow = false)}>
|
|
|
- <Icon name="cross" color="#999" />
|
|
|
+ <Icon name="cross" size={19} color="#fff" />
|
|
|
</Button>
|
|
|
</div>
|
|
|
- <div class={styles.tipContent}>
|
|
|
- {data.tips.map((tip, tipIndex) => (
|
|
|
- <div class={styles.tipItem}>
|
|
|
- <div class={styles.iconWrap}>
|
|
|
- <div class={styles.tipItemIcon}>{tipIndex + 1}</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- {tip.name}: {tip.realName}
|
|
|
+ <div class={styles.iconBook}></div>
|
|
|
+ <div class={styles.tipContentbox}>
|
|
|
+ <div class={styles.tipContent}>
|
|
|
+ {data.tips.map((tip, tipIndex) => (
|
|
|
+ <div class={styles.tipItem}>
|
|
|
+ <div class={styles.iconWrap}>
|
|
|
+ <div class={styles.tipItemIcon}>{tipIndex + 1}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {tip.name}: {tip.realName}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{data.loadingSoundFonts && (
|
|
|
@@ -500,7 +517,7 @@ export default defineComponent({
|
|
|
>
|
|
|
<div>
|
|
|
全按作
|
|
|
- <div class={[styles.noteKey, styles.hulusiNoteKey]}>
|
|
|
+ <div class={[styles.noteKey]}>
|
|
|
{data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
|
|
|
|
|
|
<div class={styles.noteName}>
|
|
|
@@ -516,7 +533,7 @@ export default defineComponent({
|
|
|
</div>
|
|
|
) : (
|
|
|
<div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
|
|
|
- <div>
|
|
|
+ <div style={{ marginTop: "-4px" }}>
|
|
|
<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
{data.activeTone.name}
|
|
|
</div>
|
|
|
@@ -538,66 +555,65 @@ export default defineComponent({
|
|
|
<div class={styles.toneTitle}>
|
|
|
<div class={styles.tipTitleName}>移调</div>
|
|
|
<Button class={styles.tipClose} onClick={() => (data.tnoteShow = false)}>
|
|
|
- <Icon name="cross" color="#999" />
|
|
|
+ <Icon name="cross" size={19} color="#fff" />
|
|
|
</Button>
|
|
|
</div>
|
|
|
- <div style={{ flex: 1, overflow: "hidden" }}>
|
|
|
- <Space size={0} class={styles.toneContent}>
|
|
|
- {data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
|
|
|
- const steps = new Array(Math.abs(tone.step)).fill(1);
|
|
|
- return (
|
|
|
- <Button
|
|
|
- round
|
|
|
- plain
|
|
|
- type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
|
|
|
- onClick={() => {
|
|
|
- data.popupActiveTone = tone;
|
|
|
- setNotes();
|
|
|
- }}
|
|
|
- >
|
|
|
- {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
- <div style={{ display: "flex", alignItems: "center" }}>
|
|
|
- 全按作
|
|
|
- <div class={[styles.noteKey, styles.hulusiNoteKey]}>
|
|
|
- {tone.step > 0 ? <span class={styles.dot}></span> : null}
|
|
|
- <div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
|
|
|
- <sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
- {tone.key}
|
|
|
+ <div class={styles.tipContentbox}>
|
|
|
+ <div class={styles.tipContent}>
|
|
|
+ <Space size={0} class={styles.toneContent}>
|
|
|
+ {data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
|
|
|
+ const steps = new Array(Math.abs(tone.step)).fill(1);
|
|
|
+ return (
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ plain
|
|
|
+ type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
|
|
|
+ onClick={() => {
|
|
|
+ data.popupActiveTone = tone;
|
|
|
+ setNotes();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {fingerData.fingeringInfo.name == "hulusi-flute" ? (
|
|
|
+ <div style={{ display: "flex", alignItems: "center" }}>
|
|
|
+ 全按作
|
|
|
+ <div class={[styles.noteKey, styles.hulusiNoteKey]}>
|
|
|
+ {tone.step > 0 ? <span class={styles.dot}></span> : null}
|
|
|
+ <div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
|
|
|
+ <sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {tone.key}
|
|
|
+ </div>
|
|
|
+ {tone.step < 0 ? <span class={styles.dot}></span> : null}
|
|
|
</div>
|
|
|
- {tone.step < 0 ? <span class={styles.dot}></span> : null}
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <div class={styles.noteName}>
|
|
|
- <sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
- {tone.name}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Button>
|
|
|
- );
|
|
|
- })}
|
|
|
- </Space>
|
|
|
+ ) : (
|
|
|
+ <div class={styles.noteName}>
|
|
|
+ <sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
|
|
|
+ {tone.name}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Button>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </Space>
|
|
|
+ <div class={styles.toneAction}>
|
|
|
+ <img onClick={() => (data.tnoteShow = false)} src={icons.icon_action_cancel} />
|
|
|
+ <img
|
|
|
+ onClick={() => {
|
|
|
+ data.activeTone = data.popupActiveTone;
|
|
|
+ setNotes();
|
|
|
+ data.tnoteShow = false;
|
|
|
+ }}
|
|
|
+ src={icons.icon_action_confirm}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <Space size={0} class={styles.toneAction}>
|
|
|
- <Button type="primary" round plain onClick={() => (data.tnoteShow = false)}>
|
|
|
- 取消
|
|
|
- </Button>
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- round
|
|
|
- onClick={() => {
|
|
|
- data.activeTone = data.popupActiveTone;
|
|
|
- setNotes();
|
|
|
- data.tnoteShow = false;
|
|
|
- }}
|
|
|
- >
|
|
|
- 确定
|
|
|
- </Button>
|
|
|
- </Space>
|
|
|
</div>
|
|
|
</Popup>
|
|
|
|
|
|
- {props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex showGuide={false} list={["finger"]} />}
|
|
|
+ {props.show && !data.loading && !data.loadingSoundFonts && (
|
|
|
+ <GuideIndex showGuide={false} list={["finger"]} />
|
|
|
+ )}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
