de-net/src/view/iframe/bind-tweet/bind-tweet.vue

<template>
    <div class="bind-tips-wrapper">
        <img  :src="require('@/assets/svg/icon-close.svg')" class="icon-close" @click="close">
        <div class="top">
            <img :src="require('@/assets/svg/icon-giveaways-notice.svg')" class="icon-give-box">
            <div class="text">
                oops, you failed to send giveaway
            </div>
        </div>
        <div class="button-wrapper">
            <div class="re-send" @click="seSend">Resend</div>
            <div class="terminate" v-if="submitData.taskLuckdropId"  @click="terminate">Terminate for a refund</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getChromeStorage } from '@/uilts/chromeExtension.js'
import { getQueryString } from '@/uilts/help.js'
import { terminatedLuckdrop } from "@/http/redPacket";

let submitData = ref({
    taskLuckdropId: ''
});

const close = () => {
    window.parent.postMessage({ actionType: "IFRAME_CLOSE_BIND_TWEET",  data: {
    }}, "*");
}

const seSend = async () => {
    let publishData = await getChromeStorage('publishData');
    callEventPageMethod(
        "POPUP_PUBLISH_TWITTER_RED_PACK",
        {...publishData},
        function (response) {
            close();
            console.log("res", response);
        }
    );
}

const terminate = () => {
    terminatedLuckdrop({
        params: {
            luckdropId: submitData.value.taskLuckdropId
        }
    }).then(res => {
        close();
    });
}

/**
 * sendMessage
 */
const callEventPageMethod = (actionType, data, callback) => {
    chrome.runtime.sendMessage(
        { 
            actionType: actionType, 
            data: data 
        },
        function (response) {
            if (typeof callback === "function") callback(response);
        }
    );
};


onMounted(() => {
    let params = getQueryString('params');
    submitData.value = JSON.parse(params);
}) 

</script>

<style scoped lang="scss">
.bind-tips-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 15px;
    position: relative;
    box-shadow: 0px 4px 30px 0px #00000033;


    .icon-close {
        position: absolute;
        left: 14px;
        top: 14px;
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .top {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 35px;

        .icon-give-box {
            width: 60px;
            height: 60px;
            margin-bottom: 20px;
        }

        .text {
            font-weight: 590;
            font-size: 18px;
        }
    }

    .button-wrapper {
        margin-top: 26px;

        .re-send, .terminate {
            width: 360px;
            height: 43px;
            border-radius: 100px;
            font-weight: 500;
            font-size: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .re-send {
            background: #1D9BF0;
            margin-bottom: 12px;
            color: #FFFFFF;
        }

        .terminate {
            color: #1D9BF0;
            border: 1px solid #ECECEC;
        }
    }
}
</style>