2021-11-05

获取验证码-完成注册

先说一下思路，
1.输入手机号
2.点击获取验证码 （判断手机号是否正确 ==> 验证码倒计时 ==>判断验证码是否正确）。

1、输入手机号：

<input class="conInp" v-model="step1Params.mobile" type="text" />

验证码和手机号放在 step1Params 里。

	step1Params: {
     
					mobile: '',
					sms_code: ''
				},

2、点击获取验证-判断手机号是否正确

2.1

	getCode() {
     
				const reg = /^1(3|4|5|6|7|8|9)\d{9}$/
				if (this.getCodeisWaiting) {
     
					return;
				}
				//校验手机号码
				if (!reg.test(this.step1Params.mobile)) {
     
					uni.showToast({
     
						title: '请填写正确手机号',
						icon: "none"
					});
					return
				}
				this.getCodeText = "发送中" //点击“发送验证码”后显示——“发送中”
				this.getCodeisWaiting = true;//显示等待
				this.getCodeColor = "#02D5EA"//“发送中”颜色
				this.sendCode()//调用sendCode
			},

2.2

			//发送验证码
			sendCode() {
     
				this.$http({
     
					url: '/api.user/register?act=get_sms_code',
					method: 'POST',
					data: {
     
						mobile: this.step1Params.mobile
					}
				}).then(res => {
     
					this.smsInfo = res.data
					uni.showToast({
     
						title: '验证码已发送',
						icon: "none"
					})

					this.setTimer()
				})
			}

2.3

	setTimer() {
     
			let holdTime = 60;
			this.getCodeText = "重新获取(60)"

			this.Timer = setInterval(() => {
     
				if (holdTime <= 0) {
     
					this.getCodeisWaiting = false;
					this.getCodeColor = "#ccc";
					clearInterval(this.Timer);
					this.Timer = null
					return
				}
				this.getCodeText = "重新获取(" + holdTime + ")"
				holdTime--;
			}, 1000)
		},

3、（点注册）判断验证码是否正确

	inforChange() {
     
				console.log(this.$tools);
				this.$tools.checkForm(this.step1Params, this.step1Rules).then(() => {
     
					if (this.step1Params.password !== this.step1Params.password2) {
     
						uni.showToast({
     
							title: '两次输入密码不一致',
							icon: 'none'
						})
						// return
					} else if (this.step1Params.sms_code !== this.smsInfo.sms_code) {
     
						uni.showToast({
     
							title: '验证码不正确',
							icon: 'none'
						})
					}
					return
					this.isReg = !this.isReg;
				})
			},

checkForm是校验表单的一个方法，放在一个目录下面

export default {
     
	checkForm(form, rules) {
     
		return new Promise((resolve, reject) => {
     
			for (let key in rules) {
     
				if (!form[key]) {
     
					uni.showToast({
     
						title: rules[key],
						icon: 'none'
					})
					reject(rules[key])
					break
				}
			}
			
			resolve()
		})
	}
}