<template>
<div class="login-container">
<!-- start内容 -->
<div class="loginBox">
<el-form
ref="forgetForm"
:model="forgetForm"
:rules="forgetRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<div class="title-container">
<h3 class="title">一点存后台管理系统</h3>
<span class="subtit">一点存是全球领先的基于区块链技术进行存证和取证的</span>
</div>
<el-form-item prop="phone">
<span class="svg-container">
<svg-icon icon-class="user"/>
</span>
<el-input
v-model="forgetForm.phone" :btnTitle="forgetForm.btnTitle" :error="forgetForm.errors.phone"
placeholder="请输入您的手机号码"
type="number"/>
</el-form-item>
<el-form-item prop="verifyCode">
<span class="svg-container">
<svg-icon icon-class="user"/>
</span>
<el-input
v-model="forgetForm.verifyCode" :error="forgetForm.errors.code"
placeholder="请输入验证码"
type="number"/>
<el-button @click="GetCode()" v-show="verShow" type="primary" class="huoquyan">获取验证码</el-button>
<el-button disabled v-show="!verShow" class="huoquyan" type="info"><span>{{timer}}</span>秒后重新获取</el-button>
</el-form-item>
<el-form-item prop="newpass" >
<el-input v-model="forgetForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input>
</el-form-item>
<el-form-item prop="checknewpass" >
<el-input v-model="forgetForm.checknewpass" placeholder="重复新密码" id="newkey1" type="password"></el-input>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" @click="editPwd">重置密码</el-button>
</el-form>
</div>
<div class="footer">Copyright© 2020 众家联提供技术支持</div>
<!-- end底部 -->
</div>
</template>
<script>
import request from '@/utils/request';
export default {
data() {
var checkMobile = (rule, value, callback) => {
const checkMobile = /^1[3,4,5,6,7,8,9][0-9]{9}$/
if(checkMobile.test(value)){ return callback() }
callback(new Error('请正确输入手机号码'))
}
const validateMobile = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
};
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("The password can not be less than 6 digits"));
} else {
callback();
}
};
return {
verShow: true ,// 判断显示那个按钮
timer: 60 ,// 短信验证码倒计时
forgetForm: {
phone:"18988886666",
verifyCode:"",
errors:{},
btnTitle: "获取验证码",
disabled: false,
newpass:"",
checknewpass:"",
// password: "123456"
},
forgetRules: {
phone: [
{required: true, message: '请输入手机号码', trigger: 'blur'},
{validator: checkMobile, trigger: 'blur' }
],
newpass: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min:6, max:15, message:'用户名长度在6到15字符', trigger: 'blur'}
],
checknewpass: [
{required: true, message: '请再次重复输入密码', trigger: 'blur'},
{min:6, max:15, message:'用户名长度在6到15字符', trigger: 'blur'}
],
verifyCode: [
{required: true, message: '请输入验证码', trigger: 'blur'},
]
},
};
},
methods: {
//验证手机号码
GetCode () {
const regEmali = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regEmali.test(this.forgetForm.phone)) {
this.verShow = false
this.$store.dispatch
request({
url: '/lit/protected/lit/sendCode/' + this.forgetForm.phone,
method: 'get',
})
// ('/api/srm/lit/protected/lit/sendCode' + this.forgetForm.phone).then(() => {})
// if( res.meta.status !== 200 ){
// return this.$message.error('发送验证码失败')
// }
const authTimer = setInterval(() => {
this.timer--
if (this.timer <= 0) {
this.verShow = true
this.timer = 60
clearInterval(authTimer)
}
}, 1000)
} else {
this.$message.error('请输入合法手机')
}
},
editPwd(){
this.$refs.forgetForm.validate(vaild =>{
console.log(vaild)
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
position: fixed;
height: 100%;
width: 100%;
background-color: $bg;
.login-form {
position: absolute;
left: 0;
right: 0;
width: 520px;
max-width: 100%;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.subtit{text-align: center;
color: #fff;
display: block;
font-size: 14px;
margin-bottom: 50px;}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.huoquyan {position: absolute;
right: 0;
line-height: 28px;}
.title {
font-size: 26px;
font-weight: 400;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
.footer{
bottom:20px;
text-align: center;
position: fixed;
width: 100%;
color: #cccccc;
}
</style>
