140 lines
4.1 KiB
Vue
140 lines
4.1 KiB
Vue
<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" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
|
|
<el-form-item prop="username">
|
|
<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>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<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>
|
|
</el-form-item>
|
|
<!-- <el-form-item prop="captcha">
|
|
<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>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="login-footer">
|
|
<p>
|
|
<a href="http://demo.open.renren.io/renren-security" target="_blank">{{ $t('login.demo') }}</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://www.renren.io/" target="_blank">{{ $t('login.copyright') }}</a>
|
|
2022 © renren.io
|
|
</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Cookies from 'js-cookie'
|
|
import debounce from 'lodash/debounce'
|
|
// import { getUUID } from '@/utils'
|
|
export default {
|
|
data() {
|
|
return {
|
|
captchaPath: '',
|
|
dataForm: {
|
|
username: 'admin',
|
|
password: 'admin',
|
|
uuid: ''
|
|
// captcha: ''
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
|
|
password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
|
|
// captcha: [
|
|
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
// ]
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// this.getCaptcha()
|
|
},
|
|
methods: {
|
|
// 获取验证码
|
|
getCaptcha() {
|
|
this.dataForm.uuid = getUUID()
|
|
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
|
|
},
|
|
// 表单提交
|
|
dataFormSubmitHandle: debounce(
|
|
function() {
|
|
this.$refs['dataForm'].validate(valid => {
|
|
if (!valid) {
|
|
return false
|
|
}
|
|
this.$http
|
|
.post(this.$http.adornUrl('/login'), this.dataForm)
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
// this.getCaptcha()
|
|
return this.$message.error(res.msg)
|
|
}
|
|
Cookies.set('token', res.data.token)
|
|
|
|
/** 保存dictlist */
|
|
this.$http.get(this.$http.adornUrl('/sys/dict/data/getAll')).then(({ data: res }) => {
|
|
if (res && res.code === 0) {
|
|
localStorage.setItem('dictList', JSON.stringify(res.data))
|
|
} else {
|
|
this.$message({
|
|
message: '数据字典拉取失败，请检查!',
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
|
|
this.$router.replace({ name: 'home' })
|
|
})
|
|
.catch(err => {
|
|
this.$message({
|
|
message: err.message,
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
})
|
|
})
|
|
},
|
|
1000,
|
|
{ leading: true, trailing: false }
|
|
)
|
|
}
|
|
}
|
|
</script>
|