XDProjects/components/getPhone.vue

<template>
	<div class="phone-wrap" v-if="!isAuthorize">
		<div class="authorization-container">
			<uni-card>
				<template v-if="showByPlatform">
					<!-- #ifdef MP-WEIXIN -->
<!-- 					<open-data type="chooseAvatar" class="userAvatar"></open-data>	 -->
					<image class="userAvatar" src="/static/components/avatar.png"></image>
					<view class="title">使用该功能，需要申请获取以下权限</view>
					<view class="tip">申请获取你微信绑定的手机号</view>
					<view class="service_agreement">
						<checkbox-group @change="changeStatus">
							<label>
								<checkbox :checked="service_agreement_status" style="transform:scale(0.7)"  />
								<text>我同意<text class="title">GOOMove</text>使用我授权的电话号码作为我的登录账号，查看</text>															
							</label>
						</checkbox-group>
						<text class="link" @click="linkTo">《用户服务协议》</text>
						<text>及</text>
						<text class="link" @click="linkTo">《个人信息保护政策》</text>
					</view>
					<view class="card-actions">
						<button @click="cancel" size="mini" class="bt">拒绝</button>
						<button class="confirm bt" size="mini"  @click="confirm" v-if="!service_agreement_status">允许</button>
						<button class="confirm bt" size="mini" open-type="getPhoneNumber" @getphonenumber="getphonenumber" v-else >允许</button>
					</view>				
					<!-- #endif -->		
					<!-- #ifndef MP-WEIXIN -->
					<uni-easyinput focus v-model="phoneNumber" type="number" placeholder="请输入手机号码" class="phone-inp"></uni-easyinput>
					<view class="title">使用该功能，需要获取你的手机号码</view>
					<view class="tip">请填写你的手机号码，并点击提交</view>				
					<view class="card-actions">
						<button @click="cancel" size="mini" class="bt">拒绝</button>
						<button class="confirm bt" size="mini"  @click="confirm">提交</button>
					</view>				
					<!-- #endif -->	
				</template>	
				<template v-else>	
					<uni-easyinput focus v-model="phoneNumber" type="number" placeholder="请输入手机号码" class="phone-inp"></uni-easyinput>
					<view class="title">使用该功能，需要获取你的手机号码</view>
					<view class="tip">请填写你的手机号码，并点击提交</view>				
					<view class="card-actions">
						<button @click="cancel" size="mini" class="bt">拒绝</button>
						<button class="confirm bt" size="mini"  @click="confirm">提交</button>
					</view>				
				</template>
			</uni-card>					
		</div>
	</div>
</template>

<script>
	import {setToken} from '@/libs/auth.js'	
	import {login,getPhoneNumberApi} from '@/api/user.js'
	export default{
		props:{
			showByPlatform:{
				type:[String,Boolean],
				default:false
			}
		},
		data(){
			return{
				isAuthorize:false,
				phoneNumber:"",
				service_agreement_status:false
			}
		},
		methods:{
			cancel(){
				this.$emit('cancel')
				this.isAuthorize=true
			},
			confirm(){
				if(!this.service_agreement_status){
					uni.showToast({
						icon:'none',
						title:"请先阅读服务协议"
					})		
					return					
				}
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
				if(!reg_tel.test(this.phoneNumber)){
					uni.showToast({
						icon:'none',
						title:"手机号码有误"
					})		
					return
				}
				login({
					accountName:this.phoneNumber,
					password:"888888",
					accountTel:this.phoneNumber
				}).then((res)=>{
					let token=res.data.token;
					setToken(token)
					uni.setStorageSync('phone',this.phoneNumber)
					this.isAuthorize=true
					this.$emit('confirm',this.phoneNumber)
				}).catch((res)=>{})
			},
			getphonenumber(e){
				if(!this.service_agreement_status){
					uni.showToast({
						icon:'none',
						title:"请先阅读服务协议"
					})		
					return					
				}
				const {code,encryptedData,iv}=e.detail
				if(!code){
					this.$emit('cancel')			
				}else{
					getPhoneNumberApi({code}).then((res)=>{
						const accountName=res.data.phone_info.purePhoneNumber
						const accountTel=res.data.phone_info.phoneNumber
						login({
							accountName,
							password:"888888",
							accountTel
						}).then((res)=>{
							let token=res.data.token;
							setToken(token)
							uni.setStorageSync('phone',accountName)
							this.isAuthorize=true
							this.$emit('confirm',accountName)
						}).catch((res)=>{})					
					}).catch(()=>{
						uni.showToast({
							icon:'none',
							title:"授权失败，请稍后重试",
						    duration:3000
						})							
					})					
				}				
			},
			wxLogin(code,encryptedData,iv){
				const self=this;				
				//this.isAuthorize=true
				uni.login({
					success(res) {
						const loginCode=res.code;
						console.log({
							loginCode,
							code,
							encryptedData,
							iv
						})
					},
					error(res){
						uni.showToast({
							icon:'none',
							title:"登录异常，请稍后重试"
						})
					}
				})
			},
			linkTo(){
				uni.navigateTo({
					url:'/pages/service_agreement/service_agreement'
				})
			},
			changeStatus(){
				this.service_agreement_status=!this.service_agreement_status
				console.log(this.service_agreement_status)
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.phone-wrap{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999;
		background-color: rgba(0,0,0,0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		.authorization-container{
			width: 600rpx;
			margin-top: -100rpx;
			.phone-inp{
				margin-bottom: 20rpx;
			}
			.userAvatar{
				width: 100rpx;
				height: 100rpx;
				display: block;
				border-radius: 50%;
				overflow: hidden;
				margin: 20rpx auto;
			}
			.title{
				font-size: 32rpx;
				padding-top: 16rpx;
			}
			.tip{
				font-size: 28rpx;
				color: #999;
				position: relative;
				padding-left: 20rpx;
				margin-top: 30rpx;
				&::after{
					display: block;
					content: "";
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #999;
					position: absolute;
					left: 0;
					top: 15rpx;
				}
			}
			.card-actions{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 50rpx;
				.bt{
					margin: 0;
				}
				.confirm{
					color: #fff;
					background-color: #409eff;
					border-color: #409eff;	
					margin-left: 10rpx;
				}						
			}		
		}
		.service_agreement{
			checkbox-group{
				display: inline-block;
			}
			.title{
				font-weight: 600;
				padding: 0 2rpx;
			}
			.link{
				color: #409eff;
			}
		}
	}
</style>