BJ_web_developers / HSpark

Commit 89d744de02ac8202c15f67067e8487dd08afc97e

Authored by Andy
1 parent 83a1b563

add 登录手机号 交互

Inline Side-by-side
Showing 4 changed files with 55 additions and 31 deletions
src/icons/svg/phone.svg 0 → 100644
  View file @89d744d
  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 2 \ No newline at end of file
... ...
src/icons/svg/yzm.svg 0 → 100644
  View file @89d744d
  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 2 \ No newline at end of file
... ...
src/settings.js
  View file @89d744d
1 1 module.exports = {
2 2  
3   - title: 'Vue Admin Template',
  3 + title: '车主服务平台',
4 4  
5 5 /**
6 6 * @type {boolean} true | false
... ...
src/views/login/index.vue
  View file @89d744d
... ... @@ -7,39 +7,39 @@
7 7 <h3 class="title">登录</h3>
8 8 </div>
9 9  
10   - <el-form-item prop="username">
  10 + <el-form-item prop="phone">
11 11 <span class="svg-container">
12   - <svg-icon icon-class="user"/>
  12 + <svg-icon icon-class="phone" style="width:18px;height: 18px"/>
13 13 </span>
14 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 19 type="text"
20 20 tabindex="1"
  21 + onkeyup = "value=value.replace(/[^\d]/g,'')"
21 22 auto-complete="on"
22 23 />
23 24 </el-form-item>
24 25  
25 26 <el-form-item prop="password">
26 27 <span class="svg-container">
27   - <svg-icon icon-class="password"/>
  28 + <svg-icon icon-class="yzm" style="width:18px;height: 18px"/>
28 29 </span>
29 30 <el-input
30   - :key="passwordType"
31 31 ref="password"
32 32 v-model="loginForm.password"
33   - :type="passwordType"
34   - placeholder="密码"
  33 + type="text"
  34 + placeholder="验证码"
35 35 name="password"
36 36 tabindex="2"
  37 + style="width: 140px;"
37 38 auto-complete="on"
  39 + onkeyup = "value=value.replace(/[^\d]/g,'')"
38 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 43 </el-form-item>
44 44  
45 45 <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
... ... @@ -55,31 +55,37 @@ import {validUsername} from &#39;@/utils/validate&#39;
55 55 export default {
56 56 name: 'Login',
57 57 data() {
  58 + //判断输入的手机号是否合法
58 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 67 callback()
63 68 }
64 69 }
65 70 const validatePassword = (rule, value, callback) => {
66   - if (value.length < 6) {
67   - callback(new Error('请输入正确密码'))
  71 + if (!value) {
  72 + callback(new Error('请输入验证码'))
68 73 } else {
69 74 callback()
70 75 }
71 76 }
72 77 return {
73 78 loginForm: {
74   - username: 'admin',
75   - password: '111111'
  79 + phone: '',
  80 + password: ''
76 81 },
77 82 loginRules: {
78   - username: [{ required: true, trigger: 'blur', validator: validateUsername }],
  83 + phone: [{ required: true, trigger: 'blur', validator: validateUsername }],
79 84 password: [{ required: true, trigger: 'blur', validator: validatePassword }]
80 85 },
81 86 loading: false,
82   - passwordType: 'password',
  87 + disabled: false,
  88 + btnTitle: '发送验证码',
83 89 redirect: undefined
84 90 }
85 91 },
... ... @@ -92,15 +98,31 @@ export default {
92 98 }
93 99 },
94 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 127 handleLogin() {
106 128 this.$refs.loginForm.validate(valid => {
... ...