update：登录组件优化

src/components/layout-element/login/app-login-captcha/app-login-captcha.vue

 <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>

src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue

@@ -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,12 +182,14 @@ export default class AppLoginNoteVerify extends Vue {
      * @memberof AppLoginNoteVerify
      */
     public getVeriCode() {
-        if (this.phoneError) return;
+        this.veriPhoneNumber();
+        if (this.phoneNumber && !this.verifyError) {
             // todo 获取验证码
             this.show = true;
             this.disabled = true;
             this.setDelay();
         }
+    }
 }
 </script>
 

src/components/layout-element/login/app-login-third/app-login-third.less

@@ -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

src/components/layout-element/login/app-login-third/app-login-third.vue

@@ -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>