post select nft

src/assets/svg/icon-post-edit-luck.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.05497 9.83636V7.82727C5.05497 6.12727 6.29133 4.89091 7.99133 4.89091H9.2277C10.7732 4.89091 12.1641 6.12727 12.1641 7.82727V9.83636H13.555V7.82727C13.555 5.35455 11.5459 3.5 9.2277 3.5H7.99133C5.51861 3.5 3.66406 5.50909 3.66406 7.82727V9.83636H5.05497ZM14.3273 20.5003H2.89091C2.11818 20.5003 1.5 19.8821 1.5 19.1094V12.0003C1.5 11.2276 2.27273 10.6094 2.89091 10.6094H14.1727C15.1 10.6094 15.5636 11.2276 15.5636 12.0003V19.1094C15.7182 19.8821 15.1 20.5003 14.3273 20.5003ZM20.1177 20.5458L21.8908 18.7097L21.7607 11.2568C22.0825 11.0797 22.381 10.8534 22.6513 10.5734C23.3567 9.84292 23.743 8.86219 23.7253 7.84692C23.7076 6.83165 23.2873 5.865 22.5569 5.15962C21.8264 4.45425 20.8457 4.06793 19.8304 4.08565C18.8151 4.10337 17.8485 4.52368 17.1431 5.25412C16.4377 5.98455 16.0514 6.96528 16.0691 7.98056C16.0869 8.99583 16.5072 9.96248 17.2376 10.6679C17.5176 10.9382 17.8237 11.154 18.1516 11.3198L18.1871 13.359L19.5642 14.6888L18.2344 16.0658L19.6115 17.3957L18.2816 18.7727L20.1177 20.5458ZM19.8592 5.73542C20.1976 5.72951 20.5245 5.85828 20.768 6.09341C21.0115 6.32853 21.1516 6.65075 21.1575 6.98917C21.1634 7.3276 21.0346 7.65451 20.7995 7.89799C20.5644 8.14147 20.2422 8.28157 19.9038 8.28748C19.5653 8.29339 19.2384 8.16461 18.9949 7.92949C18.7515 7.69436 18.6114 7.37215 18.6055 7.03372C18.5995 6.6953 18.7283 6.36839 18.9634 6.12491C19.1986 5.88143 19.5208 5.74132 19.8592 5.73542Z" fill="#424B51"/>
+</svg>

src/assets/svg/icon-post-edit-open.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5957 5.58382C12.4466 5.58382 13.2627 5.92184 13.8643 6.52352C14.466 7.1252 14.804 7.94125 14.804 8.79215C14.804 9.64306 14.466 10.4591 13.8643 11.0608C13.2627 11.6625 12.4466 12.0005 11.5957 12.0005C10.7448 12.0005 9.92875 11.6625 9.32707 11.0608C8.72539 10.4591 8.38737 9.64306 8.38737 8.79215C8.38737 7.94125 8.72539 7.1252 9.32707 6.52352C9.92875 5.92184 10.7448 5.58382 11.5957 5.58382ZM5.17904 8.00049C5.69237 8.00049 6.16904 8.13799 6.58154 8.38549C6.44404 9.69632 6.82904 10.998 7.61737 12.0155C7.15904 12.8955 6.24237 13.5005 5.17904 13.5005C4.44969 13.5005 3.75022 13.2108 3.23449 12.695C2.71877 12.1793 2.42904 11.4798 2.42904 10.7505C2.42904 10.0211 2.71877 9.32167 3.23449 8.80594C3.75022 8.29022 4.44969 8.00049 5.17904 8.00049ZM18.0124 7.85352C18.7417 7.85352 19.4412 8.14325 19.9569 8.65897C20.4726 9.1747 20.7624 9.87417 20.7624 10.6035C20.7624 11.3329 20.4726 12.0323 19.9569 12.5481C19.4412 13.0638 18.7417 13.3535 18.0124 13.3535C16.949 13.3535 16.0324 12.7485 15.574 11.8685C16.3624 10.851 16.7474 9.54935 16.6099 8.23852C17.0224 7.99102 17.499 7.85352 18.0124 7.85352ZM5.63737 16.791C5.63737 14.8935 8.30487 13.3535 11.5957 13.3535C14.8865 13.3535 17.554 14.8935 17.554 16.791V18.3952H5.63737V16.791ZM0.595703 18.3952V17.0202C0.595703 15.746 2.3282 14.6735 4.67487 14.3619C4.13404 14.9852 3.80404 15.8468 3.80404 16.791V18.3952H0.595703ZM22.5957 18.3952H19.3874V16.791C19.3874 15.8468 19.0574 14.9852 18.5165 14.3619C20.8632 14.6735 22.5957 15.746 22.5957 17.0202V18.3952Z" fill="#424B51"/>
+</svg>

src/assets/svg/icon-post-lock.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.0799 86.2749H27.4304C24.4135 86.2749 22 83.6649 22 80.4025V50.388C22 47.1256 25.0169 44.5156 27.4304 44.5156H71.4766C75.0968 44.5156 76.9069 47.1256 76.9069 50.388V80.4025C77.5103 83.6649 75.0968 86.2749 72.0799 86.2749Z" fill="#F3B14D"/>
+<path d="M35.1867 40.4444V33.8186C35.1867 26.8184 40.1651 21.7274 47.0105 21.7274H51.989C58.212 21.7274 63.8128 26.8184 63.8128 33.8186V40.4444H69.4135V33.8186C69.4135 23.6366 61.3236 16 51.989 16H47.0105C37.0536 16 29.5859 24.2729 29.5859 33.8186V40.4444H35.1867Z" fill="#AEB9C2"/>
+</svg>

src/http/nft.js

@@ -87,4 +87,12 @@ export function redeemNft(params) {
         method: 'post',
         data: params
     })
+}
+
+export function listPossessNftProject(params) {
+    return service({
+        url: `/nft/possess/listPossessNftProject`,
+        method: 'post',
+        data: params
+    })
 }

src/http/toolBoxApi.js

@@ -30,4 +30,12 @@ export function checkInputUrlInBlacklist(params) {
         method: 'post',
         data: params
     })
-}
+}
+
+export function getPostEditorNftCertInfo(params) {
+    return service({
+        url: `/post/editor/getPostEditorNftCertInfo`,
+        method: 'post',
+        data: params
+    })
+}

src/iframe/publish.js

@@ -3,7 +3,7 @@ import App from '@/view/iframe/publish/publish.vue'
 
 import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
 
-import { Button, message, Tooltip, Switch } from "ant-design-vue";
+import { Button, message, Tooltip, Switch, Radio, RadioGroup } from "ant-design-vue";
 
 import AutoLog from '@/log-center/autoLog';
 
@@ -20,6 +20,8 @@ app.use(Tooltip);
 app.use(message);
 app.use(Switch);
 app.use(AutoLog);
+app.use(Radio);
+app.use(RadioGroup);
 
 
 import CoutomSentry from "@/uilts/sentry.js"

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

@@ -0,0 +1,182 @@
+<template>
+    <div class="setting">
+        <a-radio-group v-model:value="type" name="radioType" @change="changeType">
+            <label class="item">
+                <div class="sel"><a-radio value="public"></a-radio></div>
+                <div class="inp">
+                    <img :src=" require('@/assets/svg/icon-post-edit-open.svg') " />
+                    <span>Publick</span>
+                </div>
+            </label>
+            <label class="item">
+                <div class="sel"><a-radio value="nft"></a-radio></div>
+                <div class="inp">
+                    <img :src=" require('@/assets/svg/icon-post-edit-luck.svg') " />
+                    <span>NFT holders only</span>
+                </div>
+            </label>
+        </a-radio-group>
+        <div
+            v-if="showList"
+            ref="nftScroll"
+            class="scroll"
+            @scroll="getMore">
+            <div ref="nftGroupList">
+                <a-radio-group v-model:value="nftSelectId" name="radioList" @change="changeList">
+                    <label
+                        class="item"
+                        :key="index"
+                        v-for="(item, index) in nftList">
+                        <div class="sel2"></div>
+                        <div class="sel2"><a-radio :value="item.nftProjectId"></a-radio></div>
+                        <div class="inp">
+                            <img :src=" item.icon " />
+                            <span>{{ item.nftProjectName }}</span>
+                        </div>
+                    </label>
+                </a-radio-group>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted, defineEmits } from "vue";
+import { ElMessage } from 'element-plus'
+import { listPossessNftProject } from "@/http/nft.js";
+import { throttle } from "@/uilts/help";
+
+let type = ref('public');
+let showList = ref(false);
+let nftSelectId = ref('');
+let nftList = ref([]);
+let pageSize = 100;
+let pageNum  = ref(1);
+let nftScroll = ref();
+let nftGroupList = ref();
+let getMoreStatus = ref(true);
+let emits = defineEmits(['change']);
+
+const changeType = (e) => {
+    if (e.target.value === 'nft' && nftList.value.length === 0) {
+        type.value = 'public';
+        showList.value = false;
+        ElMessage({
+            message: `Oops，only NFT holders can choose`,
+            type: 'warning',
+        })
+        emits('change', '');
+    } else if (e.target.value === 'nft' && nftList.value.length > 0) {
+        showList.value = true;
+        emits('change', nftSelectId.value);
+    } else if (e.target.value === 'public') {
+        showList.value = false;
+        emits('change', '');
+    }
+}
+const changeList = (e) => {
+    emits('change', e.target.value);
+}
+const getNftList = () => {
+    listPossessNftProject({
+        params: {
+            pageNum: pageNum.value,
+            pageSize: pageSize
+        }
+    }).then(res => {
+        let { code, data } = res;
+        if ( code === 0 && data.length > 0 ) {
+            if (pageNum.value === 1) {
+                nftList.value = data;
+                nftSelectId.value = data[0]['nftProjectId'];
+            } else {
+                nftList.value = [...nftList.value, ...data];
+            }
+        }
+
+        if (data.length < pageSize) {
+            getMoreStatus.value = false
+        } else {
+            getMoreStatus.value = true
+        }
+    })
+}
+const getMore = throttle((e) => {
+    let oT = e.target.scrollTop;
+    let oH = nftGroupList.value.offsetHeight;
+    let sH = nftScroll.value.offsetHeight;
+
+    if ((oT + sH  >= oH - 20) && getMoreStatus.value) {
+        pageNum.value++
+        getNftList()
+    }
+}, 700)
+
+onBeforeMount(() => {
+    // get list
+    getNftList()
+})
+
+onMounted(() => {
+    emits('change', '');
+})
+</script>
+
+<style scoped lang="scss">
+.setting {
+    overflow: hidden;
+    clear: both;
+    height: calc(100% - 30px);
+    max-height: 600px;
+    border-radius: 12px;
+    background: #FFFFFF;
+    border: 1px solid #E6E6E6;
+    .item {
+        display: flex;
+        height: 52px;
+        cursor: pointer;
+        align-items: center;
+        .sel {
+            width: 52px;
+            text-align: center;
+            .ant-radio-wrapper {
+                margin-right: 0;
+            }
+        }
+        .sel2 {
+            width: 40px;
+            text-align: center;
+            .ant-radio-wrapper {
+                margin-right: 0;
+            }
+        }
+        .inp {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            height: 52px;
+            background: #FFFFFF;
+            box-shadow: inset 0px -1px 0px #EFEFEF;
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 12px;
+                background-color: #efefef;
+            }
+        }
+        &:last-child {
+            .inp {
+                box-shadow: unset;
+            }
+        }
+    }
+    .scroll {
+        overflow-y: auto;
+        height: calc(100% - 105px);
+    }
+}
+
+.ant-radio-group {
+    display: block;
+}
+</style>

src/view/iframe/publish/tool-box/child/preview.vue

@@ -2,6 +2,9 @@
     <div class="editor-preview-wrapper">
         <div class="top">
             <div class="card-container">
+                <div class="font">
+                    Preview: <span>{{ installStatus ? 'After' : 'Before' }}</span> DeNet Installed
+                </div>
                 <!-- 安装之后的卡片样式 -->
                 <div class="content-after" v-show="installStatus" :style="{ 'width': reviewCanvasParams.width + 'px' }">
                     <div class="head" :style="{ 'zoom': reviewCanvasParams.zoom }">
@@ -55,8 +58,9 @@
                     </div>
                 </div>
             </div>
-            <div class="font">
+            <div class="setting">
-                Preview: <span>{{ installStatus ? 'After' : 'Before' }}</span> DeNet Installed
+                <div class="font">Settings</div>
+                <slot></slot>
             </div>
         </div>
         <div class="bottom">
@@ -114,6 +118,10 @@ const props = defineProps({
     showCom: {
         type: String,
         default: 'EDITOR'
+    },
+    certNftProjectId: {
+        type: String,
+        default: ''
     }
 })
 
@@ -168,13 +176,13 @@ const getUserName = (screenName) => {
 const calcPreviewCanvasParams = () => {
     nextTick(() => {
         let containerDom = document.querySelector('.card-container');
-        let domHeight = containerDom && containerDom.offsetHeight || 500;
+        let domHeight = containerDom && containerDom.offsetHeight || 490;
         const canvasHeight = 780, canvasWidth = 620;
         if (domHeight < canvasHeight) {
             //比例: 高 / 宽
             let hWRatio = canvasHeight / canvasWidth;
             //缩小宽度 = 高度 / 比例  
-            let width = domHeight / hWRatio;
+            let width = canvasWidth / hWRatio;
             if (width > canvasWidth) {
                 width = canvasWidth;
             }
@@ -223,6 +231,9 @@ const submitPublish = () => {
         linkTitle: !appId ? linkTitle : '',
         linkImagePath: props.screenshotWebsiteData.url
     };
+    if (props.certNftProjectId !== '') {
+        postBizData['certNftProjectId'] = props.certNftProjectId;
+    }
     let data = {
         params: {
             postBizData: JSON.stringify(postBizData),
@@ -302,15 +313,13 @@ onUnmounted(() => {
         width: 100%;
         height: calc(100% - 80px);
         display: flex;
-        align-items: center;
+        justify-content: space-between;
-        justify-content: center;
+        padding: 20px 40px;
-        overflow-y: auto;
-        padding: 20px 0;
         box-sizing: border-box;
 
         .card-container {
             height: 100%;
-            margin-right: 50px;
+            margin-right: 32px;
 
             .content-after,
             .content-before {
@@ -354,10 +363,11 @@ onUnmounted(() => {
             .content-after {
                 background: url('@/assets/img/img-tool-box-preview-after.png');
                 width: 387px;
-                height: 100%;
+                height: calc(100% - 30px);
-                background-size: contain;
+                overflow: hidden;
+                background-size: cover;
                 background-repeat: no-repeat;
-                border: 1px solid #D1D9DD;
+                border: 1px solid #E6E6E6;
                 border-radius: 13px;
                 box-sizing: border-box;
 
@@ -376,24 +386,25 @@ onUnmounted(() => {
 
             .content-before {
                 background: url('@/assets/img/img-tool-box-preview-before.png');
-                background-size: contain;
+                background-size: cover;
                 background-repeat: no-repeat;
-                height: 100%;
+                height: calc(100% - 30px);
-                border: 1px solid #D1D9DD;
+                overflow: hidden;
+                border: 1px solid #E6E6E6;
                 border-radius: 13px;
                 box-sizing: border-box;
 
                 .card-wrapper {
-                    width: 505px;
+                    width: 448px;
-                    height: 338px;
+                    height: 300px;
-                    border: 1px solid #D1D9DD;
+                    border: 1px solid #E6E6E6;
                     background: #ffffff;
                     box-sizing: border-box;
                     overflow: hidden;
                     position: relative;
                     box-sizing: border-box;
                     border-radius: 16px;
-                    left: 73px;
+                    left: 70px;
                     top: 90px;
 
                     .iframe {
@@ -434,7 +445,7 @@ onUnmounted(() => {
         }
 
         .font {
-            width: 300px;
+            height: 30px;
             font-weight: 600;
             font-size: 20px;
 
@@ -442,6 +453,10 @@ onUnmounted(() => {
                 color: #1D9BF0;
             }
         }
+
+        .setting {
+            flex: 1;
+        }
     }
 
     .bottom {

src/view/iframe/publish/tool-box/index.vue

@@ -6,7 +6,10 @@
             :screenshotWebsiteData="screenshotWebsiteData"
             :showCom="showCom"
             :defaultLinkTitle="pageData.defaultLinkTitle"
-            @publishFinish="publishFinish" />
+            :certNftProjectId="certNftProjectId"
+            @publishFinish="publishFinish">
+            <nft-setting @change="changeSetting"></nft-setting>
+        </preview>
     </div>
 </template>
 
@@ -16,6 +19,7 @@ import { ref, reactive, watch, defineProps, defineEmits } from "vue";
 import { screenshotWebsite } from "@/http/toolBoxApi";
 import editor from '@/view/iframe/publish/tool-box/child/editor.vue'
 import preview from '@/view/iframe/publish/tool-box/child/preview.vue'
+import nftSetting from '@/view/iframe/publish/components/nft-setting.vue'
 
 const props = defineProps({
     pageData: {
@@ -50,6 +54,7 @@ let previewData = reactive({
     appId: '',
     currentApp: {}
 })
+let certNftProjectId = ref('')
 
 let screenshotWebsiteData = reactive({
     url: '',
@@ -96,6 +101,10 @@ const publishFinish = (params) => {
     emits("toolBoxPublishFinish", params);
 }
 
+const changeSetting = (id = '') => {
+    certNftProjectId.value = id;
+}
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -11,6 +11,13 @@
             <iframe :src="iframe_url" frameborder="0" sandbox></iframe>
         </div>
         <div class="content" v-else>
+            <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>
+                </div>
+            </div>
             <iframe :src="state.iframe_url" v-show="state.status == 'iframe'" ref="dom_iframe" frameborder="0"
                 scrolling="yes" allow="camera *;microphone *"></iframe>
             <!-- sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation allow-forms allow-modals allow-popups-to-escape-sandbox" -->
@@ -64,9 +71,12 @@
 <script setup>
 import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage } from "@/uilts/chromeExtension";
 import { getPostDetail } from '@/http/redPacket.js'
+import { getPostEditorNftCertInfo } from '@/http/toolBoxApi'
 import { guid, getQueryString } from "@/uilts/help";
 import { onMounted, reactive, ref } from "vue";
+import { ElMessage } from 'element-plus'
 import { reSetBindTwtterId } from '@/http/help.js'
+import "element-plus/es/components/message/style/css";
 let dom_iframe = ref(null)
 let state = reactive({
     status: '', //
@@ -79,10 +89,12 @@ let state = reactive({
     tweetId: '',
     detail: {},
     handle_type: '',
+    showMask: false,
     cover_url: require('@/assets/img/back-loading.png')
 })
 
 let dom = {}
+let nftAuthINfo = ref(null)
 
 let props = defineProps({
     pre_view: {
@@ -173,12 +185,43 @@ const getDetail = () => {
                 state.cover_url = state.detail.viewBgImagePath
             }
             state.iframe_url = state.detail.convertUrl
+            // 蒙层
+            if (state.detail && state.detail.certNftProjectId) {
+                state.showMask = true;
+                // 确权
+                getNftInfoStatus()
+            }
         } else {
             state.status = '网页错误'
         }
     })
 }
 
+const getNftInfoStatus = () => {
+    getPostEditorNftCertInfo({
+        params: {
+            postId: state.postId,
+        }
+    }).then(res => {
+        let { code, data } = res;
+        if ( code === 0 ) {
+            nftAuthINfo.value = data;
+        }
+    })
+}
+
+const confirmStatus = () => {
+    if (nftAuthINfo.value && nftAuthINfo.value?.certStatus === 1) {
+        ElMessage({
+            message: `NFT validated!`,
+            type: 'success'
+        })
+        state.showMask = false;
+    } else {
+        
+    }
+}
+
 const clickCancel = () => {
     state.show_alert = false
 }
@@ -209,6 +252,8 @@ const handleFull = () => {
             type: '全屏',
             iframe_url: state.iframe_url,
             tweetId: state.tweetId,
+            nftAuthINfo: nftAuthINfo.value,
+            showMask: state.showMask,
         }
     })
     // 清除当前iframe src
@@ -264,6 +309,7 @@ const clickFull = () => {
     .alert {
         text-align: center;
         position: absolute;
+        z-index: 3;
         top: 0;
         left: 0;
         width: 100%;
@@ -388,6 +434,7 @@ const clickFull = () => {
     }
 
     .content {
+        position: relative;
         width: 100%;
         height: calc(100% - 40px);
         background: #686868;
@@ -395,6 +442,48 @@ const clickFull = () => {
         align-items: center;
         justify-content: center;
 
+        .mask {
+            position: absolute;
+            z-index: 2;
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            background-color: rgba($color: #000000, $alpha: .8);
+            .luck {
+                width: 100px;
+                height: 100px;
+            }
+            .btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 345px;
+                height: 70px;
+                margin-top: 12px;
+                border-radius: 100px;
+                background: #1D9BF0;
+                .img {
+                    overflow: hidden;
+                    width: 35px;
+                    height: 35px;
+                    margin-right: 16px;
+                    border-radius: 4px;
+                }
+                .font {
+                    width: 188px;
+                    color: #fff;
+                    font-weight: 700;
+                    font-size: 16px;
+                    line-height: 19px;
+                    letter-spacing: 0.3px;
+                }
+            }
+        }
+
         iframe {
             background: #fff;
             width: 100%;

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

@@ -12,13 +12,22 @@
             </div>
         </div>
         <div class="content">
+            <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>
+                </div>
+            </div>
             <iframe :src="state.iframe_url" frameborder="0" allow="camera *;microphone *"></iframe>
         </div>
     </div>
 </template>
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
+import { ElMessage } from 'element-plus'
 import { sendChromeTabMessage } from "@/uilts/chromeExtension";
+import "element-plus/es/components/message/style/css";
 
 let state = reactive({
     status: '固定右上角', // 全屏
@@ -26,6 +35,9 @@ let state = reactive({
     tweetId: ''
 })
 
+let nftAuthINfo = ref(null)
+let showMask = ref(false)
+
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
 
     switch (req.actionType) {
@@ -33,6 +45,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'Set_ToolBox_Fixed':
             if (req.data.type == '全屏' || req.data.type == '固定右上角') {
                 state.status = req.data.type
+                nftAuthINfo.value = req.data.nftAuthINfo;
+                showMask.value = req.data.showMask;
                 if (state.tweetId != req.data.tweetId) {
                     state.tweetId = req.data.tweetId
                 }
@@ -95,6 +109,17 @@ const sendClose = () => {
     state.tweetId = ''
 }
 
+const confirmStatus = () => {
+    if (nftAuthINfo.value && nftAuthINfo.value?.certStatus === 1) {
+        ElMessage({
+            message: `NFT validated!`,
+            type: 'success'
+        })
+        showMask.value = false;
+    } else {
+        
+    }
+}
 
 </script>
 
@@ -144,6 +169,7 @@ const sendClose = () => {
     }
 
     .content {
+        position: relative;
         width: 100%;
         height: calc(100% - 40px);
         background: #686868;
@@ -151,6 +177,49 @@ const sendClose = () => {
         align-items: center;
         justify-content: center;
 
+        .mask {
+            position: absolute;
+            z-index: 2;
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            background-color: rgba($color: #000000, $alpha: .8);
+            .luck {
+                width: 100px;
+                height: 100px;
+            }
+            .btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 345px;
+                height: 70px;
+                cursor: pointer;
+                margin-top: 12px;
+                border-radius: 100px;
+                background: #1D9BF0;
+                .img {
+                    overflow: hidden;
+                    width: 35px;
+                    height: 35px;
+                    margin-right: 16px;
+                    border-radius: 4px;
+                }
+                .font {
+                    width: 188px;
+                    color: #fff;
+                    font-weight: 700;
+                    font-size: 16px;
+                    line-height: 19px;
+                    letter-spacing: 0.3px;
+                }
+            }
+        }
+
         iframe {
             width: 100%;
             height: 100%;