Signin.vue

<template>
	<uni-popup ref="Signincenter" type="bottom">
		<view class='dialog-container'>
			<!-- 遮罩 -->
			<view
				style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; z-index: 998; background: #131319;">
			</view>
			<view
				style="width: 100%; height: 440upx; background: #eeeeee; overflow: hidden; position: relative; z-index: 999; ">
				<view @click="cose()" style="position: absolute; top: 0; right: 0;">
					<image style="height: 30upx; width: 30upx; margin: 20upx;" src="../../static/icon_guanbi.png"
						mode=""></image>
				</view>
				<image src="../../static/logo.jpg" mode="aspectFill"
					 style="width: 109upx; height: 98upx; display: block; margin: 36upx auto 25upx;"></image>
				<view style="text-align: center; font-size: 32upx; font-weight: 500; color: #131319;">
					欢迎来到{{startText}}小程序 </view>
				<view style="margin-top: 10upx; text-align: center; font-size: 24upx; font-weight: 500; color: #888888;">
					为了更好的服务，需要得到您的授权 </view>
				<!-- 小程序登录、用户信息相关接口调整 -->
				<button class="buttonGetUserInfo cssbut" hover-class="hover-class-bg" v-if="canIUseGetUserProfile"
					@tap="getUserProfile"> 获取头像昵称 </button>
				<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" lang="zh_CN"
					class="buttonGetUserInfo cssbut" hover-class="hover-class-bg"> 获取头像昵称 </button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import userService from '@/service/UserService';
	import uniPopup from './common/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		computed: {
			startText() {
				return this.$Env.getmalltext()
			},
		},
		data() {
			return {
				canIUseGetUserProfile: false,
			};
		},
		methods: {
			cose() {
				this.$refs['Signincenter'].close()
				// this.$emit('ok', true);
			},
			init() {
				this.$nextTick(() => {
					this.$refs['Signincenter'].open()
				})
				if (wx.getUserProfile) {
					this.canIUseGetUserProfile = true
				}
			},
			getUserProfile(e) {
				uni.getSetting({
					success(res) {
						console.log('获取用户信息是否用户同意')
						console.log(res.authSetting)
					}
				})
				let that = this;
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (Userres) => {
						//console.log('getUserInfo 获取头像昵称')
						//console.log(Userres)
						that.$base.Userres = Userres
						uni.showLoading({
							title: '正在登录中...',
							mask: true
						});
						uni.login({
							provider: 'weixin',
							success: (weixinres) => {
								console.log('uni.login')
								console.log(weixinres)
								if (weixinres.code) {
									that.loginInfo = Userres.userInfo;
									that.loginInfo.encryptedData = Userres.encryptedData;
									that.loginInfo.iv = Userres.iv;
									that.loginInfo.code = weixinres.code;
									userService.setWxInfo(that.loginInfo);
									userService.cacheWxInfo(that.loginInfo);
									 userService.login({
										s: 'Init.init',
										code: that.loginInfo.code,
										nickname: that.loginInfo.nickName || '微信用户',
										gender: that.loginInfo.gender,
										portrait: that.loginInfo.avatarUrl,
										encryptedData: that.loginInfo.encryptedData,
										iv: that.loginInfo.iv,
										promoter_id: that.$base.promoter_id, // 推广的员的编号
										machine_id: that.$base.machine_id, //用户进入设备id
										appcode: that.$Env.getappcode()
									}).then(result => {
										uni.hideLoading();
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										});
										that.$refs['Signincenter'].close()
									}).catch(err => {
										uni.hideLoading();
										if (err) {
											uni.showToast({
												title: err.msg,
												icon: 'none'
											});
										}
									})
								} else {
									uni.hideLoading();
									//console.log('登录失败！' + res.errMsg)
									uni.showToast({
										title: '登录失败！',
										icon: 'none'
									});
								}
							},
							fail: (err) => {
								uni.hideLoading();
								//console.error('uni.login授权登录失败：' + JSON.stringify(err));
								uni.showToast({
									title: '授权登录失败',
									icon: 'none'
								});
							}
						})
					},
					fail(err) {
						uni.hideLoading();
						console.log("wx.getUserProfile获取用户信息失败", err)
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				})
			},
			getUserInfo(e) {
				let that = this;
				// 已经授权，可以直接调用 getUserInfo 获取头像昵称
				uni.getUserInfo({
					success(Userres) {
						console.log('getUserInfo 获取头像昵称')
						console.log(Userres)
						that.$base.Userres = Userres
						uni.showLoading({
							title: '正在登录中...',
							mask: true
						});
						uni.login({
							provider: 'weixin',
							success: (weixinres) => {
								console.log('uni.login')
								console.log(weixinres)
								if (weixinres.code) {
									that.loginInfo = Userres.userInfo;
									that.loginInfo.encryptedData = Userres.encryptedData;
									that.loginInfo.iv = Userres.iv;
									that.loginInfo.code = weixinres.code;
									userService.setWxInfo(that.loginInfo);
									userService.cacheWxInfo(that.loginInfo);
									userService.login({
										s: 'Init.init',
										code: that.loginInfo.code,
										nickname: that.loginInfo.nickName,
										gender: that.loginInfo.gender,
										portrait: that.loginInfo.avatarUrl,
										encryptedData: that.loginInfo.encryptedData,
										iv: that.loginInfo.iv,
										promoter_id: that.$base.promoter_id, // 推广的员的编号
										machine_id: that.$base.machine_id, //用户进入设备id
										appcode: that.$Env.getappcode()
									}).then(result => {
										uni.hideLoading();
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										});
										// that.$emit('ok', true);
										that.$refs['Signincenter'].close()
									}).catch(err => {
										uni.hideLoading();
										uni.showToast({
											title: err.msg,
											icon: 'none'
										});
									})
								} else {
									uni.hideLoading();
									console.error('uni.login授权登录失败：' + JSON.stringify(err));
									uni.showToast({
										title: '授权登录失败',
										icon: 'none'
									});
								}
							},
							fail: (err) => {
								uni.hideLoading();
								console.error('授权登录失败：' + JSON.stringify(err));
								uni.showToast({
									title: '授权登录失败',
									icon: 'none'
								});
							}
						})
					},
					fail(err) {
						uni.hideLoading();
						console.log("wx.getUserProfile获取用户信息失败", err)
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				})

			},
			// 打开权限设置页提示框
			showSettingToast(e) {
				const that = this
				wx.showModal({
					title: '温馨提示',
					content: '为了更好体验小程序,请开启微信授权',
					confirmText: '去设置',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							// /打开授权设置
							uni.openSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) {
										that.getUserInfo(e)
									} else {
										that.showSettingToast(e)
									}
								},
								fail(err) {
									console.log(err)
								}
							})
						}
					}
				})
			},
			onLoad() {},
		}
	}
</script>

<style lang="scss">
	@import "./css/main.css";

	/* 去除button默认样式 */
	.cssbut {
		background-color: transparent !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: inherit !important;
		border-radius: 0 !important;
	}

	.cssbut::after {
		border: none !important;
	}

	/* 弹框 */
	.dialog-container {
		width: 100%;
		height: 100%;
	}

	.buttonGetUserInfo {
		text-align: center !important;
		margin: 49upx auto 0 !important;
		line-height: 70upx !important;
		width: 400upx !important;
		height: 70upx !important;
		background: #F56364 !important;
		border-radius: 35upx !important;
		border: 0 !important;
		font-size: 36upx !important;
		font-weight: 400 !important;
		color: #FFFFFF !important;
	}
</style>