|
|
@@ -1,103 +1,72 @@
|
|
|
<template>
|
|
|
- <div class="login-container">
|
|
|
- <el-row>
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
|
|
|
- <div style="color: transparent">占位符</div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form
|
|
|
- ref="form"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- class="login-form"
|
|
|
- label-position="left"
|
|
|
+ <div class="login">
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
|
+ <h3 class="title">
|
|
|
+ <!-- <svg-icon icon-class="logo" /> -->
|
|
|
+ {{ loginTitle }}</h3>
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
|
|
+ <i slot="prefix" class="el-icon-user-solid input-icon"></i>
|
|
|
+ <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.password"
|
|
|
+ type="password"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="密码"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
>
|
|
|
- <div class="title">hello !</div>
|
|
|
- <div class="title-tips">欢迎来到{{ title }}！</div>
|
|
|
- <el-form-item style="margin-top: 40px" prop="username">
|
|
|
- <span class="svg-container svg-container-admin">
|
|
|
- <i class="el-icon-user-solid"></i>
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- v-model.trim="form.username"
|
|
|
- v-focus
|
|
|
- placeholder="请输入用户名"
|
|
|
- tabindex="1"
|
|
|
- type="text"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="svg-container">
|
|
|
- <i class="el-icon-more"></i>
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- :key="passwordType"
|
|
|
- ref="password"
|
|
|
- v-model.trim="form.password"
|
|
|
- :type="passwordType"
|
|
|
- tabindex="2"
|
|
|
- placeholder="请输入密码"
|
|
|
- maxlength="16"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
- <span
|
|
|
- v-if="passwordType === 'password'"
|
|
|
- class="show-password"
|
|
|
- @click="handlePassword"
|
|
|
- >
|
|
|
- <i class="el-icon-view"></i>
|
|
|
- </span>
|
|
|
- <span v-else class="show-password" @click="handlePassword">
|
|
|
- <i class="el-icon-edit"></i>
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- flex-direction: column;
|
|
|
- flejustify-content: space-between;
|
|
|
- "
|
|
|
- prop="code"
|
|
|
- >
|
|
|
- <span class="svg-container svg-container-admin">
|
|
|
- <i class="el-icon-s-help"></i>
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- style="width: 60%"
|
|
|
- v-model.trim="form.code"
|
|
|
- v-focus
|
|
|
- placeholder="请输入验证码"
|
|
|
- tabindex="1"
|
|
|
- type="text"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="code-img middle-img"
|
|
|
- :src="codeImg"
|
|
|
- alt=""
|
|
|
- @click="handelGetCaptcha"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- class="login-btn"
|
|
|
- type="primary"
|
|
|
- @click="handleLogin"
|
|
|
- >
|
|
|
- 登录
|
|
|
- </el-button>
|
|
|
- <router-link to="/register">
|
|
|
- <div style="margin-top: 20px">注册</div>
|
|
|
- </router-link>
|
|
|
- </el-form>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <i slot="prefix" class="el-icon-lock input-icon"></i>
|
|
|
+ <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />0 -->
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.code"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="验证码"
|
|
|
+ style="width: 63%;"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ >
|
|
|
+ <i slot="prefix" class="el-icon-mobile input-icon"></i>
|
|
|
+ <!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> -->
|
|
|
+ </el-input>
|
|
|
+ <div class="login-code">
|
|
|
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
|
|
|
+ <el-form-item style="width:100%;">
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ size="medium"
|
|
|
+ style="width:100%;background:#3d5d4c;color:#fff"
|
|
|
+ class="login-form-loginbtn"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >
|
|
|
+ <span v-if="!loading" >登 录</span>
|
|
|
+ <span v-else>登 录 中...</span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <!-- <div class="el-login-footer">
|
|
|
+ <span>Copyright © 2018-2021 ****** All Rights Reserved.</span>
|
|
|
+ </div>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+// import { getCodeImg } from "@/api/login";
|
|
|
import { getCaptcha, login } from "@/utils/api.js";
|
|
|
|
|
|
+// // import Cookies from "js-cookie";
|
|
|
+// import { encrypt, decrypt } from '@/utils/jsencrypt';
|
|
|
+// const loginAppProjectKey = process.env.VUE_APP_PROJECT_KEY + '-';
|
|
|
+
|
|
|
export default {
|
|
|
name: "Login",
|
|
|
inject: ["reload"],
|
|
|
@@ -110,96 +79,60 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- nodeEnv: process.env.NODE_ENV,
|
|
|
- title: "",
|
|
|
- form: {
|
|
|
- username: "ry123456",
|
|
|
- password: "asd123fsadf@$!~",
|
|
|
- // username: "ceshi001",
|
|
|
- // password: "Py6z99qNy8BKf4",
|
|
|
+ loginTitle: '',
|
|
|
+ codeUrl: "",
|
|
|
+ cookiePassword: "",
|
|
|
+ loginForm: {
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ rememberMe: false,
|
|
|
code: "",
|
|
|
- uuid: "",
|
|
|
+ uuid: ""
|
|
|
},
|
|
|
- rules: {
|
|
|
+ loginRules: {
|
|
|
username: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- pattern: /^[a-zA-Z][0-9a-zA-Z]{6,20}$/,
|
|
|
- message: "请输入规则的用户名",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
+ { required: true, trigger: "blur", message: "用户名不能为空" }
|
|
|
],
|
|
|
password: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- pattern:
|
|
|
- /((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z\W]{8,16}$))/,
|
|
|
- message:
|
|
|
- "请输入8-16位字符、大小写字母、数字、特殊字符，任意三种组合密码",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- ],
|
|
|
- code: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入验证码",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
+ { required: true, trigger: "blur", message: "密码不能为空" }
|
|
|
],
|
|
|
+ code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
|
|
},
|
|
|
loading: false,
|
|
|
- passwordType: "password",
|
|
|
- redirect: undefined,
|
|
|
- codeImg: "",
|
|
|
+ redirect: undefined
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
$route: {
|
|
|
- handler(route) {
|
|
|
- // console.log("fromUrl", localStorage.getItem("fromUrl"));
|
|
|
- this.redirect = localStorage.getItem("fromUrl");
|
|
|
- // this.redirect = (route.query && route.query.redirect) || "/";
|
|
|
+ handler: function(route) {
|
|
|
+ this.redirect = localStorage.getItem("fromUrl");
|
|
|
},
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
- this.title = this.webTitle;
|
|
|
- this.handelGetCaptcha();
|
|
|
- document.body.style.overflow = "hidden";
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- document.body.style.overflow = "auto";
|
|
|
+ this.loginTitle = this.webTitle;
|
|
|
+ if (process.env.NODE_ENV === 'development') {
|
|
|
+ this.loginForm.username = 'ry123456';
|
|
|
+ this.loginForm.password = 'asd123fsadf@$!~';
|
|
|
+ }
|
|
|
+ this.getCode();
|
|
|
},
|
|
|
- mounted() {},
|
|
|
methods: {
|
|
|
- handelGetCaptcha() {
|
|
|
- getCaptcha()
|
|
|
- .then((res) => {
|
|
|
- this.codeImg = res.data.image;
|
|
|
- this.form.uuid = res.data.key;
|
|
|
- console.log("getCaptcha", res);
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log("getCaptcha err", err);
|
|
|
- });
|
|
|
- },
|
|
|
- handlePassword() {
|
|
|
- this.passwordType === "password"
|
|
|
- ? (this.passwordType = "")
|
|
|
- : (this.passwordType = "password");
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.password.focus();
|
|
|
+ getCode() {
|
|
|
+ getCaptcha().then(res => {
|
|
|
+ this.codeUrl = res.data.image;
|
|
|
+ this.loginForm.uuid = res.data.key;
|
|
|
});
|
|
|
},
|
|
|
handleLogin() {
|
|
|
let that = this;
|
|
|
let backUrl = "/";
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.loading = true;
|
|
|
- console.log("this.form", this.form);
|
|
|
- login(this.form)
|
|
|
+ console.log("this.loginForm", this.loginForm);
|
|
|
+ login(this.loginForm)
|
|
|
.then((res) => {
|
|
|
this.$mc.vuex("vuex_token", res.data.access_token);
|
|
|
this.$message(res.msg);
|
|
|
@@ -229,156 +162,74 @@ export default {
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-$base-input-height: 32px;
|
|
|
-$base-font-size-small: 12px;
|
|
|
-$base-color-red: #f34d37;
|
|
|
-$base-font-color: #606266;
|
|
|
-.login-container {
|
|
|
- height: 100vh;
|
|
|
- background: url("../../static/images/background.jpg") center center fixed
|
|
|
- no-repeat;
|
|
|
+<style rel="stylesheet/scss" lang="scss">
|
|
|
+#app{
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+.login {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-image: url("../../static/images/background.png");
|
|
|
background-size: cover;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ margin: 0px auto 30px auto;
|
|
|
+ text-align: center;
|
|
|
+ color: #707070;
|
|
|
+}
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 54px;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(14, 18, 26, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .title-tips {
|
|
|
- margin-top: 29px;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(14, 18, 26, 1);
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .login-btn {
|
|
|
- display: inherit;
|
|
|
- width: 220px;
|
|
|
- height: 60px;
|
|
|
- margin-top: 5px;
|
|
|
- border: 0;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- opacity: 0.9;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .login-form {
|
|
|
- position: relative;
|
|
|
- max-width: 100%;
|
|
|
- margin: calc((100vh - 425px) / 2) 10% 10%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .forget-password {
|
|
|
- width: 100%;
|
|
|
- margin-top: 40px;
|
|
|
- text-align: left;
|
|
|
-
|
|
|
- .forget-pass {
|
|
|
- width: 129px;
|
|
|
- height: 19px;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(92, 102, 240, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tips {
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 14px;
|
|
|
- color: #ddd;
|
|
|
- span {
|
|
|
- &:first-of-type {
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title-container {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin: 0 auto 40px auto;
|
|
|
- font-size: 34px;
|
|
|
- font-weight: bold;
|
|
|
- color: blue;
|
|
|
- text-align: center;
|
|
|
+.login-form {
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #ffffff;
|
|
|
+ width: 400px;
|
|
|
+ padding: 25px 25px 5px 25px;
|
|
|
+ .el-input {
|
|
|
+ height: 38px;
|
|
|
+ input {
|
|
|
+ height: 38px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .svg-container {
|
|
|
- position: absolute;
|
|
|
- top: 14px;
|
|
|
- left: 15px;
|
|
|
- z-index: 999;
|
|
|
- font-size: 16px;
|
|
|
- color: #d7dee3;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
+ .input-icon {
|
|
|
+ height: 39px;
|
|
|
+ width: 14px;
|
|
|
+ margin-left: 2px;
|
|
|
}
|
|
|
-
|
|
|
- .show-password {
|
|
|
- position: absolute;
|
|
|
- top: 14px;
|
|
|
- right: 25px;
|
|
|
- font-size: 16px;
|
|
|
- color: #d7dee3;
|
|
|
+}
|
|
|
+.login-tip {
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ color: #bfbfbf;
|
|
|
+}
|
|
|
+.login-code {
|
|
|
+ width: 33%;
|
|
|
+ height: 38px;
|
|
|
+ float: right;
|
|
|
+ img {
|
|
|
cursor: pointer;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .el-form-item {
|
|
|
- padding-right: 0;
|
|
|
- margin: 20px 0;
|
|
|
- color: #454545;
|
|
|
- background: transparent;
|
|
|
- border: 1px solid transparent;
|
|
|
- border-radius: 2px;
|
|
|
-
|
|
|
- &__content {
|
|
|
- min-height: $base-input-height;
|
|
|
- line-height: $base-input-height;
|
|
|
- }
|
|
|
-
|
|
|
- &__error {
|
|
|
- position: absolute;
|
|
|
- top: 100%;
|
|
|
- left: 18px;
|
|
|
- font-size: $base-font-size-small;
|
|
|
- line-height: 18px;
|
|
|
- color: $base-color-red;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-input {
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- input {
|
|
|
- height: 58px;
|
|
|
- padding-left: 45px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 58px;
|
|
|
- color: $base-font-color;
|
|
|
- background: #f6f4fc;
|
|
|
- border: 0;
|
|
|
- caret-color: $base-font-color;
|
|
|
- }
|
|
|
- }
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
-.code-img {
|
|
|
- margin-left: 10px;
|
|
|
- cursor: pointer;
|
|
|
+.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: 38px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
