nanjing_nft/src/main/pc-space/src/components/PageHeader.vue

<template>
    <div class="container">
        <div class="header">
            <router-link class="logo-link" :to="{ path: '/' }">
                <img class="logo" src="../assets/img/nav_logo@3x.png" alt=""
            /></router-link>

            <div class="content">
                <div class="tabs">
                    <div
                        class="tab"
                        :class="{ active: active === item }"
                        v-for="(item, index) in tabs"
                        :key="index"
                        @click="tab(item)"
                    >
                        {{ item }}
                        <div class="slip" :class="{ active: item === active }"></div>
                    </div>
                </div>
                <div class="btn-list" v-if="isLogin">
                    <el-dropdown @command="onCommand" style="margin-left: 20px" trigger="click">
                        <span class="el-dropdown-link">
                            <img class="img" :src="avatarBox" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="nickname" style="word-break: keep-all"
                                >{{ userInfo.username }}
                            </el-dropdown-item>
                            <div class="border"></div>
                            <el-dropdown-item command="supply" style="word-break: keep-all">去认证 </el-dropdown-item>
                            <el-dropdown-item command="edit" style="word-break: keep-all">编辑资料 </el-dropdown-item>
                            <div class="border"></div>
                            <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-else class="login" @click="show = true">[登录]</div>
                <div class="login login1">中文</div>
            </div>
        </div>
        <login-info :Show="show" @close="show = false"></login-info>
    </div>
</template>
<script>
import LoginInfo from '../components/LoginInfo.vue';
import { mapState } from 'vuex';
export default {
    components: { LoginInfo },
    data() {
        return {
            tabs: ['铸造者', '收藏探索', '数字盲盒', '我的NFT', '了解更多'],
            active: '',
            show: false
        };
    },
    computed: {
        ...mapState(['userInfo']),
        avatarBox() {
            return this.userInfo.avatar
                ? this.userInfo.avatar
                : 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-06-30-17-02-42uzAOUPcw.jpeg';
        },
        type() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
            });
        }
    },
    mounted() {
        this.$EventBus.$on('login', () => {
            this.show = true;
        });
    },
    methods: {
        tab(item) {
            this.active = item;
            if (item === '铸造者') {
                this.$router.push('/casting');
            } else if (item === '收藏探索') {
                this.$router.push('/collection');
            } else if (item === '数字盲盒') {
                this.$router.push('/blindbox?flag=' + 1);
            } else if (item === '我的NFT') {
                this.$router.push('/my');
            }
        },
        batchRead() {},
        onCommand(command) {
            if (command === 'edit') {
                this.$router.push('/accountdata');
            } else if (command === 'logout') {
                localStorage.removeItem('webToken');
                this.$router.push('/');
            } else if (command === 'supply') {
                if (this.type) {
                    if (this.type.name == 'ROLE_INSTITUTION') {
                        this.$nextTick(() => {
                            // if (this.institutionInfo.status == 'PASS') {
                            this.$router.push('/enterpriseauthentication');
                            // }
                        });
                    } else if (this.type.name == 'ROLE_PERSONAL') {
                        this.$nextTick(() => {
                            // if (this.institutionInfo.status == 'PASS') {
                            this.$router.push('/userauthentication');
                            // }
                        });
                    }
                } else {
                    this.$router.push('/authentication');
                }
            }
        }
    }
};
</script>
<style lang="less" scoped>
/deep/ .el-dropdown-menu__item {
    font-weight: bold;
    text-align: center;
}
.border {
    margin: 6px 16px;
    height: 1px;
    background: #f2f3f5;
}
/deep/ .el-tabs__nav-scroll {
    padding-left: 13px;
}
/deep/ .el-tabs__item {
    font-weight: bold;
    font-size: 14px;
    width: 300px;
}
.container {
    height: 90px;
    background: #0f1111;
    width: 100%;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo {
            width: 170px;
            height: 60px;
        }
        .logo-link {
            padding: 15px 0px 15px 30px;
        }
        .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tabs {
                display: flex;
                align-items: center;
                padding-top: 10px;
                cursor: pointer;
                .tab {
                    width: 130px;
                    font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                    color: #939599;
                    line-height: 28px;
                    &.active {
                        color: #ffffff;
                        font-weight: bold;
                    }
                    .slip {
                        width: 26px;
                        margin: 0 auto;
                        padding-bottom: 13px;
                        &.active {
                            border-bottom: 2px solid #fff;
                            border-radius: 2px;
                        }
                    }
                }
            }
            .btn-list {
                .img {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    display: block;
                }
            }

            .login {
                width: 83px;
                height: 30px;
                border-radius: 4px;
                border: 1px solid;
                // border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
                line-height: 30px;
                text-align: center;
                color: #00ffcb;
                font-size: 16px;
                // .line();
                margin: 0 30px;
                .login1 {
                    border: 1px solid #939599;
                    color: #939599;
                    border-image: linear-gradient(0);
                    margin: 0;
                }
            }
        }
    }
}
</style>