audio value

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -7,7 +7,7 @@ import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import { PageMusic } from "./PageMusic";
 import { Select } from "ant-design-vue";
 import { MusicOptions } from "./localMusic";
-const styleColumns = (muisc: string): ColumnItem[] => {
+const styleColumns = (muisc?: string): ColumnItem[] => {
   return [
     {
       label: "背景颜色",
@@ -20,14 +20,14 @@ const styleColumns = (muisc: string): ColumnItem[] => {
       component: Select,
       props: {
         class: "w-full",
-        defaultValue: muisc,
+        value: muisc,
         options: [{ label: "无", value: "" }, ...MusicOptions],
       },
     },
     {
       dataIndex: "value.music",
       component: PageMusic,
-      isVisible: (value, data) => data?.value?.music != "",
+      isVisible: (value, data) => data?.value?.music != "" && muisc != "",
     },
   ];
 };
@@ -42,13 +42,17 @@ export const PageForm = defineComponent({
     }
 
     return () => {
-      const music = helper.findRootComp()?.value.music || "";
+      const compMusic = helper.findRootComp()?.value.music || "";
+      const curValue = MusicOptions.find((e) => {
+        return e.value == compMusic;
+      });
+
       return (
         <>
           <div>页面样式</div>
           <FormUI
             data={props.component}
-            columns={styleColumns(music)}
+            columns={styleColumns(curValue?.value || "")}
             onChange={changeVal}
           />
         </>

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -20,6 +20,7 @@ import {
   onMounted,
 } from "vue";
 import { bool, number } from "vue-types";
+import { MusicOptions } from "./localMusic";
 declare const WeixinJSBridge: any;
 export const PageMusic = defineComponent({
   setup() {
@@ -37,10 +38,15 @@ export const PageMusic = defineComponent({
 
     let audioKey = nanoid();
     let audioBgm = ref();
+
     const initAudioBgm = () => {
       audioBgm.value = null;
+      const curAudio = MusicOptions.find((e) => {
+        return e.value == rootComp?.value.music;
+      });
+      const src = curAudio?.src || "";
       audioBgm.value = new Howl({
-        src: [rootComp?.value.music],
+        src: [src],
         loop: store.isEditMode ? false : true,
         preload: true,
         HTML5: true,

src/modules/editor/components/CompUI/basicUI/Page/localMusic.ts

@@ -1,50 +1,62 @@
 export const MusicOptions = [
   {
     label: "安静舒缓",
-    value: require("@/assets/audio/soothing&quiet.mp3"),
+    value: "soothing&quiet",
+    src: require("@/assets/audio/soothing&quiet.mp3"),
   },
   {
     label: "和煦的风",
-    value: require("@/assets/audio/balmy_wind.mp3"),
+    value: "balmy_wind",
+    src: require("@/assets/audio/balmy_wind.mp3"),
   },
   {
     label: "纽约落日",
-    value: require("@/assets/audio/sunset_in_newyork.mp3"),
+    value: "sunset_in_newyork",
+    src: require("@/assets/audio/sunset_in_newyork.mp3"),
   },
   {
     label: "温情回忆",
-    value: require("@/assets/audio/warm_memories.mp3"),
+    value: "warm_memories",
+    src: require("@/assets/audio/warm_memories.mp3"),
   },
   {
     label: "春华秋实",
-    value: require("@/assets/audio/spring&autumn.mp3"),
+    value: "spring&autumn",
+    src: require("@/assets/audio/spring&autumn.mp3"),
   },
   {
     label: "明媚阳光",
-    value: require("@/assets/audio/bright_sunshine.mp3"),
+    value: "bright_sunshine",
+    src: require("@/assets/audio/bright_sunshine.mp3"),
   },
   {
     label: "动感活力",
-    value: require("@/assets/audio/dynamic&energetic.mp3"),
+    value: "dynamic&energetic",
+    src: require("@/assets/audio/dynamic&energetic.mp3"),
   },
   {
     label: "冲上云霄",
-    value: require("@/assets/audio/soar_into_the_sky.mp3"),
+    value: "soar_into_the_sky",
+    src: require("@/assets/audio/soar_into_the_sky.mp3"),
   },
   {
     label: "命运希望",
-    value: require("@/assets/audio/destiny&hope.mp3"),
+    value: "destiny&hope",
+    src: require("@/assets/audio/destiny&hope.mp3"),
   },
   {
     label: "励志活力",
-    value: require("@/assets/audio/inspirational_vitality.mp3"),
+    value: "inspirational_vitality",
+    src: require("@/assets/audio/inspirational_vitality.mp3"),
   },
   {
     label: "励志希望",
-    value: require("@/assets/audio/inspirational_hope.mp3"),
+    value: "inspirational_hope",
+    src: require("@/assets/audio/inspirational_hope.mp3"),
   },
   {
     label: "活力鼓舞",
-    value: require("@/assets/audio/inspiration_vigour.mp3"),
+    value: "inspiration_vigour",
+    src: require("@/assets/audio/inspiration_vigour.mp3"),
   },
 ];