ToDo/pages/user/user.vue

<template>
	<view class="content">
		<view class="top">
			<image :src="avatar" mode="widthFix"></image>
			<view class="detail">
				<text class="name">{{nick}}</text>
				<text class="motto">心若冰清，天塌不惊。万变犹定，神怡气清。</text>
			</view>
		</view>

		<view class="middle">
			<view class="item">
				<text>用户ID</text>
				<text>{{id}}</text>
			</view>
			<view class="item">
				<text>账号</text>
				<text>{{account}}</text>
			</view>
			<view class="item">
				<text>姓名</text>
				<text>{{name}}</text>
			</view>
			<view class="item">
				<text>电话</text>
				<text>{{phone||''}}</text>
			</view>
			<view class="item" style="border-bottom:#d9d9d9 solid 0upx">
				<text>邮箱</text>
				<text>{{email||''}}</text>
			</view>
		</view>

		<view class="bottom" @click="exit">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	import auth from "../../utils/js/auth.js"
	export default {
		data() {
			return {
				id:'',
				name:'',
				account:'',
				nick:'',
				avatar:'',
				phone:'',
				email:''
			}
		},
		onLoad() {
			this.id=auth.getId()
			this.name=auth.getName()
			this.account=auth.getAccount()
			this.nick=auth.getNick()
			this.avatar=auth.getAvatar()
			this.phone=auth.getPhone()
			this.email=auth.getEmail()

		},
		methods: {
			exit() {
				uni.removeStorageSync("token")
				uni.reLaunch({
					url: "../login/login"
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #e7e7e7;
	}

	.top {
		height: 250upx;
		display: flex;
		align-items: center;
		background-color: white;
	}

	.top image {
		width: 200upx;
		margin-left: 30upx;
	}

	.top .detail {
		height: 200upx;
		margin-left: 50upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.top .name {
		color: #0055FF;
		font-family: 华文彩云;
		height: 50upx;
		line-height: 50upx;
		font-size: 50upx;
	}

	.top .motto {
		color: #0055FF;
		font-family: 楷体;
		height: 50upx;
		line-height: 50upx;
		font-size: 20upx;
	}

	.middle {
		margin-top: 20upx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item {
		height: 100upx;
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: #d9d9d9 solid 1upx;
	}

	.bottom {
		height: 100upx;
		margin-top: 20upx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>