All files / src/pages LoginIn.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133                                                                                                                                                                                                                                                                         
<template>
<div class="login-in">
  <login-logo/>
  <div class="login">
    <div class="login-head">
      <span>帐号登录</span>
    </div>
    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="demo-ruleForm" >
      <el-form-item prop="username">
        <el-input placeholder="用户名" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="loginForm.password" @keyup.enter.native="loginIn"></el-input>
      </el-form-item>
      <div class="login-btn">
        <el-button @click="goLoginUp()">注册</el-button>
        <el-button type="primary" @click="loginIn">登录</el-button>
      </div>
    </el-form>
  </div>
</div>
</template>
 
<script>
import { mixin } from '../mixins'
import LoginLogo from '../components/LoginLogo'
 
export default {
  name: 'login-in',
  components: {
    LoginLogo
  },
  mixins: [mixin],
  data: function () {
    var validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      loginForm: { // 登录用户名密码
        username: '',
        password: ''
      },
      rules: {
        username: [
          { validator: validateName, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.changeIndex('登录')
  },
  methods: {
    changeIndex (value) {
      this.$store.commit('setActiveName', value)
    },
    loginIn () {
      let _this = this
      _this.$api.userAPI.loginIn(this.loginForm.username, this.loginForm.password)
        .then(res => {
          // console.log('-----------获取登录信息---------------')
          if (res.data.code === 1) {
            _this.notify('登录成功', 'success')
            _this.setUserMsg(res.data.userMsg[0])
            _this.$store.commit('setLoginIn', true)
            setTimeout(function () {
              _this.changeIndex('首页')
              _this.$router.push({path: '/home'})
              _this.$router.go(0)
            }, 2000)
          } else {
            _this.notify('用户名或密码错误', 'error')
          }
        })
        .catch(failResponse => {})
    },
    setUserMsg (item) {
      this.$store.commit('setUserId', item.id)
      this.$store.commit('setUsername', item.username)
      this.$store.commit('setAvator', item.avator)
      console.log(this.$store.getters.avator)
    },
    goLoginUp () {
      this.$router.push({path: '/login-up'})
    }
  }
}
</script>
 
<style scoped>
.login{
  position: absolute;
  margin-left: 800px;
  top: 150px;
  padding: 30px 50px;
  width: 300px;
  background-color: white;
  height: 210px;
  border-radius: 10px;
}
 
.login-head {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}
 
.login-btn {
  display: flex;
  justify-content: space-between;
}
 
.login-btn button{
  display: block;
  width: 50%;
}
</style>