[edit][nft show and hide]

src/entry/content.js

@@ -21,6 +21,8 @@ import {
     doTaskTwitterAPI,
     onTweetReplyClick,
     showNFTSale,
+    showBuyNFT,
+    hideBuyNFT
 } from "@/logic/content/twitter.js";
 
 import {
@@ -99,6 +101,12 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case "IFRAME_TWITTER_PUBLISH":
             twitterPublishHandler(req.publishRes);
             break;
+        case "IFRAME_TWITTER_SHOW_BUY_NFT":
+            showBuyNFT(req.data)
+            break
+        case 'IFRAME_TWITTER_HIDE_BUY_NFT':
+            hideBuyNFT()
+            break
     }
 })
 

src/logic/content/twitter.js

@@ -725,13 +725,15 @@ export function initExecuteScript(changes) {
     }
 }
 
-const createIframe = ({ url, tweet_Id }, callback) => {
+const createNFTIframe = ({ url, id }, callback) => {
     let iframe = document.createElement('iframe')
-    iframe.id = `tweetId${tweet_Id}`
+    iframe.id = id
     iframe.src = url
+    iframe.style.cssText = 'border:medium none; width:100%; height:100%; z-index:100; position: fixed; top:0;left:0; display:none;';
     iframe.onload = () => {
-        callback()
+        callback && callback()
     }
+    document.body.appendChild(iframe);
 }
 
 
@@ -776,8 +778,8 @@ function initParseCard() {
 let inited = false
 // 初始化
 export function init() {
-    if(inited){
-        return 
+    if (inited) {
+        return
     }
     inited = true
     console.log('init')
@@ -793,6 +795,7 @@ export function init() {
     showNFTCard()
     renderDom();
     checkTwitterTaskState();
+    initBuyNFT()
 
     getChromeStorage("popupShowPublishDialog", (res) => {
         console.log("popupShowPublishDialog", res);
@@ -1186,6 +1189,28 @@ const TwitterLikeAPI = (tweet_Id) => {
     })
 }
 
+export const hideBuyNFT = () => {
+    let iframe = document.querySelector('#nftProjectId')
+    iframe.style.display = 'none'
+}
+
+export const showBuyNFT = ({ nft_project_Id }) => {
+    if (!nft_project_Id) {
+        return
+    }
+    let iframe = document.querySelector('#nftProjectId')
+    if(!iframe.src.includes(nft_project_Id)){
+        iframe.src = chrome.runtime.getURL(`/iframe/buy-nft.html?nftProjectId=${nft_project_Id}`)
+    }
+    iframe.style.display = 'block'
+}
+
+const initBuyNFT = () => {
+    let url = chrome.runtime.getURL(`/iframe/buy-nft.html`)
+    let id = `nftProjectId`
+    createNFTIframe({ url, id })
+}
+
 export const showNFTCard = () => {
     let urlInfo = new URL(window.location.href)
     let isTwitter = urlInfo.hostname === 'twitter.com'
@@ -1196,11 +1221,11 @@ 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.style.cssText = 'border:medium none; width:100%; height:297px;';
+        iframe.src = chrome.runtime.getURL(`/iframe/nft-card.html?pathname=${encodeURIComponent(urlInfo.pathname)}`)
+        iframe.style.cssText = 'border:medium none; width:100%; height:297px;';
         let nftElement = document.createElement('div');
-            nftElement.id = 'de-nft-node';
-            nftElement.innerHTML = `
+        nftElement.id = 'de-nft-node';
+        nftElement.innerHTML = `
                 ${iframe.outerHTML}
                 <style>
                     #de-nft-node {height:297px; margin-bottom:17px; display:none;}

src/view/iframe/buy-nft/buy/home.vue

@@ -111,14 +111,21 @@ let state = reactive({
     }
 })
 const clickClose = () => {
-
+    chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+            actionType: "IFRAME_TWITTER_HIDE_BUY_NFT",
+        }, (res) => { });
+    })
 }
 const clickJump = (item) => {
     pay_info.home.sale_plan = item
     router.push({ path: '/pay' });
 }
 onMounted(() => {
-    let nft_project_Id = getQueryString('nftProjectId') || '9b491fe0fa51499ca0fc3a78abdf0eb0'
+    let nft_project_Id = getQueryString('nftProjectId') || ''
+    if(!nft_project_Id){
+        return
+    }
     getNftMysteryBoxSaleInfo({
         params: {
             nftProjectId: nft_project_Id
@@ -197,9 +204,8 @@ onMounted(() => {
         .mark {
             position: absolute;
             left: 20px;
-            .sold {
-                
-            }
+
+            .sold {}
 
             .limit {
                 color: #AF934E;

src/view/iframe/buy-nft/buy/open-box.vue

@@ -6,7 +6,7 @@
             <div class="detail">
                 <img :src="item.imagePath" alt="" />
             </div>
-            <p>{{item.nftItemName}}</p>
+            <p>{{ item.nftItemName }}</p>
         </div>
     </div>
 </template>
@@ -43,6 +43,11 @@ const showNFTs = () => {
             state.nft.data[i].show = true
         } else {
             clearInterval(timer)
+            chrome.tabs.getCurrent((tab) => {
+                chrome.tabs.sendMessage(tab.id, {
+                    actionType: "IFRAME_TWITTER_HIDE_BUY_NFT",
+                }, (res) => { });
+            })
         }
         i++
     }, 2000)

src/view/nft/card.vue

@@ -3,11 +3,11 @@
         <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') " />
+                <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') " />
+                <img :src="require('@/assets/img/icon-ntf-share.png')" />
             </div>
         </div>
         <div class="content">
@@ -61,12 +61,19 @@ const getSaleProjectInfo = (account) => {
 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 }  });
+        chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_TWITTER_PUBLISH", publishRes: { srcContent: url } });
     })
 }
 
 const buy = () => {
-    console.log(1111, saleData.value.nftProjectId)
+    chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+            actionType: "IFRAME_TWITTER_SHOW_BUY_NFT",
+            data: {
+                nft_project_Id: saleData.value.nftProjectId
+            }
+        }, (res) => {  });
+    })
 }
 
 onBeforeMount(() => {
@@ -79,69 +86,81 @@ body {
     margin: 0;
     padding: 0;
 }
+
 .nft {
     width: 100%;
-    height:297px;
-    user-select:none;
-    border-radius:20px;
-    background:#F7F9F9;
+    height: 297px;
+    user-select: none;
+    border-radius: 20px;
+    background: #F7F9F9;
+
     .title {
-        height:46px;
-        display:flex;
-        justify-content:space-between;
-        align-items:center;
+        height: 46px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
         .tag {
-            display:flex;
-            align-items:center;
-            padding-left:15px;
+            display: flex;
+            align-items: center;
+            padding-left: 15px;
+
             .logo {
-                overflow:hidden;
-                width:20px;
-                height:20px;
-                border-radius:50%;
-                background-color:#eee;
+                overflow: hidden;
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                background-color: #eee;
             }
+
             .text {
-                font-size:18px;
-                font-weight:bold;
-                margin:0 7px;
+                font-size: 18px;
+                font-weight: bold;
+                margin: 0 7px;
             }
+
             .tagImg {
-                width:37px;
-                height:22px;
+                width: 37px;
+                height: 22px;
             }
         }
+
         .share {
             cursor: pointer;
-            padding-right:15px;
-            img{
-                width:19px;
-                height:18px;
+            padding-right: 15px;
+
+            img {
+                width: 19px;
+                height: 18px;
             }
         }
     }
+
     .content {
-        height:190px;
+        height: 190px;
+
         img {
-            width:100%;
-            height:100%;
+            width: 100%;
+            height: 100%;
         }
     }
+
     .buy {
-        height:61px;
-        display:flex;
-        justify-content:center;
-        align-items:center;
+        height: 61px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
         button {
-            width:310px;
-            height:34px;
+            width: 310px;
+            height: 34px;
             cursor: pointer;
-            color:#ffffff;
-            font-size:15px;
-            font-weight:bold;
-            background:#000;
-            border:0;
-            border-radius:44px;
+            color: #ffffff;
+            font-size: 15px;
+            font-weight: bold;
+            background: #000;
+            border: 0;
+            border-radius: 44px;
         }
     }
 }