|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <div class="left">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="/login/img_logo1.png" class="img" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="bjImg"></div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="main">
|
|
|
+ <div class="welcome">欢迎登录~</div>
|
|
|
+ <div class="title">胜德体育科技MES管理系统</div>
|
|
|
+ <el-form :model="loginForm" ref="loginRef" :rules="loginRules">
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="clickLogin">
|
|
|
+ <template #prepend>
|
|
|
+ <img class="icon" src="/login/icon_account.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="bottom20" prop="password" @keyup.enter.native="clickLogin">
|
|
|
+ <el-input v-model="loginForm.password" show-password placeholder="请输入密码">
|
|
|
+ <template #prepend>
|
|
|
+ <img class="icon" src="/login/icon_lock.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="bottom20" prop="isRemember">
|
|
|
+ <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="clickLogin">登录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="explain">Copyright© 福清市胜德体育塑胶制品有限公司 版权所有</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import useUserStore from "/src/store/modules/user";
|
|
|
+import { encrypt, decrypt } from "/src/utils/jsencrypt";
|
|
|
+import Cookies from "js-cookie";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const userStore = useUserStore();
|
|
|
+const router = useRouter();
|
|
|
+const loginForm = ref({
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ rememberMe: false,
|
|
|
+ tenantId: "000000",
|
|
|
+});
|
|
|
+const loginRef = ref(null);
|
|
|
+const loginRules = ref({
|
|
|
+ username: [{ required: true, message: "请输入账号", trigger: ["change", "blur"] }],
|
|
|
+ password: [
|
|
|
+ { required: true, message: "请输入密码", trigger: ["change", "blur"] },
|
|
|
+ { min: 1, message: "密码长度最少为6位", trigger: ["change", "blur"] },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const redirect = ref(undefined);
|
|
|
+const getCookie = () => {
|
|
|
+ const username = Cookies.get("username-SD");
|
|
|
+ const password = Cookies.get("password-SD");
|
|
|
+ const rememberMe = Cookies.get("rememberMe-SD");
|
|
|
+ loginForm.value = {
|
|
|
+ username: username === undefined ? loginForm.value.username : username,
|
|
|
+ password: password === undefined ? loginForm.value.password : decrypt(password),
|
|
|
+ rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
+ tenantId: "000000",
|
|
|
+ };
|
|
|
+};
|
|
|
+getCookie();
|
|
|
+const clickLogin = () => {
|
|
|
+ proxy.$refs.loginRef.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (loginForm.value.rememberMe) {
|
|
|
+ Cookies.set("username-SD", loginForm.value.username, {
|
|
|
+ expires: 30,
|
|
|
+ });
|
|
|
+ Cookies.set("password-SD", encrypt(loginForm.value.password), {
|
|
|
+ expires: 30,
|
|
|
+ });
|
|
|
+ Cookies.set("rememberMe-SD", loginForm.value.rememberMe, {
|
|
|
+ expires: 30,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ Cookies.remove("username-SD");
|
|
|
+ Cookies.remove("password-SD");
|
|
|
+ Cookies.remove("rememberMe-SD");
|
|
|
+ }
|
|
|
+ // 调用action的登录方法
|
|
|
+ userStore
|
|
|
+ .login(loginForm.value)
|
|
|
+ .then(() => {
|
|
|
+ router.push({ path: redirect.value || "/" });
|
|
|
+ // 登录刷新
|
|
|
+ setTimeout(() => {
|
|
|
+ location.reload();
|
|
|
+ }, 100);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.login {
|
|
|
+ background-color: white;
|
|
|
+ display: flex;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ .left {
|
|
|
+ width: 40%;
|
|
|
+ position: relative;
|
|
|
+ .bjImg {
|
|
|
+ background-image: url("/login/img_bj1.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 30px;
|
|
|
+ z-index: 100;
|
|
|
+ .img {
|
|
|
+ object-fit: contain;
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ position: relative;
|
|
|
+ width: 60%;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .main {
|
|
|
+ width: 320px;
|
|
|
+ margin: 24vh 0 0 12vw;
|
|
|
+ .welcome {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 31px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 10px 0 40px 0;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .explain {
|
|
|
+ color: #999999;
|
|
|
+ position: absolute;
|
|
|
+ left: 10vw;
|
|
|
+ bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep(.el-button) {
|
|
|
+ background-color: #ff9315;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 0;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+::v-deep(.el-form-item) {
|
|
|
+ margin-bottom: 40px !important;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+}
|
|
|
+::v-deep(.el-form-item.bottom20) {
|
|
|
+ margin-bottom: 20px !important;
|
|
|
+}
|
|
|
+::v-deep(.el-form-item__error) {
|
|
|
+ line-height: 2;
|
|
|
+}
|
|
|
+::v-deep(.el-input) {
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ &::placeholder {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep(.el-form-item__content) {
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+}
|
|
|
+::v-deep(.el-checkbox__label) {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+::v-deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
|
|
|
+ color: #ff9315;
|
|
|
+}
|
|
|
+::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
|
|
|
+ color: #ff9315;
|
|
|
+ background-color: #ff9315;
|
|
|
+ border-color: #ff9315;
|
|
|
+}
|
|
|
+::v-deep(.el-input-group__prepend) {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 10px !important;
|
|
|
+}
|
|
|
+::v-deep(.el-input__wrapper) {
|
|
|
+ box-shadow: 0 0 0 0px #fff;
|
|
|
+ cursor: default;
|
|
|
+ .el-input__inner {
|
|
|
+ cursor: default !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep(.el-input-group__prepend) {
|
|
|
+ box-shadow: 0 0 0 0px #fff;
|
|
|
+ cursor: default;
|
|
|
+ .el-input-group__prepend {
|
|
|
+ cursor: default !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep(.el-form-item.is-error .el-input__wrapper) {
|
|
|
+ box-shadow: 0 0 0 0 #fff inset;
|
|
|
+ border-bottom: 1px solid var(--el-color-danger);
|
|
|
+}
|
|
|
+::v-deep(.el-form-item.is-error .el-input-group__prepend) {
|
|
|
+ box-shadow: 0 0 0 0 #fff inset;
|
|
|
+ border-bottom: 1px solid var(--el-color-danger);
|
|
|
+}
|
|
|
+</style>
|
lxf
