更新登录后的界面

pages/user/user.js

@@ -5,56 +5,52 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
+    var that = this;
+    //获得设备信息
+    wx.getSystemInfo({
+      success (res) {
+        console.log(res.windowHeight);
+        that.setData({
+          phoneHeight:res.windowHeight,
+        })
+      }
+    })
+    // 查看是否授权
+    wx.getSetting({
+      success(res) {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
+          wx.getUserInfo({
+            success: function (res) {
+              console.log(res.userInfo);
+              that.setData({
+                login:true,
+                avatarUrl:res.userInfo.avatarUrl,
+                nickName:res.userInfo.nickName
+              })
+            }
+          })
+        }
+      }
+    })
+  },
+  // 获取用户的头像和昵称信息
+  bindGetUserInfo(e) {
+    var that = this;
+    console.log(e.detail.userInfo)
+    that.setData({
+      login:true,
+      avatarUrl:e.detail.userInfo.avatarUrl,
+      nickName:e.detail.userInfo.nickName
+    })
+    
   },
 
   /**

pages/user/user.wxml

@@ -1,13 +1,87 @@
-<!--pages/user/user.wxml-->
-
-<!-- logo -->
-<view class="logo" hover-class="none" hover-stop-propagation="false">
-    <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false" binderror="" bindload=""></image>
-</view>
-
-<!-- 登录按钮 -->
-
-<view class="loginButton" hover-class="none" hover-stop-propagation="false">
-    <view class="wechatLogin"><button><text class="icon-github"></text>微信登录</button></view>
-    <view class="phoneLogin"><button>手机号登录</button></view>
-</view>
+<!-- pages/user/user.wxml -->
+<block wx:if="{{!login}}">
+    <!-- logo -->
+    <view class="logo">
+        <image class="logoImg" src="/image/logo.png" mode="widthFix"></image>
+    </view>
+    <!-- 登录按钮 -->
+    <view class="loginButton">
+        <!-- 在本小程序中只实现了微信登录 -->
+        <view class="wechatLogin">
+            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
+                <text class="icon-github"></text>
+                微信登录
+            </button>
+        </view>
+        <view class="phoneLogin">
+            <button>手机号登录</button>
+        </view>
+    </view>
+</block>
+<!-- 已经登录显示界面 -->
+<block wx:else>
+    <view class="body" style="height:{{phoneHeight}}px">
+        <!-- 头像昵称签到部分 -->
+        <view class="topBar">
+            <!-- 头像昵称 -->
+            <view class="userImg">
+                <view class="avatar_nickname">
+                    <view class="avatar">
+                        <image class="avatarImg" src="{{avatarUrl}}"></image>
+                    </view>
+                    <view class="nickname">
+                        <text class="#">{{nickName}}</text>
+                        <!-- vip勋章 -->
+                        <text class="icon-vip" style="margin-left:30rpx"></text>
+                    </view>
+                </view>
+                <view class="kefu">
+                    <text class="icon-service"></text>
+                    客服服务
+                </view>
+            </view>
+            <!-- 签到 -->
+            <view class="qiandao">
+                <view class="qianText">
+                    <text class="icon-calendar text-gray"></text>
+                    签到
+                </view>
+                <view class="icon_">
+                    <text class="icon-right text-gray"></text>
+                </view>
+            </view>
+        </view>
+        <!-- 选项卡部分 -->
+        <view class="chioce">
+            <!-- 选项卡item -->
+            <view class="choiceItem">
+                <view class="">
+                    <text class="icon-time text-gray"></text>
+                    定时关闭
+                </view>
+                <text class="icon-right text-gray"></text>
+            </view>
+            <view class="choiceItem">
+                <view class="">
+                    <text class="icon-creative text-gray"></text>
+                    夜间模式
+                </view>
+                <text class="icon-right text-gray"></text>
+            </view>
+            <view class="choiceItem">
+                <view class="">
+                    <text class="icon-post text-gray"></text>
+                    意见反馈
+                </view>
+                <text class="icon-right text-gray"></text>
+            </view>
+            <view class="choiceItem">
+                <view class="">
+                    <text class="icon-order text-gray"></text>
+                    切换账号
+                </view>
+                <text class="icon-right text-gray"></text>
+            </view>
+        </view>
+    </view>
+</block>

pages/user/user.wxss

@@ -1 +1,74 @@
-/* pages/user/user.wxss */
+/* pages/user/user.wxss */
+.body{
+    background-color: #ece6e6;
+}
+.topBar{
+    width: 100%;
+    height: 270rpx;
+    background-color: #fff;
+}
+.userImg{
+    width: 95%;
+    height: 200rpx;
+    margin: 0rpx auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    
+}
+.avatar_nickname{
+    width: 70%;
+    height: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+.avatar{
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+}
+.avatarImg{
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+}
+.nickname{
+    margin-left: 20rpx;
+}
+.qiandao{
+    width: 90%;
+    height: 70rpx;
+    padding: 0rpx 30rpx;
+}
+.qianText{
+    float: left;
+}
+.icon_{
+    float: right;
+}
+.kefu{
+    width: 160rpx;
+    height: 50rpx;
+    font-size: 25rpx;
+    border-radius: 25rpx;
+    outline: none;
+    text-align: center;
+    line-height: 50rpx;
+    background-color: bisque;
+}
+
+/* 选项卡 */
+.chioce{
+    width: 100%;
+    height: auto;
+    background-color: #fff;
+    margin-top:15rpx; 
+}
+.choiceItem{
+    display: flex;
+    width: 90%;
+    height: 60rpx;
+    padding: 20rpx 30rpx;
+    justify-content: space-between;
+}