byg/pages/public/wxLogin.vue

<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<!-- <image class="bg-img" :src="baseURL+urlFile+'/img/img09.png'" mode=" scaleToFill"></image> -->
		<view class="logo-img-box">
			<!-- <image class="logo-img" src="https://hongmd.liuniu946.com/static/img/hmdlogo.png" mode=" aspectFit"></image> -->
			<image class="logo-img" src="https://xmyl.qiniu1314.com/static/image/logo.png" mode=" aspectFit"></image>
			<button class="userInfo" type="warn" @click="isclick?'':userInfoData()" :class="{'nocaction': isclick}">
				<!-- <text class="iconfont iconweixin"></text> -->
				<text>
					授权登录
				</text>
			</button>
		</view>
		<!-- #endif -->
		<view class="auth_wrap" :class="isAuth?'show':''">
			<view class="mask"></view>
			<view class="auth_content">
				<view class="auth_top">
					<view class="ptitle">获取您的昵称、头像、手机号</view>
					<view class="txt">获取用户头像、昵称、手机号信息，主要用于完善个人资料，向用户提供更好使用体验</view>
					<view class="close" @tap="closePopup">
						<image src="../../static/user/close_x.png" mode=""></image>
					</view>
				</view>
				<view class="auth_ul">
					<view class="auth_li">
						<view class="tit">头像</view>
						<view class="rit">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</view>
					</view>
					<view class="auth_li">
						<view class="tit">昵称</view>
						<view class="rit">
							<input type="nickname" class="weui-input" placeholder="请输入昵称" @blur="onNickname" />
						</view>
					</view>
				</view>
				<view class="confirm_btn" @tap.stop="editUser">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userEdit,
	} from '@/api/set.js';
	import {
		getUserInfo
	} from '@/api/login.js';
	// #ifdef H5
	import {
		loginWinxin
	} from '@/utils/wxAuthorized';
	// #endif
	// #ifdef MP-WEIXIN
	import {
		loginWinxinMp
	} from '@/utils/wxMinProgram';
	import {
		wechatMpAuth
	} from '@/api/wx';
	// #endif
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isAuth: false, //控制授权弹框显示与隐藏
				avatarUrl: 'https://xmyl.qiniu1314.com/static/image/avt.png', //头像
				nickname: '', //昵称
				isFrist: '', //判断是否是第一次授权
				userInfo: {}, //授权用户信息
				code: '', //授权code
				isclick: false, //是否点击了
			};
		},
		onLoad(option) {
			this.loadData();
			let AlertLogin = uni.getStorageSync('AlertLogin');
			if (AlertLogin) {
				console.log('登录过一次')
				this.isFrist = 2
			} else {
				console.log('首次登录');
				this.isFrist = 1
			}
		},
		computed: {
			// ...mapState(['baseURL','urlFile']) 
		},
		methods: {
			// ...mapMutations(['login', 'setUserInfo']),
			...mapMutations('user', ['login', 'setUserInfo']),
			goSetBase(url) {
				this.backUrl = url;
				this.isAuth = true;
			},
			closePopup() {
				this.isAuth = false;
				let ur = this.backUrl;
				uni.navigateTo({
					url: ur,
					fail() {
						uni.switchTab({
							url: ur,
							fail() {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					}
				})
			},
			editUser() {
				userEdit({
						avatar: this.avatarUrl,
						nickname: this.nickname
					})
					.then(e => {
						this.closePopup()
						console.log(e);
					})
					.catch(e => {
						console.log(e);
					});
			},
			//监听昵称变化
			onNickname(e) {
				this.nickname = e.detail.value;
			},
			onChooseAvatar(e) {
				let _this = this;
				uni.showLoading({
					title: '上传中'
				})
				uni.uploadFile({
					url: _this.$store.state.baseURL + '/api/upload/image', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						"Authori-zation": 'Bearer ' + uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						if ("string" === typeof uploadFileRes.data) {
							_this.avatarUrl = JSON.parse(uploadFileRes.data).data.url
						} else {
							_this.avatarUrl = uploadFileRes.data.data.url

						}
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			loadData() {
				let obj = this;
				// #ifdef H5
				loginWinxin();
				// #endif
				// #ifdef MP-WEIXIN
				loginWinxinMp().then(() => {
					wx.login({
						success(e) {
							console.log(e, 'loginWinxinMp');
							obj.code = e.code;
						},
						fill: function(e) {
							console.log(e)
						}
					})
				});
				// #endif
			},
			// 用户确认授权
			userInfoData() {
				let that = this
				if (that.isclick) {
					return
				}
				that.isclick = true
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: res => {
						console.log(res, 'that.userInfo+++++++++++++++++++')
						that.userInfo = res;
						uni.showLoading({
							title: '授权中',
							mask: true
						});
						that.loadMp();
					},
					fail: err => {
						that.isclick = false
						uni.showToast({
							title: '您拒绝了请求,不能正常使用小程序',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				});
				// this.userInfo = e;
				// console.log(e,'用户确认授权')
				// this.loadMp()

			},
			// #ifdef MP-WEIXIN
			loadMp() {
				let obj = this;
				// 获取登录授权页数据
				let user = obj.userInfo;
				console.log(user)
				// 获取推广人id
				let spread_spid = uni.getStorageSync('spread') || '';
				// #ifdef MP
				let spread_code = uni.getStorageSync('spread_code') || '';
				// #endif

				wechatMpAuth({
					code: obj.code,
					iv: user.iv,
					encryptedData: user.encryptedData,
					spread_spid: spread_spid,
					// #ifdef MP
					spread_code: spread_code,
					// #endif
				}).then(({
					data
				}) => {
					obj.wchatAuth(data);
					console.log(data, 'wechatMpAuth++++++++++++++++++++++++++')

				}).catch(err => {
					// obj.loding = false;
					// uni.hideLoading();
				});
			},
			// #endif
			wchatAuth(data) {
				let obj = this;
				// 保存token
				uni.setStorageSync('token', data.token);
				console.log(data.token, 'token++++++++++++++')
				// 获取用户基础信息
				getUserInfo({}).then(e => {
					console.log('userInfo+++++++++++', e)
					obj.login();
					uni.hideLoading();
					// 保存返回用户数据
					obj.setUserInfo(e.data);
					let ur = uni.getStorageSync('present') || '/pages/index/index';
					// 用于处理缓存bug
					if (ur == 'pages/product/product') {
						ur = '/pages/index/index'
					}
					if (e.data.nickname == '微信用户') {
						obj.goSetBase(ur)
					} else {
						uni.switchTab({
							url: ur,
							fail(e) {
								uni.navigateTo({
									url: ur,
									fail(e) {
										uni.navigateTo({
											url: '/pages/index/index',
										});
									}
								});
							}
						});
					}

				});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		background-color: #fff;
	}

	.bg-img,
	.logo-img-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.logo-img {
		margin-top: 20vh;
		margin-left: 176rpx;
		width: 385rpx;
		height: 394rpx;
	}

	.userInfo {
		margin: 0 100rpx;
		margin-top: 50rpx;
		color: #FFFFFF;
		border-radius: 99rpx;
		background-color: $base-color !important;
	}

	.nocaction {
		background-color: #999;
	}

	.auth_wrap {
		position: fixed;
		width: 100%;
		bottom: -120%;
		transition: all 0.35s linear;

		&.show {
			bottom: 0;
			transition: all 0.35s linear;

			.mask {
				display: block;
			}
		}

		.mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			background: rgba(0, 0, 0, 0.5);
			z-index: 98;
			top: 0;
			display: none;
		}

		.auth_content {
			padding: 32rpx 32rpx 72rpx 32rpx;
			position: relative;
			z-index: 99;
			background: #fff;
			border-radius: 16rpx 16rpx 0 0;

			.auth_top {
				position: relative;

				.ptitle {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
				}

				.txt {
					font-size: 26rpx;
					color: #999;
				}

				.close {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.auth_ul {
				margin-top: 16rpx;

				.auth_li {
					display: flex;
					align-items: center;
					border-top: solid 1px #f5f5f5;
					padding: 24rpx 0;

					&:last-child {
						border-bottom: solid 1px #f5f5f5;
					}

					.tit {
						width: 140rpx;
						font-size: 30rpx;
					}

					.rit {
						width: calc(100% - 140rpx);

						input {
							font-size: 28rpx;
							height: 72rpx;
							width: 100%;
						}

						image {
							width: 54rpx;
							height: 54rpx;
							border-radius: 50%;
						}

						button {
							width: 100%;
							height: 72rpx;
							background: #fff;
							text-align: left;
							padding: 0;

							&:after {
								border: solid 1px #fff;
							}

							// opacity: 0;
						}
					}
				}
			}

			.confirm_btn {
				width: 420rpx;
				margin: 46rpx auto 0 auto;
				background: #39b54a;
				color: #fff;
				border-radius: 8rpx;
				height: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
	}
</style>