第63讲个人中心用户信息动态显示实现

个人中心页面实现

（补充前面的取消按钮逻辑）

个人中心用户信息动态显示实现

index.wxml

<view class="user_info">
  <!-- 用户背景信息开始 -->
  <view class="user_info_bg">
    <view class="user_info_wrap">
      <image class="user_icon" src="{{userInfo.avatarUrl}}"></image>
      <view class="user_name">{{userInfo.nickName}}</view>
    </view>
  </view>
  <!-- 用户背景信息结束 -->

  <!-- 用户操作菜单开始 -->
  <view class="user_menu">
  </view>
  <!-- 用户操作菜单结束 -->



</view>

index.less

page{
  background-color: #F6F6F4;
}

.user_info{
  .user_info_bg{
    position: relative;
    height: 40vh;
    background-color: var(--themeColor);
    .user_info_wrap{
      position: relative;
      top: 30%;
      text-align: center;
      .user_icon{
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }
      .user_name{
        color: #fff;
      }
    }
  }
}

index.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 判断缓存中是否有token
    const token=wx.getStorageSync('token');
    if(!token){
      wx.showModal({
        title:'友情提示',
        content:'微信授权登录后，才可进入个人中心',
        success:(res)=>{
          Promise.all([getWxLogin(),getUserProfile()]).then((res)=>{
            console.log(res[0].code)
            console.log(res[1].userInfo.nickName,res[1].userInfo.avatarUrl)
            let loginParam={
              code:res[0].code,
              nickName:res[1].userInfo.nickName,
              avatarUrl:res[1].userInfo.avatarUrl
            }
            console.log(loginParam)
            // 把用户信息放到缓存中
            wx.setStorageSync('userInfo', res[1].userInfo);
            this.wxlogin(loginParam);
            this.setData({
              userInfo:res[1].userInfo
            })
          })
        }
      })
    }else{
      console.log("token存在"+token);
      const userInfo=wx.getStorageSync('userInfo');
      this.setData({
        userInfo
      })
    }
  },

      /**
   * 请求后端获取用户token
   * @param {} loginParam 
   */
  async wxlogin(loginParam){
    // 发送请求 获取用户的token
    const result=await requestUtil({url:"/user/wxlogin",data:loginParam,method:"post"});
    let token=result.token;
    if(result.code==0){
      // 存储token到缓存
      wx.setStorageSync('token', token);
    
    }
  },