效果截图：

WXML代码：

<view bindtap="authorLogo">立即登录</view>

<view class="author-modal" hidden="{{authorModal}}">
    <!-- 授权登录 -->
    <view wx:if="{{canIUse}}" >
        <view class="author-header">
            <image src="/resources/img/wechat.png"></image>
        </view>
        <view class="author-content">
            <view>***申请获取以下权限：</view>
            <text>获得你的公开信息(昵称，头像等)</text>
            <text>获得你的位置信息(当前位置)</text>
        </view>
        <button class="author-bottom btn-platform" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授权登录
        </button>
        <button class="author-bottom btn-dufault" bindtap="notAuthorized">暂不授权</button>
    </view>
    <view wx:else>请升级微信版本</view>
  </view>

WXSS代码：

.author-modal{
  position: fixed;
  top: 0rpx;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 1);
}

.author-header {
  margin: 0rpx auto 50rpx auto;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 95%;
  height: 300rpx;
  line-height: 450rpx;
}
 
.author-header image {
  width: 200rpx;
  height: 200rpx;
}
 
.author-content {
  width: 80%;
  margin: 0rpx auto 30rpx auto;
}

.author-content view{
  margin: 0rpx 0rpx 20rpx 0rpx;
}

.author-content text {
  display: block;
  color: #9d9d9d;
  line-height: 56rpx;
}
 
.author-bottom {
  width: 80%;
  font-size: 35rpx;
  margin: 0rpx auto 20rpx auto;
}

JS代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    authorModal: true
  },

  /**
   * 立即登录
   */
  authorLogo: function() {
    let that = this;
    that.setData({
      authorModal: false
    });
  },

  /**
   * 授权登录
   */
  bindGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      var that = this;
      that.getUserInfo();
    } else {
      wx.redirectTo({
        url: '../pageIndex/index'
      });
    }
  },

  /**
   * 暂不授权
   */
  notAuthorized: function() {
    let that = this;
    that.setData({
      authorModal: true
    });
  },

  /**
   * 获取用户信息
   */
  getUserInfo: function() {
    let that = this;
    // 获取用户信息
    wx.getUserInfo({
      success: function(res) {
        wx.login({
          success: res => {
            let userCode = res.code; // 用户code
            // 其他函数
            // ..... 根据code获取用户详细信息
            that.setData({
              authorModal: true
            });
          }
        });
      }
    });
  },

})