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

<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>