GCLS_Page_Learn/src/views/login/index.vue

<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">{{ $t('login') }}</h3>
      </div>

      <el-form-item prop="user_name">
        <el-input
          ref="user_name"
          v-model="loginForm.user_name"
          type="text"
          name="user_name"
          autocomplete="on"
          :placeholder="$t('username')"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          ref="password"
          v-model="loginForm.password"
          type="password"
          name="password"
          :placeholder="$t('password')"
          autocomplete="on"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-button
            class="login-button"
            type="primary"
            :loading="loading"
            @click.native.prevent="handleLogin('TEACHER')"
          >
            {{ $t('Learn_TLogin') }}
          </el-button>
        </el-col>

        <el-col :span="12">
          <el-button
            class="login-button"
            type="primary"
            :loading="loading"
            @click.native.prevent="handleLogin('STUDENT')"
          >
            {{ $t('Learn_SLogin') }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { updateWordPack } from '@/utils/i18n';

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$i18n.t('Learn_Login_user_warning')));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error(this.$i18n.t('Learn_Login_password_warning')));
      } else {
        callback();
      }
    };

    return {
      loginForm: {
        user_name: '',
        password: '',
        user_type: ''
      },
      loginRules: {
        user_name: [{ require: true, trigger: 'blur', validator: validateUsername }],
        password: [{ require: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      redirect: null
    };
  },
  watch: {
    $router: {
      handler: function (router) {
        this.redirect = router.query && router.query.redirect;
      }
    }
  },
  created() {
    updateWordPack({
      word_key_list: [
        'login',
        'password',
        'username',
        'Learn_TLogin',
        'Learn_SLogin',
        'Learn_Login_user_warning',
        'Learn_Login_password_warning'
      ]
    });
  },
  methods: {
    handleLogin(user_type) {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginForm.user_type = user_type;
          this.loading = true;
          this.$store
            .dispatch('user/login', { loginForm: this.loginForm })
            .then(() => {
              this.$router.push({ path: this.redirect || '/' });
              this.loading = false;
              this.$message.success('登录成功！');
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.login-container {
  background-color: #f5f5f5;
  min-height: 100%;
  width: 100%;
  overflow: hidden;

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: #999;
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .login-button {
    display: block;
    margin: 0 auto;
  }
}
</style>