411 lines
10 KiB
Vue
411 lines
10 KiB
Vue
<template>
|
|
<div class="login">
|
|
<div class="content">
|
|
<img class="loginImg" src="@/assets/images/login.png" alt="" srcset="" />
|
|
<div class="login-form">
|
|
<el-tabs v-model="loginForm.mode" v-if="isLogin == 1">
|
|
<el-tab-pane
|
|
:label="t('login.accountLogin')"
|
|
name="102"
|
|
></el-tab-pane>
|
|
<!-- <el-tab-pane label="手机快捷登录" name="101"></el-tab-pane> -->
|
|
</el-tabs>
|
|
<div v-if="isLogin == 1">
|
|
<el-form ref="loginRef" :model="loginForm" :rules="loginRules">
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
v-model="loginForm.username"
|
|
type="text"
|
|
auto-complete="off"
|
|
:placeholder="t('input.inputPhone')"
|
|
>
|
|
<template #prefix>
|
|
<svg-icon
|
|
icon-class="user"
|
|
class="el-input__icon input-icon"
|
|
/>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password" v-if="loginForm.mode == 102">
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
type="password"
|
|
auto-complete="off"
|
|
:placeholder="t('input.inputPassword')"
|
|
@keyup.enter="handleLogin"
|
|
>
|
|
<template #prefix>
|
|
<svg-icon
|
|
icon-class="password"
|
|
class="el-input__icon input-icon"
|
|
/>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="captcha" v-if="loginForm.mode == 101">
|
|
<div class="captcha-row">
|
|
<el-input
|
|
v-model="loginForm.captcha"
|
|
auto-complete="off"
|
|
:placeholder="t('input.inputVerificationCode')"
|
|
style="width: 65%; align-items: center"
|
|
@keyup.enter="handleLogin"
|
|
>
|
|
<template #prefix>
|
|
<svg-icon
|
|
icon-class="validCode"
|
|
class="el-input__icon input-icon"
|
|
/>
|
|
</template>
|
|
</el-input>
|
|
<WebGetCode v-model:mobile="loginForm.username" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-checkbox v-model="loginForm.rememberMe">
|
|
{{ t("login.rememberAccount") }}
|
|
</el-checkbox>
|
|
</el-form-item>
|
|
<el-form-item style="width: 100%">
|
|
<el-button
|
|
class="x_btns"
|
|
:loading="loading"
|
|
size="default"
|
|
type="primary"
|
|
style="width: 100%"
|
|
@click.prevent="handleLogin"
|
|
>
|
|
<span v-if="!loading">
|
|
{{ t("login.login") }}
|
|
</span>
|
|
<span v-else>登 录 中...</span>
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="overflow: hidden">
|
|
<div style="float: left" v-if="isLogin == 1">
|
|
<span
|
|
class="text_col pointer"
|
|
:to="'/login'"
|
|
@click="isLogin = 3"
|
|
>{{ t("login.forgetPassword") }}</span
|
|
>
|
|
</div>
|
|
<div style="float: right" v-if="register">
|
|
<span
|
|
@click="isLogin = 2"
|
|
style="color: #0054ff"
|
|
class="pointer"
|
|
>{{ t("login.register") }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<el-form
|
|
v-if="isLogin == 1"
|
|
:model="registerForm"
|
|
status-icon
|
|
:rules="isCheckRules"
|
|
ref="isCheckRef"
|
|
>
|
|
<el-form-item prop="isCheck">
|
|
<div style="margin-top: 43px">
|
|
<div class="text_col" style="display: none">
|
|
<div>其他登录方式</div>
|
|
<img
|
|
class="pointer"
|
|
src="../../../assets/images/weixin.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<el-checkbox
|
|
v-model="registerForm.isCheck"
|
|
style="margin-top: 43px"
|
|
>
|
|
<span class="text_col">{{ t("login.loginAgreement") }}</span
|
|
><span style="color: #0054ff"
|
|
>《{{ t("login.agreement") }}》</span
|
|
>
|
|
</el-checkbox>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<Register v-model:isLogin="isLogin" v-else-if="isLogin == 2" />
|
|
<Retrieve v-model:isLogin="isLogin" v-else-if="isLogin == 3" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="foot">Copyright © 2007-2021 {{ t("footer.copyRight") }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Cookies from "js-cookie"; // import { encrypt, decrypt } from "@/utils/jsencrypt";
|
|
import md5 from "js-md5";
|
|
import Retrieve from "../retrieve";
|
|
import Register from "../register";
|
|
import WebGetCode from "@/components/webGetCode";
|
|
import useUserStore from "@/store/modules/user";
|
|
import { useRouter } from "vue-router";
|
|
import { useI18n } from "vue-i18n";
|
|
import { computed, reactive, ref } from "vue"; // const store = useStore();
|
|
// const store = useStore();
|
|
const router = useRouter();
|
|
|
|
const userStore = useUserStore();
|
|
// const { proxy } = getCurrentInstance();
|
|
const { t } = useI18n();
|
|
const isLogin = ref(1);
|
|
|
|
const loginForm = ref({
|
|
username: "",
|
|
password: "",
|
|
rememberMe: false,
|
|
mode: "102",
|
|
captcha: "",
|
|
});
|
|
|
|
const registerForm = ref({
|
|
isCheck: true,
|
|
});
|
|
const loginRef = ref();
|
|
const isCheckRef = ref();
|
|
const disabled = ref(true);
|
|
// const buttonName = ref("获取验证码");
|
|
// const isDisabled = ref(false);
|
|
// const time = ref(10);
|
|
|
|
const loginRules = reactive({
|
|
username: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: computed(() => t("input.inputPhone")),
|
|
},
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: computed(() => t("input.inputPassword")),
|
|
},
|
|
],
|
|
});
|
|
|
|
const isCheck = (rule, value, callback) => {
|
|
if (!value) {
|
|
callback(new Error(t("register.readAndCheck")));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
const isCheckRules = {
|
|
isCheck: [{ required: true, validator: isCheck, trigger: "change" }],
|
|
};
|
|
|
|
// const codeUrl = ref("");
|
|
const loading = ref(false);
|
|
// 注册开关
|
|
const register = ref(true);
|
|
const redirect = ref(undefined);
|
|
|
|
const handleLogin = async () => {
|
|
loginRef.value.validate((loginValid) => {
|
|
isCheckRef.value.validate((isCheckValid) => {
|
|
if (loginValid && isCheckValid) {
|
|
loading.value = true;
|
|
if (loginForm.value.rememberMe) {
|
|
Cookies.set("username", loginForm.value.username, { expires: 30 });
|
|
Cookies.set("password", loginForm.value.password, {
|
|
expires: 30,
|
|
});
|
|
Cookies.set("rememberMe", loginForm.value.rememberMe, {
|
|
expires: 30,
|
|
});
|
|
} else {
|
|
// 否则移除
|
|
Cookies.remove("username");
|
|
Cookies.remove("password");
|
|
Cookies.remove("rememberMe");
|
|
}
|
|
|
|
// 调用action的登录方法
|
|
let formData = Object.assign({}, loginForm.value);
|
|
formData.password = md5(formData.password);
|
|
console.log("123435");
|
|
formData.mode = formData.mode - 0;
|
|
userStore
|
|
.login(formData)
|
|
.then(() => {
|
|
router.push({ path: redirect.value || "/identity/index" });
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
function getCookie() {
|
|
const username = Cookies.get("username");
|
|
const password = Cookies.get("password");
|
|
const rememberMe = Cookies.get("rememberMe");
|
|
loginForm.value = {
|
|
username: username === undefined ? loginForm.value.username : username,
|
|
password: password === undefined ? loginForm.value.password : password,
|
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
mode: loginForm.value.mode,
|
|
};
|
|
}
|
|
|
|
getCookie();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #b1ccff;
|
|
|
|
.content {
|
|
// padding: 0 250px;
|
|
// padding: 0 30px;
|
|
width: 1400px;
|
|
margin: 0 auto;
|
|
flex: 1;
|
|
background: #b1ccff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.loginImg {
|
|
width: 705px;
|
|
height: 458px;
|
|
}
|
|
}
|
|
|
|
.foot {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: #fff;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin: 0px auto 30px auto;
|
|
text-align: center;
|
|
color: #707070;
|
|
}
|
|
|
|
.login-form {
|
|
width: 516px;
|
|
min-width: 455px;
|
|
// height: 517px;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
padding: 30px 33px;
|
|
|
|
.tit {
|
|
padding: 30px 0;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.el-tab-pane {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.el-input {
|
|
height: 38px;
|
|
|
|
input {
|
|
height: 38px;
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
height: 39px;
|
|
width: 14px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
:deep(.el-tabs__active-bar) {
|
|
background-color: #0054ff;
|
|
}
|
|
|
|
:deep(.el-tabs__item) {
|
|
color: #666666;
|
|
font-size: 16px;
|
|
|
|
&.is-active {
|
|
font-weight: 500;
|
|
color: #0054ff;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-tip {
|
|
font-size: 13px;
|
|
text-align: center;
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.captcha-row {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.login-code {
|
|
width: 30%;
|
|
height: 38px;
|
|
float: right;
|
|
|
|
img {
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.el-login-footer {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-family: Arial;
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.login-code-img {
|
|
height: 36px;
|
|
}
|
|
|
|
.text_col {
|
|
color: #999999;
|
|
|
|
img {
|
|
width: 30px;
|
|
margin: 10px 0 0 10px;
|
|
}
|
|
}
|
|
</style>
|