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