materialAppletApp/pages/User/user.vue

<template>
    <!-- <view class="content">
        <view class="btn-row">
            <button type="default" @tap="bindLogout">退出登录</button>
        </view>
    </view> -->
	<view class="page-fill">
		<view class="header">
			<image src="../../static/icons/CpoxxFw_-5-AFyVyAABLIH8xBTw233.png" class="face"></image>
	
			<view class="info-wapper">
				<view class="nickname">
					用户名:{{username}}
				</view>
			</view>
			<view>
				<button type="default" @tap="bindLogout" class="settings">退出</button>
			</view>
		</view>
	</view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
		data() {
			return {
				username: null,
			};
		},
		onShow() {
			var me = this;
			var username = uni.getStorageSync("username");
			me.username = username;
		},
        computed: {
        },
        methods: {
            bindLogout() {
				uni.reLaunch({
					url: '/pages/Login/Login',
				});
            }
        }
    }
</script>

<style>
.page-fill {
		width: 100%;
		height: 100%;
	}

	.header {
		padding: 60upx 30upx 40upx 30upx;
		background-color: #ffd655;
		background: url(../../static/icons/CpoxxFwu_1OAYFAIAAAzO_Q1tPg693.png) repeat;

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.face {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.info-wapper {
		width: 60%;
		margin-left: 40upx;
		display: flex;
		flex-direction: column;
	}

	.nickname {
		color: #6a5018;
		font-size: 12px;
		font-weight: bold;
		padding: 30upx 0upx 0upx 0upx;
	}

	.set-wapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 15%;
	}

	.settings {
		width: 160upx;
		height: 110upx;
	}
</style>