|
|
@ -2,8 +2,8 @@ |
|
|
<div class="login-container"> |
|
|
<div class="login-container"> |
|
|
<el-form |
|
|
<el-form |
|
|
ref="formLogin" |
|
|
ref="formLogin" |
|
|
:model="loginForm" |
|
|
:model="registerForm" |
|
|
:rules="loginFormRules" |
|
|
:rules="registerFormRules" |
|
|
label-position="left" |
|
|
label-position="left" |
|
|
label-width="0px" |
|
|
label-width="0px" |
|
|
class="demo-ruleForm login-page" |
|
|
class="demo-ruleForm login-page" |
|
|
@ -17,14 +17,14 @@ |
|
|
<el-form-item label-width="0px"> |
|
|
<el-form-item label-width="0px"> |
|
|
<tenant-box |
|
|
<tenant-box |
|
|
v-if="isMultiEnabled" |
|
|
v-if="isMultiEnabled" |
|
|
v-model="loginForm.tenantName" |
|
|
v-model="registerForm.tenantName" |
|
|
/> |
|
|
/> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item |
|
|
<el-form-item |
|
|
prop="username" |
|
|
prop="username" |
|
|
> |
|
|
> |
|
|
<el-input |
|
|
<el-input |
|
|
v-model="loginForm.username" |
|
|
v-model="registerForm.username" |
|
|
prefix-icon="el-icon-user" |
|
|
prefix-icon="el-icon-user" |
|
|
type="text" |
|
|
type="text" |
|
|
auto-complete="off" |
|
|
auto-complete="off" |
|
|
@ -38,13 +38,13 @@ |
|
|
<el-input |
|
|
<el-input |
|
|
:key="passwordType" |
|
|
:key="passwordType" |
|
|
ref="password" |
|
|
ref="password" |
|
|
v-model="loginForm.password" |
|
|
v-model="registerForm.password" |
|
|
prefix-icon="el-icon-lock" |
|
|
prefix-icon="el-icon-lock" |
|
|
:type="passwordType" |
|
|
:type="passwordType" |
|
|
:placeholder="$t('global.pleaseInputBy', {key: $t('login.password')})" |
|
|
:placeholder="$t('global.pleaseInputBy', {key: $t('login.password')})" |
|
|
name="password" |
|
|
name="password" |
|
|
tabindex="2" |
|
|
tabindex="2" |
|
|
@keyup.enter.native="handleUserLogin" |
|
|
@keyup.enter.native="handleUserRegister" |
|
|
/> |
|
|
/> |
|
|
<span |
|
|
<span |
|
|
class="show-pwd" |
|
|
class="show-pwd" |
|
|
@ -58,7 +58,7 @@ |
|
|
> |
|
|
> |
|
|
<el-input |
|
|
<el-input |
|
|
ref="loginItemPhone" |
|
|
ref="loginItemPhone" |
|
|
v-model="loginForm.phoneNumber" |
|
|
v-model="registerForm.phoneNumber" |
|
|
prefix-icon="el-icon-mobile-phone" |
|
|
prefix-icon="el-icon-mobile-phone" |
|
|
type="text" |
|
|
type="text" |
|
|
maxlength="11" |
|
|
maxlength="11" |
|
|
@ -72,7 +72,7 @@ |
|
|
<el-row> |
|
|
<el-row> |
|
|
<el-col :span="16"> |
|
|
<el-col :span="16"> |
|
|
<el-input |
|
|
<el-input |
|
|
v-model="loginForm.verifyCode" |
|
|
v-model="registerForm.verifyCode" |
|
|
auto-complete="off" |
|
|
auto-complete="off" |
|
|
:placeholder="$t('global.pleaseInputBy', {key: $t('login.phoneVerifyCode')})" |
|
|
:placeholder="$t('global.pleaseInputBy', {key: $t('login.phoneVerifyCode')})" |
|
|
prefix-icon="el-icon-key" |
|
|
prefix-icon="el-icon-key" |
|
|
@ -93,13 +93,13 @@ |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item |
|
|
<el-form-item |
|
|
label-width="100px" |
|
|
label-width="100px" |
|
|
label="已有用户?" |
|
|
:label="$t('login.existsAccount')" |
|
|
> |
|
|
> |
|
|
<el-link |
|
|
<el-link |
|
|
type="success" |
|
|
type="success" |
|
|
@click="handleRedirectLogin" |
|
|
@click="handleRedirectLogin" |
|
|
> |
|
|
> |
|
|
登录 |
|
|
{{ $t('login.logIn') }} |
|
|
</el-link> |
|
|
</el-link> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
@ -107,10 +107,10 @@ |
|
|
<el-button |
|
|
<el-button |
|
|
type="primary" |
|
|
type="primary" |
|
|
style="width:100%;" |
|
|
style="width:100%;" |
|
|
:loading="logining" |
|
|
:loading="registing" |
|
|
@click="handleUserLogin" |
|
|
@click="handleUserRegister" |
|
|
> |
|
|
> |
|
|
{{ $t('login.logIn') }} |
|
|
{{ $t('login.register') }} |
|
|
</el-button> |
|
|
</el-button> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
@ -120,7 +120,6 @@ |
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import { Input } from 'element-ui' |
|
|
import { Input } from 'element-ui' |
|
|
import { Route } from 'vue-router' |
|
|
import { Route } from 'vue-router' |
|
|
import { UserModule } from '@/store/modules/user' |
|
|
|
|
|
import { Dictionary } from 'vue-router/types/router' |
|
|
import { Dictionary } from 'vue-router/types/router' |
|
|
import TenantBox from '@/components/TenantBox/index.vue' |
|
|
import TenantBox from '@/components/TenantBox/index.vue' |
|
|
import LangSelect from '@/components/LangSelect/index.vue' |
|
|
import LangSelect from '@/components/LangSelect/index.vue' |
|
|
@ -136,15 +135,14 @@ import { AbpConfigurationModule } from '@/store/modules/abp' |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
export default class extends Vue { |
|
|
export default class extends Vue { |
|
|
private loginType = 'password' |
|
|
|
|
|
private passwordType = 'password' |
|
|
private passwordType = 'password' |
|
|
private redirect?: string |
|
|
private redirect?: string |
|
|
|
|
|
|
|
|
private sendTimer: any |
|
|
private sendTimer: any |
|
|
private sending = false |
|
|
private sending = false |
|
|
private sendButtonName = this.l('login.sendVerifyCode') |
|
|
private sendButtonName = this.l('login.sendVerifyCode') |
|
|
private logining = false |
|
|
private registing = false |
|
|
private loginForm = { |
|
|
private registerForm = { |
|
|
tenantName: '', |
|
|
tenantName: '', |
|
|
username: '', |
|
|
username: '', |
|
|
password: '', |
|
|
password: '', |
|
|
@ -165,7 +163,7 @@ export default class extends Vue { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private loginFormRules = { |
|
|
private registerFormRules = { |
|
|
username: [ |
|
|
username: [ |
|
|
{ |
|
|
{ |
|
|
required: true, message: this.l('global.pleaseInputBy', { key: this.l('login.username') }), trigger: 'blur' |
|
|
required: true, message: this.l('global.pleaseInputBy', { key: this.l('login.username') }), trigger: 'blur' |
|
|
@ -219,33 +217,23 @@ export default class extends Vue { |
|
|
this.$router.replace('login') |
|
|
this.$router.replace('login') |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private handleUserLogin() { |
|
|
private handleUserRegister() { |
|
|
const frmLogin = this.$refs.formLogin as any |
|
|
const frmLogin = this.$refs.formLogin as any |
|
|
frmLogin.validate(async(valid: boolean) => { |
|
|
frmLogin.validate(async(valid: boolean) => { |
|
|
if (valid) { |
|
|
if (valid) { |
|
|
this.logining = true |
|
|
this.registing = true |
|
|
try { |
|
|
try { |
|
|
if (this.loginType === 'password') { |
|
|
const userRegister = new UserRegisterData() |
|
|
const userLogin = { |
|
|
userRegister.phoneNumber = this.registerForm.phoneNumber |
|
|
tenantName: this.loginForm.tenantName, |
|
|
userRegister.verifyCode = this.registerForm.verifyCode |
|
|
username: this.loginForm.username, |
|
|
userRegister.name = this.registerForm.username |
|
|
password: this.loginForm.password |
|
|
userRegister.userName = this.registerForm.username |
|
|
} |
|
|
userRegister.password = this.registerForm.password |
|
|
await UserModule.Login(userLogin) |
|
|
UserService.userRegister(userRegister).then(() => { |
|
|
this.$router.push({ |
|
|
this.handleRedirectLogin() |
|
|
path: this.redirect || '/' |
|
|
}).finally(() => { |
|
|
}) |
|
|
this.resetLoginButton() |
|
|
} else { |
|
|
}) |
|
|
const phoneLogin = { |
|
|
|
|
|
tenantName: this.loginForm.tenantName, |
|
|
|
|
|
phoneNumber: this.loginForm.phoneNumber, |
|
|
|
|
|
verifyCode: this.loginForm.verifyCode |
|
|
|
|
|
} |
|
|
|
|
|
await UserModule.PhoneLogin(phoneLogin) |
|
|
|
|
|
this.$router.push({ |
|
|
|
|
|
path: this.redirect || '/' |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} catch { |
|
|
} catch { |
|
|
this.resetLoginButton() |
|
|
this.resetLoginButton() |
|
|
} |
|
|
} |
|
|
@ -259,8 +247,8 @@ export default class extends Vue { |
|
|
if (!errorMsg) { |
|
|
if (!errorMsg) { |
|
|
this.sending = true |
|
|
this.sending = true |
|
|
const phoneVerify = new PhoneVerify() |
|
|
const phoneVerify = new PhoneVerify() |
|
|
phoneVerify.phoneNumber = this.loginForm.phoneNumber |
|
|
phoneVerify.phoneNumber = this.registerForm.phoneNumber |
|
|
phoneVerify.verifyType = VerifyType.signin |
|
|
phoneVerify.verifyType = VerifyType.register |
|
|
UserService.sendPhoneVerifyCode(phoneVerify).then(() => { |
|
|
UserService.sendPhoneVerifyCode(phoneVerify).then(() => { |
|
|
let interValTime = 60 |
|
|
let interValTime = 60 |
|
|
const sendingName = this.l('login.afterSendVerifyCode') |
|
|
const sendingName = this.l('login.afterSendVerifyCode') |
|
|
@ -281,17 +269,13 @@ export default class extends Vue { |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private handleLoginTabChanged(tab: any) { |
|
|
|
|
|
this.loginType = tab.paneName === '1' ? 'phone' : 'password' |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private l(name: string, values?: any[] | { [key: string]: any }) { |
|
|
private l(name: string, values?: any[] | { [key: string]: any }) { |
|
|
return this.$t(name, values).toString() |
|
|
return this.$t(name, values).toString() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private resetLoginButton() { |
|
|
private resetLoginButton() { |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.logining = false |
|
|
this.registing = false |
|
|
}, 0.5 * 1000) |
|
|
}, 0.5 * 1000) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|