de-net-website/src/components/header.vue

<template>
    <div class="header">
        <img class="logo" src="../static/img/logo.svg" alt="DeNet" />
        <div class="operation">
            <div class="login" @click="login">
                <img class="add" src="../static/img/header-add.svg" alt="" />
                <span>Create NFTs</span>
            </div>
            <div class="down" @click="install">
                <div class="text">Install DeNet</div>
            </div>
        </div>
    </div>
    <div class="header-place"></div>
</template>

<script lang="ts" setup>
import Api from '../static/http/api'
import { postRequest } from '../static/http'
import { getOauthUrl, createWindow, callBackUrl, getCookie, removeCookie } from '../static/utils'
import { getStorage, removeStorage, setStorage, storageKey } from '../static/utils/storage'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Report } from '../static/report'
import { businessType, pageSource, objectType } from '../static/report/enum'

const timer = ref(0)

const install =  () => {
    window.open(`https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja`);
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.homePage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: objectType.installDenetButton,
            }
        }
    })
}

const checkInstall = () => {
    return new Promise((resolve, reject) => {
        // chrome-extension://inlfbeejfdgkknpiodhemfcokbdgofja/img/icon-denet-logo.svg
        let dom = document.querySelector('#denet_message');
        if (dom) {
            resolve(true)
        } else {
            reject(false)
        }
    })
}

const login = () => {
    checkInstall().then(() => {
        let userInfo = getStorage(storageKey.userInfo);
        if (userInfo) {
            location.href = `/nft/list`
        } else {
            twitterAuth()
        }
    }).catch(() => {
        install()
    })
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.homePage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: objectType.createNftsButton,
            }
        }
    })
}

const twitterAuth = () => {
    postRequest(Api.twitterRequestToken, {
        params: {
            oauthCallback: callBackUrl
        }
    }).then(res => {
        let { code, data, msg }  = res;
        if ( code === 0 )  {
            let url = getOauthUrl(data.authToken);
            let win = createWindow(url);
            // timer
            clearInterval(timer.value);
            timer.value = setInterval(() => {
                if (win && win.closed) {
                    clearInterval(timer.value);
                    twitterLogin(data);
                }
            }, 500)
        } else {
            ElMessage({
                type: 'error',
                message: msg,
            })
        }
    })
}

const twitterLogin = (data: { authToken: string, consumerKey: string }) => {
    let verifier = getCookie(storageKey.verifier)
    if (verifier) {
        postRequest(Api.twitterLogin,  {
            params: {
                consumerKey: data.consumerKey,
                oauthToken: data.authToken,
                oauthVerifier: verifier
            }
        }).then(res => {
            let { code, data, msg } = res;
            if ( code === 0 ) {
                setStorage(storageKey.userInfo, data);
                removeCookie(storageKey.verifier);
                location.href = `/nft/list`
            } else {
                ElMessage({
                    type: 'error',
                    message: msg,
                })
            }
        })
    }
}
</script>

<style lang="less" scoped>
.header {
    position: fixed;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
    .logo {
        height: 38px;
        margin-left: 26px;
    }
    .operation {
        display: flex;
        flex-direction: row;
    }
    .login {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: 38px;
        cursor: pointer;
        padding: 0 18px;
        font-size: 15px;
        font-weight: 600;
        color: #1D9BF0;
        margin-right: 19px;
        border-radius: 20px;
        border: solid 1px #1D9BF0;
        .add {
            width: 20px;
            margin-right: 4px;
        }
    }
    .down {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        cursor: pointer;
        padding: 0 24px;
        margin-right: 26px;
        border-radius: 20px;
        background: #1D9BF0;
        .text {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            margin-top: -2px;
        }
    }
    &-place {
        height: 60px;
    }
}
</style>