vue登录组件Demo

data () {

return {

loginWay: false, // true代表短信登陆, false代表密码

computeTime: 0, // 计时的时间

showPwd: false, // 是否显示密码

phone: ‘’, // 手机号

code:‘’, // 短信验证码

name: ‘’, // 用户名

pwd: ‘’, // 密码

captcha: ‘’, // 图形验证码

alertText: ‘’, // 提示文本

alertShow: false, // 是否显示警告框

}

},

computed: {

rightPhone () {

return /^1\d{10}$/.test(this.phone)

}

},

methods: {

// 异步获取短信验证码

async getCode () {

// 如果当前没有计时

if(!this.computeTime) {

// 启动倒计时

this.computeTime = 30

this.intervalId = setInterval(() => {

this.computeTime–

if(this.computeTime<=0) {

// 停止计时

clearInterval(this.intervalId)

}

}, 1000)

// 发送ajax请求(向指定手机号发送验证码短信)

const result = await reqSendCode(this.phone)

if(result.code===1) {

// 显示提示

this.showAlert(result.msg)

// 停止计时

if(this.computeTime) {

this.computeTime = 0

clearInterval(this.intervalId)

this.intervalId = undefined

}

}

}

},

showAlert(alertText) {

this.alertShow = true

this.alertText = alertText

},

// 异步登陆

async login () {

let result

// 前台表单验证

if(this.loginWay) { // 短信登陆

const {rightPhone, phone, code} = this

if(!this.rightPhone) {

// 手机号不正确

this.showAlert(‘手机号不正确’)

return

} else if(!/^\d{6}$/.test(code)) {

// 验证必须是6位数字

this.showAlert(‘验证必须是6位数字’)

return

}

// 发送ajax请求短信登陆

result = await reqSmsLogin(phone, code)

} else {// 密码登陆

const {name, pwd, captcha} = this

if(!this.name) {

// 用户名必须指定

this.showAlert(‘用户名必须指定’)

return

} else if(!this.pwd) {

// 密码必须指定

this.showAlert(‘密码必须指定’)

return

} else if(!this.captcha) {

// 验证码必须指定

this.showAlert(‘验证码必须指定’)

return

}

// 发送ajax请求密码登陆

result = await reqPwdLogin({name, pwd, captcha})

}

// 停止计时

if(this.computeTime) {

this.computeTime = 0

clearInterval(this.intervalId)

this.intervalId = undefined

}

// 根据结果数据处理

if(result.code===0) {

const user = result.data

// 将user保存到vuex的state

this.$store.dispatch(‘recordUser’, user)

// 去个人中心界面

this.$router.replace(‘/profile’)

} else {

// 显示新的图片验证码

this.getCaptcha()

// 显示警告提示

const msg = result.msg

this.showAlert(msg)

}

},

// 关闭警告框

closeTip () {

this.alertShow = false

this.alertText = ‘’

},

// 获取一个新的图片验证码

getCaptcha () {

// 每次指定的src要不一样

this.$refs.captcha.src = ‘http://localhost:4000/captcha?time=’+Date.now()

}

},

components: {

AlertTip

}

}