我的页面ui和用户信息加载完成

pages/pages_zhentou/myPage/myPage.vue

@@ -1,10 +1,18 @@
 <template>
 	<view>
 		<view class="person_box">
-			个人信息
+			<image :src="userInfo.avatar" class="avatar"></image>
+			<view class="nickname">{{userInfo.username}}</view>
 		</view>
-		<view class="address_box" @click="returnAddress">
-			收货地址管理
+		<view class="cnt-box">
+			<view class="title">用户功能</view>
+			<view class="address_box" @click="returnAddress">
+				<view class="address_left">
+					<image src="../../../static/image/icon-address.png" style="width: 40rpx; height: 40rpx;margin-right: 13rpx;"></image>
+					收货地址管理
+				</view>
+				<image src="../../../static/image/icon-arrow-right.png" style="width: 40rpx; height: 40rpx;"></image>
+			</view>
 		</view>
 	</view>
 </template>
@@ -13,7 +21,17 @@
 	export default {
 		data() {
 			return {
-				
+				userInfo: {}
+			}
+		},
+		onShow() {
+			let userInfo = uni.getStorageSync('userInfo');
+			if (userInfo) {
+				this.userInfo = JSON.parse(userInfo);
+				if(this.userInfo.id == undefined) {
+					this.userInfo.avatar = this.userInfo.avatarUrl;
+					this.userInfo.username = this.userInfo.nickName;
+				}
 			}
 		},
 		methods: {
@@ -33,18 +51,48 @@
 	margin: 30rpx;
 	padding: 30rpx;
 	background-color: #fff;
-	border-radius: 20rpx;
+	border-radius: 30rpx;
 	.avatar{
-		
+		width: 100rpx;
+		height: 100rpx;
+		background: #D6D6D6;
+		border-radius: 20rpx;
+		margin-right: 30rpx;
+	}
+	.nickname{
+		color: #333;
+		font-size: 32rpx;
+		font-weight: bold;
+		font-family: PingFang SC-Bold, PingFang SC;
+	}
+}
+.cnt-box{
+	min-height: calc(100vh - 220rpx - 30rpx);
+	background-color: #fff;
+	margin: 0 30rpx;
+	border-radius: 30rpx;
+	.title{
+		font-size: 28rpx;
+		font-family: PingFang SC-Bold, PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		line-height: 40rpx;
+		padding: 30rpx;
 	}
 }
 .address_box{
-	width: 95%;
-	height: 100rpx;
-	background: #fff;
-	margin: 0 auto;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	font-size: 26rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	line-height: 37rpx;
+	margin: 0 16rpx 30rpx 23rpx;
+	.address_left{
+		display: flex;
+		align-items: center;
+	}
 }
 </style>