微信小程序登录页面

wxml

<view class="container" style="">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}" class="getloginwrapper">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" class="getlogin"> 授权登录 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="getlogin"> 授权登录 </button>
    </block>
    <block wx:else class="userwrapper">
      <view class="userinfowrapper">
        <image bindtap="bindViewTap" class="userinfo-avatar1" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <view class="userinfobody">
        <image bindtap="bindViewTap" class="userinfo-avatar2" src="{{userInfo.avatarUrl}}" mode="cover"></image>
         <view class="userinfo-nickname">{{userInfo.nickName}}</view>
      </view>
      </view>

    </block>
  </view>
<view  wx:if="{{imageshow}}" 
  class="textinfo">生如蝼蚁，当有鸿鹄之志，命如薄纸，却又不屈之心，大丈夫生于天地间，岂能郁郁久居人下，乾坤未定，你我皆是黑马，东山再起，众生皆为英雄！</view>
</view>
<view  wx:if="{{imageshow}}" class="outlogin" bindtap="outlogin">
退出登录
</view>
<!-- body开始 -->

js

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
    imageshow:false
  },
  onLoad() {
    wx.setStorageSync('hasUserInfo', this.data.hasUserInfo)
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res);
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true,
          imageshow:true
        })
        wx.setStorageSync('hasUserInfo', this.data.hasUserInfo)
      }
    })
  },
  getUserInfo(e) {
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
// 退出登录
outlogin(){
  this.setData({
    userInfo:{},
    hasUserInfo: false,
    imageshow:false
  }),
  wx.reLaunch({
    url: '../my/index',
       })
}
})

wxss

page {
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp205053689.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636454993&t=af2eef27a5acef0849da517329422810);
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
}
.userinfowrapper {
  position: relative;
}
.userinfowrapper .userinfo-avatar1 {
  height: 50vh;
  background-color: black;
}
.userwrapper {
  height: 45vh;
  overflow: hidden;
}
.userinfobody {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30%;
  text-align: center;
}
.userinfobody .userinfo-avatar2 {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.userinfobody .userinfo-nickname {
  color: black;
  margin-top: 40rpx;
  font-size: 40rpx;
}
button {
  background-color: #367a7a;
  margin-top: 500rpx;
}
.textinfo{
  position: relative;
  top: 150rpx;
  text-indent: 2em;
  color: white;
}
.outlogin{
  color: red;
  position: relative;
  text-align: center;
  font-size: 50rpx;
  top: 200rpx;
}