vue 移動端手寫手機驗證碼登入
阿新 • • 發佈:2020-07-28
<template> <div class="contentLogin"> <!-- <div class="login">登入</div> --> <div class="contrain"> <form class="form" action=""> <div class="formItem"> <div class="label">姓名</div> <div class="import"> <input class="name" ref="name" type="text" placeholder="請輸入..."> </div> </div> <div class="formItem"> <div class="label">手機</div> <div class="import"> <input class="phone" ref="phone" type="text" placeholder="請輸入..."> </div> </div> <div class="formItem"> <div class="label">驗證碼</div> <div class="import"> <input class="code" ref="code" type="text" placeholder="請輸入..."> <button type="button" v-if="btnTitle" class="send" @click='getCode' :disabled='disabled'>{{btnTitle}}</button> </div> </div> <input class="simulation" @click='present' type="button" value="開始模擬" > <img class="logo" src="./../assets/img/logo.png" alt=""> </form> </div> </div> </template>
export default { data(){ return{ name:'', phone:'', code:'', btnTitle:'獲取驗證碼', disabled:false, } }, methods:{ // 開始模擬 present(){ if(this.$refs.name.value ==''){ this.$toast('請輸入使用者名稱'); return false } if(!/^1[345678]\d{9}$/.test(this.$refs.phone.value)){ this.$toast('請輸入正確的手機號') return false } if(this.$refs.code.value == ''){ this.$toast('請輸入驗證碼') return false } this.$http.post('https://hfmtool.staff.xdf.cn/hl/free/recruit/saveUserInfo',{ studentName:this.$refs.name.value, phone:this.$refs.phone.value, smsCode:this.$refs.code.value }).then(res =>{ if(res.data.code == '1'){ // this.$store.state.studentName = res.data.data.studentName this.$router.push({ name:'StepOne'}) }else{ this.$toast(res.data.message); } }) }, // 獲取驗證碼 getCode(){ if(!/^1[345678]\d{9}$/.test(this.$refs.phone.value)){ this.$toast('手機號碼錯誤'); }else{ this.validateBtn() this.$http.post('https://hfmtool.staff.xdf.cn/hl/free/recruit/sendPhoneVerifyCode',{ phone:this.$refs.phone.value }).then(res =>{ // console.log(res) if(res.data.code == '1'){ this.$toast("驗證碼已傳送,請注意查收。"); }else{ this.$toast(res.data.message); } }) } }, validateBtn(){ //倒計時 let time = 60; let timer = setInterval(() => { if(time == 0) { clearInterval(timer); this.disabled = false; this.btnTitle = "獲取驗證碼"; } else { this.btnTitle =time + '秒後重試'; this.disabled = true; time-- } },1000) }, }, created(){ } }
.contentLogin{ width:100%; height:100%; background: url('./../img/loginBg.png') no-repeat center center; background-size: 100% 100%; position: relative; box-sizing: border-box; padding-bottom: 30px; } .login{ width: 100%; line-height: 70px; text-align: center; color: #fff; font-size: 36px; /* font-weight: 600; */ position: absolute; left: 0; top: 2%; } .contrain{ position: absolute; left: 0; right: 0; bottom: 0; top: 50%; width: 100%; background: #fff; border-top-left-radius: 40px; border-top-right-radius: 40px; } .form{ width:690px; overflow: hidden; margin: 0 auto; box-sizing: border-box; /* padding-top: 75px; */ /* background: #c00; */ } .formItem{ width: 100%; height: 85px; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box; padding:0 15px; margin-bottom: 32px; display: flex; overflow: hidden; } .form .formItem:nth-child(1){ margin-top: 75px; } .form .formItem:nth-child(3){ margin-bottom: 100px; } .label{ width: 110px; height: 85px; line-height: 85px; font-size: 26px; color: #313952; font-weight: 600; } input:focus{outline:none;} .import{ display: flex; width:calc(100% - 110px); box-sizing: border-box; align-items: center; /* padding-top: 4px 0; */ /* height: 85px; */ /* align-items: center; */ } .import input{ display: block; width: 100%; /* margin-top: 4px; */ height: 76px; line-height: 76px; background-color: #fff; /* border: none; */ font-size: 26px; } /* .name, .phone{ } */ .import .code{ display: block; width: 350px !important; margin-top: 2px; height: 74px; line-height: 74px; /* border: none; */ font-size: 26px; background-color: #fff; } .send{ width: 200px !important; height: 76px; line-height: 76px; text-align: center; font-size: 26px; color: #e54b5b; background: none; } .simulation{ display: block; width: 610px; font-size: 34px; height: 85px; color: #fff; border-radius:15px; background: #ee4657; margin: 0 auto; /* margin-top: 100px; */ } .logo{ display: block; border: none !important; margin: 50px auto 30px; width: 142px; height: 56px; }