fny-ugd-palace-uniapp/components/c-pop-auth/c-pop-auth.vue

<template>
	<view class="mask" catchtouchmove="true" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click.stop="maskClickHandel">
	   <view class="mask-content" @click.stop.prevent="stopPrevent">
		   <view class="mask-content-inner">
			   <view class="head">
					<view class="icon" hover-class="hover" hover-stay-time="100" @click="maskClickHandel">
						<u-icon name="arrow-left" color="#000" size="28"></u-icon>
					</view>
					<view class="head__text">用户登陆</view>
			   </view>
			   <view class="body">
				   <view class="autho-info">获取微信用户信息</view>
				   <view class="explain-info">
					   <text class="text">为了更好的为您服务，需要获取您的头像和昵称</text>
				   </view>
			   </view>
			   <view class="action-wrap">
					<u-button type="primary" openType="getUserInfo" @getuserinfo="getUserInfo" shape="round" size="large" text="微信用户一键登录" @click="getUserInfo2"></u-button>
			   </view>
			   <view class="action-msg">
				    <c-radio v-model="isAuth"></c-radio>
					<view class="action-msg-textwrap" style="padding-left: 10rpx;">
						<text class="text-info" style="margin-left: 0rpx;" @click="isAuth = !isAuth">登录代表您已同意</text>
						<text class="text-warning" style="margin-left: 10rpx;" @click="getContract(1)">《服务协议》</text>
						<text class="text-info">、</text>
						<text class="text-warning" style="margin-left: 10rpx;" @click="getContract(2)">《隐私政策》</text>
					</view>
			   </view>		
		   </view>
	   </view>
	  <!-- <u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code> -->
	   <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapActions, mapState, mapGetters } from 'vuex';

	export default {
		name:"c-pop-auth",
		data() {
			return {
				maskState: 0,
				isAuth: false,
				tips: '获取验证码',
				seconds: 60,
				send: false,
				form: {
					phone: '',
					code: '',
				}
			};
		},
		props: {
			onComplate: {
				type: Function,
				default(){
					return () => { }
				}
			},
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		mounted() {
		},
		methods: {
			...mapActions({
				'login': 'login',
				'loginRefresh': 'loginRefresh',
				'cacheUserInfo': 'cacheUserInfo',
				'unCacheUserInfo': 'unCacheUserInfo',
			}),
			stopPrevent(){
				
			},
			toggleMask(type){
				let timer = type === 'show' ? 10 : 0;
				let	state = type === 'show' ? 1 : 0;
				// this.maskState = 2;
				// setTimeout(()=>{
				// 	this.maskState = state;
				// }, timer)
				this.maskState = state;
			},
			/**
			 * @description 确认
			 * @param {Object}  title: String desc: String
			 */
			$confirm(options = {}){
				console.log("启动权限校验")
				this.appInstance = getApp()
				// 继承原来的
				// this.defautlOptions = Object.assign(this.defautlOptions, options);
				return new Promise((resolve,reject)=> {
					if(!this.isLogin){
						wx.hideTabBar()
						this.toggleMask('show')
					}
					console.log(this.appInstance)
					
					// wx 事件监听确认
					this.appInstance._confirm = () => {
						resolve(1)
						this._confirm = null;
					}
					
					// wx 事件监听取消
					this.appInstance._cancel = () => {
						resolve(0)
						this._cancel = null;
					}
					console.log(this.isLogin, '用户判断是否')
					if(this.isLogin){
						this.confirm()
						return
					}
					
					if(this.appInstance.isTongyi){
						this.unCacheUserInfo({}).then(res => {
							// 直接登陆
							if(res == 2){
								this.confirm();
								this.toggleMask();
								this.onComplate();
							} else {
								this.toggleMask();
								this.onComplate();
							}
						})
					}
				})
			},
			confirm() {
				wx.showTabBar()
				// 发送事件
				if(this.appInstance._confirm){
					this.appInstance._confirm()
					this.toggleMask();
				}
			},
			cancel() {
				wx.showTabBar()
				// 发送事件
				if(this.appInstance._cancel){
					this.appInstance._cancel()
					this.toggleMask();
				}
			},
			getUserInfo2(e) {
				if(this.isAuth){
					uni.getUserProfile({
						desc: "用于完善会员资料",
						lang: "zh_CN",
						success: (e) => {
							// 已经获取过
							this.appInstance.isTongyi = true;
							
							console.log('-----允许获取用户信息------')
							this.$refs.uToast.show({
								type: 'loading',
								message: '正在登录，请稍后',
							})
							this.cacheUserInfo({detail: e}).then(res => {
								this.$refs.uToast.hide()
								// uni.$u.toast('登录成功')
								// if(res.code == 1){
								// 	// 这里此提示会被this.start()方法中的提示覆盖
							
								// 	// 通知验证码组件内部开始倒计时
								// 	this.$refs.uCode.start()
								// }
								
								
								// 直接登陆
								if(res == 2){
									this.confirm();
									this.toggleMask();
									this.onComplate();
								} else {
									this.toggleMask();
									this.onComplate();
								}
							})
						},
						fail: (e) => {
							console.log('-----拒绝获取用户信息------')
							console.log(e)
						}
					})
				} else {
					uni.$u.toast('需要同意协议')
				}
				
			},
			async getUserInfo(e) {
				// const {userInfo, signature} = e.detail;
				// // 如果同意登陆  表示可以登录
				// wx.getUserProfile((e) => {
				// 	console.log(e)
				// })
				// return
			},
			maskClickHandel(e) {
				this.cancel()
			},
			getContract(type){
				this.$u.route({
					url: '/pages/signs/contract/contract',
					type: "navigateTo",
					params: {
						type: type
					}
				})
			},
			end() {
				this.send = false;
			},
			start() {
				this.send = true;
			},
			loginAction() {
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mask{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0);
		z-index: 10001;
		transition: .3s;
		
		.mask-content{
			background-color: #fff;
			width: 100vw;
			align-self: stretch;
			min-height: 597rpx;
			transform: translateY(1597rpx);
		}
		
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.6);
			
			.mask-content{
				transform: translateY(0);
			}
		}
		.mask-content-inner{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.head{
				align-self: stretch;
				padding: 0 15rpx;
				display: flex;
				align-items: center;
				height: 94rpx;
				border-bottom: 1px solid #efefef;
				.icon{
					display: flex;
					justify-content: center;
					align-content: center;
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
					&.hover{
						background-color: #efefef;
					}
				}
				.head__text{
					font-size: 32rpx;
					color: #333;
				}
			}
			.body{
				align-self: stretch;
				padding-top: 40rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				display: flex;
				flex-direction: column;
				.autho-info{
					font-size: 38rpx;
					color: #000;
					font-weight: 500;
				}
				.explain-info{
					padding-top: 15rpx;
					padding-left: 10rpx;
					.text{
						color: #999;
						font-size: 24rpx;
					}
					.link{
						color: #FD8701;
						font-size: 24rpx;
					}
				}
			}
			
			.action-wrap{
				margin-top: 60rpx;
				padding: 0 30rpx;
				align-self: stretch;
			}
			
			.action-msg{
				margin-top: 10rpx;
				display: flex;
				padding: 0 40rpx;
				flex-direction: row;
				align-items: center;
				.action-msg-textwrap{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					display: flex;
					flex-direction: row;
					font-size:24rpx;
				}
			}
		}
		
		
		
		
		
		
		
	}
	.c-button {
		color: #fff;
		width: 510rpx;
		margin-top: 20rpx;
	}
	.c-input-wrap{
		margin: 0 auto;
		width: 510rpx;
		height: 70rpx;
		background-color: #F0F2F4;
		border-radius: 35px;
		padding: 0 14px;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		.divide{
			width: 1px;
			height: 40rpx;
			border-left: 1px solid #FD8701;
		}
		.tip-btn{
			text-align: center;
			min-width: 178rpx;
			flex-shrink: 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FD8701;
			
			&.disable{
				color: #999;
			}
		}
		& /deep/ .inner_input{
			display: flex;
			height: 100%;
		}
	}
</style>