修改

src/components/DragResizeRotate/DragResizeRotate.vue

@@ -1,13 +1,15 @@
 <template>
     <VueDragResizeRotate :x="drapJson.x" :y="drapJson.y" class-name-handle="my-handle-class-dd handle" class-name-active="my-active-class-dd" class-name="my-class-dd" :w="drapJson.w" :h="drapJson.h" :r="drapJson.r" :parent="true" @resizing="onResize" @resizestop="onResizeStop" @activated="onActivated" @deactivated="onDeactivated" @dragging="onDrag" @dragstop="onDragStop">
-        <div class="w-100% h-100% d-flex a-c j-c p-rtv">
-            <span>点击事件区域</span>
-            <div class="f-s-18 c-danger delete-icon_box" @click.stop="deleteItem">
-                <el-icon>
-                    <CircleCloseFilled />
-                </el-icon>
+        <slot>
+            <div class="w-100% h-100% d-flex a-c j-c p-rtv">
+                <span>点击事件区域</span>
+                <div class="f-s-18 c-danger delete-icon_box" @click.stop="deleteItem">
+                    <el-icon>
+                        <CircleCloseFilled />
+                    </el-icon>
+                </div>
             </div>
-        </div>
+        </slot>
     </VueDragResizeRotate>
 </template>
 <script setup lang="ts" name="ptpl-edit-index">

src/views/components/H5ModelLook.vue

@@ -25,7 +25,6 @@ const close = () => {
 watch(
     () => props.show,
     (val) => {
-        console.log(val);
         dialogVisible.value = val;
     },
     { immediate: true }

src/views/training/models/meeting-tpl-h5.vue

@@ -2,7 +2,11 @@
     <template v-if="form.img">
         <div class="flex1" style="overflow: auto;">
             <TelViewTem @selectArea="selectArea" :enableDraw="enableDraw" bgColor="#f7f7f7" :bgSrc="form.img">
-                <DragResizeRotate v-if="form.bgm" v-model="form.bgmRact" @deactivated="deactivated"></DragResizeRotate>
+                <DragResizeRotate v-if="form.bgm" v-model="form.bgmRact" @activated="activatedBgm($event)" @deactivated="deactivatedBgm">
+                    <div class="w-100% h-100% d-flex j-c a-c">
+                        <img src="@/assets/images/bg_music_icon.png" />
+                    </div>
+                </DragResizeRotate>
                 <template v-for="(item, index) in form?.events" :key="index">
                     <DragResizeRotate v-model="form.events[index]" @delete="deleteItemEvents($event, index, item)" @activated="activated($event, index)" @deactivated="deactivated"></DragResizeRotate>
                 </template>
@@ -16,12 +20,14 @@
     </template>
 </template>
 <script setup lang="ts">
+import { httpRequests } from '@/utils/httpRequests';
 import { importFileGetUrls } from '@/utils/models';
 const emit = defineEmits<{
     (e: 'update:modelValue', value: any): void,
     (e: 'activated', value: any): void
     (e: 'deactivated'): void
-    (e: 'deleteItemEvents', value: any): void
+    (e: 'deleteItemEvents', value: any): void,
+    (e: 'muisc', value: any): void
 }>();
 const props = defineProps<{
     modelValue: any
@@ -51,10 +57,32 @@ const activated = (event, index) => {
     enableDraw.value = false;
     emit('activated', form.value.events[index] || { id: '' });
 }
+const activatedBgm = (event) => {
+    enableDraw.value = false;
+}
 const deactivated = () => {
     enableDraw.value = true;
     emit('deactivated');
 }
+const deactivatedBgm = async () => {
+    enableDraw.value = true;
+        const musicParams = {
+        id: form.value.id,
+        bgmRact: form.value.bgmRact || {
+            x: 100,
+            y: 100,
+            w: 50,
+            h: 50
+        },
+        bgm: form.value.bgm || null
+    };
+    const saveRes = await httpRequests.post('/dgtmedicine/trainpage/setBgm', musicParams);
+    if (saveRes && saveRes.code === 200) {
+        // 更新背景音乐事件
+        emit('muisc', form.value);
+    }
+    emit('deactivated');
+}
 const deleteItemEvents = (event: any, index: number, item: any) => {
     form.value.events.splice(index, 1);
     emit('deleteItemEvents', item);

src/views/training/ptpl/edit/index.vue

@@ -29,7 +29,7 @@
                             <EditPen />
                         </el-icon>
                     </div>
-                    <MeetingTplH5 v-if="form.id" v-model="form" @activated="activated" @deleteItemEvents="deleteItemEvents"></MeetingTplH5>
+                    <MeetingTplH5 v-if="form.id" v-model="form" @activated="activated" @deleteItemEvents="deleteItemEvents" @muisc="setMuisc"></MeetingTplH5>
                 </div>
                 <div class="bg-#f8f8f8 w-240">
                     <MeetingTplEvents v-if="curEvent" v-model="curEvent" :dict="dict" @save="saveEevent" :list="list"></MeetingTplEvents>
@@ -138,6 +138,11 @@ const deleteListTpl = async (item: any) => {
         }
     });
 };
+const setMuisc = (item: any) => {
+    if (form.value.id === item.id) {
+        form.value = { ...form.value, ...item }
+    }
+};
 const changeLabel = async (item: any) => {
     const { value: label } = await ElMessageBox.prompt('请输入页面名称', '修改页面名称', {
         confirmButtonText: '保存',
@@ -164,10 +169,23 @@ const setBgMusic = async () => {
     const music = res.find(item => item.code === 200);
     if (!music || !music.data || !music.data.url) return;
     form.value.bgMusic = music.data.url;
-    const saveRes = await httpRequests.post('/dgtmedicine/trainpage/edit', form.value);
+    const musicParams = {
+        id: form.value.id,
+        bgmRact: form.value.bgmRact || {
+            x: 100,
+            y: 100,
+            w: 50,
+            h: 50
+        },
+        bgm: music.data.url
+    };
+    const saveRes = await httpRequests.post('/dgtmedicine/trainpage/setBgm', musicParams);
     if (saveRes && saveRes.code === 200) {
         ElMessage.success('设置背景音乐成功');
         getList();
+        if (form.value.id) {
+            form.value = { ...form.value, ...musicParams }
+        }
     }
 };
 // 发布页面