yiliangyiyun-app/pages/public/login.vue

<template>
	<view class="container">
		<view class="back-btn cuIcon-back" @click="navBack"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<image style='width:38px;height:38px;margin-bottom:10px;' src='../../static/img/login/logo@2x.png'></image>
			<h2 class="title Semibold">欢迎使用易粮易运</h2>
			<view style='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
				<view class="phone-before-num NumberMedium">+86</view>
				<view style='width:85%;'><input style='padding-left:10px;' v-model='phone' @input='changephone' placeholder="请输入手机号码" type="number" maxlength="11"></view>
				<image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image>
			</view>
			<button @click='gocode' :class='codestatus?"active":""' class='verificationCode'>获取验证码</button>
			<button @click='goregister' class='verificationCode active'>手机号一键注册</button>
			<view @click='gonumber' style='text-align:center;color:#6A6A6A;margin-top:10px;'>使用账号密码登录</view>
		</view>
		<view v-if="loginType === 'phone'" class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import { openFSqlite, createFSQL, selectFSQL, addFSQL } from '../../util/f.js'
	import { queryData, upData, initData } from '../../util/dbUtil.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				inputContent: null,
				loginType: "wechat",
				phone: '',
				password: '',
				logining: false,
				isPhone: false,
				isApple: true,
				accessToken:'',
				phone:'',
				params:{
					encryptedData:'',
					session_key:'',
					iv:'',
				},
				userInfo:{
					nickName:'',
					avatarUrl:'',
					gender:'',
					phone:''
				},
				inputStatus:'none',
				verifyCode:null,
				sendText:'获取验证码',
				sendDisabled: false,
				system:'',
				platform:'',
				userData:undefined,
				canIUseProfile:false,
				codestatus:false
			}
		},
		computed: {
			...mapState(['clientId'])
		},
		onShow() {
			// this.loginType = "wechat"
			this.$api.logout()
		},
		onLoad(options) {
			
			if( wx.getUserProfile ){  
			    console.log('--check getUserProfile--OK');  
			    this.canIUseProfile = true;  
			} 
			console.log("login on load")
			var that = this
			that.$api.request('user', 'sendIsApple', {
			}).then(res => {
				that.isApple = res.data
			})
			 uni.getSystemInfo({
				success:(res) => {
					// console.log(res)
					this.system = res.system  // ios
					this.platform = res.platform  // 14.3
				}
			})
		},
		methods: {
			changephone(e){
				if(e.detail.value.length>11){
					this.codestatus=true
				}else if(e.detail.value.length<11){
					this.codestatus=false
				}else{
					this.codestatus=true
				}
			},
			gonumber(){
				uni.navigateTo({
					url:'/pages/public/login_account_number'
				})
			},
			forgetpass(){
				uni.navigateTo({
					url:'/pages/public/reset'
				})
			},
			gocode(){
				if(this.phone.length==11){
					uni.navigateTo({
						url:'/pages/public/code?phone='+this.phone
					})
				}
				else if(this.phone.length==0){
					uni.showToast({
					 title:'手机号不能为空',
					 icon:'none'
					})
				}else{
					uni.showToast({
					 title:'请输入正确的手机号',
					 icon:'none'
					})
				}
				
			},
			goregister(){
				uni.navigateTo({
					url:'/pages/public/register'
				})
			},
			phonelogin(){
				var that=this
				uni.showLoading({
					title: '登录中',
					mask:true
				})
				console.log("clientid",that.clientId)
				this.$api.request('user', 'login',{
					password:that.password,
					phone:that.phone,
					cid:that.clientId
				}, failres => {
			           that.$api.msg(failres.errmsg)
			           uni.hideLoading()
			    }).then(res => {
					console.log(res)
					uni.setStorageSync('userInfo', res.data)
					that.$store.commit('login', res.data)
					// that.liangxinLogin()
					uni.switchTab({
						url: '/pages/sale/information'
					});
					uni.hideLoading()
				})
			},
			appleLogin(){
			    var that=this
			    uni.getProvider({
			     service: 'oauth',
			     success: function (res) {
			      // console.log(res.provider)
			      if(~res.provider.indexOf('apple')) {
			       uni.login({
			        provider: 'apple',
			        success: loginRes => {
			         uni.getUserInfo({
			          provider: 'apple',
			          success: userInfoRes => {
			           
			          that.$api.request('user', 'thirdPartLogin', {
			           loginType: 4/*  */,
			           raw: JSON.stringify(userInfoRes.userInfo)
			          }, failres => {
			           that.$api.msg(failres.errmsg)
			           uni.hideLoading()
			          }).then(res => {
			           console.log("thirdPartLogin:"+res.data.phone)
			           that.accessToken = res.data.accessToken
			           that.logining = false
			           uni.getUserInfo({
			            lang: 'zh_CN',
			            success: (e) => {
			             uni.setStorageSync('userInfo', res.data)
			             that.$store.commit('login', res.data)
			             e.userInfo.nickname = e.userInfo.nickName
						 e.userInfo.cid = uni.getStorageSync("clientId")
			             that.$api.request('user', 'syncUserInfo', e.userInfo).then(syncRes => {
			              //同步过后
			              res.data.nickname = e.userInfo.nickName
			              res.data.avatarUrl = e.userInfo.avatarUrl
			              res.data.gender = e.userInfo.gender
			              
			              if(!res.data.phone){
			               res.data.phone = e.userInfo.phone
			              }
			              
			              uni.setStorageSync('userInfo', res.data)
			              that.$store.commit('login', res.data)
			             })
			            },
			            complete: (e) => {
			             uni.hideLoading()
			             
			             if(!res.data.phone||res.data.phone==""||res.data.phone ==undefined){
			              that.isPhone = true//显示自定义的获取手机权限提示框
			              that.inputStatus = 'inline'
			              that.inputContent = ''
			             }
			             else{
			              uni.switchTab({
			               url: '/pages/sale/sale'
			              });
			              console.log("complete")
			             }
			            }
			           })
			           
			           })
			           console.log('获取用户信息成功'+JSON.stringify(userInfoRes))
			          }
			         })
			        },
			        fail: err => {
			         console.log('apple登录失败' + JSON.stringify(err))
			         uni.showToast({
			          title:'登录失败',
			          icon:'none'
			         })
			        }
			       })
			      }
			     },
			     fail: err => {
			      uni.showToast({
			       title:'登录失败',
			       icon:'none'
			      })
			     }
			    })
			   },
			   doGetVerify() {
				const that = this
				var phone = this.inputContent;
				if (!phone || phone.length != 11) {
					uni.showToast({
						title:'请输入正确手机号！',
						icon:'none'
					})
					return
				}
				
				that.$api.request('user', 'sendVerifyCode', {
					phone: phone,
				}).then(res => {
					that.sendDisabled = true
					let sec = 60
					let interval = setInterval(() => {
						sec--;
						that.sendText = sec + 's后重发'
						if (sec <= 0) {
							that.sendDisabled = false
							that.sendText = "获取验证码"
							clearInterval(interval)
						}
					}, 1000)
				})	
			},
			verifyCodeInput(e){
				this.verifyCode = e.detail.value
			},
			cancel() {
				this.inputShow = false
				this.inputStatus = 'none'
				this.isPhone = false
			},
			confirm() {
				var that = this
				if (!this.inputContent || this.inputContent.length != 11) {
					uni.showToast({
						title:'请输入正确手机号！',
						icon:'none'
					})
					return
				}
				if (!this.verifyCode) {
					uni.showToast({
						title:'请输入验证码！',
						icon:'none'
					})
					return
				}
				this.$api.request('user', 'mergeUser', {
					phone: that.inputContent,
					verifyCode:that.verifyCode
				},failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.accessToken = res.data.accessToken
					that.$api.setUserInfo(res.data)
					that.logining = false
					uni.getUserInfo({
						lang: 'zh_CN',
						success: (e) => {
							uni.setStorageSync('userInfo', res.data)
							that.$store.commit('login', res.data)
							e.userInfo.nickname = e.userInfo.nickName
							e.userInfo.cid = uni.getStorageSync("clientId")
							console.log(e.userInfo)
							that.$api.request('user', 'syncUserInfo', e.userInfo).then(syncRes => {
								//同步过后
								res.data.nickname = e.userInfo.nickName
								res.data.avatarUrl = e.userInfo.avatarUrl
								res.data.gender = e.userInfo.gender
								res.data.phone = e.userInfo.phone
								uni.setStorageSync('userInfo', res.data)
								that.$store.commit('login', res.data)
								// that.liangxinLogin()
							})
						},
						complete: (e) => {
							uni.switchTab({
								url: '/pages/sale/information'
							});
							uni.hideLoading()
							that.isPhone=false
							
							uni.navigateBack()
						}
					})
				})
				
			},
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			chooseLoginType(type) {
				this.loginType = type
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				uni.redirectTo({
					url: '/pages/public/register'
				})
			},
			///发起消息订阅
			requestSubscribe(){
				const that = this
				wx.requestSubscribeMessage({
			        tmplIds: ['xL_uZEqJz4QP1FbnlzQWAiO2zVBn3Qeu8JwLVOU3hU0','8cVkckXi_8zfHeScXRHhjN6cgZFYYCWIMPDTiPWagXY','IE7WxBsv-fDvPWSrng-97lGWtvZf9rHuECBlhRLlWxI'],//
			        success :(res)=>{
			          console.log("订阅消息 成功 "+res);
			         },
			        fail :(errMsg) =>{ 
			          console.log("订阅消息 失败 "+errMsg.errMsg);
			        },
			        complete:(errMsg)=>{
			          console.log("订阅消息 完成 "+errMsg);
					  
			        }
			    
			      });
			},
			getPhoneNumber(e) {
				
			  console.log(e)
			  if (e.mp.detail.errMsg==="getPhoneNumber:ok") {
				this.isPhone = false
				this.params.iv = e.mp.detail.iv
				this.params.encryptedData = e.mp.detail.encryptedData
				this.params.session_key = this.accessToken
				console.log(this.params)
				this.getTokenAsync(this.params)
			  }
			  
			},
			 // 请求后获取token
			async getTokenAsync(params) {
				let that = this
				this.$api.request('user', 'getPhoneNumber', params).then(res => {
					 if(res.data.phoneNumber){
						 that.userInfo.phone = res.data.phoneNumber
					 }
					 if(res.data.unionId){
						 that.userInfo.unionId = res.data.unionId
					 }
					 
					 that.userInfo.cid = uni.getStorageSync("clientId")
					 console.log(that.userInfo)
					 that.$api.request('user', 'syncUserInfo', that.userInfo).then(syncRes => {
					 	uni.setStorageSync('userInfo', that.userInfo)
					 	that.$store.commit('login', that.userInfo)
					 	that.$api.setUserInfo(that.userInfo)
					 	uni.hideLoading()
						// that.liangxinLogin()
					 }) 
					 if(res.data.phoneNumber){
						uni.switchTab({
							url: '/pages/sale/information'
						});
					 }
					 
				 })
			},
			async toLogin() {
				this.verifyCode = ''
				const that = this
				if (that.phone.length !== 11) {
					that.$api.msg('请输入11位中国手机号')
				} else if (that.password.length < 8) {
					that.$api.msg('密码至少8位')
				} else {
					that.logining = true;
					//#ifdef MP-WEIXIN
					//若是小程序平台，则获取到openId。整个过程是静默完成的
					uni.login({
						provider: 'weixin',
						success: (wxres => {
							that.$api.request('user', 'login', {
								phone: that.phone,
								password: that.password,
								loginType: 1,
								raw: JSON.stringify(wxres)
							}, failres => {
								that.logining = false
								uni.showToast({
									title: failres.errmsg,
									icon: "none"
								});
							}).then(res => {
								that.logining = false
								that.$store.commit('login', res.data)
								uni.setStorageSync('userInfo', res.data)
								if (that.$api.prePage().lodaData) {
									that.$api.prePage().loadData()
								}
								uni.navigateBack()
							})
						})
					})
					//#endif
					//#ifdef APP-PLUS || H5
					//若是App登录，则不需要保存OpenId。可直接登录
					that.$api.request('user', 'login', {
						phone: that.phone,
						password: that.password,
					}, failres => {
						that.logining = false
						uni.showToast({
							title: failres.errmsg,
							icon: "none"
						});
					}).then(res => {
						that.logining = false
						that.$store.commit('login', res.data)
						uni.setStorageSync('userInfo', res.data)
						if (that.$api.prePage().lodaData) {
							that.$api.prePage().loadData()
						}
						uni.navigateBack()
					})
					//#endif
				}
			},
			
			miniWechatLogin(e) {
				const that = this
				 //旧版本方式  
				if( this.canIUseProfile == false ){  
					console.log("旧版本方式")
					//获取授权信息  
					if(e.detail.userInfo){  
			
					console.log('用户允许了授权')  
					console.log( e.detail.userInfo );   //1.拿到基本的微信信息!!  
			
					 uni.showLoading({
					 	title: '加载中',
						mask:true
					 })
					 that.logining = true
					 let loginType = 1
					 let userInfo = e.detail.userInfo
					 uni.login({
					 	provider: 'weixin',
					 	success: (wxres => {
					 		that.logining = false
					 		that.$api.request('user', 'thirdPartLogin', {
					 			loginType: loginType,
					 			raw: JSON.stringify(wxres)
					 		}, failres => {
					 			that.$api.msg(failres.errmsg)
					 			uni.hideLoading()
					 		}).then(res => {
					 			that.accessToken = res.data.accessToken
					 			that.$api.setUserInfo(res.data)
					 			that.userInfo = res.data
					 			uni.getUserInfo({
					 				lang: 'zh_CN',
					 				provider: 'weixin',
					 				withCredentials:true,
					 				success: (e) => {
					 					that.params.iv = e.iv
					 					that.params.encryptedData = e.encryptedData
					 					that.params.session_key = that.accessToken
					 					console.log(this.params)
					 					that.getTokenAsync(this.params)
					 					uni.setStorageSync('userInfo', res.data)
					 					that.$store.commit('login', res.data)
					 					e.userInfo.nickname = e.userInfo.nickName
					 					if(e.userInfo.phone == undefined){
					 						e.userInfo.phone = ''
					 					}
										e.userInfo.cid = uni.getStorageSync("clientId")
					 					console.log(e.userInfo)
					 					that.$api.request('user', 'syncUserInfo', e.userInfo).then(syncRes => {
					 						//同步过后
					 						res.data.nickname = userInfo.nickName
					 						res.data.avatarUrl = userInfo.avatarUrl
					 						res.data.gender = userInfo.gender
					 						if(userInfo.phone){
					 							res.data.phone = userInfo.phone
					 							// that.liangxinLogin()
					 						}
					 						uni.setStorageSync('userInfo', res.data)
					 						that.$store.commit('login', res.data)
					 						that.$api.setUserInfo(res.data)
					 														
					 						uni.hideLoading()
					 						// uni.navigateBack()
					 					})
					 				},
					 				complete: (e) => {
					 					uni.hideLoading()
					 					
					 					if(!res.data.phone||res.data.phone==""||res.data.phone ==undefined){
					 						that.isPhone = true//显示自定义的获取手机权限提示框
					 						that.inputStatus = 'inline'
					 						that.inputContent = ''
					 					}
					 					else{
					 						uni.setStorageSync('PageCur', "sale");
					 						// uni.switchTab({
					 						// 	url: '/pages/sale/sale'
					 						// });
					 						uni.switchTab({
					 							url: '/pages/sale/information'
					 						});
					 						console.log("complete")
					 					}
					 				}
					 			})
					 		})
					 	}),
					 	
					 })
			
					}  
			
				//新版本方式  
				}else{  
					console.log("新版本方式")
					uni.showLoading({
					 	title: '加载中',
						mask:true
					 })
					 that.logining = true
					 let loginType = 1
					wx.getUserProfile({  
						desc : '用于完善用户资料',  
						lang : 'zh_CN',  
						success : function( proRes ){  
							console.log('proRes.userInfo',proRes.userInfo)
							uni.login({
								provider: 'weixin',
								success: (wxres => {
									that.logining = false
									that.$api.request('user', 'thirdPartLogin', {
										loginType: loginType,
										raw: JSON.stringify(wxres)
									}, failres => {
										that.$api.msg(failres.errmsg)
										uni.hideLoading()
									}).then(res => {
										console.log('res+++++',res)
										that.accessToken = res.data.accessToken
										that.$api.setUserInfo(res.data)
										that.userInfo = res.data
										// that.params.iv = proRes.iv
										// that.params.encryptedData = proRes.encryptedData
										// that.params.session_key = that.accessToken
										// console.log(that.params)
										// that.getTokenAsync(that.params)
										uni.setStorageSync('userInfo', res.data)
										that.$store.commit('login', res.data)
										if(proRes.userInfo.phone == undefined){
											proRes.userInfo.phone = ''
										}
										res.data.cid = uni.getStorageSync("clientId")
										that.$api.request('user', 'syncUserInfo', res.data).then(syncRes => {
											//同步过后
											res.data.nickname = proRes.userInfo.nickName
											res.data.avatarUrl = proRes.userInfo.avatarUrl
											res.data.gender = proRes.userInfo.gender
											if(proRes.userInfo.phone){
												res.data.phone = proRes.userInfo.phone
											}
											uni.setStorageSync('userInfo', res.data)
											that.$store.commit('login', res.data)
											that.$api.setUserInfo(res.data)
											uni.hideLoading()
											if(!that.userInfo.phone||that.userInfo.phone==""||that.userInfo.phone ==undefined){
												that.isPhone = true//显示自定义的获取手机权限提示框
												that.inputStatus = 'inline'
												that.inputContent = ''
											}
											else{
												uni.setStorageSync('PageCur', "sale");
												// uni.switchTab({
												// 	url: '/pages/sale/sale'
												// });
												uni.reLaunch({
													url: '/pages/sale/information'
												});
												console.log("complete")
												// that.liangxinLogin()
											}
										})		
										console.log( 'wx.getUserProfile=>用户允许了授权' );
									})
								})
							})
			
						},  
						fail : function( res ){  
							console.log('wx.getUserProfile=>用户拒绝了授权');  
							console.log( res );  
			
						}
					});  
			
				}  
				
				// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
				// wx.getSetting({
				//  	 withSubscriptions: true,//是否获取用户订阅消息的订阅状态，默认false不返回
				//    success(res){
				// 	debugger
				//    if(res.subscriptionsSetting.mainSwitch){
				    
				//    }else{
					  
				// 	}
				// 	}
				// })
				// uni.showModal({
				// 	  title: '温馨提示',
				// 	  content: '为更好的与您沟通，小程序需要向您发送通知消息',
				// 	  confirmText:"同意",
				// 	  cancelText:"拒绝",
				// 	  showCancel: false,
				// 	  success: function (res) {
				// 		  if (res.confirm) {
				// 			 //调用订阅消息
				// 			  that.requestSubscribe();
				// 		  } else if (res.cancel) {
				// 			  ///显示第二个弹说明一下
				// 			  wx.showModal({
				// 				title: '温馨提示',
				// 				content: '拒绝后您将无法获取实时的交易、物流消息',
				// 				confirmText:"知道了",
				// 				showCancel:false,
				// 				success: function (res) {
				// 					 uni.openSetting({ // 打开设置页
				// 					   success(res) {
				// 						console.log(res.authSetting)
				// 					   }
				// 					 });
				// 				}
				// 			});
				// 		  }
				// 	  }
				// });
				
				



			},
			wechatLogin() {
				const that = this
				that.logining = true
				let loginType = 2
				uni.showLoading({
					title: '正在同步消息',
					mask:true
				})
				uni.login({
					provider: 'weixin',
					success: (wxres => {
						that.$api.request('user', 'thirdPartLogin', {
							loginType: loginType,
							raw: JSON.stringify(wxres)
						}, failres => {
							that.$api.msg(failres.errmsg)
							uni.hideLoading()
						}).then(res => {
							console.log("thirdPartLogin:"+res.data.phone)
							that.accessToken = res.data.accessToken
							that.logining = false
							uni.getUserInfo({
								lang: 'zh_CN',
								success: (e) => {
									uni.setStorageSync('userInfo', res.data)
									that.$store.commit('login', res.data)
									e.userInfo.nickname = e.userInfo.nickName
									e.userInfo.cid = uni.getStorageSync("clientId")
									console.log(e.userInfo)
									that.$api.request('user', 'syncUserInfo', e.userInfo).then(syncRes => {
										//同步过后
										res.data.nickname = e.userInfo.nickName
										res.data.avatarUrl = e.userInfo.avatarUrl
										res.data.gender = e.userInfo.gender
										if(res.data.phone){
											res.data.phone = e.userInfo.phone
											// that.liangxinLogin()
										}
										
										uni.setStorageSync('userInfo', res.data)
										that.$store.commit('login', res.data)
									})
								},
								complete: (e) => {
									uni.hideLoading()
									
									if(!res.data.phone||res.data.phone==""||res.data.phone ==undefined){
										that.isPhone = true//显示自定义的获取手机权限提示框
										that.inputStatus = 'inline'
										that.inputContent = ''
									}
									else{
										// uni.switchTab({
										// 	url: '/pages/sale/sale'
										// });
										uni.switchTab({
											url: '/pages/sale/information'
										});
										console.log("complete")
										
									}
									
								}
							})
							
						})
					})
				})
			},
			wechatH5Login() {
				const that = this
				let href = window.location.origin
				let page = that.$api.prePage()
				let prePath = '/pages/index/index'
				if (page) {
					prePath = page.__page__.path
				}
				window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?' 
				+ 'appid=' + that.$api.defConfig().h5Appid + '&redirect_uri=' + escape(href) + '&response_type=code&scope=snsapi_userinfo&state=' + escape(prePath) + '#wechat_redirect'
			},
			liangxinLogin(){
				const that = this
				var userInfoTmp = uni.getStorageSync("userInfo")
				console.log('userInfoTmp',userInfoTmp)
				that.$socket.login(userInfoTmp.phone, "123456", null, res=>{
					console.log('粮信登录',res)
					if (res.success) {
						that.$socket.showLoginDialog = false
						// 缓存用户
						that.userData = res.response.data
						console.log('userData',that.userData)
						that.$u.vuex("userData", that.userData);
						// 	缓存通讯录
						that.$socket.listGuests(that.userData.user.operId, res => {						
							// #ifdef APP-PLUS
							createFSQL(that.userData.user.operId).then();
							let contact = res.response.data;
							contact.forEach(c=>{
								c.members.forEach(m=>{
									m.name = c.name;
									addFSQL(m, that.userData.user.operId).then();
								})
							})
							// #endif
							that.$u.vuex('firendItem', res.response.data)
						});
						
						// 缓存消息列表
						that.$socket.queryOnlineMessage(that.userData.user.operId,q =>{
							let data = q.response.data;
							for(var i in data){
								initData(data[i].groupMsg.list, data[i].groupInfo.chatId);
							}
						})
						
						//	缓存链接
						that.$socket.getLinks(that.userData.user.operId, res=>{
							that.$u.vuex('linkItem',res.response.data)
						});
						
						
						// // 跳转到消息列表
						// that.$u.route({
						// 	url: 'pages/home/home',
						// 	type: 'switchTab'
						// });
					} else {
					  uni.showModal({
						title:res.reason + "，请稍后再试",
						showCancel:false
					  })
					}
				});
			}
		},

	}
</script>

<style lang='scss' scoped>
	.apple{
		background: #000;
		width: 35px;
		height: 35px;
		padding: 8px;
		border-radius: 50%;
		vertical-align: middle;
	}
	page {
		background: #fff;
	}
	.cuIcon-weixin{
		background: #39b54a;
		color: #fff;
		font-size: 18px;
		padding: 9px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right:5px;
	}
	.close{
		width:20px;height:20px;position:absolute;
		right:30px;
	}
	.container {
		padding-top: 85px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: url('~@/static/img/login/bg.png');
		background-size:100%;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40upx;
		height:100%;
		padding:0 30px;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	.verificationCode{
		margin-top:20px;
		background:#F5F6F9;
		color:#AFB3BF;
	}
	.verificationCode.active{
		background:#22C572;
		color:#fff;
	}
	.verificationCode:after{
		border:none;
	}
	.register{
		position:absolute;
		bottom:20px;
		left:50%;
		transform: translateX(-50%);
		color:#333333;
		height:50px;
		line-height:50px;
		border-radius:30px;border: 1px solid #444444;
	}
	.register:after{
		border:none;
	}
	.title{
		font-size: 46rpx;
	}
	.phone-before-num{
		font-size: 34rpx;
		font-family: DINPro-Medium, DINPro;
		font-weight: 500;
		color: #333333;
	}
</style>