<template>
<div class="page">
<div class="login-box">
<p data-v-032893be class="title">欢迎登录</p>
<el-tabs v-model="activeName">
<el-tab-pane label="密码登录" name="first">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="0"
class="demo-ruleForm"
>
<el-form-item prop="account">
<el-input
type="text"
prefix-icon="el-icon-user-solid"
v-model="ruleForm.account"
auto-complete="off"
placeholder="请输入账号"
></el-input>
</el-form-item>
<el-form-item prop="pass" v-if="visible">
<el-input
type="password"
prefix-icon="el-icon-lock"
v-model="ruleForm.pass"
auto-complete="off"
placeholder="请输入密码"
>
<i
slot="suffix"
title="显示密码"
@click="changePass('show')"
style="cursor:pointer;"
class="iconfont iconyanjing_kai"
></i>
</el-input>
</el-form-item>
<el-form-item prop="pass" v-else>
<el-input type="text" v-model="ruleForm.pass" auto-complete="off" placeholder="请输入密码">
<i
slot="suffix"
title="隐藏密码"
@click="changePass('hide')"
style="cursor:pointer;"
class="iconfont iconyanjing_bi"
></i>
</el-input>
</el-form-item>
<el-form-item>
<el-button
:loading="logining"
:disabled="true"
v-if="!isLog"
@click="submitForm('ruleForm')"
style="width:100%;"
>登录</el-button>
<el-button
type="primary"
:loading="logining"
v-else-if="isLog"
@click="submitForm('ruleForm')"
style="width:100%;"
>登录</el-button>
<!-- <p class="login" @click="gotoLogin">已有账号?立即登录</p> -->
</el-form-item>
<el-form-item class="login">
<label id="showPasswordToggle">
<el-checkbox v-model="checked" id="showPasswordCheck">已阅读并同意《服务协议》</el-checkbox>
</label>
<div class="gotoRight">
<span @click="gotoLoginForget">忘记密码</span>
<el-divider direction="vertical"></el-divider>
<span @click="gotoLoginReg">免费注册</span>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="验证码登录" name="second">
<el-form
:model="ruleForm2"
status-icon
:rules="rules"
ref="ruleForm2"
label-width="0"
class="demo-ruleForm"
>
<el-form-item prop="tel">
<el-input v-model="ruleForm2.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item prop="smscode" class="code">
<el-input v-model="ruleForm2.smscode" placeholder="短信验证码"></el-input>
<el-button :disabled="true" @click="sendCode" v-if="disabled== 0">{{buttonText}}</el-button>
<el-button
type="primary"
:disabled="isDisabled"
class="btn-color"
@click="sendCode"
v-else-if="disabled== 1"
>{{buttonText}}</el-button>
</el-form-item>
<el-form-item>
<el-button
:loading="logining"
:disabled="true"
v-if="!isLogin"
@click="submitForm('ruleForm2')"
style="width:100%;"
>登录</el-button>
<el-button
type="primary"
:loading="logining"
v-else-if="isLogin"
@click="submitForm('ruleForm2')"
style="width:100%;"
>登录</el-button>
</el-form-item>
<el-form-item class="login">
<label id="showPasswordToggle">
<el-checkbox v-model="checked" id="showPasswordCheck">已阅读并同意《服务协议》</el-checkbox>
</label>
<div class="gotoRight">
<span @click="gotoLoginForget">忘记密码</span>
<el-divider direction="vertical"></el-divider>
<span @click="gotoLoginReg">免费注册</span>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
// <!--验证账号-->
let account = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入账号"));
} else {
callback();
}
};
// <!--验证密码-->
let validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
callback();
}
};
// <!--验证手机号是否合法-->
let checkTel = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
} else if (!this.checkMobile(value)) {
callback(new Error("请输入正确的11位手机号码"));
} else {
callback();
}
};
// <!--验证码是否为空-->
let checkSmscode = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机验证码"));
} else {
callback();
}
};
return {
ruleForm: {
account: "",
pass: ""
},
ruleForm2: {
tel: "",
smscode: ""
},
rules: {
account: [
{ required: true, message: "请输入账号", trigger: "blur" },
{
pattern: /^(?!(\d+)$)[a-zA-Z\d_]{4,20}$/,
message: "账号长度4-20,可包括数字、字母、下划线",
trigger: "blur"
},
{ validator: account, trigger: "blur" }
],
pass: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
message: "密码长度为6-20位,可以为数字、字母",
trigger: "blur"
},
{ validator: validatePass, trigger: "blur" }
],
tel: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: "请输入正确的11位手机号码",
trigger: "blur"
},
{ validator: checkTel, trigger: "blur" }
],
smscode: [
{ required: true, message: "请输入短信验证码", trigger: "blur" },
{
pattern: /^[0-9]{6}$/,
message: "请输入正确的六位数字验证码",
trigger: "blur"
},
{ validator: checkSmscode, trigger: "blur" }
]
},
activeName: "first",
buttonText: "获取短信验证码",
isDisabled: false, // 是否禁止点击发送验证码按钮
flag: true,
visible: true,
checked: true,
disabled: 0,
isLog: false,
isLogin: false,
logining: false
};
},
watch: {
//账号验证btn按钮显示高亮
ruleForm: {
handler: function() {
if (this.ruleForm.account != "" && this.ruleForm.pass != "") {
this.isLog = true;
} else {
this.isLog = false;
}
},
deep: true
},
//账手机验证btn按钮显示高亮
"ruleForm2.tel"() {
if (this.ruleForm2.tel != "") {
this.disabled = 1;
} else {
this.disabled = 0;
}
},
ruleForm2: {
handler: function(val, oldval) {
if (val.tel != "" && val.smscode != "") {
this.isLogin = true;
} else {
this.isLogin = false;
}
},
deep: true //对象内部的属性监听,也叫深度监听
}
},
methods: {
//密码判断渲染,true:暗文显示,false:明文显示
changePass(value) {
this.visible = !(value === "show");
},
// <!--发送验证码-->
sendCode() {
let tel = this.ruleForm2.tel;
if (this.checkMobile(tel)) {
console.log(tel);
let time = 60;
this.buttonText = "已发送";
this.isDisabled = true;
if (this.flag) {
this.flag = false;
let timer = setInterval(() => {
time--;
this.buttonText = time + " s";
if (time === 0) {
clearInterval(timer);
this.buttonText = "重新获取";
this.isDisabled = false;
this.flag = true;
}
}, 1000);
}
}
},
// <!--提交登录-->
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.logining = true;
setTimeout(() => {
this.$message({
message: "登录成功!",
type: "success"
});
}, 400);
} else {
console.log("error submit!!");
return false;
}
});
},
// <!--免费注册页-->
gotoLoginReg() {
this.$router.push({
path: "/"
});
},
// <!--忘记密码页-->
gotoLoginForget() {
this.$router.push({
path: "/LoginForget"
});
},
// 验证手机号
checkMobile(str) {
let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if (reg.test(str)) {
return true;
} else {
return false;
}
}
}
};
</script>
<style lang="scss" scoped>
$white-bg-color: #ffffff;
$bg-color: #f7f7f7;
$btn-color: #409eff;
.page {
background-color: $bg-color;
position: absolute;
width: 100%;
height: 100%;
font-size: 16px;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
.login-box {
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
width: 100%;
max-width: 400px;
background-color: $white-bg-color;
margin: 0;
padding: 15px 35px;
box-sizing: border-box;
// border: solid 1px #ddd;
border-radius: 0.5em;
font-family: "Source Sans Pro", sans-serif;
.title {
font-size: 20px;
line-height: 50px;
font-weight: bold;
margin: 10px;
text-align: center;
}
/deep/ .el-tabs__header {
margin: 0 0 30px 0;
}
// /deep/ .el-tabs__item {
// font-size: 20px;
// text-align: center;
// }
/deep/ .el-tabs__nav-wrap::after {
height: 0;
}
/deep/ #tab-first::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 1px;
height: 20px;
background-color: #dcdfe6;
margin: 8px 0;
vertical-align: middle;
}
.code /deep/ .el-form-item__content {
display: flex;
align-items: center;
justify-content: space-between;
}
.code button {
margin-left: 20px;
width: 140px;
text-align: center;
}
.el-form-item:last-child {
margin-bottom: 6px;
}
.el-button--primary:focus {
background: $btn-color;
border-color: $btn-color;
color: $white-bg-color;
}
/deep/ .el-input__suffix-inner {
margin-right: 6px;
}
}
.login {
margin-top: -15px;
font-size: 12px;
cursor: pointer;
text-align: left;
.gotoRight {
float: right;
color: #999999;
&:hover {
color: $btn-color;
}
}
}
}
</style>