de-net/src/view/iframe/publish/tool-box/index.vue

<template>
    <div class="page-wrapper">
        <editor v-show="showCom == 'EDITOR'" :linkInputDescImage="pageData.linkInputDescImage" @changeShowCom="changeShowCom" />  
        <preview v-show="showCom == 'PREVIEW'" 
            :previewData="previewData" 
            :screenshotWebsiteData="screenshotWebsiteData"
            :showCom="showCom"
            :defaultLinkTitle="pageData.defaultLinkTitle"
            @publishFinish="publishFinish" />
    </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps, defineEmits } from "vue";

import { screenshotWebsite } from "@/http/toolBoxApi";
import editor from '@/view/iframe/publish/tool-box/child/editor.vue'
import preview from '@/view/iframe/publish/tool-box/child/preview.vue'

const props = defineProps({
    pageData: {
        type: Object,
        default: {
            linkInputDescImage: '',
            defaultLinkTitle: ''
        }
    },
    activePage: {
        type: String,
        default: 'EDITOR', // EDITOR PREVIEW
    },
});

const emits = defineEmits(["onToolBoxPageChange"]);

watch(
    () => props.activePage,
    (newVal) => {
        showCom.value = newVal;
    },
    {
        deep: true
    }
);

let showCom = ref('EDITOR'); 
let previewData = reactive({
    convertUrl: '',
    originUrl: '',
    appId: '',
    currentApp: {}
})

let screenshotWebsiteData = reactive({
    url: '',
    status: '',
});

const changeShowCom = (params) => {
    showCom.value = 'PREVIEW';
    previewData.convertUrl = params.convertUrl;
    previewData.originUrl = params.originUrl;
    previewData.appId = params.appId
    previewData.linkImagePath = params.linkImagePath || '';
    previewData.currentApp = params.currentApp || {};

    screenshotWebsiteData.url = '';
    screenshotWebsiteData.status = '';
    if(!params.appId || params.appId && !params.linkImagePath) {
        screenshotWebsite({
            params: {
                url: params.convertUrl
            }
        }).then(res => {
            if(showCom.value != 'PREVIEW') {
                return;
            }
            if(res.code == 0) {
                screenshotWebsiteData.url = res.data;
                screenshotWebsiteData.status = 1;
            } else {
                screenshotWebsiteData.status = 1;
            }
        }).catch(() => {
            if(showCom.value != 'PREVIEW') {
                return;
            }
            screenshotWebsiteData.status = 1;
        })
    }

    emits("onPageChange", {page: showCom.value});
}

const publishFinish = (params) => {
    emits("toolBoxPublishFinish", params);
}

</script>

<style lang="scss" scoped>
    .page-wrapper {
        width: 100%;
        height: 100%;
    }
</style>