hptwxMiniProgram/pages/myCenter/myCenter.vue

<template>
	<view class="profile">
		<view class="banner">
			<image src="/static/avatar.png" class="avatar"></image>
			 <view class="user-info">
				<view>{{user.userName}}</view>	
				<view>{{user.phone}}</view>
			 </view>
		</view>
		<button type="primary" @click="logoutSubmit" class="submit-BT">退出登录</button>
	</view>
</template>

<script>
	import {logout} from '@/api/system/user.js'
	export default {
		data() {
			return {
				user:{
					userAvatar:"",
					userName:"",
					userIntro:"",
					userPhone:""
				},
				phone:""
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
		  init(){
			this.initUser()  
		  },
		  initUser(){
			  let userInfo=uni.getStorageSync('accountInfo')
			  if(userInfo){this.user=userInfo}
			  let phone=uni.getStorageSync('phone-info')
			  if(phone){this.phone=phone}
		  },
		  logoutSubmit(){
			  uni.clearStorageSync();
			  logout().then(()=>{
				  uni.navigateTo({
				  	url:'/pages/login/index'
				  })
			  })
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.profile{
		.banner{
			padding: 20rpx;
			.avatar{
				display: block;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}			
		}
		.submit-BT {
			width: 600rpx;
			height: 72rpx;
			line-height: 72rpx;
			box-sizing: border-box;
			border-radius: 16upx;
			margin-top: 50upx;
			background-color:#3384FF;
			font-size: 32rpx;
		}
	}
</style>