feat: 曲谱详情使用内容平台接口改造

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

@@ -2,7 +2,7 @@ import { Popup, Skeleton } from "vant";
 import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, watchEffect } from "vue";
 import { formateTimes } from "../../helpers/formateMusic";
 import Metronome, { metronomeData } from "../../helpers/metronome";
-import state, { EnumMusicRenderType, evaluatCreateMusicPlayer, handleSetSpeed, IAudioState, IPlatform, isRhythmicExercises, resetPlaybackToStart, togglePlay } from "/src/state";
+import state, { EnumMusicRenderType, evaluatCreateMusicPlayer, handleSetSpeed, IAudioState, IPlatform, isRhythmicExercises, resetPlaybackToStart, togglePlay, getMusicDetail } from "/src/state";
 import { browser, setGlobalData } from "../../utils";
 import AudioList from "../../view/audio-list";
 import MusicScore, { resetMusicScore } from "../../view/music-score";
@@ -109,106 +109,15 @@ export default defineComponent({
       api_cloudAccompanyMessage(state.accompany);
     };
     // console.log(route.params, query)
-    /** 获取曲谱数据 */
-    const getMusicInfo = (res: any) => {
-      const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
-      const musicData = res.data.background?.[index] || {};
-      const musicInfo = {
-        ...res.data,
-        music: musicData.audioFileUrl || res.data.audioFileUrl,
-        accompany: musicData.metronomeUrl || res.data.metronomeUrl,
-        musicSheetId: musicData.musicSheetId || res.data.id,
-        track: musicData.track || res.data.track,
-      };
-      console.log("🚀 ~ musicInfo:", musicInfo);
-      setState(musicInfo, index);
-      setCustom();
-      detailData.isLoading = false;
-    };
-
-    const setState = (data: any, index: number) => {
-      state.appName = "COLEXIU";
-      state.detailId = data.id;
-      state.xmlUrl = data.xmlFileUrl;
-      state.partIndex = index;
-      state.trackId = data.track;
-      state.subjectId = data.musicSubject;
-      state.categoriesId = data.categoriesId;
-      state.categoriesName = data.musicTagNames;
-      state.enableEvaluation = data.canEvaluate ? true : false;
-      state.examSongId = data.id + "";
-      state.examSongName = data.musicSheetName;
-      state.coverImg = data.titleImg ?? "";
-      // 解析扩展字段
-      if (data.extConfigJson) {
-        try {
-          state.extConfigJson = JSON.parse(data.extConfigJson as string);
-        } catch (error) {
-          console.error("解析扩展字段错误:", error);
-        }
-      }
-      state.isOpenMetronome = data.mp3Type === "MP3_METRONOME" ? true : false;
-      // 曲子包含节拍器,就不开启节拍器
-      state.needTick = data.mp3Type === "MP3_METRONOME" ? false : true;
-      state.isShowFingering = data.showFingering ? true : false;
-      state.music = data.music;
-      state.accompany = data.accompany;
-      state.midiUrl = data.midiUrl;
-      state.parentCategoriesId = data.musicTag;
-      state.musicSheetCategoriesId = data.musicSheetCategoriesId;
-      state.playMode = data.audioType === "MP3" ? "MP3" : "MIDI";
-      state.originSpeed = state.speed = data.playSpeed;
-      const track = data.code || data.track;
-      state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
-      state.enableNotation = data.notation ? true : false;
-      // 是否是合奏，先根据background判断
-      state.isConcert = data.background?.length > 1;
-      // 开启预备小节
-      state.isOpenPrepare = true;
-      // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
-      // 是否打击乐
-      // state.isPercussion =
-      // 	state.subjectId == 23 ||
-      // 	state.subjectId == 113 ||
-      // 	state.subjectId == 121 ||
-      // 	isRhythmicExercises();
-      state.isPercussion = isRhythmicExercises();
-      // 设置是否特殊曲谱, 是特殊曲谱取反(不理解之前的思考逻辑), 使用后台设置的速度
-      state.isSpecialBookCategory = !classids.includes(data.musicSheetCategoriesId);
-
-      // 设置指法
-      const code = state.isConcert ? mappingVoicePart(state.trackId, "ENSEMBLE") : mappingVoicePart(state.subjectId, "INSTRUMENT");
-      state.fingeringInfo = subjectFingering(code);
-      console.log("🚀 ~ state.fingeringInfo:", code, state.fingeringInfo, state.trackId, state.track);
 
-      // 检测是否原音和伴奏都有
-      if (!state.music || !state.accompany) {
-        state.playSource = state.music ? "music" : "background";
-      }
-
-      // 如果是PC端,放大曲谱
-      state.platform = query.platform?.toLocaleUpperCase() || "";
-      if (state.platform === IPlatform.PC) {
-        state.zoom = query.zoom || 1.5;
-      }
-
-      //课堂乐器, 渲染类型: 五线谱, 简谱
-      state.musicRenderType = query.musicRenderType || EnumMusicRenderType.firstTone;
-      console.log("state对象", state);
-    };
-
-    const setCustom = () => {
-      if (state.extConfigJson.multitrack) {
-        setGlobalData("multitrack", state.extConfigJson.multitrack);
-      }
-    };
-
-    onMounted(() => {
+    onMounted(async () => {
       (window as any).appName = "colexiu";
       const id = query.id || "43554";
-      Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
-        getMusicInfo(values[0]);
-      });
+      // Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
+      //   getMusicInfo(values[0]);
+      // });
+      await getMusicDetail(id);
+      detailData.isLoading = false;
       api_setEventTracking();
     });
 

src/state.ts

@@ -4,13 +4,17 @@ import { OpenSheetMusicDisplay } from "../osmd-extended/src";
 import { metronomeData } from "./helpers/metronome";
 import { GradualNote, GradualTimes, GradualVersion } from "./type";
 import { handleEndEvaluat, handleStartEvaluat } from "./view/evaluating";
-import { IFingering } from "src/view/fingering/fingering-config";
+import { IFingering, mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
 import { handleStartTick } from "./view/tick";
 import { audioListStart, getAudioCurrentTime, getAudioDuration, setAudioCurrentTime, setAudioPlaybackRate } from "./view/audio-list";
 import { toggleFollow } from "./view/follow-practice";
-import { browser, setStorageSpeed } from "./utils";
+import { browser, setStorageSpeed, setGlobalData } from "./utils";
 import { api_createMusicPlayer } from "./helpers/communication";
 import { verifyCanRepeat } from "./helpers/formateMusic";
+import { getMusicSheetDetail } from "./utils/baseApi"
+import { getQuery } from "/src/utils/queryString";
+
+const query: any = getQuery();
 
 /** 入门 | 进阶 | 大师 */
 export type IDifficulty = "BEGINNER" | "ADVANCED" | "PERFORMER";
@@ -35,6 +39,11 @@ export enum IPlatform {
   PC = "PC",
 }
 
+/**
+ * 特殊教材分类id
+ */
+const classids = [1, 2, 6, 7, 8, 9, 3, 10, 11, 12, 13, 4, 14, 15, 16, 17, 30, 31, 35, 36, 46, 108]; // 大雅金唐, 竖笛教程, 声部训练展开的分类ID
+
 const state = reactive({
   /** 来源 : PC , app */
   platform: "" as IPlatform,
@@ -637,3 +646,108 @@ export const evaluatCreateMusicPlayer = () => {
     tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
   });
 };
+
+
+
+/** 获取内容平台的接口详情并初始化state信息 */
+export const getMusicDetail = async (id: string) => {
+  const res = await getMusicSheetDetail('8198' || id);
+  if (res?.code === 200) {
+    getMusicInfo(res)
+  }
+};
+
+
+const getMusicInfo = (res: any) => {
+  const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
+  // 原音声轨
+  const musicData = res.data.musicSheetSoundList?.[index] || {};
+  // 伴奏声轨
+  const accompanyData = res.data.musicSheetAccompanimentList?.[0] || {}
+  const musicInfo = {
+    ...res.data,
+    music: musicData.audioFileUrl || '',
+    accompany: accompanyData.audioFileUrl || '',
+    musicSheetId: musicData.musicSheetId || res.data.id,
+    track: musicData.track || '',
+  };
+  console.log("🚀 ~ musicInfo:", musicInfo);
+  setState(musicInfo, index);
+  setCustom();
+};
+
+const setState = (data: any, index: number) => {
+  state.appName = "COLEXIU";
+  state.detailId = data.id;
+  state.xmlUrl = data.xmlFileUrl;
+  state.partIndex = index;
+  state.trackId = data.track;
+  state.subjectId = data.subjectIds;
+  state.categoriesId = data.musicCategoryId;
+  state.categoriesName = data.musicTagNames;
+  state.enableEvaluation = data.isEvaluated ? true : false;
+  state.examSongId = data.id + "";
+  state.examSongName = data.name;
+  state.coverImg = data.musicCover ?? "";
+  // 解析扩展字段
+  if (data.extConfigJson) {
+    try {
+      state.extConfigJson = JSON.parse(data.extConfigJson as string);
+    } catch (error) {
+      console.error("解析扩展字段错误:", error);
+    }
+  }
+  state.isOpenMetronome = data.isPlayBeat ? true : false;
+  // 曲子包含节拍器,就不开启节拍器
+  state.needTick = data.isUseSystemBeat ? false : true;
+  state.isShowFingering = data.isShowFingering ? true : false;
+  state.music = data.music;
+  state.accompany = data.accompany;
+  state.midiUrl = data.midiFileUrl;
+  state.parentCategoriesId = data.musicTag;
+  state.musicSheetCategoriesId = data.musicCategoryId;
+  state.playMode = data.playMode === "MP3" ? "MP3" : "MIDI";
+  state.originSpeed = state.speed = data.playSpeed;
+  const track = data.code || data.track;
+  state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
+  state.enableNotation = data.isConvertibleScore ? true : false;
+  state.isConcert = data.musicSheetType === "CONCERT" ? true : false
+  // 开启预备小节
+  state.isOpenPrepare = true;
+  // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
+  // 是否打击乐
+  // state.isPercussion =
+  // 	state.subjectId == 23 ||
+  // 	state.subjectId == 113 ||
+  // 	state.subjectId == 121 ||
+  // 	isRhythmicExercises();
+  state.isPercussion = isRhythmicExercises();
+  // 设置是否特殊曲谱, 是特殊曲谱取反(不理解之前的思考逻辑), 使用后台设置的速度
+  state.isSpecialBookCategory = !classids.includes(data.musicCategoryId);
+
+  // 设置指法
+  const code = state.isConcert ? mappingVoicePart(state.trackId, "ENSEMBLE") : mappingVoicePart(state.subjectId, "INSTRUMENT");
+  state.fingeringInfo = subjectFingering(code);
+  console.log("🚀 ~ state.fingeringInfo:", code, state.fingeringInfo, state.trackId, state.track);
+
+  // 检测是否原音和伴奏都有
+  if (!state.music || !state.accompany) {
+    state.playSource = state.music ? "music" : "background";
+  }
+
+  // 如果是PC端,放大曲谱
+  state.platform = query.platform?.toLocaleUpperCase() || "";
+  if (state.platform === IPlatform.PC) {
+    state.zoom = query.zoom || 1.5;
+  }
+
+  //课堂乐器, 渲染类型: 五线谱, 简谱
+  state.musicRenderType = query.musicRenderType || EnumMusicRenderType.firstTone;
+  console.log("state对象", state);
+};
+
+const setCustom = () => {
+  if (state.extConfigJson.multitrack) {
+    setGlobalData("multitrack", state.extConfigJson.multitrack);
+  }
+};

src/utils/baseApi.ts

@@ -0,0 +1,16 @@
+import request from "./request";
+
+/** 获取内容平台的曲谱详情 */
+export const getMusicSheetDetail = (sysMusicScoreId: string) => {
+  return request.get("/open/musicSheet/detail/" + sysMusicScoreId, {
+    isContentCenter: true // 内容平台
+  });
+};
+
+/** 生成图片 */
+export const creatMusicSheetImg = (data: any) => {
+  return request.post("/open/musicSheet/img", {
+    isContentCenter: true, // 内容平台
+    data
+  });
+};

src/utils/request.ts

@@ -16,14 +16,18 @@ const request = extend({
 
 request.interceptors.request.use(
 	(url, options) => {
-		const _prefix = storeData.proxy + storeData.platformApi;
+		console.log(9999,storeData.proxy,storeData.platformApi,options)
+		// 内容平台的前缀为cbs-app
+		const platformApi = options.isContentCenter ? '/cbs-app' : storeData.platformApi
+		const _prefix = storeData.proxy + platformApi;
 		// 只有后台才去设置
 		if (storeData.platformType === "WEB" && (apiRouter as any)[url]) {
 			url = (apiRouter as any)[url];
 		}
 		const Authorization = getToken();
 		const authHeaders: any = {};
-		if (Authorization) {
+		// 内容平台的接口不需要传token，需要传签名
+		if (Authorization && !options.isContentCenter) {
 			authHeaders.Authorization = Authorization;
 		}
 		return {

vite.config.ts

@@ -65,7 +65,8 @@ export default defineConfig({
 			},
 			"^/instrument/.*": {
 				// target: "https://kt.colexiu.com",
-				target: "https://test.lexiaoya.cn",
+				// target: "https://test.lexiaoya.cn",
+				target: "https://dev.lexiaoya.cn",
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/instrument/, ""),
 			},