接上，完整版的登录框代码

看效果：

完整版的登录框代码

wxml :

<view class="indexContainer" wx:if="{{isLogin}}">
  <image class="avatar" src="{{avatarUrl}}"></image>
  <view>{{nickname}}</view>  
  <button class="btn_quit" bind:tap="goQuit">退出登录</button>
</view>
<button bind:tap="goLogin" wx:else>去登录</button>

<view class="pop_root" hidden="{{isHidden}}">
  <view class="pop_content">
    <view class="pop_title">授权登录弹窗</view>
    <button class="pop_avatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      <image class="pop_img" src="{{avatarUrl}}" wx:if="{{avatarUrl}}"></image>
      <view wx:else>获取头像</view>
    </button>
    <input class="pop_nickname" value="{{nickname}}" type="nickname" bindinput="getName" style="border:1px solid grey;" placeholder="获取昵称"/>
    <view class="pop_bottom">
      <view class="pop_btn" bind:tap="btn_cancle">取消</view>
      <view class="pop_btn pop_login_btn" bind:tap="btn_confirm">确认</view>
    </view>
  </view>
</view>

wxss:

page{
  display: flex;
  align-items: center;
  justify-content: center;
}

.indexContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-wrapper {
  width: 300rpx;
  height: 300rpx;
  margin-top: 30rpx;
  padding: 0;
  border: none;
  background-color: transparent;
  border-radius: 50%;
}

.avatar{
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  margin: 30rpx 0;
}

.btn_quit{
  margin: 30rpx 0;
}
.getName{
  margin-top: 30rpx;
}

.pop_root{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0,0.6)
}

.pop_content{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 30rpx 30rpx 0 0;
}

.pop_title{
  font-size: 48rpx;
  margin-top: 30rpx;
}

.pop_avatar{
  width: 250rpx;
  height: 250rpx;
  border-radius: 50%;
  background: gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30rpx;
  padding: 0;
}

.pop_nickname{
  width: 300rpx;
  border-radius: 25rpx;
  padding-left: 160rpx;
  margin-bottom: 50rpx;
}

.pop_bottom{
  display: flex;
  margin-bottom: 50rpx;
}

.pop_btn{
  width: 150rpx;
  border: 1px solid gray;
  border-radius: 20rpx;
  text-align: center;
  color: gray;
}

.pop_login_btn{
  margin-left: 90rpx;
  background: green;
  color: white;
}

.pop_img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

js:

// pages/index/index.js

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl:defaultAvatarUrl,
    nickname:'',
    isLogin:false,
    isHidden:true,
  },

  onChooseAvatar(e){
    console.log(e);
    const { avatarUrl } = e.detail;
    this.setData({
      avatarUrl,
    })
  },

  getName(e) {
    console.log(e);
    const {
      value
    } = e.detail;
    this.setData({
      nickname: value
    })
  },
  goLogin(){
    this.setData({
      isHidden:false,
      avatarUrl:'',
      nickname:''
    })
  },
  btn_cancle(){
    this.setData({
      isHidden:true,
      isLogin:false,
      avatarUrl:'',
      nickname:''
    })
  },
  btn_confirm(){
    const { avatarUrl,nickname } = this.data;
    if(!avatarUrl){
      wx.showToast({
        icon:'error',
        title: '请获取头像',
      })
      return
    }
    if(!nickname){
      wx.showToast({
        icon:'error',
        title: '请获取昵称',
      })
      return
    }
    this.setData({
      isHidden:true,
      isLogin:true,
    })
  },
  goQuit(){
    this.setData({
      isHidden:true,
      isLogin:false,
      avatarUrl:'',
      nickname:''
    })
  }

})

要实现的话也琢磨一下代码吧