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

<template>
    <div class="guide-wrapper">
        <div class="top">
            <div class="title">Guided Tutorial</div>
            <div class="content">
                <div class="img-list" v-if="pageData.guideData.guideType == 'image'">
                    <div class="img-item" v-for="(item, index) in pageData.guideData.guideData" :key="index">
                        <img class="img" :src="item">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                Enter Link
            </div>
            <div class="search-input-wrapper">
                <input class="input" v-model="siteUrl" placeholder="Enter link" />
                <div class="btn" @click="confirm">
                    <img :src="require('@/assets/svg/icon-tool-box-guide-arrow.svg')" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { checkURL } from "@/uilts/help"
import { setChromeStorage, getChromeStorage } from "@/uilts/chromeExtension"
import { message } from "ant-design-vue";

import { checkInputUrlInBlacklist } from "@/http/toolBoxApi";

let siteUrl = ref('');

let pageData = reactive({
    guideData: [],
    selectGuideApp: {}
});

const confirm = async () => {
    siteUrl.value = siteUrl.value.trim();

    if (!checkURL(siteUrl.value)) {
        message.info('Incorrect URL entered');
        return;
    }

    let blackListRes = await checkInputUrlInBlacklist({
        params: {
            url: siteUrl.value
        }
    })

    if(blackListRes.code == 0) {
        if(blackListRes.data) {
            message.info('This site is not supported');
            return;
        }
    }

    let {list: windowList = []} = await getChromeStorage('guideAppWindowList') || {list: []};

    chrome.runtime.sendMessage({
        actionType: "CONTENT_GUIDE_APPLY_APP",
        data: {
            siteUrl: siteUrl.value,
            selectGuideApp: pageData.selectGuideApp
        }
    }, (response) => { });

    setTimeout(() => {
        if(windowList && windowList.length) {
            for (let i = 0; i < windowList.length; i++) {
                let item = windowList[i];
                chrome.windows.remove(
                    item.id,
                    function () { }
                )
            };
            chrome.storage.local.remove("selectGuideApp");
            chrome.storage.local.remove("guideAppWindowList");
        }
    }, 600)
};

const setPageData = async () => {
    let selectGuideApp = await getChromeStorage('selectGuideApp') || {};
    pageData.selectGuideApp = selectGuideApp;

    if(selectGuideApp.guideData) {
        if(typeof selectGuideApp.guideData == 'string') {
            pageData.guideData = JSON.parse(selectGuideApp.guideData);
        } else {
            pageData.guideData = selectGuideApp.guideData
        }
    };
}

onMounted(() => {
    setPageData();
})

</script>

<style lang="scss">
html,
body,
#app {
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.guide-wrapper {
    width: 100%;
    height: 100%;

    .top {
        height: calc(100% - 158px);
        padding: 30px 43px;
        box-sizing: border-box;
        overflow-y: auto;

        .title {
            font-weight: 500;
            font-size: 30px;
            margin-top: 10px;
            margin-bottom: 30px;
        }

        .img-item {
            margin-bottom: 18px;

            .img {
                width: 100%;
            }
        }
    }

    .bottom {
        height: 158px;
        background: #1D9BF0;
        padding: 20px;
        box-sizing: border-box;

        .title {
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            margin-top: 7px;
            margin-bottom: 18px;
        }

        .search-input-wrapper {
            width: 100%;
            height: 49px;
            background: #fff;
            border-radius: 100px;
            box-sizing: border-box;
            display: flex;

            .input {
                border: none;
                outline: none;
                border-radius: 100px;
                width: calc(100% - 49px);
                height: 100%;
                box-sizing: border-box;
                color: #636363;
                padding: 15px 20px 15px 20px;
            }

            .btn {
                width: 49px;
                height: 100%;
                background: #D2EAFC;
                display: flex;
                align-items: center;
                justify-content: center;
                border-top-right-radius: 100px;
                border-bottom-right-radius: 100px;
                cursor: pointer;
            }
        }
    }
}
</style>