de-net/src/view/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">
            <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"

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 }  });
    })
}

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>