OumanMESUni/source/OumanMESUni/pages/my/index.vue

<template>
    <view class="content">
        <view class="user">
            <view class="user-avatar">
                <image class="user-avatar-image" :src="avatar"></image>
            </view>
            <view class="user-info">{{username}}</view>
        </view>
        <view class="nav-list">
            <view class="nav-list-item" @tap="openServerSetting">
                <view class="nav-list-text">设置服务器地址</view>
                <uni-icons type="right"></uni-icons>
            </view>
        </view>
        <view class="flex padding-lr-20" v-if="isLogin">
            <button class="grow-1" size="mini" type="warn" @tap="logOff">注销</button>
        </view>
        <view class="flex padding-lr-20" v-else>
            <button class="grow-1" size="mini" type="primary" @tap="login">登录</button>
        </view>
    </view>
</template>

<script>
    import extend from '../../utils/extend.js';
    import token from '../../utils/token.js';
    import user from '../../utils/user.js';

    let userinfo = null;

    export default {
        data() {
            return {
                avatar: '/static/logo.png',
                username: '',
                isLogin: false,
            }
        },
        async onShow() {
            if (token.has()) {
                userinfo = user.get();
                this.isLogin = true;
                this.username = userinfo.userName;
            } else {
                let res = await token.getByServer();
                if (res.success) {
                    let infoRes = user.getByServer();
                    if (infoRes.success) {
                        userinfo = infoRes.data;
                        this.isLogin = true;
                        this.username = userinfo.userName;
                    } else {
                        token.clear();
                    }
                }
            }
        },
        methods: {
            openLogin() {
                uni.navigateTo({
                    url: '/pages/login/index'
                });
            },

            openServerSetting() {
                uni.navigateTo({
                    url: '/pages/login/serverSetting'
                });
            },

            logOff() {
                let _this = this;
                uni.showModal({
                    content: '要注销登录吗？',
                    success(r) {
                        if (r.confirm) {
                            token.clear();
                            user.clear();
                            user.clearLoginInfo();
                            _this.login();
                        }
                    }
                })
            },
            login() {
                uni.navigateTo({
                    url: '/pages/login/index?type=switchTab&page=/pages/my/index'
                });
            }
        }
    }
</script>

<style lang="scss">
    .content {
        position: relative;
        background-color: #efefef;
        height: 100vh;
    }

    .user {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        padding: 30upx;
        border-radius: 0 0 20upx 20upx;

        .user-avatar {
            position: relative;
            display: flex;
            width: 150upx;
            height: 150upx;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 80upx;

            .user-avatar-image {
                width: 150upx;
                height: 150upx;
            }
        }

        .user-info {
            margin-top: 30upx;
        }
    }
</style>