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

<template>
    <div class="card">
        <div class="padding" v-if="detail">
            <div class="info">
                <div class="logo">
                    <img :src="detail.groupIcon" />
                </div>
                <div class="mess">
                    <div class="title">
                        {{ detail.groupName }}
                    </div>
                    <div class="opt">
                        <label>
                            <img src="../../../assets/svg/icon-nft-member.svg" />
                            <span>{{ detail.memberCount }} Members</span>
                        </label>
                        <label>
                            <img src="../../../assets/svg/icon-nft-post.svg" />
                            <span>{{ detail.postCount }} Posts</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="join" @click="jumpUserPage">
                {{ detail.joinStatus === 0 ? 'Join Now' : 'View' }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import { getPostDetail } from '@/http/redPacket';
import { getQueryString } from '@/uilts/help.js'
import { srcPublishSuccess } from '@/http/publishApi'
import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'

let postId = getQueryString('projectId');
let tweet_Id = getQueryString('tweet_Id')
let detail = ref(null);

const jumpUserPage = () => {
    getChromeStorage('userInfo', (_userInfo) => {
        if (!_userInfo) {
            chrome.runtime.sendMessage(
                { actionType: "POPUP_LOGIN", data: "" },
                (response) => {
                    console.log("res", response);
                }
            )
        } else {
            setChromeStorage({ groupTabData: JSON.stringify({
                deTabVal: 'deGroupTab'
            })})
            window.open(`https://twitter.com/${detail.value.defaultTwitterAccount}`)
        }
    })
}
// 重新绑定
const reSetBindTwtterId = (_params = {}) => {
    getChromeStorage('userInfo', (_userInfo = {}) => {
        if (_userInfo && _userInfo.uid == _params.uid) {
            srcPublishSuccess({
                params: {
                    postId: postId,
                    srcContentId: tweet_Id
                }
            }).then((res) => {
                if (res.code == 0 || res.code == 3003) {

                }
            })
        }
    })
}

const getDetail = () => {
    getPostDetail({
        params: {
            postId: postId
        }
    }).then(res => {
        let { data } = res
        if (data !== null) {
            detail.value = JSON.parse(data.postBizData)
        }
    })
}

onMounted(() => {
    getPostDetail({
        params: {
            postId: postId
        }
    }).then(res => {
        let { data } = res
        if (data !== null) {
            detail.value = JSON.parse(data.postBizData)
            if (!data.srcContentId) {
                reSetBindTwtterId(data)
                return
            }
        }
    })

    // 登录回调
    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        switch (req.actionType) {
            case 'BG_LOGIN_SET_USERINFO_CB':
                getDetail();
                break;
        }
    })
})
</script>

<style lang='scss'>
html,
body {
    margin: 0;
    padding: 0;
    user-select: none;
}

.card {
    height: 180px;
    border-radius: 12px;
    background: url('../../../assets/svg/icon-nft-group-pc.svg') no-repeat right bottom #48B1F7;

    .padding {
        padding: 20px;

        .info {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100px;

            .logo {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 54px;
                height: 54px;
                border-radius: 6px;
                background: #FFFFFF;
                margin-right: 20px;

                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 6px;
                }
            }

            .mess {
                flex: 1;

                .title {
                    overflow: hidden;
                    color: #FFFFFF;
                    font-size: 18px;
                    line-height: 21px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .opt {
                    color: #FFFFFF;
                    font-size: 12px;
                    margin-top: 8px;

                    label {
                        margin-right: 18px;

                        img {
                            margin-top: -4px;
                            margin-right: 4px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }

        .join {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            cursor: pointer;
            color: #FFFFFF;
            font-size: 16px;
            font-weight: bold;
            background: #101419;
            border-radius: 100px;
        }
    }
}
</style>