登录和个人信息

src/pages/my/my.vue

@@ -1,13 +1,61 @@
 <template>
-  <view>my</view>
+  <view class="user">
+    <!-- 1. 已登录 -->
+    <block v-if="userInfo.nickName">
+      <image class="user_avatar" :src="userInfo.avatarUrl"></image>
+      <text class="user_nickName">{{userInfo.nickName}}</text>
+    </block>
+    <!-- 2. 未登录 -->
+    <button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" class="user_btn">去登录</button>
+  </view>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      userInfo: {}
+    }
+  },
+  onShow(){
+    this.userInfo = uni.getStorageSync("userInfo") || {}
+  },
+  methods: {
+    getUserInfo({detail: {userInfo}}){
+      this.userInfo = userInfo
+      uni.setStorageSync("userInfo",userInfo)
+    }
+  },
 }
 </script>
-
-<style>
-
+ 
+<style lang="scss">
+page {
+  background-color: #f9f9f9;
+}
+.user {
+  height: 330rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .user_btn {
+    background-color: #07c160;
+    color: #fff;
+    width: 400rpx;
+    &::after {
+      border: none;
+    }
+  }
+  .user_avatar {
+    width: 172rpx;
+    height: 172rpx;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  .user_nickName {
+    font-size: 32rpx;
+    margin-top: 20rpx;
+  }
+}
 </style>