|
@@ -1,291 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="loginBox">
|
|
|
- <div class="loginInnerBox">
|
|
|
- <h2 class="bigTit">智慧用电监控平台</h2>
|
|
|
- <p class="loginTitle">用户登录</p>
|
|
|
-
|
|
|
- <el-form
|
|
|
- :label-position="labelPosition"
|
|
|
- :model="loginForm"
|
|
|
- :rules="rules"
|
|
|
- ref="loginForm"
|
|
|
- class="demo-loginForm"
|
|
|
- >
|
|
|
- <el-form-item prop="username" class="oneSec">
|
|
|
- <img class="icon" src="../assets/images/userIcon.png" alt="" />
|
|
|
- <el-input
|
|
|
- v-model="loginForm.username"
|
|
|
- max="6"
|
|
|
- placeholder="请输入登录ID"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password" class="oneSec">
|
|
|
- <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
|
|
|
- <el-input
|
|
|
- v-model="loginForm.password"
|
|
|
- type="password"
|
|
|
- placeholder="请输入密码"
|
|
|
- maxlength="9"
|
|
|
- auto-complete="new-password"
|
|
|
- clearable
|
|
|
- autocomplete="off"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div class="remember">
|
|
|
- <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
|
|
|
- </div>
|
|
|
- <el-form-item>
|
|
|
- <el-button @click="submitForm" class="submitBox">登录</el-button>
|
|
|
- <!-- <el-button @click="resetForm">重置</el-button> -->
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import * as api from "../api/login/user.js";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loginData: "",
|
|
|
-
|
|
|
- labelPosition: "right",
|
|
|
-
|
|
|
- loginForm: {
|
|
|
- username: "",
|
|
|
- password: "",
|
|
|
- },
|
|
|
-
|
|
|
- rules: {
|
|
|
- username: [
|
|
|
- // required 是否为必填项, trigger:表单验证的触发时机,失去焦点进行验证
|
|
|
- { required: true, message: "请输入用户名", trigger: "blur" },
|
|
|
- {
|
|
|
- min: 3,
|
|
|
- max: 6,
|
|
|
- message: "用户名长度在 3 到 6 个字符",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- ],
|
|
|
- password: [
|
|
|
- { required: true, message: "请输密码", trigger: "blur" },
|
|
|
- {
|
|
|
- min: 3,
|
|
|
- max: 9,
|
|
|
- message: "密码长度在 3 到 9 个字符",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-
|
|
|
- isChecked: true, // 记住密码
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getCookie();
|
|
|
- this.loginFree();
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- loginFree() {
|
|
|
- this.login_api({
|
|
|
- username: "admin",
|
|
|
- password: "admin123",
|
|
|
- });
|
|
|
- sessionStorage.setItem("userInfo", "admin");
|
|
|
- },
|
|
|
- //登录数据对接
|
|
|
- login_api(query = {}) {
|
|
|
- api.login_api(query).then((requset) => {
|
|
|
- if (requset.status === "SUCCESS") {
|
|
|
- this.loginData = requset.data;
|
|
|
- console.log('this.loginData');
|
|
|
- console.log(this.loginData);
|
|
|
-
|
|
|
- localStorage.setItem('assToken',requset.data)
|
|
|
-
|
|
|
- this.$router.push({ path: "/home" });
|
|
|
- } else {
|
|
|
- ElMessage.error(requset.msg);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- submitForm() {
|
|
|
- // ref 用在组件中,就表示当前组件 通过 $refs.xxx可以拿到所有ref的集合
|
|
|
- // this.$refs.loginForm //当前的表单对象
|
|
|
- this.$refs.loginForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- //valid成功为ture,失败为false
|
|
|
- //发送请求 ,调用登录接口
|
|
|
-
|
|
|
- this.login_api({
|
|
|
- name: this.loginForm.username,
|
|
|
- password: this.loginForm.password,
|
|
|
- });
|
|
|
- sessionStorage.setItem("userInfo", this.loginForm.username);
|
|
|
- // alert('submit!');
|
|
|
- } else {
|
|
|
- console.log("校验失败");
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- if (this.isChecked) {
|
|
|
- // 记住密码
|
|
|
- this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
|
|
|
- } else {
|
|
|
- this.clearCookie(); // 清空 Cookie
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 设置Cookie
|
|
|
- setCookie(username, password, exdays) {
|
|
|
- // 用户名, 密码, 保存天数
|
|
|
- let exdate = new Date(); // 获取时间
|
|
|
- exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
|
|
|
- // 字符串拼接cookie
|
|
|
- window.document.cookie =
|
|
|
- "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
|
|
|
- window.document.cookie =
|
|
|
- "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
|
|
|
- },
|
|
|
- // 读取Cookie
|
|
|
- getCookie() {
|
|
|
- // console.log(document.cookie);
|
|
|
- if (document.cookie.length > 0) {
|
|
|
- let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- let arr2 = arr[i].split("="); // 再次切割
|
|
|
- // 判断查找相对应的值
|
|
|
- if (arr2[0] == "userName") {
|
|
|
- this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
|
|
|
- } else if (arr2[0] == "userPwd") {
|
|
|
- this.loginForm.passwordText = arr2[1];
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 清除Cookie
|
|
|
- clearCookie() {
|
|
|
- this.setCookie("", "", -1); // 修改2值都为空,天数为负1天就好了
|
|
|
- },
|
|
|
- // resetForm() {
|
|
|
- // //表单重置
|
|
|
- // this.$refs.loginForm.resetFields();
|
|
|
- // },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.bigTit {
|
|
|
- position: absolute;
|
|
|
- top: -90px;
|
|
|
- left: 7px;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- color: #00e1eb;
|
|
|
- font-size: 0.625rem;
|
|
|
-
|
|
|
- // margin-left:-0.775rem;
|
|
|
- font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
|
|
|
- font-weight: bold;
|
|
|
- letter-spacing: 17px;
|
|
|
-}
|
|
|
-.loginBox {
|
|
|
- background-image: url(../assets/images/login-bg.png) !important;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- min-width: 1024px;
|
|
|
- min-height: 600px;
|
|
|
- background-position: center center;
|
|
|
- display: block;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: red;
|
|
|
-
|
|
|
- .loginInnerBox {
|
|
|
- position: relative;
|
|
|
- width: 8.3875rem;
|
|
|
- height: 5.8rem;
|
|
|
- background-image: url(../assets/images/loginIn-bg.png) !important;
|
|
|
- background-size: cover;
|
|
|
- padding: 0.45rem 0.775rem;
|
|
|
- // text-align: center;
|
|
|
- .loginTitle {
|
|
|
- font-size: 0.45rem;
|
|
|
- color: #00e1eb;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 12px;
|
|
|
- }
|
|
|
- .oneSec {
|
|
|
- text-align: left;
|
|
|
- width: 6.85rem;
|
|
|
- height: 0.7375rem;
|
|
|
- line-height: 0.7375rem;
|
|
|
- background: rgba(11, 161, 248, 0.4);
|
|
|
- border: 1px solid #0ba1f8;
|
|
|
- margin-top: 0.4875rem;
|
|
|
- position: relative;
|
|
|
- .icon {
|
|
|
- position: absolute;
|
|
|
- top: 0.2rem;
|
|
|
- left: 0.2rem;
|
|
|
- width: 0.3rem;
|
|
|
- height: 0.3rem;
|
|
|
- }
|
|
|
- input {
|
|
|
- background: transparent;
|
|
|
- border: 0;
|
|
|
- -webkit-appearance: none;
|
|
|
- border-radius: 0;
|
|
|
- // padding: 12px 5px 12px 0;
|
|
|
- color: #fff;
|
|
|
- height: 47px;
|
|
|
- caret-color: #fff;
|
|
|
- outline: none;
|
|
|
- font-size: 0.325rem;
|
|
|
- padding-left: 0.85rem;
|
|
|
- line-height: 0.7375rem;
|
|
|
- height: 0.7375rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .remember {
|
|
|
- margin: 0.275rem 0;
|
|
|
- .el-checkbox__inner {
|
|
|
- width: 0.3rem;
|
|
|
- height: 0.3rem;
|
|
|
- }
|
|
|
- .el-checkbox__label {
|
|
|
- font-size: 0.325rem;
|
|
|
- font-weight: 300;
|
|
|
- }
|
|
|
- .el-checkbox__inner::after {
|
|
|
- top: 0.07rem;
|
|
|
- width: 0.0625rem;
|
|
|
- left: 0.1125rem;
|
|
|
- }
|
|
|
- .el-checkbox {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .submitBox {
|
|
|
- width: 6.85rem;
|
|
|
- // height: 0.7375rem;
|
|
|
- opacity: 1;
|
|
|
- background: #00e1eb;
|
|
|
- color: #001a2b;
|
|
|
- font-size: 0.45rem;
|
|
|
- text-align: center;
|
|
|
- // line-height: 0.7375rem;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|