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

<template>
	<view class="mask" catchtouchmove="true" :class="!phoneStatus ? 'none' : phoneStatus ? 'show' : ''" @click.stop.prevent="cancel">
	   <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="cancel">
						<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><text class="link" @click="getContract(2)">《个人信息保护政策》</text>
				   </view>
			   </view>
			   <view class="action-wrap">
					<u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary" shape="round" size="large" text="允许"></u-button>
			   </view>
		   </view>
	   </view>
	   <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import store from '@/store'
	import { setStorage, getStorage, removeStorage } from '@/util/index.js'
	import { mapActions, mapState, mapGetters } from 'vuex';
	const WXBizDataCrypt = require('@/common/WXBizDataCrypt.js')
	import mpWx from '@/common/mpWX.js'
	export default {
		name:"c-pop-phone",
		data() {
			return {
				maskState: 0,
			};
		},
		props: {
			onComplate: {
				type: Function,
				default: () => { }
			},
		},
		computed: {
			...mapGetters(['phoneStatus']),
		},
		mounted() {
		},
		destroyed() {
			
		},
		watch:{
			phoneStatus(v){
				if(v){
					this.appInstance = getApp()
					console.log(this.appInstance)
				}
			}
		},
		methods: {
			...mapActions({
				'disPhone': 'disPhone',
				'closePhone': 'closePhone',
				'login': 'login',
			}),
			stopPrevent(e){
				// console.log(e)
			},
			toggleMask(type){
				let timer = type === 'show' ? 10 : 0;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			/**
			 * @description 确认
			 * @param {Object}  title: String desc: String
			 */
			$confirm(options = {}){
				// 继承原来的
				// this.defautlOptions = Object.assign(this.defautlOptions, options);
				return new Promise((resolve,reject)=> {
					
					this.toggleMask('show')
					this._confirm = () => {
						resolve(1)
						this._confirm = null;
					}
					this._cancel = () => {
						resolve(0)
						this._cancel = null;
					}
				})
			},
			confirm() {
				// wx.showTabBar()
				// if(this._confirm){
				// 	this._confirm()
				// 	this.toggleMask();
				// }
			},
			cancel() {
				console.log('-----用户关闭获取手机号------')
				wx.showTabBar()
				this.closePhone()
				this.appInstance._cancel()
			},
			async getPhoneNumber(e){
				const appId = 'wxf939a0846ecf66a5'
				const { code, encryptedData, errMsg, iv } = e.detail
				// 可以获取手机号
				if( errMsg == 'getPhoneNumber:ok'){
					try{
						console.log('-----用户取手机号------')
						
						const fcode = await mpWx.login()
						const obj = await this.$api("app.getOpenId", {code: fcode, openid: null})
						const { openid, sessionKey } = obj.data;
						const pc = new WXBizDataCrypt(appId, sessionKey)
						const data = pc.decryptData(encryptedData , iv)
						console.log('获取手机号', data)
						const { phoneNumber, purePhoneNumber } = data;
						
						this.login({openid: openid, phone: phoneNumber}).then(res => {
							this.closePhone()
							this.appInstance._confirm()
							wx.showTabBar()
						})
					
					}catch(e){
						
						const fcode = await mpWx.login()
						const obj = await this.$api("app.getOpenId", {code: fcode})
						const { openid, sessionKey } = obj.data;
						
						this.login({openid: openid, phone: ''}).then(res => {
							this.closePhone()
							this.appInstance._confirm()
							wx.showTabBar()
						})
						//TODO handle the exception
						console.log(e)
					}
					
				}else{
					console.log('-----用户拒绝获取手机号------')
					
				}
			},
			loginAction() {
				this.$refs.uToast.show({
					type: 'loading',
					message: '正在登录，请稍后',
				})
				this.login({mobile: this.form.phone, code: this.form.code}).then(res => {
					this.$refs.uToast.hide()
					if(res.code == 1){
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('登录成功')
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start()
					}
					this.onComplate()
				})
			},
			getContract(type){
				this.$u.route({
					url: '/pages/signs/contract/contract',
					type: "navigateTo",
					params: {
						type: type
					}
				})
			},
		},
	}
</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: 360rpx;
			padding-bottom: 100rpx;
			overflow: hidden;
		}
		.mask-content-inner{
			position: relative;
			display: flex;
			flex-direction: column;
			.head{
				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{
				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;
					.text{
						color: #999;
						font-size: 24rpx;
					}
					.link{
						color: #FD8701;
						font-size: 24rpx;
					}
				}
			}
			.action-wrap{
				padding: 60rpx 30rpx 0;
			}
		}
		
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.8);
			
			.mask-content{
				transform: translateY(0);
			}
		}
		
	}
</style>