tingbang/htmldev/manage/src/views/login/index.vue

<template>
  <div class="page-login">
    <div class="page-login--wrapper">
      <div class="page-login--content">
        <div class="page-login--logo-title">
          <h5>管理系统登录</h5>
        </div>
        <el-form :model="loginForm" :rules="formRules" ref="loginForm" label-position="top">
          <el-form-item prop="user_name" :rules="formRules.required">
            <el-input placeholder="用户名" v-model="loginForm.user_name" size="default">
              <i slot="prepend" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="user_password" :rules="formRules.password">
            <el-input show-password placeholder="密码" v-model="loginForm.user_password" size="default"
                      @keydown.enter.native="handleSubmit">
              <i slot="prepend" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleSubmit"
              type="primary"
              class="button-login"
              size="default">登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken, setBarId, setBarName } from '@/utils/auth'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        user_project_id: '1',
        user_name: '',
        user_password: ''
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          this.loading = true

          const data = await this.$fetch('/api/auth/user/login', this.loginForm)

          if (data.code === 200) {
            this.$store.commit('user/SET_TOKEN', data.data.token)
            setToken(data.data.token)
            setBarId(data.data.bar_id)
            setBarName(data.data.bar_name)
            this.$router.push({ path: this.redirect || '/' })
          }

          this.loading = false

        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page-login {
  user-select: none;
  cursor: pointer;
  $backgroundColor: #f0f2f5;
  background-color: $backgroundColor;
  height: 100%;
  position: relative;

  .page-login--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    .page-login--content {
      width: 400px;
      padding: 20px;
      border-radius: 8px;
      background: #fff;

      .button-login {
        display: block;
        width: 100%;
      }

      .page-login--logo-title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        font-size: 36px;

        h5 {
          margin: 20px 0;
        }

        img {
          width: 40px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>