music-score/src/view/fingering/index.tsx

import { computed, defineComponent, onBeforeMount, reactive } from "vue";
import styles from "./index.module.less";
import state from "/src/state";
import { getFingeringConfig, ITypeFingering } from "./fingering-config";

export default defineComponent({
  name: "fingering",
  emits: ["open"],
  setup(props, { emit }) {
    const fingerData = reactive({
      relationshipIndex: 0,
      subject: null as unknown as ITypeFingering,
      delay: 0,
    });
    const getFingeringData = async () => {
      // 葫芦丝的指法，云教练页面和听音练习页面，展示的不一样，需要区分
      const source = state.fingeringInfo.name === 'hulusi-flute' ? 'musicDetail' : '';
      fingerData.subject = await getFingeringConfig(state.fingeringInfo.name, source);
      console.log("🚀 ~ fingerData.subject:", fingerData.subject);
    };
    onBeforeMount(() => {
      getFingeringData();
    });

    /** 当前音域 */
    const realKey = computed(() => {
      return state.times[state.activeNoteIndex]?.realKey || -1;
    });

    const doubeClick = () => {
      const nowTime = Date.now();
      if (nowTime - fingerData.delay < 300) {
        emit("open");
        return;
      }
      fingerData.delay = nowTime;
    };
    return () => {
      // console.log("音高", realKey.value);
      const relationship = fingerData.subject?.relationship?.[realKey.value] || [];
      const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
      const canTizhi = Array.isArray(relationship[1]);
      return (
        <>
          {state.fingeringInfo.direction === "transverse" ? (
            <div onClick={() => doubeClick()} class={[styles.fingeringContainer]}>
              <div class={styles.imgs}>
                <img class="driver-7" src={fingerData.subject?.json?.full} />
                {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]} />;
                })}
              </div>

              {state.fingeringInfo.hasTizhi && (
                <div class={[styles.tizhi, canTizhi && styles.canDisplay]} onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}>
                  替指
                </div>
              )}
            </div>
          ) : (
            <div onClick={() => doubeClick()} class={[styles.fingeringContainer, styles.vertical, state.fingeringInfo.name, state.fingeringInfo.name === 'hulusi-flute' ? styles.hulusiTop : '']}>
              <div class={styles.imgs}>
                <img class="driver-7" src={fingerData.subject?.json?.full} />
                {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]} />;
                })}
              </div>

              {state.fingeringInfo.hasTizhi && (
                <div style={{ display: state.fingeringInfo.disabledFinger ? "none" : "" }} class={styles.rightContent}>
                  <div class={[styles.tizhi, canTizhi && styles.canDisplay]} onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}>
                    替指
                  </div>
                </div>
              )}
            </div>
          )}
        </>
      );
    };
  },
});