Last active
April 16, 2019 09:34
-
-
Save flxxyz/64ceb06a0754d67a771b3e3e7dc94d48 to your computer and use it in GitHub Desktop.
一个满足基本需求的手机号登录组件
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="login-wrapper"> | |
<div class="title-bar">登录</div> | |
<div class="wrapper phone-wrapper"> | |
<span class="title">手机号</span> | |
<input class="input phone" type="text" placeholder="手机号" | |
:value="phone" | |
ref="phone" v-on:change="changePhone" v-on:input="changePhone"> | |
</div> | |
<div class="wrapper code-wrapper"> | |
<span class="title">验证码</span> | |
<input class="input code" type="number" placeholder="验证码" | |
:value="code" | |
ref="code" v-on:change="changeCode" v-on:input="changeCode"> | |
<div @click="loginCode" class="send">{{codeText}}</div> | |
</div> | |
<div class="wrapper btn-wrapper"> | |
<div class="input btn" @click="login">登录</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
const 这是一个登录的接口 = function () {return new Promise((resolve, reject) => {resolve(phone, code)})} | |
const 这是一个发送验证码的接口 = function () {return new Promise((resolve, reject) => {resolve(phone)})} | |
export default { | |
name: "LoginPhone", | |
data() { | |
return { | |
phone: '', //输入框中的手机号 | |
code: '', //输入框中的验证码 | |
codeText: '获取验证码', //倒计时显示文字 | |
timingBoard: 60, //倒计时数 | |
isRecede: false, //判断正在倒计时阶段,不允许用户再点击 | |
timer: null, | |
} | |
}, | |
methods: { | |
//获取验证码 | |
async loginCode() { | |
if (this.isRecede) { | |
this.error('有用户在夏季八点') | |
} | |
console.log('start login') | |
这是一个发送验证码的接口() | |
let result = await 这是一个发送验证码的接口(this.phone) | |
// let result = {code:1}; | |
console.log('验证码接口 result=', result) | |
if (result.code == 1) { | |
//成功登录 | |
console.log('请在手机短信查收验证码') | |
this.isRecede = true | |
//开始获取验证码倒计时 | |
this.recede() | |
} else { | |
//登录失败 | |
console.log('获取验证码失败') | |
} | |
}, | |
//开始登录 | |
async login() { | |
if (!this.phone) { | |
this.error('请填写手机号'); | |
} | |
if (!this.code) { | |
this.error('请填写验证码'); | |
} | |
if (!/^1[345789]\d{9}$/.test(this.phone)) { | |
this.error('请检查手机号是否正确'); | |
} | |
if (!/^[0-9]{4}$/.test(this.code)) { | |
this.error('验证码不正确') | |
} | |
let result = await 这是一个登录的接口(this.phone, this.code) | |
console.log(result) | |
if (result.code == 1) { | |
console.log('登录成功') | |
} else { | |
this.code = '' | |
console.log('登录失败') | |
} | |
}, | |
//获取验证码倒计时定时器 | |
recede() { | |
this.timer = setInterval(() => { | |
console.log('开始定时器,', this.timingBoard) | |
this.codeText = `${this.timingBoard}s` | |
this.timingBoard-- | |
if (this.timingBoard < 0) { | |
this.isRecede = false | |
this.timingBoard = 60 | |
this.codeText = '获取验证码' | |
clearInterval(this.timer) | |
} | |
}, 1000) | |
}, | |
//稽查手机号输入框的长度 | |
changePhone() { | |
if (this.$refs.phone.value.length <= 11) { | |
this.phone = this.$refs.phone.value | |
} else { | |
this.$refs.phone.value = this.phone | |
} | |
}, | |
//稽查验证码输入框的长度 | |
changeCode() { | |
if (this.$refs.code.value.length <= 4) { | |
this.code = this.$refs.code.value | |
} else { | |
this.$refs.code.value = this.code | |
} | |
}, | |
error(msg) { | |
throw new Error(msg) | |
} | |
}, | |
destroyed() { | |
this.phone = ''; | |
this.timingBoard = 60; | |
clearInterval(this.timer); | |
} | |
} | |
</script> | |
<style scoped lang="less"> | |
.login-wrapper { | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
background-color: #ff9cc6; | |
font-size: 32px; | |
.title-bar { | |
width: 100%; | |
height: 64px; | |
line-height: 64px; | |
text-align: center; | |
color: #fff; | |
font-size: 45px; | |
} | |
.wrapper { | |
overflow: auto; | |
width: 90%; | |
height: 80px; | |
line-height: 80px; | |
background-color: #fff; | |
margin-left: 5%; | |
margin-right: 5%; | |
margin-bottom: 10px; | |
border-radius: 20px; | |
.title { | |
display: inline-block; | |
line-height: 10.667vw; | |
width: 125px; | |
padding-left: 32px; | |
} | |
} | |
.input { | |
width: 65%; | |
font-size: 32px; | |
border: 0; | |
} | |
.phone-wrapper { | |
margin-top: 50%; | |
} | |
.code-wrapper { | |
position: relative; | |
top: 0; | |
left: 0; | |
.code { | |
width: 45%; | |
} | |
.send { | |
cursor: pointer; | |
position: absolute; | |
top: 8px; | |
right: 10px; | |
padding-left: 5px; | |
height: 64px; | |
line-height: 64px; | |
border-left: 1px solid #c9c9c9; | |
text-align: center; | |
color: #ffab3e; | |
} | |
} | |
.btn-wrapper { | |
margin-top: 65px; | |
.btn { | |
margin: 0 auto; | |
width: 100%; | |
text-align: center; | |
} | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment