digital-medicine-front/src/views/training/models/meeting-tpl-h5.vue

<template>
    <template v-if="form.img">
        <div class="flex1" style="overflow: auto;">
            <TelViewTem @selectArea="selectArea" :enableDraw="enableDraw" bgColor="#fff" :bgSrc="form.img">
                <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 class="w-100% h-100%" 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>
            </TelViewTem>
        </div>
    </template>
    <template v-else>
        <div @click="addImgBg" class="bg-#f7f7f7 flex1 w-750 mb-10 c-s-p d-flex a-c j-c">
            <div class="c-666 f-s-18 u-s-n">点击此处上传图片</div>
        </div>
    </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: 'muisc', value: any): void
}>();
const props = defineProps<{
    modelValue: any
}>();
const eventDefault = {
    id: '',
    eventName: '',
    params: {
        phone: '',
        url: '',
    },
    x: 0,
    y: 0,
    w: 100,
    h: 100,
};
const form = ref<any>(props.modelValue || { img: '', events: [] });
const enableDraw = ref(true);

const selectArea = (area: any) => {
    if (area.rect.w < 20 || area.rect.h < 20) {
        return;
    }
    form.value.events.push({ ...eventDefault, id: new Date().getTime() + '_btn_drap', ...area.rect });
}
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: 650,
            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);
    emit('update:modelValue', form.value);
}
const clickInfo = () => {
    console.log(form.value);
}
const addImgBg = async () => {
    const res: any[] = await importFileGetUrls(['png', 'jpg', 'jpeg'], false);
    if (res.length) {
        res.forEach(element => {
            if (element.data?.url) {
                form.value.img = element.data.url;
            }
        });
    }
}
watch(() => props.modelValue, (val) => {
    form.value = val || { img: '', events: [] };
}, { deep: true });
</script>
<style scoped lang="scss"></style>