|
|
@@ -1,95 +1,99 @@
|
|
|
<template>
|
|
|
- <div class="container" :style="{backgroundImage :'url(' + require('../assets/bg_login.jpg') + ')'}">
|
|
|
- <div class="login-wrapper" @keyup.enter="login">
|
|
|
- <div class="title">欢迎登录</div>
|
|
|
- <el-form :model="userInfo" style="width: 350px" ref="form">
|
|
|
- <el-form-item prop="username" :rules="{required: true, message: '请输入用户名', trigger: 'blur'}">
|
|
|
- <el-input v-model="userInfo.username" placeholder="用户名"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="password" :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
|
|
|
- <el-input v-model="userInfo.password" placeholder="密码" type="password"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="记住我">
|
|
|
- <el-switch v-model="rememberMe"></el-switch>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button :loading="loading" @click="login" type="primary" style="width: 100%;">登录</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ <div class="container" :style="{backgroundImage :'url(' + require('../assets/bg_login.jpg') + ')'}">
|
|
|
+ <div class="login-wrapper" @keyup.enter="login">
|
|
|
+ <div class="title">欢迎登录</div>
|
|
|
+ <el-form :model="userInfo" style="width: 350px" ref="form">
|
|
|
+ <el-form-item prop="username" :rules="{required: true, message: '请输入用户名', trigger: 'blur'}">
|
|
|
+ <el-input v-model="userInfo.username" placeholder="用户名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password" :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
|
|
|
+ <el-input v-model="userInfo.password" placeholder="密码" type="password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="记住我">
|
|
|
+ <el-switch v-model="rememberMe"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" @click="login" type="primary" style="width: 100%;">登录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- rememberMe: false,
|
|
|
- loading: false,
|
|
|
- userInfo: {
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rememberMe: false,
|
|
|
+ loading: false,
|
|
|
+ userInfo: {
|
|
|
+ username: '',
|
|
|
+ password: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ login() {
|
|
|
+ this.$store.commit('updateLoginHistory', [{
|
|
|
+ name: '/dashboard',
|
|
|
+ title: '首页'
|
|
|
+ }])
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ this.$http.post({
|
|
|
+ url: '/auth/login',
|
|
|
+ data: {
|
|
|
+ username: this.userInfo.username,
|
|
|
+ password: this.userInfo.password,
|
|
|
+ remember: this.rememberMe
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- login() {
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.loading = true;
|
|
|
- this.$http.post({
|
|
|
- url: '/auth/login',
|
|
|
- data: {
|
|
|
- username: this.userInfo.username,
|
|
|
- password: this.userInfo.password,
|
|
|
- remember: this.rememberMe
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- this.loading = false;
|
|
|
- if (res.success) {
|
|
|
- this.$router.replace('/');
|
|
|
- } else {
|
|
|
- this.$message.error('登录失败');
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- this.loading = false;
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ }).then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.success) {
|
|
|
+ this.$router.replace('/');
|
|
|
+ } else {
|
|
|
+ this.$message.error('登录失败');
|
|
|
}
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
}
|
|
|
+ })
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #ebebeb;
|
|
|
- background-image: url('https://microball.oss-cn-hangzhou.aliyuncs.com/izouma/application/rawpixel-com-565462-unsplash%20%281%29.jpg');
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ background-image: url("https://microball.oss-cn-hangzhou.aliyuncs.com/izouma/application/rawpixel-com-565462-unsplash%20%281%29.jpg");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
|
|
|
- .login-wrapper {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 5px;
|
|
|
- background: white;
|
|
|
- border: 1px #eaeaea solid;
|
|
|
- position: absolute;
|
|
|
- right: 100px;
|
|
|
- top: 100px;
|
|
|
- width: 400px;
|
|
|
- .title {
|
|
|
- color: #20a0ff;
|
|
|
- font-weight: bold;
|
|
|
- width: 350px;
|
|
|
- line-height: 68px;
|
|
|
- }
|
|
|
- }
|
|
|
+.login-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: white;
|
|
|
+ border: 1px #eaeaea solid;
|
|
|
+ position: absolute;
|
|
|
+ right: 100px;
|
|
|
+ top: 100px;
|
|
|
+ width: 400px;
|
|
|
+ .title {
|
|
|
+ color: #20a0ff;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 350px;
|
|
|
+ line-height: 68px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|