drt/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="../../static/img/logo.png" mode=" aspectFit"></image>
			<!-- 获取头像登录 -->
			<!-- <button class="userInfo" type="warn" @click="isclick?'':userInfoData()" :class="{'nocaction': isclick}">
				<text class="iconfont iconweixin"></text>
				<text>
				微信授权登录
				</text>
			</button> -->
			<!-- 获取手机号登录 -->
			<template v-if="!hasphone">
				<button class="userInfo" type="warn" :class="{ nocaction: isclick }" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">
					<!-- <text class="iconfont iconweixin"></text> -->
					<text>手机号快捷登录</text>
				</button>
			</template>
			<template v-if="hasphone">
				<button class="userInfo" type="warn" :class="{ nocaction: isclick }"
					@click="isclick ? '' : userInfoData()">
					<!-- <text class="iconfont iconweixin"></text> -->
					<text>手机号快捷登录</text>
				</button>
			</template>

			<!-- 550*450 -->
			<uni-popup ref="popupsq" type="center">
				<view class="popupsq-wrap">
					<view class=""
						style="text-align: center;font-size: 32rpx;font-weight: bold;padding: 40rpx 0;color: #000;">滇润堂
					</view>
					<view class="" style="font-size: 26rpx;padding-bottom: 35rpx;color: #000;">该程序获取以下授权:</view>
					<view class="" style="font-size: 26rpx;color:#b7b7b7;">获取您的公开信息（昵称，头像），以便于个性话头像和昵称</view>
					<view class="flex" style="padding-top: 40rpx;">
						<view class="btn qx" style="" @click="close()">取消</view>
						<view class="btn qr" style="" @click="isclick ? '' : userInfoData()">确认授权</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	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 {
				userInfo: {}, //授权用户信息
				code: '', //授权code
				isclick: false, //是否点击了
				iv1: '',
				encryptedData1: '',
				hasphone: false,
				spid: ''
			};
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			// ...mapState(['baseURL','urlFile'])
		},
		methods: {
			// ...mapMutations(['login', 'setUserInfo']),
			...mapMutations('user', ['login', 'setUserInfo']),
			close() {
				this.$refs.popupsq.close();
			},
			getPhoneNumber(e) {
				let obj = this;
				console.log(e, 'e+++++++++++++++');
				// 用户同意授权
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					console.log('chenggong++++++++++++++');
					obj.hasphone = true;
					obj.iv1 = e.detail.iv;
					obj.encryptedData1 = e.detail.encryptedData;
					obj.$refs.popupsq.open();
				} else {
					obj.isclick = false;
					uni.showToast({
						title: '您拒绝了请求,不能正常使用小程序',
						icon: 'error',
						duration: 2000
					});
					return;
				}
			},
			loadData() {
				let obj = this;
				// #ifdef H5
				loginWinxin();
				// #endif
				// #ifdef MP-WEIXIN
				loginWinxinMp().then(e => {
					console.log(e, 'ddddddddddddddddddddddd');
					// obj.code = e.code
					wx.login({
						success(e) {
							console.log(e, 'loginWinxinMp');
							obj.code = e.code;
							console.log(obj.code, 'wxlogin.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,
						iv1: obj.iv1,
						encryptedData1: obj.encryptedData1,
						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 => {
						uni.showModal({
							title: '授权失败',
							content: '未能授权成功请重新授权',
							cancelText: '查看报错',
							confirmText: '确定',
							success: res => {
								if (res.cancel) {
									uni.showModal({
										title: '',
										content: JSON.stringify(err),
										showCancel: false,
										confirmText: '关闭',
									});
								}
							},
							fail: () => {},
							complete: () => {}
						});
						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);
					obj.go();
					// if (e.data.nickname == '微信用户') {
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '您暂未设置用户名，头像。是否前往设置',
					// 		success: function(res) {
					// 			if (res.confirm) {
					// 				uni.navigateTo({
					// 					url: '/pages/set/userinfo'
					// 				});
					// 			} else if (res.cancel) {
					// 				logout({})
					// 					.then(e => {
					// 						obj.logout();
					// 					})
					// 					.catch(e => {
					// 						console.log(e);
					// 					});
					// 				obj.go();
					// 			}
					// 		}
					// 	});
					// } else {
					// 	obj.go();
					// }
				});
			},
			go() {
				// 保存返回用户数据
				let ur = uni.getStorageSync('present') || '/pages/index/index';
				// 用于处理缓存bug
				if (ur == 'pages/shop/product') {
					ur = '/pages/index/index';
				}
				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;
	}

	.popupsq-wrap {
		width: 550rpx;
		height: 450rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.btn {
			width: 240rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			border-radius: 45rpx;
			font-weight: bold;
		}

		.qx {
			color: #000;
			border: #f0f0f0 1px solid;
		}

		.qr {
			color: #fff;
			background-color: $base-color;
		}
	}
</style>