jiangyy
4 years ago
2 changed files with 384 additions and 92 deletions
@ -0,0 +1,155 @@ |
|||||
|
<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') |
||||
|
Cookies.set('token', res.data.token) |
||||
|
this.$router.replace({ name: 'home' }).catch(() => { }) |
||||
|
}).catch(() => { }) |
||||
|
}) |
||||
|
}, 1000, { 'leading': true, 'trailing': false }) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue