修改

jinlin

2024-02-23 1772fc5e211f9e9e0ab4cdc6c29b436aac178c2a

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
<template>
  <div class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
        </div>
        <div class="login-body">
          <h3 class="login-title">{{ $t('login.title') }}</h3>
          <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="formSubmit()" status-icon>
            <zt-form-item prop="username" rules="required">
              <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
              </el-input>
            </zt-form-item>
            <zt-form-item prop="password" rules="required">
              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
              </el-input>
            </zt-form-item>
            <zt-form-item prop="captcha" rules="required" v-if="$config.IS_LOGIN_NEED_CAPTURE">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()">
                </el-col>
              </el-row>
            </zt-form-item>
            <el-form-item>
              <el-button type="primary" @click="formSubmit()" class="w-percent-100">{{ $t('login.title') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </main>
    </div>
  </div>
</template>
 
<script>
  import Cookies from 'js-cookie'
  import debounce from 'lodash/debounce'
  import {getUUID} from '../../../packages/utils'
 
  export default {
    data() {
      return {
        captchaPath: '',
        dataForm: {
          username: '',
          password: '',
          uuid: '',
          captcha: ''
        }
      }
    },
    computed: {
    },
    created() {
      this.getCaptcha()
    },
    methods: {
      // 获取验证码
      getCaptcha() {
        this.dataForm.uuid = getUUID()
        this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
      },
      // 表单提交
      formSubmit: debounce(function () {
        this.$refs['dataForm'].validate(async valid => {
          if (valid) {
            let res = await this.$http.post('/login', this.dataForm)
            this.getCaptcha()
            if (res.success) {
              Cookies.set('token', res.data.token)
              Cookies.remove('systemId')
              this.$router.replace({name: 'home'})
            }
          }
        })
      }, 1000, {'leading': true, 'trailing': false})
    }
  }
</script>