cloudnote_web/components/account/login.vue

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item :label="$t('account.form.user')" prop="user">
      <el-input v-model="form.user" :placeholder="$t('input_please',{keyword:$t('account.form.user')})"></el-input>
    </el-form-item>
    <el-form-item :label="$t('account.form.password')" prop="password">
      <el-input v-model="form.password" type="password"
                :placeholder="$t('input_please',{keyword:$t('account.form.password')})"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">{{$t('account.login')}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">

  export default {
    name: 'login',
    data() {
      return {
        form: {
          user: '',
          password: ''
        },
        // 表单校验规则
        rules:{
          user:[{
            required: true,
            message: this.$t('input_please', { keyword: this.$t('account.form.user') }),
          }],
          password:[{
            required: true,
            message: this.$t('input_please', { keyword: this.$t('account.form.password') })
          }]
        }
      }
    },
    methods: {
      submit() {
        this.$refs.form.validate((valid: boolean) => {
          if (valid) {
            let that = this
            this.GLOBAL.postJSON('/v1/api/users/sign_in', {
              userName: this.form.user,
              password: this.form.password
            }, function(res) {
              if (res.code === '200') {
                that.$message({
                  message: that.$t('account.form.tip.login_ok').toString(), duration: 1000, onClose: function() {
                    that.$cookies.set(that.GLOBAL.user_key, that.form.user)
                    that.$router.push(that.localePath('/document'))
                  }
                })
              } else {
                that.$message(that.$t('account.form.tip.login_fail'))
              }
            })
          } else {
            this.$message.error({
              message: this.$t('form_err').toString(),
              duration: 2000
            })
            return false
          }
        })
      }
    }
  }
</script>