de-net/src/view/iframe/publish/publish.vue

<!-- 发布弹窗 -->
<template>
    <div class="main_app">
        <give-dialog
            :dialogData="dialogData"
            @close="close"
            @postPublishFinish="finish" ></give-dialog>
        <select-publish-content 
            :visible="selectVisible" 
            @close="hideSelectDialog"
            @select="selectPublishType"></select-publish-content>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import giveDialog from "@/view/iframe/publish/give-dialog.vue";
import selectPublishContent from "@/view/iframe/publish/components/select-publish-content.vue";

let dialogData = reactive({
    visible: false,
    type: 'REDPACKET'
});

let selectVisible = ref(false);

const close = () => {
    dialogData.visible = false;
    hideIframe();
};

const finish = (params) => {
    close();
    window.parent.postMessage({ actionType: "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG", publishRes: params.publishRes }, "*");
};

const hideIframe = () => {
    window.parent.postMessage({ actionType: "IFRAME_HIDE_IFREME" }, "*");
};

const hideSelectDialog = () => {
    close();
}

const selectPublishType = (params) => {
    selectVisible.value = false;
    dialogData.visible = true;
    dialogData.type = params.type;
}

window.addEventListener("message", function (event) {
    let eventData = event.data;
    if (eventData && eventData.actionType == "CONTENT_SHOW_GIVE_DIALOG") {
        window.parent.postMessage({ actionType: "IFRAME_SHOW_IFREME" }, "*");

        let {type = 'REDPACKET'} = eventData.data || {};
        if(type != 'SHOW_SELECT') {
            dialogData.visible = true;
            dialogData.type = type;
        } else {
            selectVisible.value = true;
        }
    }
});
</script>

<style>
html, body {
    background-color: rgba(255,255,255,0)!important;
    line-height: unset !important;
}
</style>