xingmingyi_applet/pages/login/login.vue

<template>
	<view class="login">
		<view>
			<view>
				<view class="header">
					<image src="/static/img/tabbar/logo.jpg"></image>
					<text>郑州新明一中学生资料库</text>
				</view>
				<view class="content">
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(手机号，昵称，头像等)</text>
				</view>

				<!-- <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">
		                    授权登录
		                </button> -->
				<u-button v-if="!show" class="bottom" type="success" open-type="getUserInfo" @click="getUserProfile">授权登录</u-button>
				<u-button v-if="show" class="bottom" type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号绑定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
// import store from '@/store/index.js'
export default {
	data() {
		return {
			// SessionKey: '',
			// OpenId: '',
			// nickName: null,
			// avatarUrl: null,
			userInfo: {},
			// 手机号授权
			show: false,
			info: {}
		};
	},
	onLoad() {},
	onShow() {},
	computed: {},
	methods: {
		getPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				this.$api.toast('您已拒绝提供手机号');
			} else {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: res2 => {
						// console.log(this.userInfo)
						let params = {
							token: that.info.token,
							code: res2.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						};
						that.$api.request('user/bindPhone', params).then(res => {
							console.log("手机号登录授权",res);
							if (res.code == 200) {
								that.$api.toast('手机号绑定成功!');
								uni.setStorageSync('us_token', res.data.token);
								this.$store.dispatch('getUserInfo');
								uni.reLaunch({
									url: '/pages/index/index'
								});
							} else {
								that.$api.toast(res.msg);
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: '微信登录授权失败',
							icon: 'none'
						});
					}
				});
			}
		},

		// 获取用户信息
		getUserProfile() {
			let that = this;
			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					console.log(res);
					// 用户信息
					that.userInfo = res.userInfo;
					// 获取code
					uni.login({
						provider: 'weixin',
						success: res2 => {
							that.$api
								.request('login/toLogin', {
									code: res2.code,
									avatar: that.userInfo.avatarUrl,
									nickname: that.userInfo.nickName,
									yqm: uni.getStorageSync('yqm')||'',
								})
								.then(res3 => {
									console.log("单纯授权",res3);
									//是否绑定手机号: 0= 否  1=是
									if (res3.data.is_bind_phone == 0) {
										that.$api.toast('请绑定手机号');
										that.show = true;
										that.info = res3.data;
									} else {
										uni.setStorageSync('us_token', res3.data.token);
										uni.reLaunch({
											url: '/pages/index/index'
										});
										this.$store.dispatch('getUserInfo');
									}
								});
						},
						fail: () => {
							uni.showToast({
								title: '微信登录授权失败',
								icon: 'none'
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	margin: 90rpx 0 90rpx 50rpx;
	border-bottom: 2rpx solid #ccc;
	text-align: center;
	width: 650rpx;
	height: 300rpx;
	// line-height: 450rpx;
}

.header image {
	width: 200rpx;
	height: 200rpx;
	margin: 0 auto;
}

.header text{
	margin-top: 25rpx;
}


.content {
	margin-left: 50rpx;
	margin-bottom: 90rpx;
}

.content text {
	display: block;
	color: #9d9d9d;
	margin-top: 40rpx;
}

.bottom {
	border-radius: 80rpx;
	margin: 70rpx 50rpx;
	font-size: 35rpx;
}
</style>