|
|
|
@ -20,7 +20,8 @@ |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item prop="username"> |
|
|
|
<el-input v-model="dataForm.username" |
|
|
|
:placeholder="$t('login.username')"> |
|
|
|
:placeholder="$t('login.username')" |
|
|
|
@blur="onInputBlur"> |
|
|
|
<span slot="prefix" |
|
|
|
class="el-input__icon"> |
|
|
|
<svg class="icon-svg" |
|
|
|
@ -43,7 +44,8 @@ |
|
|
|
</span> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="captcha"> |
|
|
|
<el-form-item prop="captcha" |
|
|
|
v-if='!getMobileType'> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="14"> |
|
|
|
<el-input v-model="dataForm.captcha" |
|
|
|
@ -64,6 +66,31 @@ |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form-item> |
|
|
|
<div class="login-mobile" |
|
|
|
v-if='getMobileType'>手机号：{{loginMobile.mobile}}</div> |
|
|
|
<el-form-item prop="smsCode" |
|
|
|
v-if='getMobileType'> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="10"> |
|
|
|
<el-input v-model="dataForm.smsCode" |
|
|
|
:placeholder="$t('login.smsCode')"> |
|
|
|
<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"> |
|
|
|
<el-button @click="getSmsCode()" |
|
|
|
:disabled="smsCodeText !== '获取验证码'" |
|
|
|
type="primary">{{smsCodeText}}</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" |
|
|
|
@click="dataFormSubmitHandle()" |
|
|
|
@ -72,7 +99,8 @@ |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<div v-if="isHidden"> |
|
|
|
<p><a href="https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7B0EBBEC46-30F5-946B-A54E-5628DFF12914%7D%26lang%3Den%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Ddefaultbrowser/update2/installers/ChromeSetup.exe" target="_blank">点击此处下载谷歌浏览器</a></p> |
|
|
|
<p><a href="https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7B0EBBEC46-30F5-946B-A54E-5628DFF12914%7D%26lang%3Den%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Ddefaultbrowser/update2/installers/ChromeSetup.exe" |
|
|
|
target="_blank">点击此处下载谷歌浏览器</a></p> |
|
|
|
</div> |
|
|
|
<!-- <div class="login-footer"> |
|
|
|
<p><a href="http://www.elinkit.com.cn/" |
|
|
|
@ -98,8 +126,15 @@ export default { |
|
|
|
username: '', |
|
|
|
password: '', |
|
|
|
uuid: '', |
|
|
|
captcha: '' |
|
|
|
} |
|
|
|
captcha: '', |
|
|
|
smsCode: '' |
|
|
|
}, |
|
|
|
loginMobile: { |
|
|
|
mobile: '', |
|
|
|
keyword: '' |
|
|
|
}, |
|
|
|
getMobileType: false, // 用于判断显示验证码还是短信验证码登录 |
|
|
|
smsCodeText: '获取验证码' // 获取验证码button内容 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -113,6 +148,9 @@ export default { |
|
|
|
], |
|
|
|
captcha: [ |
|
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|
|
|
], |
|
|
|
smsCode: [ |
|
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
@ -141,7 +179,9 @@ export default { |
|
|
|
if (!valid) { |
|
|
|
return false |
|
|
|
} |
|
|
|
this.$http.post('/auth/login', this.dataForm).then(({ data: res }) => { |
|
|
|
// getMobileType false 按原流程登录 |
|
|
|
const loginUrl = this.getMobileType ? '/auth/loginBySms' : '/auth/login' |
|
|
|
this.$http.post(loginUrl, this.dataForm).then(({ data: res }) => { |
|
|
|
if (res.code !== 0) { |
|
|
|
this.getCaptcha() |
|
|
|
return this.$message.error(res.msg) |
|
|
|
@ -177,6 +217,51 @@ export default { |
|
|
|
} |
|
|
|
localStorage.setItem('street', res.data.id) |
|
|
|
}).catch(() => { }) |
|
|
|
}, |
|
|
|
// 用户名失去焦点方法 |
|
|
|
onInputBlur () { |
|
|
|
this.$http.get(`/sys/user/getLoginMobile/?username=${this.dataForm.username}`).then(({ data: res }) => { |
|
|
|
if (res.code !== 0) { |
|
|
|
this.getMobileType = false |
|
|
|
return this.$message.error(res.msg) |
|
|
|
} |
|
|
|
// mobile 不为空： |
|
|
|
// 登录页面隐藏验证码，采用短信验证码的方式登录(/auth/loginBySms) |
|
|
|
// phone 为空 |
|
|
|
// 原登录流程不变 |
|
|
|
this.getMobileType = res.data.mobile ? true : false |
|
|
|
this.loginMobile = { |
|
|
|
mobile: res.data.mobile, |
|
|
|
keyword: res.data.keyword |
|
|
|
} |
|
|
|
}).catch(() => { }) |
|
|
|
}, |
|
|
|
// 获取验证码 |
|
|
|
getSmsCode () { |
|
|
|
this.smsCodeText = '获取中...' |
|
|
|
this.$http.post(`/message/sms/send/byMobileAndKeyword?mobile=${this.loginMobile.mobile}&keyword=${this.loginMobile.keyword}`).then(({ data: res }) => { |
|
|
|
if (res.code !== 0) { |
|
|
|
this.smsCodeText = '获取验证码' |
|
|
|
return this.$message.error(res.msg) |
|
|
|
} |
|
|
|
this.$message({ |
|
|
|
message: '验证码发送成功', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
let num = 60 |
|
|
|
this.smsCodeText = '60s后重新获取' |
|
|
|
const timer = setInterval(() => { |
|
|
|
if (num >= 1) { |
|
|
|
this.smsCodeText = `${num}s后重新获取` |
|
|
|
--num |
|
|
|
} else { |
|
|
|
clearInterval(timer) |
|
|
|
this.smsCodeText = '获取验证码' |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
}).catch(() => { |
|
|
|
this.smsCodeText = '获取验证码' |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
zhaoyongnian
4 years ago