<template>
|
<div id="login" :style="bg">
|
<div class="form-wrap">
|
<ul class="menu-tab">
|
<li>
|
<h2>
|
{{ "奥瑞金 MESS 管理平台" }}
|
</h2>
|
</li>
|
</ul>
|
<el-form ref="account_form" :model="data.form" class="login-form">
|
<el-form-item prop="username">
|
<label class="form-label">用户名</label>
|
<el-input ref="usernameRef" v-model="data.form.username"></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<label class="form-label">密码</label>
|
<el-input type="password" v-model="data.form.password"></el-input>
|
</el-form-item>
|
<!-- <el-form-item prop="yzm">
|
<label class="form-label">验证码</label>
|
<el-input v-model="data.form.yzm"></el-input>
|
</el-form-item>
|
<el-form-item prop="yzm">
|
<img
|
style="margin-top: 2px; max-width: initial"
|
:src="randCodeData.randCodeImage"
|
/>
|
</el-form-item> -->
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="submitForm"
|
:loading="data.submit_button_loading"
|
class="el-button-block"
|
>
|
{{ "登录" }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
reactive,
|
ref,
|
onBeforeUnmount,
|
getCurrentInstance,
|
onMounted,
|
} from "vue";
|
import { useStore } from "vuex";
|
import { useRouter } from "vue-router";
|
|
import {
|
validate_email,
|
validate_password,
|
validate_code,
|
} from "../../utils/validate";
|
// sha1
|
import sha1 from "js-sha1";
|
// API
|
// import { GetCode } from "../../api/common";
|
import { Register, Login, yzm } from "../../api/account";
|
export default {
|
mounted() {
|
// 页面渲染完成时自动聚焦到用户名输入框，ref="unameInput"
|
this.$nextTick(() => {
|
this.$refs.usernameRef.focus();
|
});
|
},
|
data() {
|
return {
|
bg: {
|
backgroundImage:
|
"url(" + require("../../assets/images/login_bk.jpg") + ")",
|
backgroundRepeat: "no-repeat",
|
// backgroundSize: "cover",
|
},
|
};
|
},
|
name: "Login",
|
components: {},
|
props: {},
|
setup(props) {
|
const randCodeData = reactive({
|
randCodeImage: "",
|
requestCodeSuccess: false,
|
checkKey: null,
|
});
|
onMounted(() => {
|
let getnowTime = new Date().getTime();
|
randCodeData.checkKey = getnowTime;
|
yzm(getnowTime).then((res) => {
|
randCodeData.randCodeImage = res.result;
|
});
|
});
|
const usernameRef = ref();
|
const instance = getCurrentInstance();
|
// 获取实例上下文
|
const { proxy } = getCurrentInstance();
|
// store
|
const store = useStore();
|
// router
|
const rotuer = useRouter();
|
// 用户名校验
|
const validate_name_rules = (rule, value, callback) => {
|
let regEmail = validate_email(value);
|
if (value === "") {
|
callback(new Error("请输入邮箱"));
|
} else if (!regEmail) {
|
callback(new Error("邮箱格式不正确"));
|
} else {
|
callback();
|
}
|
};
|
const validate_password_rules = (rule, value, callback) => {
|
let regPassword = true; //validate_password(value);
|
// 获取“确认密码”
|
const passwordsValue = data.form.passwords;
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else if (!regPassword) {
|
callback(new Error("请输入>=6并且<=20位的密码，包含数字、字母"));
|
} else {
|
callback();
|
}
|
};
|
// 校验确认密码
|
const validate_passwords_rules = (rule, value, callback) => {
|
// 如果是登录，不需要校验确认密码，默认通过
|
if (data.current_menu === "login") {
|
callback();
|
}
|
let regPassword = validate_password(value);
|
// 获取“密码”
|
const passwordValue = data.form.password;
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else if (!regPassword) {
|
callback(new Error("请输入>=6并且<=20位的密码，包含数字、字母"));
|
} else if (passwordValue && passwordValue !== value) {
|
callback(new Error("两次密码不一致"));
|
} else {
|
callback();
|
}
|
};
|
const validate_code_rules = (rule, value, callback) => {
|
let regCode = validate_code(value);
|
if (value === "") {
|
callback(new Error("请输入验证码"));
|
} else if (!regCode) {
|
callback(new Error("请输入6位的验证码"));
|
} else {
|
callback();
|
}
|
};
|
|
const data = reactive({
|
form: {
|
username: "", // 用户名
|
password: "", // 密码
|
passwords: "", // 确认密码
|
code: "", // 验证码
|
},
|
form_rules: {
|
// username: [{ validator: validate_name_rules, trigger: "change" }],
|
password: [{ validator: validate_password_rules, trigger: "change" }],
|
passwords: [{ validator: validate_passwords_rules, trigger: "change" }],
|
code: [{ validator: validate_code_rules, trigger: "change" }],
|
},
|
tab_menu: [
|
{ type: "login", label: "登录" },
|
{ type: "register", label: "注册" },
|
],
|
current_menu: "login",
|
/**
|
* 获取验证码按钮交互
|
*/
|
code_button_disabled: false,
|
code_button_loading: false,
|
code_button_text: "获取验证码",
|
code_button_timer: null,
|
// 提交按钮
|
submit_button_disabled: true,
|
loading: false,
|
});
|
|
// 获取验证码
|
const handlerGetCode = () => {
|
const username = data.form.username;
|
const password = data.form.password;
|
const passwords = data.form.passwords;
|
// 校验用户名
|
if (username === null) {
|
proxy.$message.error({
|
message: "用户名不能为空 或 格式不正确",
|
type: "error",
|
});
|
return false;
|
}
|
// 校验密码
|
if (!validate_password(password)) {
|
proxy.$message({
|
message: "密码不能为空 或 格式不正确",
|
type: "error",
|
});
|
return false;
|
}
|
// 判断非 登录 时，校验两次密码
|
if (data.current_menu === "register" && password !== passwords) {
|
proxy.$message({
|
message: "两次密码不一致",
|
type: "error",
|
});
|
return false;
|
}
|
|
// 获取验证码接口
|
const requestData = {
|
username: data.form.username,
|
module: data.current_menu,
|
};
|
data.code_button_loading = true;
|
data.code_button_text = "发送中";
|
// GetCode(requestData)
|
// .then((response) => {
|
// const resData = response;
|
// // 激活提交按钮
|
// data.submit_button_disabled = false;
|
// // 用户名存在
|
// if (resData.resCode === 1024) {
|
// proxy.$message.error(resData.message);
|
// return false;
|
// }
|
// // 成功 Elementui 提示
|
// proxy.$message({
|
// message: resData.message,
|
// type: "success",
|
// });
|
// // 执行倒计时
|
// countdown();
|
// })
|
// .catch((error) => {
|
// data.code_button_loading = false;
|
// data.code_button_text = "获取验证码";
|
// });
|
};
|
|
/** 倒计时 */
|
const countdown = (time) => {
|
if (time && typeof time !== "number") {
|
return false;
|
}
|
let second = time || 60; // 默认时间
|
data.code_button_loading = false; // 取消加载
|
data.code_button_disabled = true; // 禁用按钮
|
data.code_button_text = `倒计进${second}秒`; // 按钮文本
|
// 判断是否存在定时器，存在则先清除
|
if (data.code_button_timer) {
|
clearInterval(data.code_button_timer);
|
}
|
// 开启定时器
|
data.code_button_timer = setInterval(() => {
|
second--;
|
data.code_button_text = `倒计进${second}秒`; // 按钮文本
|
if (second <= 0) {
|
data.code_button_text = `重新获取`; // 按钮文本
|
data.code_button_disabled = false; // 启用按钮
|
clearInterval(data.code_button_timer); // 清除倒计时
|
}
|
}, 1000);
|
};
|
/** 表单提交 */
|
const account_form = ref(null);
|
const submitForm = (formName) => {
|
account_form.value.validate((valid) => {
|
login();
|
});
|
};
|
/** 注册 */
|
const register = () => {
|
const requestData = {
|
username: data.form.username,
|
password: sha1(data.form.password),
|
code: data.form.code,
|
create: 1,
|
};
|
data.submit_button_loading = true;
|
Register(requestData)
|
.then((response) => {
|
proxy.$message({
|
message: response.message,
|
type: "success",
|
});
|
// reset();
|
})
|
.catch((error) => {
|
data.submit_button_loading = false;
|
});
|
};
|
/** 登录 */
|
const login = () => {
|
// reset();
|
const requestData = {
|
username: data.form.username,
|
password: data.form.password,
|
checkKey: randCodeData.checkKey,
|
captcha: data.form.yzm,
|
};
|
data.submit_button_loading = true;
|
store
|
.dispatch("app/loginAction", requestData)
|
.then((response) => {
|
data.submit_button_loading = false;
|
proxy.$message({
|
message: "登录成功",
|
type: "success",
|
});
|
|
//路由跳转
|
rotuer.push({ path: "/history" });
|
reset();
|
})
|
.catch((error) => {
|
// proxy.$message({
|
// message: "登录失败",
|
// type: "error",
|
// });
|
data.submit_button_loading = false;
|
console.log("失败");
|
});
|
};
|
|
/** 重置 */
|
const reset = () => {
|
// 重置表单
|
proxy.$refs.form.resetFields();
|
// 切回登录模式
|
data.current_menu = "login";
|
// 清除定时器
|
data.code_button_timer && clearInterval(data.code_button_timer);
|
// 获取验证码重置文本
|
data.code_button_text = "获取验证码";
|
// 获取验证码激活
|
data.code_button_disabled = false;
|
// 禁用提交按钮
|
data.submit_button_disabled = true;
|
// 取消提交按钮加载
|
data.submit_button_loading = false;
|
};
|
// 组件销毁之前 - 生命周期
|
onBeforeUnmount(() => {
|
clearInterval(data.code_button_timer); // 清除倒计时
|
});
|
return {
|
data,
|
handlerGetCode,
|
submitForm,
|
randCodeData,
|
account_form,
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
$bg: #2d3a4b;
|
$dark_gray: #889aa4;
|
$light_gray: #eee;
|
$cursor: #fff;
|
#login {
|
//height: 200vh; // 设置高度，居于浏览器可视区高度
|
background-color: #344a5f; // 设置背景颜色
|
width: 100vw; //大小设置为100%
|
height: 100vh; //大小设置为100%
|
position: relative;
|
background-size: 100% 100%;
|
}
|
|
.form-wrap {
|
width: 320px;
|
position: absolute;
|
left: 50%;
|
top: 30%;
|
transform: translateX(-50%);
|
background-color: rgba(0, 0, 0, 0.3);
|
border-radius: 20px;
|
padding: 40px;
|
// padding-top: 200px; //上内边距
|
// margin: auto; // 块元素水平居中
|
}
|
.menu-tab {
|
text-align: center;
|
li {
|
display: inline-block;
|
padding: 10px 24px;
|
margin: 0 10px;
|
color: #fff;
|
font-size: 24px;
|
border-radius: 5px;
|
cursor: pointer;
|
&.current {
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
}
|
}
|
.form-label {
|
display: block; // 转为块元素
|
color: #fff; // 设置字体颜色
|
font-size: 14px; // 设置字体大小
|
}
|
.login-form {
|
// position: relative;
|
// width: 520px;
|
// max-width: 100%;
|
|
:deep(.el-form-item) {
|
// border: 1px solid rgba(255, 255, 255, 0.1);
|
|
// border-radius: 5px;
|
color: #454545;
|
}
|
|
:deep(.el-input) {
|
// display: inline-block;
|
// height: 47px;
|
// width: 85%;
|
background: rgba(0, 0, 0, 0.1);
|
.el-input__wrapper {
|
background: transparent;
|
box-shadow: 0 0 0 0;
|
border: 0px;
|
-webkit-appearance: none;
|
|
color: $light_gray;
|
// height: 47px;
|
caret-color: $cursor;
|
input {
|
color: $light_gray;
|
}
|
}
|
}
|
// .login-button {
|
// width: 100%;
|
// box-sizing: border-box;
|
// }
|
}
|
</style>
|
