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

<template>
    <div class="nft" :class="{ border: isShare }">
        <template v-if="!isLoading">
            <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" v-if="!isShare" @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>
        </template>
    </div>
</template>

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

const getSaleInfo = () => {
    chrome.tabs.getCurrent((tab) => {
        let url = new URL(tab.url);
        let pathname = url.pathname;
        let pathArr, account;
        if (pathname) {
            pathname = decodeURIComponent(pathname);
            pathname = pathname.slice(1);
            pathArr = pathname.split('/');
            account = pathArr[0];
            getSaleProjectInfo(account);
        }
    })
}

const getSaleData = (projectId) => {
    getNftProjectInfo({
        params: {
            nftProjectId: projectId
        }
    }).then(res => {
        let { data } = res;
        if (data !== null) {
            // setData
            saleData.value = data;
            isLoading.value = false;
        }
    })
}

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

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

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(() => {
    let urlParams = new URL(window.location.href);
    let searchParmas = new URLSearchParams(urlParams.search);
    let projectId = searchParmas.get('projectId') || '';
    if (projectId) {
        isShare.value = true;
        getSaleData(projectId)
    } else {
        getSaleInfo()
    }
})
</script>

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

.nft {
    width: 100%;
    height:297px;
    user-select:none;
    border-radius:20px;
    background:#F7F9F9;
    &.border {
        box-sizing: border-box;
        border: solid 1px #DCDCDC;
    }
    .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>