WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2021-03-29 1bd2c493c9cbe47d10e4ba045d5c4635fd4eccef
forms/input/CInputPhoneCode.vue
@@ -1,19 +1,19 @@
/**
 * CInputPhoneCode
 * CInputPhoneCode - 表单项,手机验证码输入框
 * @author Tevin
 */
<template>
    <view class="c-input-phone-code">
        <AtInput
            :name="itemData.name"
            :title="itemData.label"
            :name="itemRes.name"
            :title="itemRes.label"
            type="text"
            :placeholder="placeholder"
            :required="itemData.required"
            :error="itemData.error"
            :value="itemData.formData[itemData.name]"
            :onChange="evt=>itemData.onChange(evt)"
            :required="itemRes.required"
            :error="itemRes.error"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        >
            <AtButton
                class="c-input-phone-btn"
@@ -37,8 +37,18 @@
        AtButton,
    },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        // 占位提示
        placeholder: String,
        itemData: Object,
        // 验证码计时器开始方式
        //   true 点击按钮后立即自动开始
        //   false 后台返回为成功时才开始
        autoStart: {
            type: Boolean,
            default: true,
        },
        // 发送请求,通知后端给手机发验证码
        onCallPhoneCode: Function,
    },
    data() {
@@ -61,16 +71,25 @@
            if (this.holding) {
                return;
            }
            this.holding = true;
            this.cd = 60;
            this.onCallPhoneCode();
            const timer = setInterval(() => {
                this.cd -= 1;
                if (this.cd === 0) {
                    this.holding = false;
                    this.cd = 60;
                }
            }, 1000);
            const startCD = () => {
                this.holding = true;
                this.cd = 60;
                setInterval(() => {
                    this.cd -= 1;
                    if (this.cd === 0) {
                        this.holding = false;
                        this.cd = 60;
                    }
                }, 1000);
            };
            if (this.autoStart) {
                startCD();
                this.onCallPhoneCode(() => null);
            } else {
                this.onCallPhoneCode(() => {
                    startCD();
                });
            }
        },
    },
};