<template>
|
<div class="login-wrap">
|
<div class="ms-login">
|
<el-tabs v-model="loginType" class="ms-title">
|
<el-tab-pane label="密码登录" name="usecode" v-if="usecode">
|
<el-form
|
:model="param"
|
:rules="rules"
|
ref="login"
|
label-width="0px"
|
class="ms-content"
|
>
|
<el-form-item prop="phone">
|
<el-input v-model="param.phone" placeholder="请输入手机号码">
|
<el-button slot="prepend" icon="el-icon-phone"></el-button>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password" v-if="loginType === 'usecode'">
|
<el-input
|
v-model="param.password"
|
:show-password="true"
|
placeholder="请输入密码"
|
>
|
</el-input>
|
</el-form-item>
|
<div class="login-btn">
|
<el-button type="primary" @click="submitForm()">登录</el-button>
|
</div>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="短信登录" name="unusecode" v-if="unusecode">
|
<el-form
|
:model="param"
|
:rules="rules"
|
ref="login"
|
label-width="0px"
|
class="ms-content"
|
>
|
<el-form-item prop="phone">
|
<el-input v-model="param.phone" placeholder="请输入手机号码">
|
<el-button slot="prepend" icon="el-icon-phone"></el-button>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="code" v-if="loginType === 'unusecode'">
|
<el-input v-model="param.code" placeholder="请输入验证码">
|
<template slot="append">
|
<el-button
|
:disabled="disabled"
|
class="send"
|
@click="sendhandle"
|
>{{ sendTxt }}</el-button
|
></template
|
></el-input
|
>
|
</el-form-item>
|
<div class="login-btn">
|
<el-button type="primary" @click="submitForm()">登录</el-button>
|
</div>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import baseVuex from "@mixin/baseVuex";
|
import { sendSms, verifyCode, isAdmin } from "@api/index";
|
let ms = 0;
|
export default {
|
mixins: [baseVuex],
|
data: function () {
|
let phoneReg = /^1[3-9]\d{9}$/;
|
let validatePhone = (rule, value, callback) => {
|
if (!value) {
|
this.isPhone = false;
|
return callback(new Error("号码不能为空!"));
|
}
|
setTimeout(() => {
|
if (!phoneReg.test(value)) {
|
this.isPhone = false;
|
callback(new Error("请输入正确手机格式!"));
|
} else {
|
this.isPhone = true;
|
callback();
|
}
|
}, 100);
|
};
|
return {
|
login: "all",
|
loginType: "usecode",
|
param: {
|
password: "",
|
code: "",
|
phone: "",
|
},
|
disabled: false,
|
isPhone: "",
|
rules: {
|
phone: [{ required: true, trigger: "blur", validator: validatePhone }],
|
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
},
|
sendTxt: "点击发送",
|
time: 120,
|
interval: null,
|
};
|
},
|
mounted() {
|
if (window.sceneConfig && sceneConfig.login) {
|
this.login = sceneConfig.login;
|
if (this.login === "onlySMS") {
|
this.loginType = "unusecode";
|
}
|
}
|
},
|
computed: {
|
usecode: function () {
|
return this.login === "all" || this.login === "onlyPassword";
|
},
|
unusecode: function () {
|
return this.login === "all" || this.login === "onlySMS";
|
},
|
},
|
methods: {
|
submitForm() {
|
this.$refs.login.validate((valid) => {
|
if (valid) {
|
verifyCode(this.loginType, this.param).then((res) => {
|
if (res.code === 200) {
|
this.$message({
|
type: "success",
|
message: "登录成功",
|
});
|
this.setTreeData([]);
|
this.changeUserData({ type: "phone", value: this.param.phone });
|
this.checkAdminAndLogin();
|
} else {
|
this.$message({
|
type: "error",
|
message: res.msg,
|
});
|
}
|
});
|
}
|
});
|
},
|
sendhandle() {
|
this.$refs.login.validateField(["phone"], (valid) => {
|
if (this.isPhone) {
|
sendSms({
|
phone: this.param.phone,
|
}).then((res) => {
|
if (res.code === 200) {
|
if (res.data.code === "OK") {
|
this.$message({
|
type: "success",
|
message: "发送短信成功，请注意查收!",
|
});
|
this.disabled = true;
|
ms = this.time;
|
this.interval = setInterval(() => {
|
this.countDown();
|
}, 1000);
|
} else {
|
this.$message({
|
type: "error",
|
message: res.data.message,
|
});
|
}
|
} else {
|
this.$message({
|
type: "error",
|
message: res.msg,
|
});
|
}
|
});
|
}
|
});
|
},
|
countDown() {
|
if (!ms) {
|
this.sendTxt = "重新发送";
|
clearInterval(this.interval);
|
this.interval = null;
|
this.disabled = false;
|
} else {
|
this.sendTxt = `${ms} 秒后重新发送`;
|
ms--;
|
}
|
},
|
checkAdminAndLogin() {
|
// 管理员验证
|
isAdmin({
|
phone: this.param.phone,
|
}).then((data) => {
|
this.changeUserData({
|
type: "admin",
|
value: data && data.data ? true : false,
|
});
|
});
|
|
localStorage.setItem("loginscene", 1);
|
this.$router.push({
|
path: "/index",
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.login-wrap {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background-image: url(~@/assets/login.png);
|
background-size: 100% 100%;
|
}
|
.login-wrap /deep/ .el-input__inner {
|
height: 45px;
|
}
|
.login-wrap /deep/ .el-form-item {
|
margin-bottom: 30px;
|
}
|
|
.login-wrap /deep/ .el-tabs__nav {
|
margin-left: 30px;
|
/* left: 50%; */
|
}
|
|
.login-wrap /deep/ .el-tabs__nav-wrap::after {
|
height: 0;
|
}
|
|
button {
|
height: 45px !important;
|
font-size: 15px;
|
}
|
.ms-title {
|
width: 100%;
|
line-height: 50px;
|
text-align: center;
|
font-size: 20px;
|
border-bottom: 1px solid #ddd;
|
}
|
.ms-login {
|
position: absolute;
|
left: 75%;
|
top: 50%;
|
width: 450px;
|
margin: -190px 0 0 -175px;
|
border-radius: 5px;
|
background: #fff;
|
overflow: hidden;
|
}
|
.ms-content {
|
padding: 30px 30px;
|
}
|
.login-btn {
|
text-align: center;
|
}
|
.login-btn button {
|
width: 100%;
|
height: 36px;
|
margin-bottom: 10px;
|
}
|
.send {
|
cursor: pointer;
|
}
|
</style>
|
