提交 847f4cad 编写于 作者: Cano1997's avatar Cano1997

update:登录组件优化

上级 ed06d31e
<template>
<div :class="curClassName" :style="curStyle">
<auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
<i-button :type="type" @click="executeOpen">验证</i-button>
<i-button :type="type" @click="executeOpen">验证<Icon v-show="showIcon" type="md-checkmark" /></i-button>
</div>
</template>
......@@ -57,6 +57,11 @@ export default class AppLoginCaptcha extends Vue {
*/
public type: string = 'default';
/**
* 按钮类型
*/
public showIcon: boolean = false;
/**
* 项名称
*
......@@ -113,6 +118,7 @@ export default class AppLoginCaptcha extends Vue {
public onSuccess() {
this.show = false;
this.type = 'success';
this.showIcon = true;
this.$emit("valueChange", { name: this.itemName, value: true });
}
......@@ -120,6 +126,7 @@ export default class AppLoginCaptcha extends Vue {
* 失败
*/
public onFail() {
this.showIcon = false;
this.$emit("valueChange", { name: this.itemName, value: false });
}
}
......@@ -138,6 +145,9 @@ export default class AppLoginCaptcha extends Vue {
border: 1px solid #dcdee2;
color: #515a6e;
}
.ivu-icon {
margin-left: 8px;
}
}
}
</style>
......@@ -7,7 +7,7 @@
disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
}}</el-button>
</div>
<alert v-show="phoneError" type="error">电话号码格式错误</alert>
<alert v-show="verifyError" type="error">电话号码格式错误</alert>
<div class="code" v-show="show">
<i-input size="default" type="text" :value="currentValue" @input="codeChange"
:placeholder="$t('components.login.codeplaceholder')"></i-input>
......@@ -81,11 +81,11 @@ export default class AppLoginNoteVerify extends Vue {
public phoneNumber: string = "";
/**
* 错误提示
* 校验失败
* @type {*}
* @memberof AppLoginNoteVerify
*/
public phoneError = false;
public verifyError = false;
/**
* 是否禁用获取验证码按钮
......@@ -155,9 +155,10 @@ export default class AppLoginNoteVerify extends Vue {
* @description 校验手机号
* @memberof AppLoginNoteVerify
*/
public veriPhoneNumber(): boolean {
this.phoneError = !/^1[3-9]\d{9}$/.test(this.phoneNumber);
return this.phoneError;
public veriPhoneNumber() {
if (this.phoneNumber) {
this.verifyError = !/^1[3-9]\d{9}$/.test(this.phoneNumber);
}
}
/**
......@@ -181,11 +182,13 @@ export default class AppLoginNoteVerify extends Vue {
* @memberof AppLoginNoteVerify
*/
public getVeriCode() {
if (this.phoneError) return;
// todo 获取验证码
this.show = true;
this.disabled = true;
this.setDelay();
this.veriPhoneNumber();
if (this.phoneNumber && !this.verifyError) {
// todo 获取验证码
this.show = true;
this.disabled = true;
this.setDelay();
}
}
}
</script>
......
......@@ -7,5 +7,8 @@
display: flex;
align-items: center;
justify-content: center;
.app-login-third__btn {
padding: 0 4px;
}
}
}
\ No newline at end of file
......@@ -2,10 +2,10 @@
<div :class="curClassName" :style="curStyle">
<div class="app-login-third__title">{{ $t("components.login.other") }}</div>
<div class="app-login-third__content">
<div class="sign-btn" @click="handleThirdLogin('DINGDING')">
<div class="app-login-third__btn" @click="handleThirdLogin('DINGDING')">
<img class="third-svg-container" src="@/assets/img/dingding.svg" />
</div>
<div class="sign-btn" @click="handleThirdLogin('WXWORK')">
<div class="app-login-third__btn" @click="handleThirdLogin('WXWORK')">
<img class="third-svg-container" src="@/assets/img/qiyeweixin.svg" />
</div>
</div>
......@@ -109,7 +109,7 @@ export default class AppThirdLogin extends Vue {
* @memberof AppThirdLogin
*/
async dingTalkHandleClick() {
this.$message({ message: '暂未支持钉钉登录',type: 'warning'});
}
/**
......@@ -118,7 +118,7 @@ export default class AppThirdLogin extends Vue {
* @memberof AppThirdLogin
*/
async wxWorkHandleClick() {
this.$message({ message: '暂未支持微信登录',type: 'warning'});
}
}
</script>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册