|
@@ -1,13 +1,6 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <el-form
|
|
|
- ref="loginForm"
|
|
|
- :model="loginForm"
|
|
|
- :rules="loginRules"
|
|
|
- class="login-form"
|
|
|
- auto-complete="on"
|
|
|
- label-position="left"
|
|
|
- >
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
<div class="title-container">
|
|
|
<h3 class="title">请登录</h3>
|
|
|
</div>
|
|
@@ -15,72 +8,32 @@
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="user" />
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- ref="username"
|
|
|
- v-model="loginForm.username"
|
|
|
- placeholder="用户名"
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- tabindex="1"
|
|
|
- auto-complete="on"
|
|
|
- @blur="getCode"
|
|
|
- />
|
|
|
+ <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" auto-complete="on" @blur="getCode" />
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="password">
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="password" />
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- :key="passwordType"
|
|
|
- ref="password"
|
|
|
- v-model="loginForm.password"
|
|
|
- :type="passwordType"
|
|
|
- placeholder="密码"
|
|
|
- name="password"
|
|
|
- tabindex="2"
|
|
|
- auto-complete="on"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
+ <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon
|
|
|
- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
|
|
- />
|
|
|
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="imgCode" class="login-code">
|
|
|
<el-input v-model="loginForm.imgCode" placeholder="验证码" />
|
|
|
<img v-if="imgurl" :src="imgurl" alt="" @click="getCode" />
|
|
|
</el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- style="width: 100%; margin-bottom: 30px"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
- >
|
|
|
+ <el-button type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin">
|
|
|
登录
|
|
|
</el-button>
|
|
|
</el-form>
|
|
|
- <el-dialog
|
|
|
- title="获取验证码"
|
|
|
- width="450px"
|
|
|
- :visible.sync="codeShow"
|
|
|
- :close-on-press-escape="false"
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
+ <el-dialog title="获取验证码" width="450px" :visible.sync="codeShow" :close-on-press-escape="false" :close-on-click-modal="false">
|
|
|
<div class="getCode">
|
|
|
<input type="text" v-model="vcode" placeholder="验证码" maxlength="6" />
|
|
|
- <span
|
|
|
- class="code"
|
|
|
- :class="{ code: 1, number: codeState.state }"
|
|
|
- @click="getCheck()"
|
|
|
- >{{ codeState.state ? codeState.time + "s" : "重新获取" }}</span
|
|
|
- >
|
|
|
+ <span class="code" :class="{ code: 1, number: codeState.state }" @click="getCheck()">{{ codeState.state ? codeState.time + "s" : "重新获取" }}</span>
|
|
|
</div>
|
|
|
<div class="loginBtn">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- style="width: 100%; margin-bottom: 30px"
|
|
|
- @click="btnClick"
|
|
|
- >
|
|
|
+ <el-button type="primary" style="width: 100%; margin-bottom: 30px" @click="btnClick">
|
|
|
确定
|
|
|
</el-button>
|
|
|
</div>
|
|
@@ -90,9 +43,13 @@
|
|
|
<script>
|
|
|
import { puk } from "../../api/common";
|
|
|
import urls from "../../api/urls";
|
|
|
+import {
|
|
|
+ post,
|
|
|
+ get
|
|
|
+} from '@/api/common'
|
|
|
export default {
|
|
|
name: "Login",
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
loginForm: {
|
|
|
username: "",
|
|
@@ -144,7 +101,7 @@ export default {
|
|
|
// immediate: true
|
|
|
// }
|
|
|
},
|
|
|
- created() {
|
|
|
+ created () {
|
|
|
puk().then((res) => {
|
|
|
const encrypt = new JSEncrypt();
|
|
|
encrypt.setPublicKey(res.data);
|
|
@@ -155,12 +112,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- getCode() {
|
|
|
- this.imgurl = `${process.env.VUE_APP_BASE_API}${urls.getCode}?userName=${
|
|
|
- this.loginForm.username
|
|
|
- }&refrech=${this.imgCodeRefrech}×=${Date.now()}`;
|
|
|
+ getCode () {
|
|
|
+ this.imgurl = `${process.env.VUE_APP_BASE_API}${urls.getCode}?userName=${this.loginForm.username
|
|
|
+ }&refrech=${this.imgCodeRefrech}×=${Date.now()}`;
|
|
|
},
|
|
|
- showPwd() {
|
|
|
+ showPwd () {
|
|
|
if (this.passwordType === "password") {
|
|
|
this.passwordType = "";
|
|
|
} else {
|
|
@@ -170,7 +126,7 @@ export default {
|
|
|
this.$refs.password.focus();
|
|
|
});
|
|
|
},
|
|
|
- handleLogin() {
|
|
|
+ handleLogin () {
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
const username = this.encrypt.encrypt(this.loginForm.username);
|
|
@@ -191,7 +147,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
- this.getCode()
|
|
|
+ this.getCode()
|
|
|
});
|
|
|
// this.$store
|
|
|
// .dispatch('user/login', { username, password, imgCode })
|
|
@@ -204,7 +160,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- getCheck() {
|
|
|
+ getCheck () {
|
|
|
this.$post("/sysUser/login/smscode", {
|
|
|
phone: this.phone,
|
|
|
}).then((res) => {
|
|
@@ -221,15 +177,19 @@ export default {
|
|
|
}, 1000);
|
|
|
});
|
|
|
},
|
|
|
- btnClick() {
|
|
|
- this.$store
|
|
|
- .dispatch("user/login", {
|
|
|
- phone: this.phone,
|
|
|
- vcode: this.vcode,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
+ btnClick () {
|
|
|
+ this.$store.dispatch("user/login", {
|
|
|
+ phone: this.phone,
|
|
|
+ vcode: this.vcode,
|
|
|
+ }).then(() => {
|
|
|
+ get('/sysUser/info', {}).then(res => {
|
|
|
+ let nowTime = new Date().getTime()
|
|
|
+ let num = new Date(res.data.overdueTime).getTime() - nowTime
|
|
|
+ let day = num / (1000 * 60 * 60 * 24)
|
|
|
+ localStorage.setItem('dayNum', day)
|
|
|
this.$router.push({ path: this.redirect || "/" });
|
|
|
- });
|
|
|
+ })
|
|
|
+ });
|
|
|
// this.$store
|
|
|
// .dispatch("/sysUser/login/valismscode", {
|
|
|
// phone: this.phone,
|
|
@@ -290,8 +250,8 @@ $cursor: #fff;
|
|
|
img {
|
|
|
flex: 0 0 100px;
|
|
|
margin: 10px;
|
|
|
- width: 60px;
|
|
|
- height: 30px;
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
}
|
|
|
}
|