|
@@ -1,75 +1,30 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
- <h3 class="title">智能白板</h3>
|
|
|
- <el-form-item prop="username">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="user" />
|
|
|
- </span>
|
|
|
- <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- :type="pwdType"
|
|
|
- v-model="loginForm.password"
|
|
|
- name="password"
|
|
|
- auto-complete="on"
|
|
|
- placeholder="password"
|
|
|
- @keyup.enter.native="handleLogin" />
|
|
|
- <span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon icon-class="eye" />
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
|
|
|
- Sign in
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- <div class="tips">
|
|
|
- <span style="margin-right:20px;">username: admin</span>
|
|
|
- <span> password: admin</span>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
+ <div class="code">
|
|
|
+ <span>微信扫一扫登录</span>
|
|
|
+ <img :src="code" class="code-img">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { isvalidUsername } from '@/utils/validate'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { setToken } from '@/utils/auth'
|
|
|
|
|
|
export default {
|
|
|
name: 'Login',
|
|
|
data() {
|
|
|
- const validateUsername = (rule, value, callback) => {
|
|
|
- if (!isvalidUsername(value)) {
|
|
|
- callback(new Error('请输入正确的用户名'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validatePass = (rule, value, callback) => {
|
|
|
- if (value.length < 5) {
|
|
|
- callback(new Error('密码不能小于5位'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
return {
|
|
|
- loginForm: {
|
|
|
- username: 'admin',
|
|
|
- password: 'admin'
|
|
|
- },
|
|
|
- loginRules: {
|
|
|
- username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
|
|
- password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
|
|
- },
|
|
|
loading: false,
|
|
|
pwdType: 'password',
|
|
|
redirect: undefined
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'code'
|
|
|
+ ])
|
|
|
+ },
|
|
|
watch: {
|
|
|
$route: {
|
|
|
handler: function(route) {
|
|
@@ -78,29 +33,24 @@ export default {
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getLogincode()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- showPwd() {
|
|
|
- if (this.pwdType === 'password') {
|
|
|
- this.pwdType = ''
|
|
|
- } else {
|
|
|
- this.pwdType = 'password'
|
|
|
- }
|
|
|
- },
|
|
|
- handleLogin() {
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.loading = true
|
|
|
- this.$store.dispatch('Login', this.loginForm).then(() => {
|
|
|
- this.loading = false
|
|
|
- this.$router.push({ path: this.redirect || '/' })
|
|
|
- }).catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- } else {
|
|
|
- console.log('error submit!!')
|
|
|
- return false
|
|
|
- }
|
|
|
+ getLogincode() {
|
|
|
+ this.$store.dispatch('LoginCode').then(() => {
|
|
|
+ this.queryLogin()
|
|
|
})
|
|
|
+ },
|
|
|
+ queryLogin() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$store.dispatch('loginSuccess').then(res => { // 拉取用户信息
|
|
|
+ setToken(res.data.id)
|
|
|
+ this.$router.push({ path: this.redirect || '/' })
|
|
|
+ }).catch(() => {
|
|
|
+ this.queryLogin()
|
|
|
+ })
|
|
|
+ }, 5000)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -192,5 +142,23 @@ $light_gray:#eee;
|
|
|
cursor: pointer;
|
|
|
user-select: none;
|
|
|
}
|
|
|
+ .code {
|
|
|
+ position: absolute;
|
|
|
+ right: 222px;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -171px;
|
|
|
+ width: 320px;
|
|
|
+ height: 342px;
|
|
|
+ background: rgba(255,255,255,1);
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .code-img {
|
|
|
+ width:218px;
|
|
|
+ height: 218px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|