|
|
@@ -1,29 +1,178 @@
|
|
|
<template>
|
|
|
<div class="loginBox">
|
|
|
- <!-- <div class=" absCenterBox"></div> -->
|
|
|
<div class="loginInnerBox">
|
|
|
<h2 class="bigTit">智慧用电监控平台</h2>
|
|
|
-
|
|
|
<p class="loginTitle">用户登录</p>
|
|
|
- <div class="oneSec">
|
|
|
- <img class="icon" src="../assets/images/userIcon.png" alt="" />
|
|
|
- <input type="text" placeholder="请输入登录ID" />
|
|
|
- </div>
|
|
|
- <div class="oneSec">
|
|
|
- <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
|
|
|
- <input type="text" placeholder="请输入密码" />
|
|
|
- </div>
|
|
|
- <div class="remember">
|
|
|
- <el-checkbox label="记住密码"></el-checkbox>
|
|
|
- </div>
|
|
|
- <div class="submitBox">登 录</div>
|
|
|
+
|
|
|
+ <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"
|
|
|
+ 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="请输入密码"
|
|
|
+ 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 api from "../api/login/user.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ 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: 6,
|
|
|
+ message: "密码长度在 3 到 6 个字符",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ isChecked: true, // 记住密码
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getCookie();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //登录数据对接
|
|
|
+ login_api(query = {}) {
|
|
|
+ api.login_api(query).then((requset) => {
|
|
|
+ this.loginData = requset.data;
|
|
|
+ console.log(this.loginData);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ submitForm() {
|
|
|
+ // ref 用在组件中，就表示当前组件 通过 $refs.xxx可以拿到所有ref的集合
|
|
|
+ // this.$refs.loginForm //当前的表单对象
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ //valid成功为ture，失败为false
|
|
|
+ //发送请求 ，调用登录接口
|
|
|
+ console.log(this.loginForm);
|
|
|
+
|
|
|
+ this.login_api({
|
|
|
+ name: this.loginForm.username,
|
|
|
+ password: this.loginForm.password,
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.$router.push({ path: "/" });
|
|
|
+ // 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>
|
|
|
@@ -35,13 +184,13 @@ export default {
|
|
|
.bigTit {
|
|
|
position: absolute;
|
|
|
top: -90px;
|
|
|
- left: 7px;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
+ left: 7px;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
color: #00e1eb;
|
|
|
font-size: 0.625rem;
|
|
|
-
|
|
|
-// margin-left:-0.775rem;
|
|
|
+
|
|
|
+ // margin-left:-0.775rem;
|
|
|
font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
|
|
|
font-weight: bold;
|
|
|
letter-spacing: 17px;
|
|
|
@@ -128,13 +277,13 @@ export default {
|
|
|
}
|
|
|
.submitBox {
|
|
|
width: 6.85rem;
|
|
|
- height: 0.7375rem;
|
|
|
+ // height: 0.7375rem;
|
|
|
opacity: 1;
|
|
|
background: #00e1eb;
|
|
|
color: #001a2b;
|
|
|
font-size: 0.45rem;
|
|
|
text-align: center;
|
|
|
- line-height: 0.7375rem;
|
|
|
+ // line-height: 0.7375rem;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
fanghuisheng