效果图

组件代码

<template>
	<view class="content">
		<view class="btn-box">
			<view class="font-text">欢迎浏览碧羽墨轩</view>
			<view class="font-text">请完成微信登录以继续使用</view>
			<button class="follow" open-type="getUserInfo" @getuserinfo="onGetUserInfo" withCredentials="true">
				<view class="_uploads/photos-icon-weixin">
					<_uploads/photos src="/static/weixin.png" class="icon-_uploads/photos"></_uploads/photos>
				</view>
				<view class="login-btn">
					立即登录
				</view>
			</button>
			<view class="font-cencl" @tap="close">取消</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    close () {
      this.$emit('getdata',0)
    },
    onGetUserInfo(event) {
      const userInfo = event.detail.userInfo
      if (userInfo) {
        this.init()
      }
    },
    init(){
      const that = this;
      wx.login({
        success (val) {
	  wx.getSetting({
	    success (res1){
	      wx.getUserInfo({
	        success: function (res){
	          uni.showLoading({  
		    title: '登录中！'  
		  });
	          wx.request({
		    url: "后台处理登录的接口",
		    data: {
		      code:val.code,
		      encryptedData:res.encryptedData,
		      iv:res.iv
		    },
		    method: 'POST',
		    success: function (data) {
		      uni.hideLoading();
		      uni.setStorage({
		        key:"存储登录信息的key",
	                data:"后台返回的登陆信息"
		      })
		      that.$emit('getdata',1)
		    },
		    fail: function () {
		    },
	            complete: function (){
		    }
		  })
	        }
	      })
	     }
          })
        }
      })
     }
   }
}
</script>

<style>
._uploads/photos-icon-weixin{
        width:25px;
	float:left;
	margin-left:25px;
}
.login-btn {
	width:80px;
	float:left;
	line-height: 22px;
	text-align: left;
}
.icon-_uploads/photos {
	width: 25px;
	height: 25px;
}
.font-cencl {
	height: 30px;
	line-height: 30px;
	font-size: 28rpx;
	color: #999;
	text-align: center;
}
.font-text {
	height: 32px;
	line-height: 32px;
	font-size: 30rpx;
	color: #222;
	text-align: center;
}
.follow {
	padding: 10px 10px 0 10px;
	color: white;
	background:  #009ad6;
	border-radius: 25px;
	font-size: 25rpx;
	line-height: 20px;
	width: 150px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.content {
	width: 100vw;
	height: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.btn-box{
	width: 70%;
	height: 180px;
	margin: 0 auto;
	background: white;
	position:absolute; 
	top: 50%;
	left: 50%;
	margin-left: -37%;
	margin-top: -90px;
	border-radius: 10px;
	padding-top: 30px;
}
</style>

调用组件

<login v-if="loginShow" @getdata="getdata"></login>

注意：loginShow声明在data中，判断时候弹出

// 引入文件
import login from '../../components/login.vue'

// 声明使用
export default {
  components: {
    login
  },

// getdata方法

getdata (e) {
  this.loginShow = false
  var that = this;
  if (e === 1) {
    uni.getStorage({
      key:"存储登录信息的key",
      success(e){
        that.loginUser = e.data
      }
    })
  }
}

页面登陆后返回到上一页，更新登录信息

// 点击返回的页面

navigatorBack () {
  let pages = getCurrentPages(); // 当前页面
  let beforePage = pages[pages.length - 2]; // 前一个页面
  uni.navigateBack({
    delta: 1,
    success: function() {
      beforePage.$vm.refreshRequest(); // 执行前一个页面的刷新
    }
  });
}

// 到达返回的页面

refreshRequest () {
  var that = this
  uni.getStorage({
    key:"存储登录信息的key",
    success(e){
      that.loginUser = e.data
    }
  })
}