短信验证码登录

pages/login/login.vue

@@ -7,7 +7,7 @@
 			<view class="login-input">
 				<text class="iconfont icon-shouji"></text>
 				<input
-					type="text"
+					type="number"
 					v-model="codeParams.mobile"
 					maxlength="11"
 					class="input"
@@ -18,16 +18,14 @@
 			<view class="login-input">
 				<text class="iconfont icon-duanxin"></text>
 				<input
-					type="text"
+					type="number"
 					v-model="codeParams.code"
 					maxlength="6"
 					class="input code"
 					placeholder="请输入短信验证码"
 					@input="handleSmsCode"
 				/>
-				<view class="code-btn" @click.stop="handleMobileCode" >
-					{{ mobileCodeText }}
-				</view>
+				<view class="code-btn" @click.stop="handleMobileCode"> {{ mobileCodeText }} </view>
 			</view>
 			<view class="login-input link">
 				<view class="login-reg" @click.stop="navigatorRegirst('/pages/login/register-select')">免费注册</view>
@@ -63,8 +61,12 @@
 				<view class="login-pwd" @click.stop="handeleLogin(0)">验证码登录</view>
 			</view>
 		</view>
-		<button class="login-btn" :disabled="isDisabled" :class="isDisabled ? 'disabled' : ''"  @click="handleSubLogin">登录</button>
-		<view class="login-text" v-if="loginType === 1" @click.stop="this.$api.navigateTo('/pages/login/password')">忘记密码?</view>
+		<button class="login-btn" :disabled="isDisabled" :class="isDisabled ? 'disabled' : ''" @click="handleSubLogin">
+			登录
+		</button>
+		<view class="login-text" v-if="loginType === 1" @click.stop="this.$api.navigateTo('/pages/login/password')"
+			>忘记密码?</view
+		>
 		<view class="login-btn-last" @click.stop="this.$api.navigateTo(`/pages/login/logincode?data=${getOption}`)"
 			>邀请码登录></view
 		>
@@ -84,20 +86,20 @@ export default {
 				password: '', //用户登录密码
 				unionId: ''
 			},
-			codeParams:{
+			codeParams: {
 				mobile: '', //用户登录手机号
-				code:'',
+				code: '',
 				unionId: ''
 			},
-			smsCodeParams:{
-				mobile: '', //用户登录手机号
+			smsCodeParams: {
+				mobile: '' //用户登录手机号
 			},
 			loginType: 0,
 			isMobileDisabled: false, //手机验证码按钮控制
 			mobilCount: '', //倒计时
 			mobileCodeText: '获取验证码',
 			mobilTime: null,
-			isDisabled:true
+			isDisabled: true
 		}
 	},
 	onLoad(option) {
@@ -108,115 +110,112 @@ export default {
 	},
 	methods: {
 		...mapMutations(['login']),
-		handleMobileOrEmail(e){//
+		handleMobileOrEmail(e) {
+			//账号输入
 			this.accountParams.mobileOrEmail = e.detail.value
 			this.handldeCheckInput()
 		},
-		handlePassword(e){
+		handlePassword(e) {
+			//密码输入
 			this.accountParams.password = e.detail.value
 			this.handldeCheckInput()
 		},
-		handleMobile(e){
-			this.codeParams.mobile = this.smsCodeParams.mobile =  e.detail.value
+		handleMobile(e) {
+			//短信验证手机号输入
+			this.codeParams.mobile = this.smsCodeParams.mobile = e.detail.value
 			this.handldeCheckInput()
 		},
-		handleSmsCode(e){
+		handleSmsCode(e) {
+			//短信验证码输入
 			this.codeParams.code = e.detail.value
 			this.handldeCheckInput()
 		},
-		handldeCheckInput(){
-			// 监听控制按钮
-			if(this.loginType === 0){
-				if(this.codeParams.mobile !== "" && this.codeParams.code !==""){
-					this.isDisabled =false;
-				}else{
-					this.isDisabled =true;
-				}
-			}else{
-				if(this.accountParams.mobileOrEmail !== "" && this.accountParams.password !==""){
-					this.isDisabled =false;
-				}else{
-					this.isDisabled =true;
-				}
+		handldeCheckInput() {
+			// 控制按钮按钮高亮
+			if (this.loginType === 0) {
+				this.isDisabled = !(this.codeParams.mobile !== '' && this.codeParams.code !== '')
+			} else {
+				this.isDisabled = !(this.accountParams.mobileOrEmail !== '' && this.accountParams.password !== '')
 			}
 		},
-		handeleLogin(type) {
-			this.loginType = type
-		},
 		handleMobileCode() {
 			// 获取短信验证码
-			if( this.smsCodeParams.mobile == ''){
-				this.$util.msg('请输入手机号',2000);
+			if (this.smsCodeParams.mobile == '') {
+				this.$util.msg('请输入手机号', 2000)
 				return
 			}
-			if(!this.$reg.isMobile(this.smsCodeParams.mobile)){
-				this.$util.msg('请输入正确的手机号',2000);
+			if (!this.$reg.isMobile(this.smsCodeParams.mobile)) {
+				this.$util.msg('请输入正确的手机号', 2000)
 				return
 			}
-			this.isMobileDisabled = true;
+			this.isMobileDisabled = true
 			this.userLoginCode(this.smsCodeParams)
 		},
-		userLoginCode(params){
+		userLoginCode(params) {
 			// 获取登录短息验证码
-			this.UserService.userLoginCode(params).then(response =>{
-				this.$util.msg('获取验证码成功',2000);
-				const TIME_COUNT = 60;
-			 	if (!this.mobilTime) {
-			   		this.mobilCount = TIME_COUNT;
-			   		this.isMobileDisabled = true;
-			   		this.mobilTime = setInterval(() => {
-			   			if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
-			     			this.mobilCount--
-			     			this.mobileCodeText = this.mobilCount +'s'
-			    		} else {
-			         		this.isMobileDisabled = false;
-			         		clearInterval(this.mobilTime)
-			         		this.mobilTime = null
-							this.mobileCodeText = '获取验证码'
-			    		}
-			   		},1000)
-			  	}
-			}).catch( error =>{
-				this.$util.msg(error.msg,2000);
-				this.isMobileDisabled = false;
-			})
+			this.UserService.userLoginCode(params)
+				.then(response => {
+					this.$util.msg('获取验证码成功', 2000)
+					const TIME_COUNT = 60
+					if (!this.mobilTime) {
+						this.mobilCount = TIME_COUNT
+						this.isMobileDisabled = true
+						this.mobilTime = setInterval(() => {
+							if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
+								this.mobilCount--
+								this.mobileCodeText = this.mobilCount + 's'
+							} else {
+								this.isMobileDisabled = false
+								clearInterval(this.mobilTime)
+								this.mobilTime = null
+								this.mobileCodeText = '获取验证码'
+							}
+						}, 1000)
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+					this.isMobileDisabled = false
+				})
 		},
 		async handleSubLogin() {
+			// 点击登录
 			const _storage = await this.$api.getStorage()
 			this.accountParams.unionId = this.codeParams.unionId = _storage.unionId ? _storage.unionId : ''
-			if(this.loginType === 0){
+			if (this.loginType === 0) {
 				this.userCodeLogin()
-			}else{
+			} else {
 				this.userPasswordLogin()
 			}
 		},
-		userCodeLogin(){
+		userCodeLogin() {
 			// 短信验证码登录
 			this.UserService.userCodeLogin(this.codeParams).then(response => {
 				this.updataeStatus(response)
 			})
-		},	
+		},
 		userPasswordLogin() {
 			// 账号密码登录
 			this.UserService.AorganizationLogin(this.accountParams).then(response => {
 				this.updataeStatus(response)
 			})
 		},
-		updataeStatus(response) {// 处理返回数据
-			if (response.code === 0) {
-				uni.setStorageSync('token', response.data.token)
-				this.$store.commit('updateStatus', response.data)
-				this.login(response.data)
+		updataeStatus(data) {
+			// 处理返回数据
+			if (data.code === 0) {
+				uni.setStorageSync('token', data.data.token)
+				this.$store.commit('updateStatus', data.data)
+				this.login(data.data)
 				this.$api.navigateTo(
-					`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${response.code}`
+					`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${data.code}`
 				)
-			} else if (response.code === -3) {
+			} else if (data.code === -3) {
 				this.$util.modal('', '您的企业账号审核未通过，请修改资料', '前往修改', '', false, () => {
-					this.$store.commit('updateStatus', response.data)
+					this.$store.commit('updateStatus', data.data)
 					this.$api.navigateTo('/pages/login/apply-supplier')
 				})
 			} else {
-				this.$util.msg(response.msg, 2000)
+				this.$util.msg(data.msg, 2000)
 			}
 		},
 		navigatorRegirst(url) {
@@ -229,6 +228,9 @@ export default {
 			}
 			this.$api.navigateTo(url)
 		},
+		handeleLogin(type) {
+			this.loginType = type
+		},
 		async checkedAuthorize() {
 			//是否已授权 0:为取消授权 1:为已授权 2:为未操作
 			wxLogin.wxLoginQuick()
@@ -283,11 +285,11 @@ export default {
 			color: #333333;
 			padding-left: 100rpx;
 			box-sizing: border-box;
-			&.code{
+			&.code {
 				padding-right: 200rpx;
 			}
 		}
-		.code-btn{
+		.code-btn {
 			width: 200rpx;
 			height: 80rpx;
 			position: absolute;
@@ -336,8 +338,8 @@ export default {
 		margin: 0 auto;
 		text-align: center;
 		background: $btn-confirm;
-		&.disabled{
-			background: #E2E2E2;
+		&.disabled {
+			background: #e2e2e2;
 		}
 	}
 	.login-text {