修改样式

src/page-instrument/api.ts

@@ -2,47 +2,57 @@ import request from "../utils/request";
 
 /** 获取用户信息 */
 export const studentQueryUserInfo = async () => {
-	return await request.get(`/user/getUserInfo`);
+  return await request.get(`/user/getUserInfo`);
 };
 
 /** 获取曲谱详情 */
 export const sysMusicScoreAccompanimentQueryPage = (sysMusicScoreId: string) => {
-	return request.get("/musicSheet/detail/" + sysMusicScoreId);
+  return request.get("/musicSheet/detail/" + sysMusicScoreId);
 };
 
 /** 新增练习记录(包含评测) */
 export const api_musicPracticeRecordSave = (data: any) => {
-	return request.post("/musicPracticeRecord/save", { requestType: "json", data });
+  return request.post("/musicPracticeRecord/save", { requestType: "json", data });
 };
 /** 添加作业记录 */
 export const api_lessonTrainingSubmitTraining = (data: any) => {
-	return request.post("/lessonTraining/submitTraining", { requestType: "json", data });
+  return request.post("/lessonTraining/submitTraining", { requestType: "json", data });
 };
 /** 获取作业详情 */
 export const api_lessonTrainingTrainingStudentDetail = (id: any) => {
-	return request.get(`/lessonTraining/trainingContentStudentDetail?id=${id}`);
+  return request.get(`/lessonTraining/trainingContentStudentDetail?id=${id}`);
 };
 /** 上传评测视频 */
 export const api_musicPracticeRecordVideoUpload = (data: any) => {
-	return request.post(`/musicPracticeRecord/videoUpload`, {
-		data,
-		requestType: "json",
-	});
+  return request.post(`/musicPracticeRecord/videoUpload`, {
+    data,
+    requestType: "json",
+  });
 };
 
 /** 提交意见反馈 */
 export const sysSuggestionAdd = (data: any) => {
-	return request.post("/sysSuggestion/save", { data, requestType: "json" });
+  return request.post("/sysSuggestion/save", { data, requestType: "json" });
 };
 
 /** 获取评测报告 */
 export const api_musicPracticeRecordDetail = (recordId: string) => {
-	return request.get("/musicPracticeRecord/detail/" + recordId);
+  return request.get("/musicPracticeRecord/detail/" + recordId);
 };
 /** 获取曲谱列表 */
 export const api_musicSheetPage = (data: any) => {
-	return request.post("/musicSheet/page", {
-		data,
-		requestType: "json",
-	});
+  return request.post("/musicSheet/page", {
+    data,
+    requestType: "json",
+  });
+};
+
+/**
+ * 获取声部列表
+ */
+export const getSubjectList = (data: any) => {
+  return request.post("/subject/page", {
+    data,
+    requestType: "json",
+  });
 };

src/page-instrument/view-figner/index.module.less

@@ -107,17 +107,40 @@
 }
 
 .popoverContainer {
-    --van-popover-action-height: 34px;
+    --van-popover-action-height: 32px;
     --van-popover-action-font-size: 14px;
     --van-popover-radius: 12px;
     --van-popover-action-width: 85px;
+    padding: 6Px 0;
+    background-color: #fff;
+    box-shadow: 0 0.05333rem 0.32rem rgba(50, 50, 51, .12);
     margin-top: 9px !important;
+    border-radius: 8px;
     color: #999;
 
     :global {
         .van-popover__content {
             max-height: 200px;
+            box-shadow: none;
             overflow-y: auto;
+            overflow-x: hidden;
+
+            &::-webkit-scrollbar {
+                width: 4px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 12px;
+                background: rgba(0, 0, 0, 0.2);
+
+                visibility: hidden;
+            }
+
+            &::-webkit-scrollbar-track {
+                border-radius: 0;
+                background: rgba(0, 0, 0, 0.1);
+                visibility: hidden;
+            }
         }
 
         .van-popover__action {

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

@@ -7,7 +7,7 @@ import { Howl } from "howler";
 import { storeData } from "/src/store";
 import { api_back, api_cloudLoading, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
 import Hammer from "hammerjs";
-import { Button, Icon, Loading, Popover, Popup, Progress, Space } from "vant";
+import { Button, Icon, Loading, Popover, Popup, Progress, Space, showToast } from "vant";
 import GuideIndex from "./guide/guide-index";
 import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
@@ -15,6 +15,7 @@ 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";
 
 export default defineComponent({
   name: "viewFigner",
@@ -70,33 +71,7 @@ export default defineComponent({
       huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
       paddingTop: "",
       paddingLeft: "",
-      subjects: [
-        {
-          text: "排箫",
-          value: "pan-flute",
-          className: "",
-        },
-        {
-          text: "陶笛",
-          value: "ocarina",
-          className: "",
-        },
-        {
-          text: "葫芦丝",
-          value: "hulusi-flute",
-          className: "",
-        },
-        {
-          text: "竖笛",
-          value: "piccolo",
-          className: "",
-        },
-        {
-          text: "口风琴",
-          value: "melodica",
-          className: "",
-        },
-      ],
+      subjects: [] as any,
       fingeringModeList: [
         {
           text: "指法模式",
@@ -188,30 +163,38 @@ export default defineComponent({
       fingerData.subject = await getFingeringConfig(subject);
     };
     const createAudio = (url: string) => {
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
         const noteAudio = new Howl({
           src: url,
           loop: true,
           onload: () => {
             resolve(noteAudio);
           },
+          onloaderror: () => {
+            reject(new Error(`加载音频失败`));
+          },
         });
       });
     };
     const getSounFonts = async () => {
       const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
       data.loadingSoundFonts = true;
-      data.loadingSoundProgress = 0;
-      for (let i = 0; i < data.notes.length; i++) {
-        const note = data.notes[i];
-        // console.log("🚀 ~ note:", i);
-        let url = `${pathname}soundfonts/${data.subject}/`;
-        url += note.realName;
-        url += ".mp3";
-        data.soundFonts[note.realKey] = await createAudio(url);
-        data.loadingSoundProgress = Math.floor(((i + 1) / data.notes.length) * 100);
+      try {
+        data.loadingSoundProgress = 0;
+        for (let i = 0; i < data.notes.length; i++) {
+          const note = data.notes[i];
+          // console.log("🚀 ~ note:", i);
+          let url = `${pathname}soundfonts/${data.subject}/`;
+          url += note.realName;
+          url += ".mp3";
+          data.soundFonts[note.realKey] = await createAudio(url);
+          data.loadingSoundProgress = Math.floor(((i + 1) / data.notes.length) * 100);
+        }
+        data.loadingSoundProgress = 100;
+      } catch (e: any) {
+        //
+        showToast(e.message);
       }
-      data.loadingSoundProgress = 100;
       api_cloudLoading();
       data.loadingSoundFonts = false;
     };
@@ -272,8 +255,34 @@ export default defineComponent({
       getHeadTop();
     };
 
-    onBeforeMount(() => {
+    // 获取声部
+    const getSubjects = async () => {
+      try {
+        const subjects = await getSubjectList({
+          enableFlag: true,
+          delFlag: 0,
+          page: 1,
+          rows: 999,
+        });
+        const rows = subjects.data.rows || [];
+        rows.forEach((row: any) => {
+          data.subjects.push({
+            text: row.name,
+            value: mappingVoicePart(row.code, "INSTRUMENT"),
+            className: "",
+          });
+        });
+        console.log(data.subjects, "subjects");
+      } catch {
+        //
+      }
+    };
+
+    onBeforeMount(async () => {
       state.platform = query.platform?.toLocaleUpperCase() || "";
+
+      await getSubjects();
+
       __init();
     });
 
@@ -647,42 +656,77 @@ export default defineComponent({
     });
 
     const containerBox = computed(() => {
+      console.log(state.platform, query.modelType, data.fingeringMode, "fingering");
       if (state.platform === IPlatform.PC || query.modelType) {
         return {
           paddingTop: "1rem",
           paddingBottom: "",
         };
       }
-      if (data.subject === "hulusi-flute") {
-        return {
-          paddingTop: "3.1rem",
-          paddingBottom: ".8rem",
-        };
-      } else if (data.subject === "piccolo") {
-        return {
-          paddingTop: "4rem",
-          paddingBottom: ".8rem",
-        };
-      } else if (data.subject === "pan-flute") {
-        return {
-          paddingTop: "0",
-          paddingBottom: "0",
-        };
-      } else if (data.subject === "ocarina") {
-        return {
-          paddingTop: "1.2rem",
-          paddingBottom: "0",
-        };
-      } else if (data.subject === "melodica") {
-        return {
-          paddingTop: "2.8rem",
-          paddingBottom: "1.8rem",
-        };
+      if (data.fingeringMode === "scaleMode") {
+        if (data.subject === "hulusi-flute") {
+          return {
+            paddingTop: "3.1rem",
+            paddingBottom: ".8rem",
+          };
+        } else if (data.subject === "piccolo") {
+          return {
+            paddingTop: "4rem",
+            paddingBottom: ".8rem",
+          };
+        } else if (data.subject === "pan-flute") {
+          return {
+            paddingTop: "0",
+            paddingBottom: "0",
+          };
+        } else if (data.subject === "ocarina") {
+          return {
+            paddingTop: "1.2rem",
+            paddingBottom: "0",
+          };
+        } else if (data.subject === "melodica") {
+          return {
+            paddingTop: "2.8rem",
+            paddingBottom: "1.8rem",
+          };
+        } else {
+          return {
+            paddingTop: "",
+            paddingBottom: "",
+          };
+        }
       } else {
-        return {
-          paddingTop: "",
-          paddingBottom: "",
-        };
+        if (data.subject === "hulusi-flute") {
+          return {
+            paddingTop: "2.1rem",
+            paddingBottom: "0rem",
+          };
+        } else if (data.subject === "piccolo") {
+          return {
+            paddingTop: "3rem",
+            paddingBottom: ".5rem",
+          };
+        } else if (data.subject === "pan-flute") {
+          return {
+            paddingTop: "0",
+            paddingBottom: "0",
+          };
+        } else if (data.subject === "ocarina") {
+          return {
+            paddingTop: "1rem",
+            paddingBottom: "0",
+          };
+        } else if (data.subject === "melodica") {
+          return {
+            paddingTop: "2.8rem",
+            paddingBottom: "0.8rem",
+          };
+        } else {
+          return {
+            paddingTop: "",
+            paddingBottom: "",
+          };
+        }
       }
     });