de-net/src/view/iframe/tool-box/buy-nft.vue

<template>
    <div class="nft-layer">
        <div class="title">
            <img @click="close" :src=" require('@/assets/svg/icon-close.svg') " />
            <span class="text">Unlock by Ruomeng NFT</span>
        </div>
        <div class="content">
            <div class="img">
                <img v-if="nftAuthINfo && nftAuthINfo.icon" :src="nftAuthINfo.icon" />
            </div>
            <div class="tips">
                <span>only Ruomeng NFT holder can view the content</span>
            </div>
            <div
                class="btn"
                v-if="btnStatus"
                @click="buy"
                v-click-log="{
                    pageSource: Report.pageSource.buy_posteditor_nft_dialog,
                    objectType: Report.objectType.buy_button,
                    nftProjectId: nftAuthINfo.certNftProjectId || '',
                    postId: postId,
                }">
                <span>Buy NFT to Participate</span>
            </div>
            <div class="btn disabled" v-else>
                <span>Buy NFT to Participate</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import Report from "@/log-center/log"
import { ref, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus';
import { getQueryString } from '@/uilts/help';
import { getPostEditorNftCertInfo } from '@/http/toolBoxApi';
import { getChromeStorage, sendChromeTabMessage } from "@/uilts/chromeExtension";
import "element-plus/es/components/message/style/css";

const postId = ref('')
const btnStatus = ref(false)
const nftAuthINfo = ref(null)

const close = () => {
    sendChromeTabMessage({
        actionType: 'Hide_ToolBox_By_Nft'
    })
}

const buy = () => {
    getChromeStorage('userInfo', (_userInfo) => {
        if (!_userInfo) {
            chrome.runtime.sendMessage(
                { actionType: "POPUP_LOGIN", data: "" },
                (response) => {
                    console.log("res", response);
                }
            )
        } else {
            if (nftAuthINfo.value && nftAuthINfo.value?.publishStatus === 1) {
                chrome.tabs.getCurrent((tab) => {
                    chrome.tabs.sendMessage(tab.id, {
                        actionType: "IFRAME_TWITTER_SHOW_BUY_NFT",
                        data: {
                            nft_project_Id: nftAuthINfo.value.certNftProjectId,
                            post_Id: postId.value,
                        }
                    }, (res) => { });
                })
                // close buy
                close();
            } else {
                ElMessage({
                    message: `NFT project not published!`,
                    type: 'error',
                })
            }
        }
    })
}

onBeforeMount(() => {
    postId.value = getQueryString('postId')
    getPostEditorNftCertInfo({
        params: {
            postId: postId.value
        }
    }).then(res => {
        let { code, data } = res;
        if ( code === 0 ) {
            btnStatus.value = true;
            nftAuthINfo.value = data;
            // report
            Report.reportLog({
                businessType: Report.businessType.pageView,
                pageSource: Report.pageSource.buy_posteditor_nft_dialog,
                nftProjectId: data.certNftProjectId || '',
                postId: postId.value || '',
            })
        }
    })
})

</script>

<style lang="scss">
body {
    margin: 0;
    padding: 0;
}
.nft-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 420px;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background: #FFFFFF;
    .title {
        height: 48px;
        display: flex;
        align-items: center;
        box-shadow: 0px 0.5px 0px #D1D9DD;
        img {
            width: 24px;
            height: 24px;
            margin-left: 14px;
            margin-right: 12px;
            cursor: pointer;
        }
        .text {
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
        }
    }
    .content {
        .img {
            display: flex;
            height: 250px;
            align-items: center;
            justify-content: center;
            img {
                width: 150px;
                height: 150px;
                border-radius: 5px;
            }
        }
        .tips {
            position: relative;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            line-height: 33px;
            margin: auto;
            margin-bottom: 28px;
            width: calc(100% - 30px);
            &::before {
                position: absolute;
                top: 50%;
                left: 0;
                content: '';
                display: block;
                width: 14%;
                height: 1px;
                background-color: rgba($color: #000000, $alpha: .2);
            }
            &::after {
                position: absolute;
                top: 50%;
                right: 0;
                content: '';
                display: block;
                width: 14%;
                height: 1px;
                background-color: rgba($color: #000000, $alpha: .2);
            }
        }
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            width: calc(100% - 30px);
            height: 46px;
            color: #FFFFFF;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            border-radius: 100px;
            background: #1D9BF0;
            &.disabled {
                background: #CDCDCD;
                cursor: not-allowed;
                color: #fff;
            }
        }
    }
}
</style>