From 89d744de02ac8202c15f67067e8487dd08afc97e Mon Sep 17 00:00:00 2001 From: chenbiao Date: Tue, 2 Jul 2019 17:28:08 +0800 Subject: [PATCH] add 登录手机号 交互 --- src/icons/svg/phone.svg | 1 + src/icons/svg/yzm.svg | 1 + src/settings.js | 2 +- src/views/login/index.vue | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------ 4 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 src/icons/svg/phone.svg create mode 100644 src/icons/svg/yzm.svg diff --git a/src/icons/svg/phone.svg b/src/icons/svg/phone.svg new file mode 100644 index 0000000..e69cdeb --- /dev/null +++ b/src/icons/svg/phone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/yzm.svg b/src/icons/svg/yzm.svg new file mode 100644 index 0000000..0974c20 --- /dev/null +++ b/src/icons/svg/yzm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/settings.js b/src/settings.js index ae3c494..1e02200 100644 --- a/src/settings.js +++ b/src/settings.js @@ -1,6 +1,6 @@ module.exports = { - title: 'Vue Admin Template', + title: '车主服务平台', /** * @type {boolean} true | false diff --git a/src/views/login/index.vue b/src/views/login/index.vue index f1ca656..873f25c 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -7,39 +7,39 @@

登录

- + - + - + - - - + {{btnTitle}} { - if (!validUsername(value)) { - callback(new Error('请输入正确用户名')) - } else { + console.log(value) + if (!value) { + callback(new Error('请输入手机号')) + } else if(!/^1[345678]\d{9}$/.test(value)) { + callback(new Error('请输入正确手机号')) + }else + { callback() } } const validatePassword = (rule, value, callback) => { - if (value.length < 6) { - callback(new Error('请输入正确密码')) + if (!value) { + callback(new Error('请输入验证码')) } else { callback() } } return { loginForm: { - username: 'admin', - password: '111111' + phone: '', + password: '' }, loginRules: { - username: [{ required: true, trigger: 'blur', validator: validateUsername }], + phone: [{ required: true, trigger: 'blur', validator: validateUsername }], password: [{ required: true, trigger: 'blur', validator: validatePassword }] }, loading: false, - passwordType: 'password', + disabled: false, + btnTitle: '发送验证码', redirect: undefined } }, @@ -92,15 +98,31 @@ export default { } }, methods: { - showPwd() { - if (this.passwordType === 'password') { - this.passwordType = '' - } else { - this.passwordType = 'password' + getVerifyCode(){ + if (!this.loginForm.phone) { + new Error('请输入手机号!'); + } else if(!/^1[345678]\d{9}$/.test(this.loginForm.phone)) { + new Error('请输入正确手机号!'); } - this.$nextTick(() => { - this.$refs.password.focus() - }) + //获取验证码 + else { + this.validateBtn() + } + }, + validateBtn(){ + //倒计时 + let time = 60; + let timer = setInterval(() => { + if(time == 0) { + clearInterval(timer); + this.disabled = false; + this.btnTitle = "获取验证码"; + } else { + this.btnTitle =time + '秒后重试'; + this.disabled = true; + time-- + } + },1000) }, handleLogin() { this.$refs.loginForm.validate(valid => { -- libgit2 0.21.4