[add][group]

src/assets/svg/icon-line.svg

@@ -0,0 +1,3 @@
+<svg width="70" height="1" viewBox="0 0 70 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line opacity="0.4" x1="70" y1="0.25" x2="-2.18557e-08" y2="0.249994" stroke="black" stroke-width="0.5"/>
+</svg>

src/entry/background.js

@@ -18,7 +18,9 @@ import {
     injectExtensionPopup,
     setPopupConfig,
     windwoLoadSetPopupPage,
-    setActionPopup
+    setActionPopup,
+    getTwitterNftPostPre,
+    nftTxtPublish
 } from "@/logic/background/twitter";
 
 import { PingPong } from "@/logic/background/help";
@@ -59,11 +61,11 @@ chrome.alarms.onAlarm.addListener(function (alarm) {
     }
 });
 
-chrome.action.onClicked.addListener(function(tab) { 
+chrome.action.onClicked.addListener(function (tab) {
     injectExtensionPopup(tab);
 });
 
-chrome.tabs.onActivated.addListener(function(activeInfo) {
+chrome.tabs.onActivated.addListener(function (activeInfo) {
     setPopupConfig(activeInfo);
 })
 
@@ -71,7 +73,7 @@ function onInstalledMethod() {
     onInstalledCreateTab()
     onInstalledMid()
     onInstalledUserSet()
-    
+
     // pingpang
     chrome.alarms.create('PingPong', {
         //1分鐘之後開始(該值不能小於1) 
@@ -126,12 +128,18 @@ function onMessageMethod(req, sender, sendResponse) {
             case 'CONTENT_PONG':
                 console.log('CONTENT_PONG')
                 break
-            case 'CONTENT_WINDOW_LOADED_SET_POPUP_PAGE': 
+            case 'CONTENT_WINDOW_LOADED_SET_POPUP_PAGE':
                 // windwoLoadSetPopupPage(req, sender);
                 break;
             case 'CONTENT_SET_POPUP_CONFIG':
                 setActionPopup(req, sender);
                 break;
+            case 'CONTENT_GET_TWITTER_NFT_POST_PRE':
+                getTwitterNftPostPre(req.data, sender)
+                break
+            case 'CONTENT_NFT_TXT_PUBLISH':
+                nftTxtPublish(req.data)
+                break
         }
     }
 }

src/entry/content.js

@@ -24,7 +24,11 @@ import {
     showBuyNFT,
     hideBuyNFT,
     showPopupPage,
-    setPopupConfByPopupPage
+    setPopupConfByPopupPage,
+    showJoinDialog,
+    showTwitterPost,
+    setTwitterTextarea,
+    showGroupTip
 } from "@/logic/content/twitter.js";
 
 import {
@@ -120,6 +124,18 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'BG_SET_POPUP_CONFIG':
             setPopupConfByPopupPage();
             break
+        case 'IFRAME_SHOW_JOIN_DIALOG':
+            showJoinDialog(req.data)
+            break
+        case 'IFRAME_SHOW_GROUP_TIP':
+            showGroupTip()
+            break
+        case 'IFRAME_SHOW_POST_DIALOG':
+            showTwitterPost(req.data)
+            break
+        case 'BACK_TWITTER_NFT_POST_PRE':
+            setTwitterTextarea(req.data)
+            break
     }
 })
 

src/http/group.js

@@ -0,0 +1,29 @@
+import {
+  service
+} from "./request";
+
+export function getTwitterNftGroupInfo(params) {
+  return service({
+    url: `/nft/group/getTwitterNftGroupInfo`,
+    method: 'post',
+    data: params
+  })
+}
+
+
+export function getTwitterNftPostPre(params) {
+  return service({
+    url: `/nft/group/post/pre`,
+    method: 'post',
+    data: params
+  })
+
+}
+
+export function setGroupJoin(params) {
+  return service({
+    url: `/nft/group/join`,
+    method: 'post',
+    data: params
+  })
+}

src/iframe/group-card.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/group-card/card.vue'
+
+const app = createApp(App);
+
+app.mount('#app');

src/logic/background/fetch/twitter.js

@@ -9,6 +9,7 @@ export async function fetchTtwitterRequestToken() {
     })
 }
 
+
 export async function fetchTwitterLogin(oauthToken, consumerKey, oauthVerifier, receivedIds = []) {
     return commonFetch({
         url: '/user/twitterLogin',
@@ -75,4 +76,40 @@ export async function getDiscordUserInfo(params = {}) {
         },
         params
     })
+}
+
+
+export async function fetchGetTwitterNftPostPre(params = {}) {
+    const { accessToken: token = '', uid = '' } = await getChromeStorage('userInfo') || {}
+    if (!token) {
+        return new Promise(function (resolve, reject) {
+            resolve({});
+        })
+    }
+    return commonFetch({
+        url: '/nft/group/post/pre',
+        baseInfo: {
+            token,
+            uid
+        },
+        params
+    })
+}
+
+
+export async function fetchPublish(params = {}) {
+    const { accessToken: token = '', uid = '' } = await getChromeStorage('userInfo') || {}
+    if (!token) {
+        return new Promise(function (resolve, reject) {
+            resolve({});
+        })
+    }
+    return commonFetch({
+        url: '/post/publish',
+        baseInfo: {
+            token,
+            uid
+        },
+        params
+    })
 }

src/logic/background/twitter.js

@@ -1,4 +1,4 @@
-import { fetchTtwitterRequestToken, fetchTwitterLogin, fetchTwitterShortUrl, fetchAllMessageInfo, fetchReadTaskAllMsg, getDiscordUserInfo } from '@/logic/background/fetch/twitter.js'
+import { fetchTtwitterRequestToken, fetchTwitterLogin, fetchTwitterShortUrl, fetchAllMessageInfo, fetchReadTaskAllMsg, getDiscordUserInfo, fetchGetTwitterNftPostPre, fetchPublish } from '@/logic/background/fetch/twitter.js'
 import { LANDING_PAGE, LANDING_PAGE_MID, setChromeStorage, setChromeCookie, getChromeCookie, getChromeStorage, removeChromeCookie } from '@/uilts/chromeExtension.js'
 import { guid } from '@/uilts/help.js'
 import { pageUrl, discordAuthRedirectUri } from '@/http/configAPI'
@@ -378,16 +378,16 @@ export const setPopupConfig = (activeInfo) => {
         active: true,
         currentWindow: true
     }, (tabs) => {
-        if(tabs.length) {
-            let {pendingUrl = '', url = ''} = tabs[0];
-            if(pendingUrl.startsWith('https://twitter.com') || url.startsWith('https://twitter.com')) {
+        if (tabs.length) {
+            let { pendingUrl = '', url = '' } = tabs[0];
+            if (pendingUrl.startsWith('https://twitter.com') || url.startsWith('https://twitter.com')) {
                 sendActivetabMessage({
                     actionType: 'BG_SET_POPUP_CONFIG'
                 });
             } else {
                 chrome.action.setPopup({
                     popup: 'popup.html',
-                },function() {
+                }, function () {
                 });
             }
 
@@ -407,37 +407,54 @@ export const setPopupConfig = (activeInfo) => {
 }
 
 export const windwoLoadSetPopupPage = (data, sender) => {
-    let {url = ''} = sender.tab;
-    if(url.startsWith('chrome://')) {
+    let { url = '' } = sender.tab;
+    if (url.startsWith('chrome://')) {
         chrome.action.setPopup({
             popup: 'popup.html',
-        },function() {
+        }, function () {
         });
     } else {
         chrome.action.setPopup({
             popup: '',
-        },function() {
+        }, function () {
         });
     }
 }
 
 export const setActionPopup = (data) => {
-    let {popup} = data.data || {};
-    if(popup) {
+    let { popup } = data.data || {};
+    if (popup) {
         chrome.action.getPopup(
             {},
-            function(result){
-                if(!result) {
+            function (result) {
+                if (!result) {
                     chrome.action.setPopup({
                         popup,
-                    },function() {
+                    }, function () {
                     });
                 }
-        });
+            });
     } else {
         chrome.action.setPopup({
             popup: '',
-        },function() {
+        }, function () {
         });
     }
+}
+
+export const getTwitterNftPostPre = (params, sender) => {
+    fetchGetTwitterNftPostPre(params).then((res) => {
+        if(res.code == 0){
+            chrome.tabs.sendMessage(sender.tab.id, { actionType: 'BACK_TWITTER_NFT_POST_PRE', data: res.data }, (res) => { console.log(res) });
+        }
+    })
+}
+
+
+export const nftTxtPublish = (params) => {
+    fetchPublish(params).then((res) => {
+        if(res.code == 0){
+
+        }
+    })
 }

src/logic/content/twitter.js

@@ -639,6 +639,7 @@ function bindTwitterArtMethod() {
 
 
 import parseCard from './ParseCard'
+import { renderThumbStyle } from 'element-plus'
 
 // 检测dom改变 
 // 获取短链接 
@@ -709,13 +710,15 @@ function setIframeRedPacket(type = 'twitter') {
     }
 }
 
-// 监听点击发推 按钮绑定事件
+// 监听点击发推 上报文案
 // document.addEventListener('click', (e) => {
 //     try {
+//         let inputEle = document.querySelector('div[contenteditable="true"]');
 //         if (e.target.dataset && e.target.dataset.testid && e.target.dataset.testid == 'tweetButton') {
-//             bindTwitterArtMethod()
+//             // 获取文案上报
+//             console.log(inputEle.innerText)
 //         } else if (e.target.closest('div[data-testid=tweetButton]')) {
-//             bindTwitterArtMethod()
+//             console.log(inputEle.innerText)
 //         }
 //     } catch (error) {
 //         console.error('error', error)
@@ -765,6 +768,7 @@ function initParseCard() {
                 checkHasSliderDeBtn();
                 changeQueueNum(-1)
                 showNFTCard()
+                initGroupTip()
             }, 1000)
         } else if (inFacebook && inFacebookNode) {
             clearInterval(timer)
@@ -794,11 +798,11 @@ export function init() {
     getDiscordAuthCode();
     appendPopupPage();
 
-    chrome.runtime.sendMessage({ 
-        actionType: "CONTENT_SET_POPUP_CONFIG", 
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_SET_POPUP_CONFIG",
         data: {
             popup: 'popup.html'
-        } 
+        }
     }, () => { });
 
     let where = window.location.href.indexOf('twitter.com') < 0 && window.location.href.indexOf('facebook.com') < 0;
@@ -1156,6 +1160,12 @@ export function doTaskTwitterAPI({ task_data, task_type }) {
     }
 }
 
+export function showJoinDialog(data) {
+    let iframe = document.querySelector('#nftProjectId')
+    iframe.style.display = 'block'
+    iframe.src = chrome.runtime.getURL(`/iframe/buy-nft.html#/group?type=${data.type}&buy_nft_status=${data.buy_nft_status}&nft_group_Id=${data.nft_group_Id}`)
+}
+
 const TwitterFollowAPI = (item, tweet_Id) => {
     fetch("https://twitter.com/i/api/1.1/friendships/create.json", {
         "headers": {
@@ -1248,6 +1258,128 @@ const TwitterLikeAPI = (tweet_Id) => {
     })
 }
 
+export const showTwitterPost = (data) => {
+    let bigBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+    if (bigBtn) {
+        bigBtn.click();
+    } else {
+        let smallBtn = document.querySelector('a[href="/compose/tweet"]')
+        smallBtn && smallBtn.click();
+    }
+    content_get_nft_post_pre({
+        groupId: data.groupId
+    })
+}
+
+function publishNFTTweetEvent({ groupId, postId, srcContent }) {
+    setTimeout(() => {
+        let publishTweetBtn;
+        let dialog = document.querySelector('div[role="dialog"]');
+        if (dialog) {
+            publishTweetBtn = dialog.querySelector('div[data-testid="tweetButton"]');
+        } else {
+            let domMain = document.querySelector('main[role="main"]');
+            publishTweetBtn = domMain && domMain.querySelector('div[data-testid="tweetButton"]');
+        }
+        publishTweetBtn.dataset.denet = 'nft'
+        publishTweetBtn && publishTweetBtn.addEventListener('click', function () {
+            // 获取文案上报
+            let inputEle = document.querySelector('div[contenteditable="true"]');
+            let textContent = inputEle.innerText
+            let arr = srcContent.split(' ') || []
+
+            arr.forEach((item) => {
+                if (textContent.includes(item)) {
+                    textContent = textContent.replaceAll(item, '')
+                }
+            })
+
+            let formData = {
+                groupId,
+                textContent
+            }
+            let params = {
+                postBizData: JSON.stringify(formData),
+                postSrc: 1, //1 twitter
+                postType: 2, //2 nft
+                postId
+            }
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_NFT_TXT_PUBLISH",
+                data: params
+            }, () => { });
+        });
+    }, 800)
+}
+
+const content_get_nft_post_pre = (data) => {
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_GET_TWITTER_NFT_POST_PRE",
+        data
+    }, () => { });
+}
+
+let tweet_nft_content = {}
+export const setTwitterTextarea = (params) => {
+    tweet_nft_content = params
+    let inputEle = document.querySelector('div[contenteditable="true"]');
+    if (inputEle) {
+        inputEle.focus();
+        document.execCommand("insertText", false, '');
+    }
+    setTimeout(() => {
+        document.execCommand("insertText", false, params.srcContent);
+    }, 1000);
+
+    publishNFTTweetEvent(params)
+}
+
+
+const initGroupTip = () => {
+    let arr = window.location.pathname.split('/') || []
+    if (arr.length == 2) {
+        let twitterAccount = arr[1]
+        addGroupTip(twitterAccount)
+    }
+}
+export const showGroupTip = () => {
+    let dom_denet_group_tip = document.querySelector('#denet_group_tip')
+    dom_denet_group_tip.style.display = 'block'
+
+}
+
+const addGroupTip = (twitterAccount) => {
+    let dom_denet_group_tip = document.querySelector('#denet_group_tip')
+    if (dom_denet_group_tip) {
+        return
+    }
+    try {
+        let nav_list = document.querySelectorAll('nav[role=navigation]') || []
+        let dom
+        for (let i in nav_list) {
+            if (nav_list[i] && nav_list[i].querySelector('div[data-testid="ScrollSnap-SwipeableList"]')) {
+                dom = nav_list[i]
+                break
+            }
+        }
+
+        let iframe = document.createElement('iframe')
+        iframe.id = 'denet_group_tip'
+        iframe.style.cssText = 'border: medium none; display:none; width:100%; height:100px;'
+
+        iframe.src = chrome.runtime.getURL(`/iframe/group-card.html?twitterAccount=${twitterAccount}`)
+
+        if (dom) {
+            dom.parentNode.insertBefore(iframe, dom)
+        }
+
+    } catch (error) {
+
+    }
+}
+
+
+
 export const hideBuyNFT = () => {
     let iframe = document.querySelector('#nftProjectId')
     iframe.style.display = 'none'
@@ -1304,9 +1436,9 @@ export const appendPopupPage = (params = {}) => {
     let { path = '' } = params;
 
     let iframe = document.createElement('iframe');
-        iframe.id = 'de-popup-page';
-        iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
-        iframe.style.cssText = `border: medium none; width: 375px;
+    iframe.id = 'de-popup-page';
+    iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
+    iframe.style.cssText = `border: medium none; width: 375px;
         height: 650px;position: fixed; right: 16px; top: 16px;background: #FFFFFF;border: 0.5px solid #919191;box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box;z-index: 90000;
         animation-duration: 0.5s !important;
         animation-timing-function: ease-in-out !important;
@@ -1315,8 +1447,8 @@ export const appendPopupPage = (params = {}) => {
     let iframeContent = document.getElementById('de-popup-page');
 
     let overlayDom = document.createElement('div');
-        overlayDom.id = 'de-popup-overlay';
-        overlayDom.style.cssText = `position: fixed;z-index: 88888;top: 0;
+    overlayDom.id = 'de-popup-overlay';
+    overlayDom.style.cssText = `position: fixed;z-index: 88888;top: 0;
         left: 0;width: 100%;height: 100%;opacity: 0;display: none`;
 
     let overlay = document.getElementById('de-popup-overlay');
@@ -1324,14 +1456,14 @@ export const appendPopupPage = (params = {}) => {
 
     if (!iframeContent && body) {
         document.querySelector('body').appendChild(iframe);
-        if(!overlay) {
+        if (!overlay) {
             document.querySelector('body').appendChild(overlayDom);
 
-            overlayDom.addEventListener('click', function() {
+            overlayDom.addEventListener('click', function () {
                 hidePopupPage();
             })
         } else {
-            overlay.addEventListener('click', function() {
+            overlay.addEventListener('click', function () {
                 hidePopupPage();
             })
         }
@@ -1350,29 +1482,29 @@ export const showPopupPage = (params = {}) => {
         appendPopupPage();
         iframe = document.getElementById('de-popup-page');
     }
-    if(iframe) {
-        if(path) {
+    if (iframe) {
+        if (path) {
             iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
         }
         iframe.style.transform = 'translateX(-' + 395 + 'px)';
-    
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_POPUP_PAGE_SHOW", 
-            data: { } 
+
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_POPUP_PAGE_SHOW",
+            data: {}
         }, () => { });
 
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_SET_POPUP_CONFIG", 
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_SET_POPUP_CONFIG",
             data: {
                 popup: ''
-            } 
+            }
         }, () => { });
-    
+
         let overlay = document.getElementById('de-popup-overlay');
         overlay.style.display = 'block';
-    
+
         let htmlDom = document.querySelector('html');
-        if(htmlDom) {
+        if (htmlDom) {
             htmlDom.style.overflowY = 'hidden';
         }
     }
@@ -1387,21 +1519,21 @@ export const hidePopupPage = () => {
         overlay.style.display = 'none';
 
         let htmlDom = document.querySelector('html');
-        if(htmlDom) {
+        if (htmlDom) {
             htmlDom.style.overflowY = 'auto';
         }
 
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_SET_POPUP_CONFIG", 
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_SET_POPUP_CONFIG",
             data: {
                 popup: 'popup.html'
-            } 
+            }
         }, () => { });
 
-        if(showPopupPageFrom == 'BUY_NFT_FINISH') {
-            chrome.runtime.sendMessage({ 
-                actionType: "CONTENT_GET_PINED", 
-                data: {} 
+        if (showPopupPageFrom == 'BUY_NFT_FINISH') {
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_GET_PINED",
+                data: {}
             }, () => { });
             showPopupPageFrom = '';
         }
@@ -1413,8 +1545,8 @@ export const tiggerInjectPopupPage = () => {
     if (iframeContent) {
         hidePinTips();
         hideNoticeBindTweet();
-        let {transform = ''} = iframeContent.style;
-        if(transform == 'translateX(385px)' || !transform) {
+        let { transform = '' } = iframeContent.style;
+        if (transform == 'translateX(385px)' || !transform) {
             showPopupPage();
         } else {
             hidePopupPage();
@@ -1423,8 +1555,8 @@ export const tiggerInjectPopupPage = () => {
         appendPopupPage();
         setTimeout(() => {
             let iframe = document.getElementById('de-popup-page');
-            let {transform = ''} = iframe.style;
-            if(transform == 'translateX(385px)' || !transform) {
+            let { transform = '' } = iframe.style;
+            if (transform == 'translateX(385px)' || !transform) {
                 showPopupPage();
             } else {
                 hidePopupPage();
@@ -1434,41 +1566,41 @@ export const tiggerInjectPopupPage = () => {
 }
 
 const onBodyClick = () => {
-    if(window.location.href.indexOf('api.twitter.com') < 0) {
+    if (window.location.href.indexOf('api.twitter.com') < 0) {
         document.querySelector('body').addEventListener('click', function () {
             console.log('click')
             // hidePopupPage();
         })
-    } 
+    }
 }
 
 
 export const setPopupConfByPopupPage = () => {
     let iframe = document.getElementById('de-popup-page');
     if (iframe) {
-        let {transform = ''} = iframe.style;
+        let { transform = '' } = iframe.style;
 
-        if(transform && transform == 'translateX(-395px)') {
-            chrome.runtime.sendMessage({ 
-                actionType: "CONTENT_SET_POPUP_CONFIG", 
+        if (transform && transform == 'translateX(-395px)') {
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_SET_POPUP_CONFIG",
                 data: {
                     popup: ''
-                } 
+                }
             }, () => { });
         } else {
-            chrome.runtime.sendMessage({ 
-                actionType: "CONTENT_SET_POPUP_CONFIG", 
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_SET_POPUP_CONFIG",
                 data: {
                     popup: 'popup.html'
-                } 
+                }
             }, () => { });
         }
     } else {
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_SET_POPUP_CONFIG", 
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_SET_POPUP_CONFIG",
             data: {
                 popup: 'popup.html'
-            } 
+            }
         }, () => { });
     }
 }

src/manifest.json

@@ -69,6 +69,7 @@
                 "/iframe/bind-tweet.html",
                 "/iframe/nft-card.html",
                 "/iframe/buy-nft.html",
+                "/iframe/group-card.html",
                 "/iframe/popup-page.html"
             ],
             "matches": [

src/router/buy-nft.js

@@ -1,14 +1,22 @@
 import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
+import GroupTip from '@/view/iframe/buy-nft/group/tip.vue'
 import Home from '@/view/iframe/buy-nft/buy/home.vue'
 import Pay from '@/view/iframe/buy-nft/buy/pay.vue'
 import OpenBox from '@/view/iframe/buy-nft/buy/open-box.vue'
 
 let routes = [
+    
+
     {
         path: '/',
         name: 'Home',
         component: Home,
     },
+    {
+        path: '/group',
+        name: 'GroupTip',
+        component: GroupTip,
+    },
     {
         path: "/pay",
         name: 'Pay',

src/uilts/chromeExtension.js

@@ -101,8 +101,33 @@ export function concatChromeCookie({ name, url }, value_obj) {
 }
 
 export function removeChromeCookie(params, cb) {
-    let {name, url} = params;
-    chrome.cookies.remove({name, url}, () => {
+    let { name, url } = params;
+    chrome.cookies.remove({ name, url }, () => {
         cb && cb
     })
+}
+
+export function sendChromeTabMessage(params) {
+    chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, params, (res) => { console.log(res) });
+    })
+}
+
+export function checkIsLogin(callback) {
+    return new Promise((resolve) => {
+        getChromeStorage('userInfo', (_userInfo) => {
+            if (!_userInfo) {
+                chrome.runtime.sendMessage(
+                    { actionType: "POPUP_LOGIN", data: "" },
+                    (response) => {
+                        console.log("res", response);
+                    }
+                )
+                callback && callback()
+                resolve(_userInfo)
+            } else {
+                resolve(_userInfo)
+            }
+        })
+    })
 }

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

@@ -80,12 +80,13 @@
     </div>
 </template>
 <script setup>
-import router from "@/router/buy-nft.js";
+import { useRouter } from 'vue-router'
 import { onMounted, reactive, inject, } from "vue";
 import { getNftMysteryBoxSaleInfo } from "@/http/nft";
 import BtnLoading from '../components/btn-loading.vue'
 import { getQueryString } from "@/uilts/help";
 let pay_info = inject('pay_info');
+const router = useRouter()
 let state = reactive({
     data: {
         salePlans: [

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

@@ -122,7 +122,8 @@ const clickPlay = () => {
     payNftMysteryBoxWithBalance({
         params: {
             nftProjectId: pay_info.home.nftProjectId,
-            salePlanId: pay_info.home.sale_plan.salePlanId
+            salePlanId: pay_info.home.sale_plan.salePlanId,
+            nftGroupId: ''
         }
     }).then((res) => {
         state.loading.show = false
@@ -256,9 +257,10 @@ onMounted(() => {
                 margin-top: 15px;
                 display: flex;
                 justify-content: space-between;
-                div{
+
+                div {
                     display: flex;
-                        align-items: center;
+                    align-items: center;
                 }
 
                 img {

src/view/iframe/buy-nft/group/tip.vue

@@ -0,0 +1,220 @@
+<template>
+    <div class="dialog">
+        <div class="area-title">
+            <img :src="require('@/assets/svg/icon-close.svg')" @click="clickClose" />
+            <div class="title">Join Group</div>
+        </div>
+        <div class="area-content" v-show="state.show == 'tip'">
+            <!--  -->
+            <div class="logo">
+                <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
+
+            </div>
+
+            <div class="title">
+                DeNet Core Member Group
+            </div>
+            <div class="tip">
+                Join to Get Posting Permissions and Badges
+            </div>
+            <div class="tip2">
+
+                <img :src="require('@/assets/svg/icon-line.svg')" />
+                <span>Own this Group's NFT to Join</span>
+                <img :src="require('@/assets/svg/icon-line.svg')" />
+            </div>
+            <div class="btn" v-if="state.type == 'buy' && state.buy_nft_status == 0" @click="clickBuy">
+                Buy NFT to Join
+            </div>
+            <div class="btn" v-if="state.type == 'join'" @click="clickJoin">
+                Join Now
+            </div>
+        </div>
+        <div class="area-content success" v-show="state.show == 'success'">
+            <!--  -->
+            <div class="logo">
+                <img :src="require('@/assets/svg/icon-group-success.svg')" />
+            </div>
+
+            <div class="title">
+                Joined Successfully
+            </div>
+
+            <div class="btn" @click="clickFinish">
+                Finish
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { setGroupJoin } from '@/http/group.js'
+let state = reactive({
+    show: 'tip',
+})
+const router = useRouter()
+
+const clickJoin = () => {
+    // 请求接口
+    setGroupJoin({
+        params: {
+            nftGroupId: state.nft_group_Id
+        }
+    }).then((res) => {
+        if (res.code == 0) {
+            state.show = 'success'
+        }
+    })
+}
+
+const clickBuy = () => {
+    // 传输参数
+    router.push(`/?nft_group_Id=${state.nft_group_Id}&buyNftProjectId=${state.buyNftProjectId}`)
+}
+const clickClose = () => {
+    chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+            actionType: "IFRAME_TWITTER_HIDE_BUY_NFT",
+        }, (res) => { });
+    })
+}
+
+const clickFinish = () => {
+    clickClose()
+}
+
+onMounted(() => {
+    state.type = router.currentRoute.value.query.type
+    state.buy_nft_status = router.currentRoute.value.query.buy_nft_status
+    state.nft_group_Id = router.currentRoute.value.query.nft_group_Id
+    state.buyNftProjectId = router.currentRoute.value.query.buyNftProjectId
+})
+
+</script>
+<style lang="scss" scoped>
+.dialog {
+    background: #fff;
+    border-radius: 25px;
+    width: 500px;
+    height: 420px;
+    z-index: 23;
+    display: flex;
+    flex-direction: column;
+
+
+    .area-title {
+        width: 100%;
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #D9D9D9;
+        font-weight: 500;
+        font-size: 16px;
+        letter-spacing: 0.3px;
+        color: #000000;
+
+        img {
+            width: 24p;
+            height: 24px;
+            margin-left: 14px;
+            margin-right: 12px;
+            cursor: pointer;
+        }
+
+    }
+
+    .area-content {
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: column;
+
+        align-items: center;
+
+        .logo {
+            width: 80px;
+            height: 80px;
+            border: 1px solid #D0BAA6;
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 33px;
+            margin-bottom: 25px;
+
+            img {
+                width: 75px;
+                height: 75px;
+
+            }
+        }
+
+        .title {
+            color: #000000;
+            font-size: 18px;
+
+            font-weight: 600;
+            margin-bottom: 13px;
+
+        }
+
+        .tip {
+            color: #9E9E9E;
+            font-weight: 400;
+            font-size: 16px;
+            margin-bottom: 66px;
+        }
+
+        .tip2 {
+            margin-bottom: 28px;
+            display: flex;
+            align-items: center;
+
+            span {
+                font-weight: 500;
+                font-size: 14px;
+                margin: 0 10px;
+            }
+
+            img {}
+        }
+
+        .btn {
+            width: 470px;
+            height: 46px;
+            background: #1D9BF0;
+            border-radius: 100px;
+            text-align: center;
+            line-height: 46px;
+            font-weight: 600;
+            font-size: 16px;
+            color: #fff;
+            cursor: pointer;
+        }
+    }
+
+    .success {
+        .logo {
+            width: 120px;
+            height: 120px;
+            margin-bottom: 36px;
+            margin-top: 61px;
+            border: 0;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .title {
+            font-weight: 600;
+            font-size: 22px;
+            margin-bottom: 60px;
+        }
+    }
+}
+</style>

src/view/iframe/group-card/card.vue

@@ -0,0 +1,166 @@
+<template>
+    <div id="denet_group_tip" v-if="state.data" style="display: flex;z-index: 100; background-color: #356789;">
+        <div style="flex:1; display: flex; align-items: center;">
+            <div>
+                <img :src="state.data.linkImagePath" style="width:54px;height:54px; margin: 0 20px;" alt="" />
+            </div>
+            <div>
+                <p style="font-weight: 700; font-size: 18px; color: #fff; margin: 0; padding: 0; margin-bottom: 11px;">
+                    {{ state.data.nftGroupName }}
+                </p>
+                <div style="display: flex; ">
+                    <div style="display: flex; align-items: center;">
+                        <img :src="require('@/assets/img/icon-user.png')"
+                            style="width:16px;height:16px; margin-right: 5px;" alt="" />
+                        <span style="color: #fff;">{{ state.data.postCount }} Posts</span>
+                    </div>
+                    <div style="display: flex; align-items: center; margin-left: 17px;">
+                        <img :src="require('@/assets/img/icon-messgae.png')"
+                            style="width:16px;height:16px; margin-right: 5px;" alt="" />
+
+                        <span style="color: #fff;">{{ state.data.memberCount }} Member</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            style="width: 180px;height: 100%; display: flex; align-items: center; justify-content: center; position: relative;">
+            <div v-show="state.show == 'post'" style="width: 140px; height: 40px; display:flex; align-items: center; justify-content: center; background: #1D9BF0; border-radius: 50px;
+                cursor: pointer;
+                " @click="clickPost">
+                <img :src="require('@/assets/img/icon-messgae.png')" style="width:16px;height:16px;" alt="">
+                <span style="margin-left: 7px; font-size: 15px;font-weight: 700; color: #fff; ">Post</span>
+            </div>
+            <div v-show="state.show == 'join'"
+                style="width: 140px; height: 40px; display:flex; align-items: center; justify-content: center; background: #1D9BF0; border-radius: 50px; cursor: pointer;"
+                @click="clickJoin">
+                <span style="margin-left: 7px; font-size: 15px;font-weight: 700; color: #fff; ">Join Now</span>
+            </div>
+
+            <svg v-show="state.show == 'arrow'" id="denet_tip_group_arrow" style="position: absolute; right: 20px;"
+                width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 10L26 19.6875L15 29.375" stroke="white" stroke-width="2" />
+            </svg>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+import { getTwitterNftGroupInfo, getTwitterNftPostPre } from "@/http/group";
+import { getQueryString } from '@/uilts/help.js';
+import { sendChromeTabMessage ,checkIsLogin} from '@/uilts/chromeExtension.js';
+
+let state = reactive({
+    show: 'post', //join
+    data: {},
+    twitterAccount: ''
+})
+
+// 显示加入小组弹框
+const clickJoin = () => {
+    sendChromeTabMessage({
+        actionType: "IFRAME_SHOW_JOIN_DIALOG",
+        data: {
+            type: 'join',
+            buy_nft_status: state.data.buyNftStatus,
+            nft_group_Id: state.data.nftGroupId
+        }
+    })
+}
+const init = (callback) => {
+    getTwitterNftGroupInfo({
+        params: {
+            twitterAccount: state.twitterAccount
+        }
+    }).then((res) => {
+        if (res.code == 0) {
+            state.data = res.data
+            if (state.data) {
+                // 未加入
+                if (res.data.joinStatus == 0) {
+                    state.show = 'join'
+                    // 已加入
+                } else if (res.data.joinStatus == 1) {
+                    state.show = 'post'
+                }
+                callback()
+            }
+        }
+    })
+}
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse('')
+    switch (req.actionType) {
+        case 'FINISH_GROUP_BANNNER':
+            init()
+            break
+    }
+})
+
+async function clickPost() {
+    // getTwitterNftPostPre({
+    //     params:{
+    //         groupId:''
+    //     }
+    // }).then((res)=>{
+
+    // })
+    let _userInfo = await checkIsLogin()
+    if (_userInfo) {
+        sendChromeTabMessage({
+            actionType: "IFRAME_SHOW_POST_DIALOG",
+            data: {
+                groupId: state.data.nftGroupId
+            }
+        })
+    }
+
+    // 没有购买过
+    // if (state.data.buyNftStatus == 0) {
+    //     sendChromeTabMessage({
+    //         actionType: "IFRAME_SHOW_JOIN_DIALOG",
+    //         data: {
+    //             type: 'buy',
+    //             buy_nft_status: state.data.buyNftStatus,
+    //             nft_group_Id: state.data.nftGroupId
+    //         }
+    //     })
+    //     // 购买过
+    // } else if (state.data.buyNftStatus == 1) {
+    //     sendChromeTabMessage({
+    //         actionType: "IFRAME_SHOW_POST_DIALOG",
+    //         data: {
+    //             groupId: state.data.nftGroupId
+    //         }
+    //     })
+    // }
+}
+
+
+
+
+onMounted(() => {
+    state.twitterAccount = getQueryString('twitterAccount') || ''
+    init(() => {
+        sendChromeTabMessage({ actionType: "IFRAME_SHOW_GROUP_TIP" })
+    })
+
+})
+</script>
+
+<style lang='scss'>
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#denet_group_tip {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/view/iframe/publish-tips/publish-tips.vue

@@ -2,7 +2,7 @@
     <div class="publish-tips-wrapper">
         <div class="top">
             <img src="@/assets/svg/icon-bells.svg" class="icon-bells">
-            <div class="text-wrapper">
+            <div class="text-wrapper" v-show="type == 'Giveaway'">
                 <div>
                     Do not delete the
                 </div>
@@ -11,10 +11,17 @@
                     otherwise the giveaway will not be available
                 </div>
             </div>
+            <div class="text-wrapper" v-show="type == 'NFT'">
+                <div>
+                    Do not delete the
+                </div>
+                <div>
+                    <span>#DNFT </span>and<span> NFT Group Link</span>
+                    otherwise the NFT Post will not be aviilble
+                </div>
+            </div>
         </div>
-        <div class="copy-btn" 
-            :data-clipboard-text="strContent" 
-            @click="copyToken">Copy giveaways link</div>
+        <div class="copy-btn" :data-clipboard-text="strContent" @click="copyToken">Copy giveaways link</div>
     </div>
 </template>
 
@@ -27,6 +34,7 @@ import { getChromeStorage } from '@/uilts/chromeExtension.js'
 let ClipboardJS = require('clipboard');
 
 let strContent = ref('');
+let type = ref('Giveaway')
 
 const copyToken = () => {
     var clipboard = new ClipboardJS('.copy-btn');
@@ -53,7 +61,7 @@ const setSrcContent = async () => {
 
 onMounted(() => {
     setSrcContent();
-}) 
+})
 
 </script>
 
@@ -61,6 +69,7 @@ onMounted(() => {
 body {
     overflow-y: hidden;
 }
+
 .publish-tips-wrapper {
     width: 100%;
     box-sizing: border-box;
@@ -68,6 +77,7 @@ body {
     border-radius: 12px;
     padding: 15px;
     margin-top: 88px;
+
     .top {
         display: flex;