Skip to content

Instantly share code, notes, and snippets.

@flxxyz
Last active April 16, 2019 09:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save flxxyz/64ceb06a0754d67a771b3e3e7dc94d48 to your computer and use it in GitHub Desktop.
一个满足基本需求的手机号登录组件
<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