jiangyy
3 years ago
10 changed files with 224 additions and 349 deletions
@ -1,155 +0,0 @@ |
|||||
<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> |
|
||||
<el-select v-model="$i18n.locale" |
|
||||
class="w-percent-100"> |
|
||||
<el-option v-for="(val, key) in i18nMessages" |
|
||||
:key="key" |
|
||||
:label="val._lang" |
|
||||
:value="key"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> --> |
|
||||
<el-form-item prop="phone"> |
|
||||
<el-input v-model="dataForm.phone" |
|
||||
placeholder="手机号"> |
|
||||
<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="https://demo.cloud.renren.io/renren-cloud" |
|
||||
target="_blank">{{ $t('login.demo') }}</a> |
|
||||
</p> |
|
||||
<!-- 2020 © renren.io --> |
|
||||
<p><a href="https://www.renren.io/" |
|
||||
target="_blank">{{ $t('login.copyright') }}</a></p> |
|
||||
</div> |
|
||||
</main> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Cookies from 'js-cookie' |
|
||||
import debounce from 'lodash/debounce' |
|
||||
import { messages } from '@/i18n' |
|
||||
import { getUUID } from '@/utils' |
|
||||
export default { |
|
||||
data () { |
|
||||
return { |
|
||||
i18nMessages: messages, |
|
||||
captchaPath: '', |
|
||||
dataForm: { |
|
||||
app: 'oper', |
|
||||
client: 'web', |
|
||||
username: '', |
|
||||
phone: '', |
|
||||
password: '', |
|
||||
uuid: '', |
|
||||
captcha: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule () { |
|
||||
return { |
|
||||
phone: [ |
|
||||
{ required: true, message: '手机号不能为空', trigger: 'blur' } |
|
||||
], |
|
||||
password: [ |
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' } |
|
||||
], |
|
||||
captcha: [ |
|
||||
{ required: true, message: '验证码不能为空', trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created () { |
|
||||
this.getCaptcha() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取验证码 |
|
||||
getCaptcha () { |
|
||||
this.dataForm.uuid = getUUID() |
|
||||
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/login/captcha?uuid=${this.dataForm.uuid}` |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmitHandle: debounce(function () { |
|
||||
this.$refs['dataForm'].validate((valid, messageObj) => { |
|
||||
if (!valid) { |
|
||||
app.util.validateRule(messageObj) |
|
||||
} |
|
||||
this.$http.post('/auth/login/operweb/loginbypassword', this.dataForm).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
this.getCaptcha() |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
localStorage.setItem('userType', 'oper') |
|
||||
localStorage.setItem('token', res.data.token) |
|
||||
this.$router.replace({ name: 'home' }).catch(() => { }) |
|
||||
}).catch(() => { }) |
|
||||
}) |
|
||||
}, 1000, { 'leading': true, 'trailing': false }) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
Loading…
Reference in new issue