buy

src/entry/content.js

@@ -210,5 +210,11 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'Set_ToolBox_Fixed':
             toolBox.switchStatus(req)
             break
+        case 'Set_ToolBox_By_Nft':
+            toolBox.buyNft(req)
+            break;
+        case 'Hide_ToolBox_By_Nft':
+            toolBox.hideBuyNft(req)
+            break;
     }
 })

src/iframe/tool-box-buy-nft.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/tool-box/buy-nft.vue'
+
+const app = createApp(App);
+app.mount('#app');

src/logic/content/ToolBox.js

@@ -55,4 +55,27 @@ export const toolBox = new class ToolBox {
                 break
         }
     }
+    // 购买NFT
+    buyNft(req) {
+        let iframe = document.createElement('iframe')
+            iframe.src = chrome.runtime.getURL('/iframe/tool-box-buy-nft.html') + `?postId=${req.data.postId}`;
+        let ifAppend = document.querySelector('#denet-tool-box-buy-nft')
+        if (ifAppend) return;
+        let div = document.createElement(`div`);
+            div.id = 'denet-tool-box-buy-nft';
+            div.innerHTML = `
+                ${iframe.outerHTML}
+                <div class="mask_bg"></div>
+                <style>
+                    #denet-tool-box-buy-nft { position:fixed; width:100%; height:100%; top:0; left:0; }
+                    #denet-tool-box-buy-nft iframe { position:absolute; z-index:33; top:50%; left:50%; transform:translate(-50%, -50%); width:500px; height:420px; border:medium none; }
+                    #denet-tool-box-buy-nft .mask_bg{  position:absolute; z-index:32; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.5); }
+                </style>
+            `
+        document.body.append(div)
+    }
+    hideBuyNft() {
+        let node = document.querySelector('#denet-tool-box-buy-nft')
+        node && node.remove()
+    }
 }

src/logic/content/twitter.js

@@ -1616,13 +1616,13 @@ export const hideBuyNFT = () => {
     iframe.src = ''
 }
 
-export const showBuyNFT = ({ nft_project_Id }) => {
+export const showBuyNFT = ({ nft_project_Id, post_Id = '' }) => {
     if (!nft_project_Id) {
         return
     }
     let iframe = document.querySelector('#nftProjectId')
     iframe.style.display = 'block'
-    iframe.src = chrome.runtime.getURL(`/iframe/buy-nft.html#/?nftProjectId=${nft_project_Id}`)
+    iframe.src = chrome.runtime.getURL(`/iframe/buy-nft.html#/?nftProjectId=${nft_project_Id}&postId=${post_Id}`)
 }
 
 const initBuyNFT = () => {

src/manifest.json

@@ -98,6 +98,7 @@
                 "/iframe/joined-group-list.html",
                 "/iframe/tool-box-guide.html",
                 "/iframe/tool-box.html",
+                "/iframe/tool-box-buy-nft.html",
                 "/iframe/test.html",
                 "/iframe/ach-cashier.html",
                 "/img/icon-denet-logo.svg"

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

@@ -113,6 +113,7 @@ import BtnLoading from '../components/btn-loading.vue'
 import Report from "@/log-center/log"
 import { getQueryString } from "@/uilts/help";
 import { sendChromeTabMessage } from '@/uilts/chromeExtension.js';
+let postId = inject('post_Id');
 let pay_info = inject('pay_info');
 let router = useRouter()
 let showDesc = ref(true)
@@ -280,6 +281,7 @@ onMounted(() => {
 
     let nft_project_Id = router.currentRoute.value.query.nftProjectId
     let nft_group_Id = router.currentRoute.value.query.nft_group_Id
+    let post_id = router.currentRoute.value.query.postId
     if(nft_group_Id){
         pay_info.nft_group_Id = nft_group_Id
     }
@@ -290,6 +292,7 @@ onMounted(() => {
     // 作用域外用
     groupId.value = nft_group_Id
     projectId.value = nft_project_Id
+    postId.value = post_id
 
     getNftMysteryBoxSaleInfo({
         params: {

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

@@ -25,6 +25,7 @@
 import { reactive, onMounted, inject } from 'vue'
 import nftCard from "@/view/components/nft-card.vue"
 import router from "@/router/buy-nft.js";
+let postId = inject('post_Id')
 let pay_info = inject('pay_info');
 let state = reactive({
     box: {
@@ -68,6 +69,17 @@ const showNFTs = () => {
                         showJoinGroupFinish: state.showJoinGroupFinish
                     }
                 }, (res) => { });
+                // postId
+                if (postId.value) {
+                    chrome.tabs.getCurrent((tab) => {
+                        chrome.tabs.sendMessage(tab.id, {
+                            actionType: "FINISH_ToolBox_By_Nft",
+                            data: {
+                                post_Id: postId.value,
+                            }
+                        }, (res) => { });
+                    })
+                }
                 router.replace('/')
             })
         }

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

@@ -4,9 +4,11 @@
     </div>
 </template>
 <script setup>
-import { reactive, provide } from 'vue'
+import { ref, reactive, provide } from 'vue'
 let pay_info = reactive({})
+let post_Id = ref('')
 provide('pay_info', pay_info)
+provide('post_Id', post_Id)
 let state = reactive({
     // 
     show: 'dialog-home'

src/view/iframe/publish/components/nft-setting.vue

@@ -161,7 +161,7 @@ onMounted(() => {
                 width: 24px;
                 height: 24px;
                 margin-right: 12px;
-                background-color: #efefef;
+                border-radius: 2px;
             }
         }
         &:last-child {

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

@@ -0,0 +1,174 @@
+<template>
+    <div class="nft-layer">
+        <div class="title">
+            <img @click="close" :src=" require('@/assets/svg/icon-close.svg') " />
+            <span class="text">Unlock by Ruomeng NFT</span>
+        </div>
+        <div class="content">
+            <div class="img">
+                <img v-if="nftAuthINfo && nftAuthINfo.icon" :src="nftAuthINfo.icon" />
+            </div>
+            <div class="tips">
+                <span>only Ruomeng NFT holder can view the content</span>
+            </div>
+            <div class="btn" v-if="btnStatus" @click="buy">
+                <span>Buy NFT to Participate</span>
+            </div>
+            <div class="btn disabled" v-else>
+                <span>Buy NFT to Participate</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import { getQueryString } from '@/uilts/help';
+import { getPostEditorNftCertInfo } from '@/http/toolBoxApi';
+import { getChromeStorage, sendChromeTabMessage } from "@/uilts/chromeExtension";
+
+const postId = ref('')
+const btnStatus = ref(false)
+const nftAuthINfo = ref(null)
+
+const close = () => {
+    sendChromeTabMessage({
+        actionType: 'Hide_ToolBox_By_Nft'
+    })
+}
+
+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: nftAuthINfo.value.certNftProjectId,
+                        post_Id: postId.value,
+                    }
+                }, (res) => { });
+            })
+            // close buy
+            close();
+        }
+    })
+}
+
+onBeforeMount(() => {
+    postId.value = getQueryString('postId')
+    getPostEditorNftCertInfo({
+        params: {
+            postId: postId.value
+        }
+    }).then(res => {
+        let { code, data } = res;
+        if ( code === 0 ) {
+            btnStatus.value = true;
+            nftAuthINfo.value = data;
+        }
+    })
+})
+
+</script>
+
+<style lang="scss">
+body {
+    margin: 0;
+    padding: 0;
+}
+.nft-layer {
+    margin: auto;
+    width: 500px;
+    height: 420px;
+    border-radius: 20px;
+    background: #FFFFFF;
+    .title {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0px 0.5px 0px #D1D9DD;
+        img {
+            width: 24px;
+            height: 24px;
+            margin-left: 14px;
+            margin-right: 12px;
+            cursor: pointer;
+        }
+        .text {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 19px;
+        }
+    }
+    .content {
+        .img {
+            display: flex;
+            height: 250px;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: 150px;
+                height: 150px;
+                border-radius: 5px;
+            }
+        }
+        .tips {
+            position: relative;
+            font-size: 14px;
+            font-weight: 400;
+            text-align: center;
+            line-height: 33px;
+            margin: auto;
+            margin-bottom: 28px;
+            width: calc(100% - 30px);
+            &::before {
+                position: absolute;
+                top: 50%;
+                left: 0;
+                content: '';
+                display: block;
+                width: 14%;
+                height: 1px;
+                background-color: rgba($color: #000000, $alpha: .2);
+            }
+            &::after {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                content: '';
+                display: block;
+                width: 14%;
+                height: 1px;
+                background-color: rgba($color: #000000, $alpha: .2);
+            }
+        }
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: auto;
+            width: calc(100% - 30px);
+            height: 46px;
+            color: #FFFFFF;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            border-radius: 100px;
+            background: #1D9BF0;
+            &.disabled {
+                background: #CDCDCD;
+                cursor: not-allowed;
+                color: #fff;
+            }
+        }
+    }
+}
+</style>

src/view/iframe/tool-box/card.vue

@@ -14,8 +14,8 @@
             <div class="mask" @click="confirmStatus" v-if="state.showMask">
                 <img class="luck" :src=" require('@/assets/svg/icon-post-lock.svg') " />
                 <div class="btn">
-                    <img class="img" v-if="nftAuthINfo && nftAuthINfo.icon" :src=" nftAuthINfo.icon " />
-                    <div class="font">Available for holders of Ruomeng NFT</div>
+                    <img class="img" v-if="state.detail && state.detail.nftProjectIcon" :src=" state.detail.nftProjectIcon " />
+                    <div class="font">Available for holders of {{state.detail.nftProjectName}} NFT</div>
                 </div>
             </div>
             <iframe :src="state.iframe_url" v-show="state.status == 'iframe'" ref="dom_iframe" frameborder="0"
@@ -73,7 +73,7 @@ import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage }
 import { getPostDetail } from '@/http/redPacket.js'
 import { getPostEditorNftCertInfo } from '@/http/toolBoxApi'
 import { guid, getQueryString } from "@/uilts/help";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 import { ElMessage } from 'element-plus'
 import { reSetBindTwtterId } from '@/http/help.js'
 import "element-plus/es/components/message/style/css";
@@ -151,6 +151,11 @@ onMounted(() => {
         }
     })
 
+    chrome.runtime.onMessage.addListener(msgListener)
+})
+
+onBeforeUnmount(() => {
+    chrome.runtime.onMessage.removeListener(msgListener);
 })
 
 // detail函数
@@ -189,7 +194,11 @@ const getDetail = () => {
             if (state.detail && state.detail.certNftProjectId) {
                 state.showMask = true;
                 // 确权
-                getNftInfoStatus()
+                getChromeStorage('userInfo', (_userInfo) => {
+                    if (_userInfo) {
+                        getNftInfoStatus()
+                    }
+                })
             }
         } else {
             state.status = '网页错误'
@@ -211,14 +220,40 @@ const getNftInfoStatus = () => {
 }
 
 const confirmStatus = () => {
-    if (nftAuthINfo.value && nftAuthINfo.value?.certStatus === 1) {
-        ElMessage({
-            message: `NFT validated!`,
-            type: 'success'
-        })
-        state.showMask = false;
-    } else {
-        
+    getChromeStorage('userInfo', (_userInfo) => {
+        if (!_userInfo) {
+            chrome.runtime.sendMessage(
+                { actionType: "POPUP_LOGIN", data: "" },
+                (response) => {
+                    console.log("res", response);
+                }
+            )
+        } else {
+            if (nftAuthINfo.value && nftAuthINfo.value?.certStatus === 1) {
+                succBack()
+            } else {
+                sendChromeTabMessage({
+                    actionType: 'Set_ToolBox_By_Nft',
+                    data: {
+                        postId: state.postId,
+                    }
+                })
+            }
+        }
+    })
+}
+
+const succBack = () => {
+    ElMessage({
+        message: `NFT validated!`,
+        type: 'success'
+    })
+    state.showMask = false;
+}
+
+const hideMask = (data) => {
+    if (data && data.post_Id && data.post_Id === state.postId) {
+        succBack()
     }
 }
 
@@ -254,6 +289,8 @@ const handleFull = () => {
             tweetId: state.tweetId,
             nftAuthINfo: nftAuthINfo.value,
             showMask: state.showMask,
+            detail: state.detail,
+            postId: state.postId,
         }
     })
     // 清除当前iframe src
@@ -289,6 +326,17 @@ const clickFull = () => {
     })
 }
 
+const msgListener = (req, sender, sendResponse) => {
+    switch (req.actionType) {
+        case 'BG_LOGIN_SET_USERINFO_CB':
+            getDetail()
+            break;
+        case 'FINISH_ToolBox_By_Nft':
+            hideMask(req.data)
+            break;
+    }
+}
+
 </script>
 
 <style lang="scss" >

src/view/iframe/tool-box/full.vue

@@ -15,8 +15,8 @@
             <div class="mask" @click="confirmStatus" v-if="showMask">
                 <img class="luck" :src=" require('@/assets/svg/icon-post-lock.svg') " />
                 <div class="btn">
-                    <img class="img" v-if="nftAuthINfo.icon" :src=" nftAuthINfo.icon " />
-                    <div class="font">Available for holders of Ruomeng NFT</div>
+                    <img class="img" v-if="detail.nftProjectIcon" :src=" detail.nftProjectIcon " />
+                    <div class="font">Available for holders of {{detail.nftProjectName}} NFT</div>
                 </div>
             </div>
             <iframe :src="state.iframe_url" frameborder="0" allow="camera *;microphone *"></iframe>
@@ -26,7 +26,7 @@
 <script setup>
 import { reactive, ref } from "vue";
 import { ElMessage } from 'element-plus'
-import { sendChromeTabMessage } from "@/uilts/chromeExtension";
+import { getChromeStorage, sendChromeTabMessage } from "@/uilts/chromeExtension";
 import "element-plus/es/components/message/style/css";
 
 let state = reactive({
@@ -35,11 +35,13 @@ let state = reactive({
     tweetId: ''
 })
 
+let detail = ref(null)
 let nftAuthINfo = ref(null)
 let showMask = ref(false)
+let postId = ref('')
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-
+console.log(3333, req);
     switch (req.actionType) {
         // 事件传输
         case 'Set_ToolBox_Fixed':
@@ -47,6 +49,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
                 state.status = req.data.type
                 nftAuthINfo.value = req.data.nftAuthINfo;
                 showMask.value = req.data.showMask;
+                detail.value = req.data.detail;
+                postId.value = req.data.postId;
                 if (state.tweetId != req.data.tweetId) {
                     state.tweetId = req.data.tweetId
                 }
@@ -54,8 +58,10 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
                     state.iframe_url = req.data.iframe_url
                 }
             }
-
             break
+        case 'FINISH_ToolBox_By_Nft':
+            hideMask(req.data)
+            break;
     }
 })
 
@@ -94,8 +100,8 @@ const changeFixed = () => {
 
 const clickClose = () => {
     sendClose()
-
 }
+
 const sendClose = () => {
     sendChromeTabMessage({
         actionType: 'Set_ToolBox_Fixed',
@@ -110,14 +116,40 @@ const sendClose = () => {
 }
 
 const confirmStatus = () => {
-    if (nftAuthINfo.value && nftAuthINfo.value?.certStatus === 1) {
-        ElMessage({
-            message: `NFT validated!`,
-            type: 'success'
-        })
-        showMask.value = false;
-    } else {
-        
+    getChromeStorage('userInfo', (_userInfo) => {
+        if (!_userInfo) {
+            chrome.runtime.sendMessage(
+                { actionType: "POPUP_LOGIN", data: "" },
+                (response) => {
+                    console.log("res", response);
+                }
+            )
+        } else {
+            if (nftAuthINfo.value && nftAuthINfo.value?.certStatus === 1) {
+                succBack()
+            } else {
+                sendChromeTabMessage({
+                    actionType: 'Set_ToolBox_By_Nft',
+                    data: {
+                        postId: postId.value,
+                    }
+                })
+            }
+        }
+    })
+}
+
+const succBack = () => {
+    ElMessage({
+        message: `NFT validated!`,
+        type: 'success'
+    })
+    showMask.value = false;
+}
+
+const hideMask = (data) => {
+    if (data && data.post_Id && data.post_Id === postId.value) {
+        succBack()
     }
 }