eta_mobile_front/src/layouts/Index.vue

<script setup>
import {ref} from 'vue'
import {Base64} from 'js-base64'

let userInfo=ref(null)
let showUserInfo=ref(false)
function getUserInfo(){
    const val=localStorage.getItem('userInfo')?JSON.parse(Base64.decode(localStorage.getItem('userInfo'))):null
    userInfo.value=val
    console.log(val);
}
getUserInfo()


function handleLoginOut(){
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    router.replace('/login')
}



</script>

<template>
    <div class="layout-wrap">
        <div class="pad-header-box">
            <div></div>
            <van-popover v-model:show="showUserInfo" placement="bottom-end">
                <div class="userinfo-box_pad" v-if="userInfo">
                    <div class="info-item">
                        <span>姓名：</span>
                        <span>{{userInfo.RealName}}</span>
                    </div>
                    <div class="info-item">
                        <span>ID：</span>
                        <span>{{userInfo.AdminName}}</span>
                    </div>
                    <div class="info-item">
                        <span>公司名称：</span>
                        <span>弘则弥道（上海）投资咨询有限公司</span>
                    </div>
                    <div class="info-item">
                        <span>所属部门：</span>
                        <span>产品技术部</span>
                    </div>
                    <div class="info-item">
                        <span>角色：</span>
                        <span>{{userInfo.RoleName}}</span>
                    </div>
                    <van-button class="login_out_btn" block type="primary" round @click="handleLoginOut">退出登录</van-button>
                </div>
                <template #reference>
                    <div class="user-box" v-if="userInfo">
                        <img class="avatar" src="@/assets/imgs/userLogo.png" alt="">
                        <span>{{userInfo.RealName}}，欢迎您！</span>
                    </div>
                </template>
            </van-popover>
        </div>
        <router-view />
    </div>
</template>

<style lang="scss">
@media screen and (min-width:650px){
    .userinfo-box_pad{
        padding: 20px;
        .info-item{
            padding: 5px 0;
        }
        .login_out_btn{
            width: 50%;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

</style>

<style lang="scss" scoped>
.pad-header-box{
    display: none;
}

@media screen and (min-width:650px){
    .pad-header-box{
        display: block;
        height: 60px;
        position: sticky;
        top: 0;
        width: 100%;
        padding:0 30px;
        border-bottom: 1px solid $border-color;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .user-box{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 16px;
            width: 350px;
            .avatar{
                width: 40px;
                margin-right: 5px;
            }
        }
    }
}
</style>