feat: 动态加载json背景图

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

@@ -1,4 +1,4 @@
-import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef, nextTick } from "vue";
+import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef, nextTick, defineAsyncComponent } from "vue";
 import styles from "./index.module.less";
 
 import iconBack from "./image/icon-back.png";
@@ -28,12 +28,16 @@ import { toggleMusicSheet } from "/src/view/plugins/toggleMusicSheet";
 import useDrag from "/src/view/plugins/useDrag/index";
 import Dragbom from "/src/view/plugins/useDrag/dragbom";
 import { getGuidance, setGuidance } from "../custom-plugins/guide-page/api";
-import ModeView from "./modeView";
+// import ModeView from "./modeView";
 import { smoothAnimationState } from "../view-detail/smoothAnimation";
 import { isMusicList, musicListShow } from "../component/the-music-list";
 import { EvaluatingDriver, FollowDriver, PractiseDriver } from "../custom-plugins/guide-driver";
 import { fingerRef } from "/src/page-instrument/view-detail/index"
 
+const ModeView = defineAsyncComponent(() =>
+  import('./modeView')
+)
+
 /** 头部数据和方法 */
 export const headTopData = reactive({
   /** 模式 */

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

@@ -38,7 +38,7 @@ import { initSmoothAnimation } from "./smoothAnimation"
 import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic"
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 import Loading from "./loading"
-import bgJson from "./images/index.json";
+// import bgJson from "./images/index.json";
 import bg2Left from "./images/bg2_left_zs.png";
 import bg2Right from "./images/bg2_right_zs.png";
 
@@ -144,6 +144,20 @@ export default defineComponent({
     };
     // console.log(route.params, query)
 
+    // 动态加载json背景
+    const bgJsonData: any = ref(null);
+    const jsonFiles: any = {
+      data: () => import('./images/index.json'),
+    };
+    const loadJson = async (fileKey: any) => {
+      try {
+         const data = await jsonFiles[fileKey]();
+        bgJsonData.value = data.default;
+      } catch (error) {
+        console.error('👀～json背景加载失败', error);
+      }
+    };
+
     onMounted(async () => {
       (window as any).appName = "colexiu";
       const id = query.id || "43554";
@@ -160,6 +174,7 @@ export default defineComponent({
       // Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
       //   getMusicInfo(values[0]);
       // });
+      loadJson('data');
       try { 
         await getMusicDetail(id);
       } catch (err) {
@@ -477,11 +492,13 @@ export default defineComponent({
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}
       >
-        <img 
-          style={{opacity: state.setting.camera && state.modeType === 'evaluating' ? state.setting.cameraOpacity / 100 : 1}} 
-          class={styles.pageBg} 
-          src={state.modeType === 'practise' ? bgJson[1] : state.modeType === 'evaluating' ? bgJson[2] : state.modeType === 'follow' ? bgJson[3] : ''} 
-        />
+        {bgJsonData.value ? 
+          <img 
+            style={{opacity: state.setting.camera && state.modeType === 'evaluating' ? state.setting.cameraOpacity / 100 : 1}} 
+            class={styles.pageBg} 
+            src={state.modeType === 'practise' ? bgJsonData.value[1] : state.modeType === 'evaluating' ? bgJsonData.value[2] : state.modeType === 'follow' ? bgJsonData.value[3] : ''} 
+          /> : null    
+        }
         {
           state.modeType === 'evaluating' ? <>
             <img src={bg2Left} class={styles.bg2Left} />

vite.config.ts

@@ -76,8 +76,8 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
-        // target: "https://test.kt.colexiu.com",
+        // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        target: "https://test.kt.colexiu.com",
         //target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),