yqdsh/components/Authorize.vue

<template>
	<view :style="viewColor">
		<view class='Popup' v-if='isShowAuth && code && showsq'>
<!-- 			<view class="logo-auth">
				<image :src='routine_logo' mode="aspectFit"></image>
			</view> -->
			<view class='title'>登录</view>
			<view class='tip'>您未登录，是否马上登录？</view>
			<view class='bottom flex'>
				<view class='item' @click='close'>随便逛逛</view>
				<!-- #ifdef MP -->
				<!-- <button class="item grant" hover-class="none"
					@tap="getUserProfile">登录</button> -->
				<button class="item grant" hover-class="none" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">登录</button>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<button class="item grant"
					@tap="toWecahtAuth">登录</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class='mask' v-if='isShowAuth && code' @click='close'></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class='mask' v-if='isShowAuth && code && showsq' @click='close'></view>
		<!-- #endif -->
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	const app = getApp();
	import Cache from '../utils/cache';
	import {
		getLogo, commonAuth
	} from '../api/public';
	import { LOGO_URL, USER_INFO, EXPIRES_TIME} from '../config/cache';
	import { mapGetters } from 'vuex';
	import Routine from '../libs/routine';
	import { configMap } from '@/utils/index';
	import Auth from '../libs/wechat';
	import { toLogin } from '../libs/login';

	export default {
		name: 'Authorize',
		props: {
			isAuto: {
				type: Boolean,
				default: true
			},
			isGoIndex: {
				type: Boolean,
				default: true
			},
			isShowAuth: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				canUseGetUserProfile: false,
				code: null,
				showsq: true,
				isclick: false,
				iv1: '',
				encryptedData1: '',
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'viewColor']),
			...configMap(['routine_logo'])
		},
		watch: {
			isLogin(n) {
				n === true && this.$emit('onLoadFun', this.userInfo);
			},
			isShowAuth(n) {
				this.getCode(this.isShowAuth)
			}
		},
		created() {
			if (wx.getUserProfile) {
				this.canUseGetUserProfile = true
			}
			this.setAuthStatus();
			this.getCode(this.isShowAuth)
		},
		methods: {
			//
			getPhoneNumber(e) {
				let self = this
				let obj = this
				console.log(e, 'e+++++++++++++++')
				//用户同意授权
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let userInfo = {}
					userInfo.iv = e.detail.iv
					userInfo.encryptedData = e.detail.encryptedData
					userInfo.code = this.code;
					userInfo.spread = app.globalData.spid; //获取推广人ID
					userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
					console.log(userInfo,'userInfo+++++')
					commonAuth({
						auth: {
						type:'routine',
						auth: userInfo
					}
					}).then(res=>{
						if(res.data.status == 200){
							let time = res.data.result.expires_time - Cache.time();
							self.$store.commit('UPDATE_USERINFO', res.data.result.user);
							self.$store.commit('LOGIN', {token:res.data.result.token, time:time});
							self.$store.commit('SETUID', res.data.result.user.uid);
							Cache.set(EXPIRES_TIME,res.data.result.expires_time,time);
							Cache.set(USER_INFO,res.data.result.user,time);
							this.$emit('onLoadFun', res.data.result.user);
						}else{
							uni.setStorageSync('auth_token',res.data.result.key);
							return uni.navigateTo({
								url:'/pages/users/login/index'
							})
						}
					}).catch(res => {
						uni.hideLoading();
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000,
							
						});
					});
					
				} else {
					obj.isclick = false
					uni.showToast({
						title: '您拒绝了请求,不能正常使用小程序',
						icon: 'error',
						duration: 2000
					});
					return;
				}
			},
			setAuthStatus() {
				//#ifdef MP
				Routine.authorize().then(res => {
					if (res.islogin === false)
						this.$emit('onLoadFun', this.userInfo);
				}).catch(res => {
					if (this.isAuto)
						this.$emit('authColse', true);
				})
				//#endif
			},
			getCode(n){
				// #ifdef MP
					if (n) {
						uni.showLoading({
							title: '正在登录中'
						});
						Routine.getCode().then(code => {
							uni.hideLoading();
							this.code = code;
						}).catch(e => {
							uni.hideLoading();
							uni.showToast({
								title: '登录失败',
								duration: 2000
							});
						})
					} else {
						this.code = null;
					}
					// #endif
					// #ifndef MP
					if(n){
						this.code = 1;
					}
					// #endif
			},
			toWecahtAuth(){
				toLogin(true);
			},
			getUserProfile() {
				let self = this;

				Routine.getUserProfile()
					.then(res => {
						let userInfo = res.userInfo;
						userInfo.code = this.code;
						userInfo.spread = app.globalData.spid; //获取推广人ID
						userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
						commonAuth({
							auth: {
							type:'routine',
							auth: userInfo
						}
						}).then(res=>{
							if(res.data.status == 200){
								let time = res.data.result.expires_time - Cache.time();
								self.$store.commit('UPDATE_USERINFO', res.data.result.user);
								self.$store.commit('LOGIN', {token:res.data.result.token, time:time});
								self.$store.commit('SETUID', res.data.result.user.uid);
								Cache.set(EXPIRES_TIME,res.data.result.expires_time,time);
								Cache.set(USER_INFO,res.data.result.user,time);
								this.$emit('onLoadFun', res.data.result.user);
							}else{
								uni.setStorageSync('auth_token',res.data.result.key);
								return uni.navigateTo({
									url:'/pages/users/login/index'
								})
							}
						}).catch(res => {
							uni.hideLoading();
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000,
								
							});
						});
					})
					.catch(res => {
						uni.hideLoading();
					});

			},
			close() {
				let pages = getCurrentPages(),
					currPage = pages[pages.length - 1];
					this.$emit('authColse', false);
				// if (this.isGoIndex) {
				// 	uni.switchTab({
				// 		url: '/pages/index/index'
				// 	});
				// } else {
				// 	this.$emit('authColse', false);
				// }
			},
			// 用户确认授权
			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()
			
			},
		}
	}
</script>

<style scoped lang='scss'>
	.Popup {
		width: 500rpx;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -250rpx;
		transform: translateY(-50%);
		z-index: 1000;
	}

	.Popup {
		.logo-auth {
			z-index: -1;
			position: absolute;
			left: 50%;
			top: 0%;
			transform: translate(-50%, -50%);
			width: 150rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 8rpx solid #fff;
			border-radius: 50%;
			background: #fff;
		}

		image {
			height: 42rpx;
			margin-top: -54rpx;
		}
	}

	.Popup .title {
		font-size: 28rpx;
		color: #000;
		text-align: center;
		margin-top: 30rpx
	}

	.Popup .tip {
		font-size: 22rpx;
		color: #555;
		padding: 0 24rpx;
		margin-top: 25rpx;
	}

	.Popup .bottom .item {
		width: 50%;
		height: 80rpx;
		background-color: #eeeeee;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #666;
		margin-top: 54rpx;
	}

	.Popup .bottom .item.on {
		width: 100%
	}

	.flex {
		display: flex;
	}

	.Popup .bottom .item.grant {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
		background-color: var(--view-theme);
		border-radius: 0;
		padding: 0;
	}

	.mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.65);
		z-index: 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: #637bef;
		}
	}
</style>