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

<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.nftGroupIcon" 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/svg/icon-user.svg')"
                            style="width:16px;height:16px; margin-right: 5px;" alt="" />
                        <span style="color: #fff;">{{ state.data.memberCount }} Member</span>
                    </div>
                    <div style="display: flex; align-items: center; margin-left: 17px;">
                        <img :src="require('@/assets/svg/icon-messgae.svg')"
                            style="width:16px;height:16px; margin-right: 5px;" alt="" />
                        <span style="color: #fff;">{{ state.data.postCount }} Posts</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/svg/icon-messgae.svg')" 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 @click="clickArrow" v-show="state.show == 'arrow'" id="denet_tip_group_arrow"
                style="position: absolute; right: 20px; cursor: pointer;" 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, onBeforeMount } from 'vue'
import { getTwitterNftGroupInfo } from "@/http/group";
import { getQueryString } from '@/uilts/help.js';
import { sendChromeTabMessage, checkIsLogin } from '@/uilts/chromeExtension.js';

let state = reactive({
    show: 'arrow', //join
    show2: 'join',
    data: {},
    twitterAccount: ''
})

// 显示加入小组弹框
async function clickJoin() {
    sendChromeTabMessage({ actionType: "SWITCH_GROUP_STATUS" }, () => { })
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }
    // 如果没购买过 弹出购买
    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,
                buyNftProjectId: state.data.buyNftProjectId,
                nftGroupIcon: state.data.nftGroupIcon,
                nftGroupName: state.data.nftGroupName
            }
        })

        // 如果购买过 没加入 显示加入按钮
    } else if (state.data.buyNftStatus == 1 && state.data.joinStatus == 0) {
        sendChromeTabMessage({
            actionType: "IFRAME_SHOW_JOIN_DIALOG",
            data: {
                type: 'join',
                buy_nft_status: state.data.buyNftStatus,
                nft_group_Id: state.data.nftGroupId,
                nftGroupIcon: state.data.nftGroupIcon,
                nftGroupName: state.data.nftGroupName
            }
        })
    } else if (state.data.buyNftStatus == null || state.data.joinStatus == null) {
        init()
    }
}

const init = (callback) => {
    getTwitterNftGroupInfo({
        params: {
            twitterAccount: state.twitterAccount
        }
    }).then((res) => {
        if (res.code == 0) {
            state.data = res.data
            if (state.data) {
                res.data.joinStatus == 0
                // 未加入
                if (res.data.joinStatus == 0) {
                    state.show2 = 'join'
                    // 已加入
                } else if (res.data.joinStatus == 1) {
                    state.show2 = 'post'
                }
                if (state.show != 'arrow') {
                    state.show = state.show2
                }
                // state.show2 = 'join'
                callback && callback()
            }
            sendMessageToContent({
                actionType: 'IFRAME_GROUP_BANNER_GROUP_INFO',
                data: res.data || {}
            })
        }
    })
}

chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
    sendResponse('')
    switch (req.actionType) {
        case 'FINISH_GROUP_BANNNER':
            init()
            break
        case 'SWITCH_GROUP_BANNER_STATUS':
            if (req.data.type == 'arrow') {
                state.show = 'arrow'
            } else {
                state.show = state.show2
                // console.log(11)
                // sendChromeTabMessage({ actionType: "SWITCH_GROUP_STATUS", data: { type: 'btn' } }, () => { })
            }
            break
    }
})

chrome.storage.onChanged.addListener(changes => {
    if (changes.userInfo) {
        let item = JSON.parse(changes.userInfo.newValue)
        if (item) {
            init()
        }
    }
})

window.addEventListener("message", function (event) {
    if (event.data) {
        switch (event.data.actionType) {
            case 'SHOW_BANNER':
                state.twitterAccount = event.data.twitterAccount
                init()
        }
    }
});


const sendMessageToContent = (params) => {
    let { actionType, data } = params || {};
    chrome.tabs.getCurrent((tab) => {
        chrome.tabs.sendMessage(tab.id, {
            actionType,
            data,
        }, (res) => { console.log(res) });
    })
}
const clickArrow = () => {
    sendChromeTabMessage({ actionType: "SWITCH_GROUP_STATUS" }, () => { })
}

async function clickPost() {
    sendChromeTabMessage({ actionType: "SWITCH_GROUP_STATUS" }, () => { })
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }
    // 没有购买过
    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,
                buyNftProjectId: state.data.buyNftProjectId,
                nftGroupIcon: state.data.nftGroupIcon,
                nftGroupName: state.data.nftGroupName
            }
        })
        // 购买过 && 加入过
    } else if (state.data.buyNftStatus == 1 && state.data.joinStatus == 1) {
        sendChromeTabMessage({
            actionType: "IFRAME_SHOW_POST_DIALOG",
            data: {
                groupId: state.data.nftGroupId
            }
        })
    } else if (state.data.buyNftStatus == null || state.data.joinStatus == null) {
        init()
    }
}


onBeforeMount(() => {
    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: 100px;
}

#denet_group_tip {
    width: 100%;
    height: 100%;
}
</style>