duck/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://zhibo.liuniu946.com/img/logo001.png" mode="aspectFit"></image>
			<button class="userInfo" type="warn" @click="getUserProfile">
				<text class="iconfont iconweixin"></text>
				<text @click="clickSq">微信授权登录</text>
			</button>
		</view>
		<!-- #endif -->
		<view class="Mask" v-show="MaskShow">
			<view class="Mask-box">
				<view class="title">申请获取您的手机号</view>
				<view class="text">为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权</view>
				<view class="btn_box">
					<button class="weixin" @click="ToIndex()">取消</button>
					<button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">手机号授权</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// #ifdef H5
import { loginWinxin } from '@/utils/wxAuthorized';
// #endif
// #ifdef MP-WEIXIN
import { loginWinxinMp } from '@/utils/wxMinProgram';
import { wechatMpAuth } from '@/api/wx';
// #endif
import { logout } from '@/api/set.js';
import { mapMutations, mapState } from 'vuex';
import { getUserInfo, bangding } from '@/api/login.js';
export default {
	data() {
		return {
			userInfo: {}, //授权用户信息
			code: '', //授权code
			loding: false, //判断是否在点击中
			MaskShow: false // 手机号授权弹窗
		};
	},
	onLoad(option) {
		this.loadData();

	},
	computed: {
		...mapState(['baseURL', 'urlFile'])
	},
	methods: {
		...mapMutations(['login', 'setUserInfo']),
		clickSq() {
			console.log('授权');
		},
		loadData() {
			// #ifdef H5
			loginWinxin();
			// #endif
			// #ifdef MP
			loginWinxinMp();
			// #endif
		},
		// #ifndef H5
		// 用户确认授权
		getUserProfile(e) {
			const that = this;
			// #ifdef MP-WEIXIN
			if (!this.loding) {
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: res => {
						that.userInfo = res;
						if(!!res.iv){
							that.loadMp(res);
						}else{
							uni.showModal({
								title: '问题',
								content: '您的微信版本过低请升级微信',
								showCancel: false,
							});
						}
						
					},
					fail: err => {
						console.log('getUserProfile出错', err);
					}
				});
			}
			// #endif
		},
		// #endif
		// #ifdef MP-WEIXIN
		loadMp(user) {
			let obj = this;
			obj.loding = true;
			// 获取推广人id
			let spread_spid = uni.getStorageSync('spread') || '';
			let spread_code = uni.getStorageSync('spread_code') || '';
			uni.showLoading({
				title: '授权中',
				mask: true
			});
			wx.login({
				success(e) {
					console.log('wx.login',user)
					let pushData = {
						code: e.code,
						iv: user.iv,
						encryptedData: user.encryptedData,
						spread_spid: spread_spid,
						spread_code: spread_code
					};
					wechatMpAuth(pushData)
						.then(({ data }) => {
							obj.loding = false;
							obj.wchatAuth(data);
							console.log(data);
						})
						.catch(e => {
							obj.loding = false;
						});
				},
				fill: function(e) {
					obj.loding = false;
					console.log(e);
				}
			});
		},
		wchatAuth(data) {
			let obj = this;
			// 保存token
			uni.setStorageSync('token', data.token);
			// 获取用户基础信息
			getUserInfo({})
				.then(e => {
					console.log('--获取用户基础信息getUserInfo--', e);
					uni.hideLoading();
					obj.login();
					// 保存返回用户数据
					obj.setUserInfo(e.data);
					obj.ToIndex();
				})
				.catch(e => {
					uni.hideLoading();
				});
		},
		// #endif
		// #ifdef MP-WEIXIN
		// loadMp(option) {
		// 	let obj = this;
		// 	obj.loding = true;
		// 	// 获取登录授权页数据
		// 	let user = obj.userInfo;
		// 	// 获取推广人id
		// 	let spread_spid = uni.getStorageSync('spread') || '';
		// 	// uni.showLoading({
		// 	// 	title: '授权中',
		// 	// 	mask: true
		// 	// });
		// 	loginWinxinMp().then(e => {
		// 		this.code = e.code;
		// 		wechatMpAuth({
		// 				code: this.code,
		// 				iv: user.target.iv,
		// 				encryptedData: user.target.encryptedData,
		// 				spread_spid: spread_spid
		// 			})
		// 			.then(({
		// 				data
		// 			}) => {
		// 				uni.showModal({
		// 					title: '用户确认授权wechatMpAuth',
		// 					content: JSON.stringify(data)
		// 				})
		// 				obj.login();
		// 				obj.loding = false;
		// 				obj.wchatAuth(data);
		// 				uni.hideLoading();
		// 			})
		// 			.catch(e => {
		// 				uni.showModal({
		// 					title: '用户确认授权wechatMpAuth失败',
		// 					content: JSON.stringify(e)
		// 				})
		// 				obj.loding = false;
		// 				uni.hideLoading();
		// 			});
		// 	});
		// },
		// wchatAuth(data) {
		// 	let obj = this;
		// 	
		// 	// 保存token
		// 	uni.setStorageSync('token', data.token);
		// 	// 获取用户基础信息
		// 	getUserInfo({})
		// 		.then(e => {
		// 			uni.showModal({
		// 				title:'获取用户基础信息',
		// 				content:JSON.stringify(e)
		// 			})
		// 			uni.hideLoading();
		// 			obj.login();
		// 			// 保存返回用户数据
		// 			obj.setUserInfo(e.data);
		// 			if (e.data.status == 0) {
		// 				uni.showModal({
		// 					title: '提示',
		// 					content: '您的账号存在异常，暂时无法登陆',
		// 					showCancel: true,
		// 					success() {
		// 						obj.toLogout();
		// 					}
		// 				})
		// 			} else {
		// 				obj.ToIndex();
		// 			}
		// 			// obj.ToIndex();
		// 			// if (e.data.phone == null || !e.data.phone ) {
		// 			// 	obj.MaskShow = true;
		// 			// } else {
		// 			// 	obj.ToIndex();
		// 			// }
		// 		})
		// 		.catch(e => {
		// 			uni.hideLoading();
		// 		});
		// },
		// #endif
		toLogout() {
			logout({})
				.then(e => {
					uni.navigateBack();
				})
				.catch(e => {
					console.log(e);
				});
		},
		ToIndex() {
			let obj = this;
			let ur = uni.getStorageSync('present') || '/pages/index/index';
			console.log('---登录跳转---', ur);
			// 用于处理缓存bug
			if (ur == 'pages/product/product') {
				ur = '/pages/index/index';
			}
			
			uni.switchTab({
				url: ur,
				fail(e) {
					uni.navigateTo({
						url: ur,
						fail(e) {
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}
					});
				}
			});
		},
		// 绑定手机号
		PhoneNumber(e) {
			let obj = this;
			obj.MaskShow = false;
			(obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);

			uni.setStorageSync('code', obj.code);
			bangding({
				flag: 1,
				cache_key: obj.cache_key,
				code: obj.code,
				iv: obj.iv,
				encryptedData: obj.encryptedData
			}).then(function(e) {
				if (e.data.is_bind == 1) {
					console.log('bangding1');
					bangding({
						flag: 1,
						cache_key: obj.cache_key,
						code: obj.code,
						iv: obj.iv,
						encryptedData: obj.encryptedData,
						step: 1
					})
						.then(function(e) {
							// 获取用户基础信息
							obj.GetUser();
							obj.$api.msg(e.msg);
							obj.$nextTick(function() {
								obj.ToIndex();
							});
						})
						.catch(e => {
							console.log(e);
						});
				} else {
					console.log('bangding2');
					obj.$api.msg(e.msg);
					// 获取用户基础信息
					obj.GetUser();
					obj.$api.msg(e.msg);
					obj.$nextTick(function() {
						obj.ToIndex();
					});
				}
			});
		},
		GetUser() {
			// 获取用户基础信息
			getUserInfo({})
				.then(({ data }) => {
					this.setUserInfo(data);
					console.log(data, 11);
					console.log(uni.getStorageSync('userInfo'), 55);
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

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

.Mask {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(51, 51, 51, 0.7);

	.Mask-box {
		margin: auto;
		margin-top: 320rpx;
		padding: 50rpx 30rpx;
		width: 90%;
		height: 450rpx;
		top: 500rpx;
		left: 10%;
		background-color: #ffffff;
		border-radius: 15rpx;

		.title {
			text-align: center;
			font-size: 35rpx;
			font-weight: 700;
		}

		.text {
			font-size: 30rpx;
			color: #848484;
			padding-top: 50rpx;
		}

		.btn_box {
			margin: 70rpx 0 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}

.weixin {
	// background: linear-gradient(90deg, rgba(36, 214, 78, 1), rgba(45, 187, 89, 1));
	background: $base-color;
	width: 40%;
	color: #ffffff;
	border-radius: 50rpx;
	border: none;
	margin: 0 20rpx;
}

.bg-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.logo-img-box{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
}

.logo-img {
	margin-top: 180rpx;
	background-color: pink;
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
}

.userInfo {
	width: 80%;
	margin: 0 100rpx;
	margin-top: 80rpx;
	color: #ffffff;
	border-radius: 99rpx;
	// background-color: $base-color !important;
	background-color: #901b23 !important;
}

</style>