feat: 增加声轨切换功能

src/page-instrument/header-top/index.tsx

@@ -23,6 +23,7 @@ import { browser } from "/src/utils";
 import store from "store";
 import "../component/the-modal-tip/index.module.less";
 import { metronomeData } from "../../helpers/metronome";
+import { toggleMusicSheet } from "/src/view/plugins/toggleMusicSheet"
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -350,7 +351,14 @@ export default defineComponent({
                 </>}
               </span>
             </div>
-
+            {state.musicRendered && !query.lessonTrainingId && !query.questionId && (
+              <div class={[styles.btn]} onClick={() => {
+                toggleMusicSheet.toggle(true)
+              }}>
+                <img class={styles.iconBtn} src={headImg(`section2.svg`)} />
+                <span>声轨</span>
+              </div>
+            )}
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
               style={{ display: originBtn.value.display ? "" : "none" }}

src/page-instrument/view-detail/index.tsx

@@ -26,6 +26,7 @@ import TheMusicList from "../component/the-music-list";
 import { storeData } from "/src/store";
 import ViewFigner from "../view-figner";
 import { recalculateNoteData } from "/src/view/selection";
+import ToggleMusicSheet from "/src/view/plugins/toggleMusicSheet"
 
 const calcCeilFrequency = (frequency: number) => {
   if (frequency) return frequency * 1000 * 2 / 1000;
@@ -123,7 +124,7 @@ export default defineComponent({
 			state.detailId = data.id;
 			state.xmlUrl = data.xmlFileUrl;
 			state.partIndex = index;
-			state.subjectId = data.musicSubject;
+			state.subjectId = data.track;
 			state.categoriesId = data.categoriesId;
 			state.categoriesName = data.musicTagNames;
 			state.enableEvaluation = data.canEvaluate ? true : false;
@@ -179,6 +180,7 @@ export default defineComponent({
 
       //课堂乐器,默认简谱
       state.musicRenderType = EnumMusicRenderType.firstTone;
+      console.log(state,99999)
     };
 
     const setCustom = () => {
@@ -430,6 +432,11 @@ export default defineComponent({
           </>
         )}
 
+        {/* 切换曲谱 */}
+        {!query.lessonTrainingId && !query.questionId && (
+          <ToggleMusicSheet />
+        )}
+
         {state.musicRendered && (
           <>
             {/* 统计训练时长 */}

src/view/fingering/fingering-config.ts

@@ -123,13 +123,15 @@ export const mappingVoicePart = (
 			1: "pan-flute",
 			2: "ocarina",
 			5: "melodica",
+			26: 12,
 			tenorrecorder: "piccolo",
 			woodwind: "hulusi-flute",
 			panpipes: "pan-flute",
 			ocarina: "ocarina",
 			nai: "melodica",
 		};
-		return subject[code] || 0;
+		const _track = typeof code === 'string' ? Object.keys(subject).filter((key) => key.includes(String(code)) || String(code).includes(key))[0] : code
+		return subject[_track] || 0;
 	}
 	return 0;
 };

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 50vw;
+  height: 80vh;
+  max-height: 500px;
+  background-color: #fff;
+  overflow: hidden;
+
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    position: relative;
+    font-size: 14Px;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 50%;
+      height: 30%;
+      transform: translateY(-50%);
+      width: 2px;
+      background-color: var(--van-primary-color);
+      border-radius: 2px;
+    }
+  }
+
+  .picker {
+    flex: 1;
+  }
+
+  .button {
+    width: 50%;
+    height: 40Px;
+    margin: 10Px auto;
+  }
+}

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -0,0 +1,49 @@
+import { PropType, computed, defineComponent, ref, toRefs } from 'vue'
+import { Picker, Button, Icon } from 'vant'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'choosePartName',
+  props: {
+    partListNames: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    partIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const { partListNames, partIndex } = toRefs(props)
+    const selectIndex = ref((partListNames.value[partIndex.value] as any).value)
+    const columns = computed(() => {
+      return partListNames.value
+    })
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.top}>
+          <div class={styles.title}>请选择您练习的乐器</div>
+          <Icon name="cross" size={24} onClick={() => emit('close')} />
+        </div>
+        <Picker
+          class={styles.picker}
+          defaultIndex={partIndex.value}
+          showToolbar={false}
+          columns={columns.value}
+          visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
+          onChange={(row) => {
+            //console.log('选择的索引', row)
+            selectIndex.value = row.selectedValues[0]
+          }}
+        />
+        <Button class={styles.button} type="primary" round block onClick={() => {
+          emit('close', selectIndex.value)}
+        }>
+          确定
+        </Button>
+      </div>
+    )
+  },
+})

src/view/plugins/toggleMusicSheet/index.module.less

@@ -0,0 +1,15 @@
+.iconToggle {
+    position: fixed;
+    left: 0;
+    bottom: 20%;
+    transform: scaleX(-1);
+    z-index: 10;
+    margin: 0;
+    background: rgba(0, 0, 0, 0.24);
+    border-radius: 5px 0px 0px 5px;
+    padding: 7px 3px;
+}
+.popup{
+    border-radius: 4px;
+    overflow: hidden;
+}

src/view/plugins/toggleMusicSheet/index.tsx

@@ -0,0 +1,79 @@
+import { computed, defineComponent, reactive } from 'vue'
+import styles from './index.module.less'
+import { Icon, Popup } from 'vant'
+import ChoosePartName from './choosePartName'
+import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
+import state, { togglePlay } from "/src/state";
+import qs from 'query-string'
+import { getInstrumentName } from "/src/constant/instruments";
+import { getQuery } from "/src/utils/queryString";
+
+export const toggleMusicSheet = reactive({
+  show: false,
+  toggle: (type = true) => {
+    toggleMusicSheet.show = type
+  },
+})
+
+export default defineComponent({
+  name: 'ToggleMusicSheet',
+  setup() {
+    const query = getQuery();
+
+    const partListNames = computed(() => {
+      let partList = state.partListNames || []
+      partList = partList.filter((item: any) => !item?.toLocaleUpperCase()?.includes('COMMON'))
+      return partList.map((item: any, index: number) => {
+        const instrumentName = getInstrumentName(item)
+        return {
+          text: item + (instrumentName ? `(${instrumentName})` : ''),
+          value: index,
+        }
+      }).filter(Boolean)
+    })
+
+    const switchMusic = (index: number) => {
+      // 暂停播放
+      togglePlay("paused");
+      // 销毁播放器
+      postMessage({
+        api: 'cloudDestroy',
+      })
+      postMessage({
+        api: 'cloudLoading',
+        content: {
+          show: true,
+          type: 'fullscreen',
+        },
+      })
+      const _url =
+        location.origin +
+        location.pathname +
+        '?' +
+        qs.stringify({
+          ...query,
+          behaviorId: sessionStorage.getItem('behaviorId') || '',
+          _t: new Date().valueOf(),
+          'part-index': index,
+        })
+      console.log(_url)
+      location.href = _url
+    }
+
+    return () => (
+      <Popup class={styles.popup} v-model:show={toggleMusicSheet.show}>
+        <ChoosePartName
+          partIndex={state.partIndex}
+          partListNames={partListNames.value}
+          onClose={(value) => {
+            console.log("🚀 ~ value:", value)
+            toggleMusicSheet.show = false
+            if (value !== undefined) {
+              switchMusic(value)
+            }
+          }}
+        />
+      </Popup>
+    )
+  },
+})