Commit 89d744de02ac8202c15f67067e8487dd08afc97e
1 parent
83a1b563
add 登录手机号 交互
Showing
4 changed files
with
55 additions
and
31 deletions
src/icons/svg/phone.svg
0 → 100644
| 1 | +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562056404689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4051" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M191.918519 959.457008l-0.031722-895.446136 639.72601 0-0.072655 895.446136L191.918519 959.457008zM517.665535 923.471422c32.980135 0 59.696614-26.715455 59.696614-59.697637 0-32.985252-26.716478-59.69559-59.696614-59.69559-32.985252 0-59.69559 26.710338-59.69559 59.69559C457.968921 896.754944 484.680283 923.471422 517.665535 923.471422L517.665535 923.471422zM767.400343 128.005372 255.832178 128.005372l0 639.310547 511.568165 0L767.400343 128.005372 767.400343 128.005372zM767.400343 128.005372" p-id="4052" fill="#889aa4"></path></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/yzm.svg
0 → 100644
| 1 | +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562056308501" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3090" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M830.989613 809.959136l-45.985334 0 0 68.978001c-2.156106 16.526395-22.992667 22.99369-22.992667 22.99369L187.190845 901.930827c-15.08865-1.436722-22.992667-22.99369-22.992667-22.99369L164.198178 143.166677c-2.155083-16.526395 22.992667-22.992667 22.992667-22.992667l574.820768 0c18.681478 0.719384 22.992667 22.992667 22.992667 22.992667l0 298.907741 45.985334 0L830.989613 97.181343c-5.02955-20.836561-22.99369-22.992667-22.99369-22.992667L141.205511 74.188676c-17.963117 1.437745-22.992667 22.992667-22.992667 22.992667l0 827.742151c1.436722 16.526395 22.992667 22.992667 22.992667 22.992667l666.791435 0c23.712051-5.747911 22.99369-22.992667 22.99369-22.992667L830.990636 809.959136zM716.025255 442.074418l0-68.978001L233.176179 373.096417l0 68.978001L716.025255 442.074418zM853.98228 488.059751 647.047254 694.993754l-91.970668-114.963335c-78.836533-26.282596-45.985334 45.985334-45.985334 45.985334l91.970668 114.965381c42.696428 49.275263 91.971691 0 91.971691 0l206.936049-206.936049C916.392702 461.777155 853.98228 488.059751 853.98228 488.059751z" p-id="3091" fill="#889aa4"></path></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/settings.js
src/views/login/index.vue
| @@ -7,39 +7,39 @@ | @@ -7,39 +7,39 @@ | ||
| 7 | <h3 class="title">登录</h3> | 7 | <h3 class="title">登录</h3> |
| 8 | </div> | 8 | </div> |
| 9 | 9 | ||
| 10 | - <el-form-item prop="username"> | 10 | + <el-form-item prop="phone"> |
| 11 | <span class="svg-container"> | 11 | <span class="svg-container"> |
| 12 | - <svg-icon icon-class="user"/> | 12 | + <svg-icon icon-class="phone" style="width:18px;height: 18px"/> |
| 13 | </span> | 13 | </span> |
| 14 | <el-input | 14 | <el-input |
| 15 | - ref="username" | ||
| 16 | - v-model="loginForm.username" | ||
| 17 | - placeholder="用户名" | ||
| 18 | - name="username" | 15 | + ref="phone" |
| 16 | + v-model="loginForm.phone" | ||
| 17 | + placeholder="手机号" | ||
| 18 | + name="phone" | ||
| 19 | type="text" | 19 | type="text" |
| 20 | tabindex="1" | 20 | tabindex="1" |
| 21 | + onkeyup = "value=value.replace(/[^\d]/g,'')" | ||
| 21 | auto-complete="on" | 22 | auto-complete="on" |
| 22 | /> | 23 | /> |
| 23 | </el-form-item> | 24 | </el-form-item> |
| 24 | 25 | ||
| 25 | <el-form-item prop="password"> | 26 | <el-form-item prop="password"> |
| 26 | <span class="svg-container"> | 27 | <span class="svg-container"> |
| 27 | - <svg-icon icon-class="password"/> | 28 | + <svg-icon icon-class="yzm" style="width:18px;height: 18px"/> |
| 28 | </span> | 29 | </span> |
| 29 | <el-input | 30 | <el-input |
| 30 | - :key="passwordType" | ||
| 31 | ref="password" | 31 | ref="password" |
| 32 | v-model="loginForm.password" | 32 | v-model="loginForm.password" |
| 33 | - :type="passwordType" | ||
| 34 | - placeholder="密码" | 33 | + type="text" |
| 34 | + placeholder="验证码" | ||
| 35 | name="password" | 35 | name="password" |
| 36 | tabindex="2" | 36 | tabindex="2" |
| 37 | + style="width: 140px;" | ||
| 37 | auto-complete="on" | 38 | auto-complete="on" |
| 39 | + onkeyup = "value=value.replace(/[^\d]/g,'')" | ||
| 38 | @keyup.enter.native="handleLogin" | 40 | @keyup.enter.native="handleLogin" |
| 39 | /> | 41 | /> |
| 40 | - <span class="show-pwd" @click="showPwd"> | ||
| 41 | - <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/> | ||
| 42 | - </span> | 42 | + <el-button type="primary" @click="getVerifyCode" :disabled="disabled" style="float:right;margin-top:6px;margin-right:10px;">{{btnTitle}}</el-button> |
| 43 | </el-form-item> | 43 | </el-form-item> |
| 44 | 44 | ||
| 45 | <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" | 45 | <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" |
| @@ -55,31 +55,37 @@ import {validUsername} from '@/utils/validate' | @@ -55,31 +55,37 @@ import {validUsername} from '@/utils/validate' | ||
| 55 | export default { | 55 | export default { |
| 56 | name: 'Login', | 56 | name: 'Login', |
| 57 | data() { | 57 | data() { |
| 58 | + //判断输入的手机号是否合法 | ||
| 58 | const validateUsername = (rule, value, callback) => { | 59 | const validateUsername = (rule, value, callback) => { |
| 59 | - if (!validUsername(value)) { | ||
| 60 | - callback(new Error('请输入正确用户名')) | ||
| 61 | - } else { | 60 | + console.log(value) |
| 61 | + if (!value) { | ||
| 62 | + callback(new Error('请输入手机号')) | ||
| 63 | + } else if(!/^1[345678]\d{9}$/.test(value)) { | ||
| 64 | + callback(new Error('请输入正确手机号')) | ||
| 65 | + }else | ||
| 66 | + { | ||
| 62 | callback() | 67 | callback() |
| 63 | } | 68 | } |
| 64 | } | 69 | } |
| 65 | const validatePassword = (rule, value, callback) => { | 70 | const validatePassword = (rule, value, callback) => { |
| 66 | - if (value.length < 6) { | ||
| 67 | - callback(new Error('请输入正确密码')) | 71 | + if (!value) { |
| 72 | + callback(new Error('请输入验证码')) | ||
| 68 | } else { | 73 | } else { |
| 69 | callback() | 74 | callback() |
| 70 | } | 75 | } |
| 71 | } | 76 | } |
| 72 | return { | 77 | return { |
| 73 | loginForm: { | 78 | loginForm: { |
| 74 | - username: 'admin', | ||
| 75 | - password: '111111' | 79 | + phone: '', |
| 80 | + password: '' | ||
| 76 | }, | 81 | }, |
| 77 | loginRules: { | 82 | loginRules: { |
| 78 | - username: [{ required: true, trigger: 'blur', validator: validateUsername }], | 83 | + phone: [{ required: true, trigger: 'blur', validator: validateUsername }], |
| 79 | password: [{ required: true, trigger: 'blur', validator: validatePassword }] | 84 | password: [{ required: true, trigger: 'blur', validator: validatePassword }] |
| 80 | }, | 85 | }, |
| 81 | loading: false, | 86 | loading: false, |
| 82 | - passwordType: 'password', | 87 | + disabled: false, |
| 88 | + btnTitle: '发送验证码', | ||
| 83 | redirect: undefined | 89 | redirect: undefined |
| 84 | } | 90 | } |
| 85 | }, | 91 | }, |
| @@ -92,15 +98,31 @@ export default { | @@ -92,15 +98,31 @@ export default { | ||
| 92 | } | 98 | } |
| 93 | }, | 99 | }, |
| 94 | methods: { | 100 | methods: { |
| 95 | - showPwd() { | ||
| 96 | - if (this.passwordType === 'password') { | ||
| 97 | - this.passwordType = '' | ||
| 98 | - } else { | ||
| 99 | - this.passwordType = 'password' | 101 | + getVerifyCode(){ |
| 102 | + if (!this.loginForm.phone) { | ||
| 103 | + new Error('请输入手机号!'); | ||
| 104 | + } else if(!/^1[345678]\d{9}$/.test(this.loginForm.phone)) { | ||
| 105 | + new Error('请输入正确手机号!'); | ||
| 100 | } | 106 | } |
| 101 | - this.$nextTick(() => { | ||
| 102 | - this.$refs.password.focus() | ||
| 103 | - }) | 107 | + //获取验证码 |
| 108 | + else { | ||
| 109 | + this.validateBtn() | ||
| 110 | + } | ||
| 111 | + }, | ||
| 112 | + validateBtn(){ | ||
| 113 | + //倒计时 | ||
| 114 | + let time = 60; | ||
| 115 | + let timer = setInterval(() => { | ||
| 116 | + if(time == 0) { | ||
| 117 | + clearInterval(timer); | ||
| 118 | + this.disabled = false; | ||
| 119 | + this.btnTitle = "获取验证码"; | ||
| 120 | + } else { | ||
| 121 | + this.btnTitle =time + '秒后重试'; | ||
| 122 | + this.disabled = true; | ||
| 123 | + time-- | ||
| 124 | + } | ||
| 125 | + },1000) | ||
| 104 | }, | 126 | }, |
| 105 | handleLogin() { | 127 | handleLogin() { |
| 106 | this.$refs.loginForm.validate(valid => { | 128 | this.$refs.loginForm.validate(valid => { |