de-net/src/view/iframe/nft/card.vue

<template>
    <div class="nft">
        <div class="title">
            <div class="tag">
                <img class="logo" :src="saleData.nftProjectAvatar" />
                <font class="text">{{ saleData.nftProjectName }}</font>
                <img class="tagImg" :src="require('@/assets/img/icon-nft.png')" />
            </div>
            <div class="share" @click="share">
                <img :src="require('@/assets/img/icon-ntf-share.png')" />
            </div>
        </div>
        <div class="content">
            <img :src="saleData.windowImagePath" />
        </div>
        <div class="buy" @click="buy">
            <button>Buy NFT</button>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { getTwitterSaleNftProjectInfo } from '@/http/nft'
import { pageUrl } from "@/http/configAPI.js"
import { getChromeStorage } from '@/uilts/chromeExtension.js'
const saleData = ref({});

const getSaleInfo = () => {
    let urlParams = window.location.search;
    let searchParams = new URLSearchParams(urlParams);
    let pathname = searchParams.get('pathname');
    let pathArr, account;
    if (pathname) {
        pathname = decodeURIComponent(pathname);
        pathname = pathname.slice(1);
        pathArr = pathname.split('/');
        account = pathArr[0];
        getSaleProjectInfo(account);
    }
}

const getSaleProjectInfo = (account) => {
    getTwitterSaleNftProjectInfo({
        params: {
            twitterAccount: account
        }
    }).then(res => {
        let { data } = res;
        if (data !== null) {
            // setData
            saleData.value = data;
            // postMessage
            chrome.tabs.getCurrent((tab) => {
                chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_NFT_SHOW_SALE" });
            })
        }
    })
}

const share = () => {
    let url = pageUrl + `/nft/${saleData.value.nftProjectId}`
    chrome.tabs.getCurrent((tab) => {
        chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_TWITTER_PUBLISH", publishRes: { srcContent: url } });
    })
}

const buy = () => {
    getChromeStorage('userInfo', (_userInfo) => {
        if (!_userInfo) {
            chrome.runtime.sendMessage(
                { actionType: "POPUP_LOGIN", data: "" },
                (response) => {
                    console.log("res", response);
                }
            )
        } else {
            chrome.tabs.getCurrent((tab) => {
                chrome.tabs.sendMessage(tab.id, {
                    actionType: "IFRAME_TWITTER_SHOW_BUY_NFT",
                    data: {
                        nft_project_Id: saleData.value.nftProjectId
                    }
                }, (res) => { });
            })
        }
    })
}

onBeforeMount(() => {
    getSaleInfo()
})
</script>

<style lang='scss'>
body {
    margin: 0;
    padding: 0;
}

.nft {
    width: 100%;
    height: 297px;
    user-select: none;
    border-radius: 20px;
    background: #F7F9F9;

    .title {
        height: 46px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tag {
            display: flex;
            align-items: center;
            padding-left: 15px;

            .logo {
                overflow: hidden;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #eee;
            }

            .text {
                font-size: 18px;
                font-weight: bold;
                margin: 0 7px;
            }

            .tagImg {
                width: 37px;
                height: 22px;
            }
        }

        .share {
            cursor: pointer;
            padding-right: 15px;

            img {
                width: 19px;
                height: 18px;
            }
        }
    }

    .content {
        height: 190px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .buy {
        height: 61px;
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            width: 310px;
            height: 34px;
            cursor: pointer;
            color: #ffffff;
            font-size: 15px;
            font-weight: bold;
            background: #000;
            border: 0;
            border-radius: 44px;
        }
    }
}
</style>