<template>
<div id="register">
<childHeadComponent :headName='"重置密码"' @closeComp='closeRegister'></childHeadComponent>
<div class="regist">
<h2>通过手机号重置密码</h2>
<ul>
<li>
<el-input v-model="tel" placeholder="手机号" type="number"></el-input>
</li>
<li>
<el-input v-model="code" placeholder="输入验证码" type="number" style="65%"></el-input>
<el-button type="primary" style="30%" @click="getCode">{{codeText}}</el-button>
</li>
<li>
<el-input v-model="password" placeholder="输入新密码，6~20位字母或数字" show-password></el-input>
</li>
<li>
<el-input v-model="surePass" placeholder="再次输入新密码" show-password></el-input>
</li>
</ul>
<div class="btn">
<el-button type="primary" @click="submitPass">确认提交</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'register',
data: function() {
return {
codeText:"获取验证码",
tel:'',
code:'',
password:'',
surePass:'',
sendCode:false,
}
},
methods: {
// 关闭按钮
closeRegister(){
this.$emit('closeRegist')
},
// 获取验证码
getCode(){
if(this.sendCode){
return;
}
const telReg = /^1[3|4|5|6|7|8][0-9]d{8}$/;
if(!telReg.test(this.tel)){
this.$message({
message: '请输入正确手机号',
type: 'warning'
});
return;
}
this.$http.post(this.baseUrlStaff+'/api/v1/staff/pb/code/get',{
"phoneNumber": this.tel,
"smsType": 3
}).then((res)=>{
this.sendCode = true;
var sec = 60;
this.codeText = sec+'S后重试'
var timer = setInterval(() => {
sec--
this.codeText = sec+'S后重试'
if(sec <= 0){
this.codeText = '重新获取'
clearInterval(timer)
}
}, 1000);
setTimeout(() => {
this.sendCode = false;
}, 60000);
})
},
// 确认提交
async submitPass(){
const telReg = /^1[3|4|5|6|7|8][0-9]d{8}$/;
if(!telReg.test(this.tel)){
this.$message({
message: '请输入正确手机号',
type: 'warning'
});
return;
}
if(!this.code){
this.$message({
message: '请输入验证码',
type: 'warning'
});
return;
}
let checkcode = await this.checkCode();
if(!checkcode){
this.$message({
message: '验证码不正确',
type: 'warning'
});
return;
}
const pswReg = /^[0-9a-zA-Z]{6,20}$/;
if(!pswReg.test(this.password)){
this.$message({
message: '请输入6~20位字母或数字',
type: 'warning'
});
return;
}
if(this.surePass != this.password){
this.$message({
message: '两次密码不一致',
type: 'warning'
});
return;
}
this.$http.post(this.baseUrlStaff+'/api/v1/staff/pb/password/set',{
"password": this.password,
"passwordRepeat": this.surePass,
"phoneNumber": this.tel
}).then((res)=>{
if(res.errorMsg == "success"){
this.$message({
message: '修改成功！',
type: 'success',
duration:1500
});
setTimeout(() => {
this.$emit('closeRegist')
}, 1500);
}else{
this.$message({
message: res.errorMsg,
type: 'warning',
duration:1500
});
}
})
},
checkCode(){
return new Promise((resolve,reject)=>{
this.$http.post(this.baseUrlStaff + '/api/v1/staff/pb/code/check',{
"code":this.code,
"phoneNumber": this.tel,
"smsType": 3
}).then((res)=>{
if(res.errorMsg == 'success'){
resolve(true)
}
})
})
}
}
}
</script>
<style scoped lang='scss'>
#register{
800px;
height: 50%;
background: white;
padding: 0 20px 20px;
box-sizing: border-box;
color: #696969;
.regist{
400px;
margin: 0 auto;
h2{
margin-top: 30px;
font-weight: bold;
}
li{
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.btn{
50%;
margin: 50px auto 0;
}
}
}
</style>