|
|
@@ -11,6 +11,13 @@
|
|
|
<el-button @click="getYzm" :disabled="disabled">{{this.$t('login.smsGet')}}<span v-if="disabled"> ({{time}})</span></el-button>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="code" :label="$t('login.code')">
|
|
|
+ <el-input v-model="form.code" :placeholder="$t('login.codeErr')">
|
|
|
+ <template #suffix>
|
|
|
+ <div class="captcha" @click="updateCaptcha"><img :src="captcha.base64" /></div>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item prop="privacy">
|
|
|
<el-checkbox :label="$t('login.rememberMe')" v-model="form.privacy">
|
|
|
<template #default>
|
|
|
@@ -34,7 +41,8 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- props: ['baseData'],
|
|
|
+ emits: ['success', 'upCaptcha'],
|
|
|
+ props: ['baseData',"captcha"],
|
|
|
data() {
|
|
|
return {
|
|
|
form: {
|
|
|
@@ -62,6 +70,9 @@ export default {
|
|
|
yzm: [
|
|
|
{required: true, message: this.$t('login.smsError')}
|
|
|
],
|
|
|
+ code: [
|
|
|
+ { required: true, message: this.$t('login.codeErr'), trigger: 'blur' }
|
|
|
+ ],
|
|
|
privacy: [
|
|
|
{ required: true, message: this.$t('login.privacy'), trigger: 'change' }
|
|
|
]
|
|
|
@@ -77,6 +88,9 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ updateCaptcha(){
|
|
|
+ this.$emit("upCaptcha");
|
|
|
+ },
|
|
|
showPrivacy(){
|
|
|
this.visible = true;
|
|
|
},
|
|
|
@@ -91,7 +105,19 @@ export default {
|
|
|
},
|
|
|
async onSuccess(){
|
|
|
this.isShow = false;
|
|
|
- var resp = await this.$API.login.sms.post({"mobile":this.form.phone,"scene":"login"});
|
|
|
+ },
|
|
|
+ async getYzm(){
|
|
|
+ var field = ["phone","code"];
|
|
|
+ var flag = true;
|
|
|
+ field.forEach((item,key) => {
|
|
|
+ this.$refs.loginForm.validateField(item, valid => {
|
|
|
+ if(valid.length){
|
|
|
+ return flag = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if(!flag){ return false }
|
|
|
+ var resp = await this.$API.login.sms.post({"mobile":this.form.phone,"code":this.form.codem,"key":this.captcha.key,"scene":"login"});
|
|
|
if (resp.code == 0) {
|
|
|
return this.$message.error(resp.msg);
|
|
|
}
|
|
|
@@ -107,11 +133,6 @@ export default {
|
|
|
}
|
|
|
},1000)
|
|
|
},
|
|
|
- async getYzm(){
|
|
|
- var validate = await this.$refs.loginForm.validateField("phone").catch(()=>{})
|
|
|
- if(!validate){ return false }
|
|
|
- this.isShow = true;
|
|
|
- },
|
|
|
async login(){
|
|
|
var validate = await this.$refs.loginForm.validate().catch(()=>{})
|
|
|
if(!validate){ return false }
|
|
|
@@ -204,4 +225,21 @@ export default {
|
|
|
overflow-y: scroll;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
+.el-input--large .el-input__wrapper{
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.captcha{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 1px;
|
|
|
+ top: 1px;
|
|
|
+ bottom: 1px;
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+.captcha img{
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
</style>
|
Zory