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

update:登录组件优化

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