jp-floorlock-phone/components/componentLogin.vue

<template>
	<view>
		<u-popup v-model="show" mode="center" border-radius="24" :closeable="false" :mask-close-able="true" @close="close">
			<view class="u-mode-center-main">
		
		
				<view class="title">
					<view class="logo"><img class="img" src="@/assets/img/button/lock.svg" alt=""></view>
					<view class="span">智泊e家</view>
				</view>
				<view>
					<!-- <button class="login-btn" @click="decryptPhoneNumberTest" 
						
						
						>
						<u-icon name="phone-fill" size="46"></u-icon> <text>手机号码一键登录test</text>
					</button> -->
					
					<button class="login-btn" @click="decryptPhoneNumberH5" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber"
						
						>
						<u-icon name="phone-fill" size="46"></u-icon> <text>手机号码一键登录</text>
					</button>
		
				</view>
		
				<view class="radio" v-if="false">
					<!-- <radio></radio>
							<view class="agreement">
								阅读并同意<text style="color: #2795FD">《用户隐私协议》</text>
						</view> -->
					<u-radio-group v-model="value">
						<u-radio active-color="red">阅读并同意<text style="color: #2795FD">《用户隐私协议》</text></u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as API_weixin from '@/apis/weixin.js'
	
	export default {
		name:"componentLogin",
		props:{
			check: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				show:false,
				userInfo:{},
			};
		},
		methods: {
			ashow(){
				this.show = true;
			},
			
			findByOpenId() {
				if(!this.jphelp.getOpenId()){
					setTimeout(()=>{
						this.findByOpenId()
					},500)
					return
				}
				
				API_weixin.findByOpenId({
					openId: this.jphelp.getOpenId(),
					noerror: true
				}).then((res) => {
					this.userInfo=res.data.regUser;
					this.jphelp.setPersonInfo(res.data.regUser);
					this.jphelp.setToken(res.data.token);
					this.jphelp.setPersonInfoPlus(res.data);
					this.$emit("findByOpenId",res)
				}).catch(error => {
					
					
					this.jphelp.logoff();
					this.userInfo = {};
				
					if(this.check){
						this.ashow()
					}
					
			
				})
			
			},
			close() {
				// #ifdef MP-WEIXIN
				
				// #endif
				// if (this.userInfo.id) {
				
				// } else {
				// 	uni.switchTab({
				// 		url: "/pages/index/index"
				// 	})
				// }
			},
			createUser(phone) {
				this.show=false
				if (this.userInfo.id) {
					//console.log("changePhoneUser",phone)
					//this.changePhoneUser(phone)
					
				} else{
					console.log("createUser",phone)
					API_weixin.createUser({
						phone: phone,
						openId: this.jphelp.getOpenId()
					}).then((res2) => {
						
						this.findByOpenId()
			
					}).catch(error2 => {
						uni.showToast({
							icon: 'none',
							title: error2
						})
					})
				}
			},
			decryptPhoneNumberTest() {
				
				this.show = false
				var _this = this
				uni.showModal({
					title: '输入手机号测试',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {
			
						if (res.confirm) {
							//_this.createUser(res.content)
							if (_this.userInfo.id) {
								_this.changePhoneUser(res.content)
								
							} else{
								_this.createUser(res.content)
								
							}
						} else if (res.cancel) {
							//.log('用户点击取消');
						}
					}
				});
				
			},
			decryptPhoneNumberH5() {
				// #ifdef H5
				this.show = false
				var _this = this
				uni.showModal({
					title: '输入手机号测试',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {
			
						if (res.confirm) {
							//_this.createUser(res.content)
							if (_this.userInfo.id) {
								_this.changePhoneUser(res.content)
								
							} else{
								_this.createUser(res.content)
								
							}
						} else if (res.cancel) {
							//.log('用户点击取消');
						}
					}
				});
				// #endif
			},
			decryptPhoneNumber(e) {
				console.log(e, this.jphelp.getOpenId())
				var _this=this;
				if (!e.detail.code&&e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(loginRes) {
			
							API_weixin.decryptData({
								code: loginRes.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}).then((res) => {
								
								console.log(res)
								if (res.data) {
									console.log(_this.userInfo.id)
									
									_this.createUser(res.data)
			
								} else {
									uni.showToast({
										icon: 'none',
										title: "获取手机号失败，请检查"
									})
								}
			
							}).catch(error => {
			
								uni.showToast({
									icon: 'none',
									title: error
								})
								//this.getPhone()
			
							})
						}
					});
			
			
				} else {
					if(e.detail.code){
						uni.showLoading({
								title: "加载中",
								mask: true,
							})
							API_weixin.findUserPhoneNumber(e.detail.code).then((res) => {
								if (res.data) {
									this.createUser(res.data)
									
								} else {
									uni.showToast({
										icon: 'none',
										title: "获取手机号失败，请检查"
									})
								}
									
									
									
							}).catch(error => {
									
								uni.showToast({
									icon: 'none',
									title: error
								})
								//this.getPhone()
									
							})
						
					}else{
						uni.showToast({
							icon: 'none',
							title: "获取手机号失败"
						})
					}
					
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 弹窗
	.u-mode-center-main {
	
		width: 560rpx !important;
		border-radius: 12px;
		padding: 80rpx 48rpx;
	
		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			
			display: flex;
			.logo{
				    width: 50rpx;
				    height: 50rpx;
				    border-radius: 100rpx;
				    background-color: rgba(22,119,255,1);
					    display: flex;
					    align-items: center;
					    justify-content: center;
						.img{
							width: 35rpx;
							height: 30rpx;
						}
			}
		}
	
		.login-btn {
			background-color: rgba(0, 188, 99, 1);
			color: #fff;
			padding: 8rpx 70rpx;
			margin-top: 56rpx;
			margin-bottom: 16rpx;
			border-radius: 8px;
			display: flex;
	
			font-size: 32rpx;
	
			text {
				margin-left: 8rpx;
			}
		}
	
		.radio {
			display: inline-block;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			color: #777777;
			margin-left: 20rpx;
	
			.uni-radio-input {
				width: 24rpx;
				height: 24rpx;
	
			}
	
			.uni-radio-input-checked:before {
				font-size: 24rpx;
				background-color: rgb(0, 122, 255);
				border-color: rgb(0, 122, 255);
			}
		}
	
	}
</style>