update：短信验证

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

@@ -6,16 +6,19 @@
             border: 1px solid #dcdee2;
             margin-left: 10px;
             color: #606266;
-            background-color: #fff;
             &:hover {
                 border: 1px solid #dcdee2;
             }
+            &.is-disabled {
+                background-color: #f5f5f5;
+                color: #00000040;
+            }
         }
     }
     .code{
         padding-top: 8px;
     }
-    .error {
-        color: red;
+    .ivu-alert-error {
+        background-color: rgb(255, 225, 225);
     }
 }
\ No newline at end of file

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

 <template>
-  <div class="app-login-note-verify">
+    <div :class="[model.sysCss, 'app-login-note-verify']" :style="containerStyle">
         <div class="content">
             <i-input
                 size="default"
@@ -8,15 +8,12 @@
                 :placeholder="$t('components.login.phoneplaceholder')"
                 @on-blur="veriPhoneNumber"
             ></i-input>
-      <el-button
-        :disabled="disabled"
-        size="mini"
-        type="primary"
-        @click="getVeriCode()"
-        >{{ disabled ? `${countDown}s ${$t('components.login.getcodeafter')}` : `${$t('components.login.getcode')}` }}</el-button
-      >
+            <el-button :disabled="disabled" size="mini" @click="getVeriCode()">{{
+                disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
+            }}</el-button>
         </div>
-    <div class="code">
+        <alert v-show="phoneError" type="error">电话号码格式错误</alert>
+        <div class="code" v-show="this.show">
             <i-input
                 size="default"
                 type="text"
@@ -28,118 +25,140 @@
     </div>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
+import { PanelFieldModel } from "@/model/panel-detail";
 import { Vue, Component, Prop } from "vue-property-decorator";
 
 @Component({})
-export default class AppPresetSmsVerification extends Vue {
+export default class AppLoginNoteVerify extends Vue {
+    /**
+     * 模型
+     *
+     * @type {string}
+     * @memberof AppLoginInput
+     */
+    @Prop() public model!: PanelFieldModel;
 
     /**
-   *验证码值
+     * 值
      *
      * @type {string}
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginInput
      */
     @Prop() public value!: string;
 
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppLoginInput
+     */
+    @Prop() public name!: string;
+
     /**
      *验证码当前值
      *
      * @type {string}
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginNoteVerify
      */
     get currentValue(): string {
         return this.value;
     }
 
-
     /**
      * 手机号
      *
      * @type {*}
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginNoteVerify
      */
-  public phoneNumber: string = '';
-
-  /**
-   * 倒计时
-   *
-   * @type {*}
-   * @memberof AppPresetSmsVerification
-   */
-  public countDown: number = 60;
+    public phoneNumber: string = "";
 
     /**
      * 错误提示
      * @type {*}
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginNoteVerify
      */
     public phoneError = false;
 
     /**
      * 是否禁用获取验证码按钮
      *
-   * @type {*}
-   * @memberof AppPresetSmsVerification
+     * @type {boolean}
+     * @memberof AppLoginNoteVerify
      */
     public disabled: boolean = false;
 
     /**
-   * 定时器
+     * 显示验证码输入框
      *
-   * @type {*}
-   * @memberof AppPresetSmsVerification
+     * @type {boolean}
+     * @memberof AppLoginNoteVerify
      */
-  public timer: any;
+    public show: boolean = false;
 
     /**
-   * @description 设置倒计时
-   * @memberof AppPresetSmsVerification
+     * 延迟
+     *
+     * @type {number}
+     * @memberof AppLoginNoteVerify
      */
-  public setCountDown() {
-    if (this.countDown > 0) {
-      this.countDown--;
-    } else {
-      this.countDown = 60;
-      this.disabled = false;
-      clearInterval(this.timer);
-    }
-    this.$forceUpdate();
-  }
+    public delay: number = 60;
+
+    /**
+     * 定时器
+     *
+     * @type {any}
+     * @memberof AppLoginNoteVerify
+     */
+    public timer: any = null;
 
     /**
      * @description 验证码输入变化
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginNoteVerify
      */
     public codeChange(value: string) {
-    this.$emit("change", value);
+        this.$emit("valueChange", { name: this.name, value: value });
     }
 
     /**
      * @description 校验手机号
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginNoteVerify
      */
     public veriPhoneNumber(): boolean {
         this.phoneError = !/^1[3-9]\d{9}$/.test(this.phoneNumber);
-    if(this.phoneError) {
-      this.$emit("error", this.$t('components.login.phonefailed'));
+        return this.phoneError;
+    }
+
+    /**
+     * @description 设置延迟时间
+     * @memberof AppLoginNoteVerify
+     */
+    public setDelay() {
+        this.timer = setInterval(() => {
+            if (this.delay > 0) {
+                this.delay--;
             } else {
-      this.$emit("error", '');
+                this.delay = 60;
+                this.disabled = false;
+                clearInterval(this.timer);
             }
-    return this.phoneError;
+        }, 1000)
     }
 
     /**
      * @description 获取验证码
-   * @memberof AppPresetSmsVerification
+     * @memberof AppLoginNoteVerify
      */
     public getVeriCode() {
-    if(this.phoneError) return;
+        if (this.phoneError) return;
         // todo 获取验证码
+        this.show = true;
+        this.disabled = true;
+        this.setDelay();
     }
 }
 </script>
 
-<style lang='less'>
+<style lang="less">
 @import "./app-login-note-verify.less";
 </style>