show nft

src/http/nft.js

@@ -7,3 +7,11 @@ export function getTwitterSaleNftProjectInfo(params) {
         data: params
     })
 }
+
+export function getNftProjectInfo(params) {
+    return service({
+        url: `/nft/project/getNftProjectInfo`,
+        method: 'post',
+        data: params
+    })
+}

src/logic/content/ParseCard.js

@@ -65,7 +65,7 @@ class ParseCard {
             let _txt
             for (let i in arr_article) {
                 _txt = arr_article[i].innerText || ''                
-                if ((_txt.includes('#DeNet') || this.compatibleMask(arr_article[i])) && !this.isHasIframeByArticle(arr_article[i])) {
+                if ((_txt.includes('#DeNet') || _txt.includes('#DNFT') || this.compatibleMask(arr_article[i])) && !this.isHasIframeByArticle(arr_article[i])) {
                     de_net_card.push({
                         time: new Date().getTime(),
                         dom: arr_article[i]
@@ -242,6 +242,13 @@ class ParseCard {
         }
         return _iframe
     }
+    createNftIframe({project_Id}) {
+        let _iframe = document.createElement('iframe')
+            _iframe.id = project_Id
+            _iframe.src = chrome.runtime.getURL('/iframe/nft-card.html') + `?projectId=${project_Id}`;
+            _iframe.style.cssText = 'border:medium none; width:375px; min-height:300px;'
+        return _iframe
+    }
     isHasIframeByArticle(dom_card) {
         if (!dom_card || !dom_card.parentElement) {
             return
@@ -340,7 +347,27 @@ class ParseCard {
             // dom.parentElement.appendChild(div)
             dom.appendChild(this.createIframe({ post_Id, tweet_Id }))
         }
+    }
+    replaceNftDomRedPacket({ dom_card, tweet_Id, post_Id, time, short_url }) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        let dom = dom_card.querySelector('div[aria-labelledby]')
+        if (dom) {
+            for (let i = 0; i < dom.childNodes.length; i++) {
+                if (dom.children[i].tagName.toLowerCase() != 'iframe') {
+                    dom.children[i].style.display = 'none'
+                }
+            }
+        } else {
+            dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
+        }
 
+        dom.style = 'min-height:300px'
+        if (dom) {
+            let project_Id = post_Id.replace('nft/', '');
+            dom.appendChild(this.createNftIframe({ project_Id }))
+        }
     }
     replaceFacebookPacket({ dom_card, tweet_Id, short_url, tweet_author }) {
         if (!dom_card || !dom_card.parentElement) {

src/logic/content/twitter.js

@@ -691,7 +691,12 @@ function setIframeRedPacket(type = 'twitter') {
             // 过滤出可以请求的短链接
             parseCard.getCardParmas(card_json_data).then((res) => {
                 for (let i in res.has_post_Id_card_data) {
-                    parseCard.replaceDOMRedPacket(res.has_post_Id_card_data[i])
+                    let item = res.has_post_Id_card_data[i];
+                    if (item && item.post_Id && item.post_Id.indexOf('nft/') >= 0) {
+                        parseCard.replaceNftDomRedPacket(item)
+                    } else {
+                        parseCard.replaceDOMRedPacket(item)
+                    }
                 }
                 if (res.need_net_short_url.length > 0) {
                     // 请求短链接
@@ -1196,7 +1201,7 @@ export const showNFTCard = () => {
     let where = isTwitter && userElem && tabIndex;
     if (where) {
         let iframe = document.createElement('iframe');
-            iframe.src = chrome.runtime.getURL(`/iframe/nft-card.html?pathname=${encodeURIComponent(urlInfo.pathname)}`)
+            iframe.src = chrome.runtime.getURL(`/iframe/nft-card.html`)
             iframe.style.cssText = 'border:medium none; width:100%; height:297px;';
         let nftElement = document.createElement('div');
             nftElement.id = 'de-nft-node';

src/view/iframe/nft/card.vue

@@ -1,43 +1,63 @@
 <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') " />
+        <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="share" @click="share">
-                <img :src=" require('@/assets/img/icon-ntf-share.png') " />
+            <div class="content">
+                <img :src="saleData.windowImagePath" />
             </div>
-        </div>
-        <div class="content">
-            <img :src="saleData.windowImagePath" />
-        </div>
-        <div class="buy" @click="buy">
-            <button>Buy NFT</button>
-        </div>
+            <div class="buy" @click="buy">
+                <button>Buy NFT</button>
+            </div>
+        </template>
     </div>
 </template>
 
 <script setup>
 import { onBeforeMount, ref } from 'vue'
-import { getTwitterSaleNftProjectInfo } from '@/http/nft'
+import { getTwitterSaleNftProjectInfo, getNftProjectInfo } from '@/http/nft'
 import { pageUrl } from "@/http/configAPI.js"
 
 const saleData = ref({});
+const isShare = ref(false);
+const isLoading = ref(true);
 
 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);
-    }
+    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) => {
@@ -50,6 +70,7 @@ const getSaleProjectInfo = (account) => {
         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" });
@@ -60,8 +81,9 @@ const getSaleProjectInfo = (account) => {
 
 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: url }  });
+        chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_TWITTER_PUBLISH", publishRes: { srcContent: content }  });
     })
 }
 
@@ -70,7 +92,15 @@ const buy = () => {
 }
 
 onBeforeMount(() => {
-    getSaleInfo()
+    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>