game_cocos_2c/assets/scripts/components/button/OTPButton.ts

import { AppKernel } from '@scripts/app/AppKernel';
import { checkIsEmail } from '@scripts/utils/Helper';
import { addBtnClick } from '@scripts/utils/UIHelper';
import { _decorator, Button, Component, EditBox, Enum, Label, Node } from 'cc';
const { ccclass, property } = _decorator;

export enum OTPSendType {
    Register,   // 注册
    ResetPsd,  // 重置密码
}

@ccclass('OTPButton')
export class OTPButton extends Component {
    @property(Label)
    label: Label;

    @property(Button)
    button: Button;

    @property(EditBox)
    account: EditBox;

    @property({ type: Enum(OTPSendType) })
    sendType: OTPSendType;

    private _sending = false;
    private _cdTimer;
    private _account = '';

    protected onLoad(): void {
        addBtnClick(this.node, this.onSendCode, this);
    }

    protected onEnable(): void {
        this.startTimer();
    }

    protected onDisable(): void {

    }

    private async onSendCode() {
        const account = this.account.string;
        if (!account) return;

        if (this._sending) return;
        this._sending = true;

        const isEmail = checkIsEmail(account);
        const { mainStore, mailStore } = AppKernel.stores;
        switch (this.sendType) {
            case OTPSendType.Register:
                const res_register = isEmail
                    ? await mailStore.reqSendCode(account, "register")
                    : await mainStore.reqSendCode(account);

                if (res_register) {
                    this._account = account;
                    this.startTimer();
                }
                break;

            case OTPSendType.ResetPsd:
                const res_resetPsd = isEmail
                    ? await mailStore.reqSendCode(account, "reset_password")
                    : await mainStore.reqSendCode(account);

                if (res_resetPsd) {
                    this._account = account;
                    this.startTimer();
                }
                break;
            default:
                break;
        }

        this._sending = false;
    }

    private stopTimer() {
        if (this._cdTimer) {
            this.unschedule(this._cdTimer);
            this._cdTimer = null;
        }
    }

    private startTimer() {
        this.stopTimer();
        const cd = this.getCurrentOtpCD();
        this.button.interactable = cd <= 0;
        if (cd <= 0) {
            this.label.string = this.getOptLabel("send");
            return;
        }

        this._cdTimer = this.onUpdateCD.bind(this);
        this.schedule(this._cdTimer, 1, cd)
        this.onUpdateCD();
    }

    private onUpdateCD() {
        const cd = this.getCurrentOtpCD();

        this.label.string = `${cd}s`;
        console.log('otp cd: ', cd);
        if (cd <= 0) {
            this.stopTimer();
            this.label.string = this.getOptLabel("resend");
            this.button.interactable = true;
        }
    }


    private getCurrentOtpCD() {
        const account = this._account;
        if (!account) return 0;
        const isEmail = checkIsEmail(account);
        const { mainStore, mailStore } = AppKernel.stores;
        switch (this.sendType) {
            case OTPSendType.Register:
                return isEmail ? mailStore.otpCD : mainStore.otpCD;

            case OTPSendType.ResetPsd:
                return isEmail ? mailStore.otpCD : mainStore.otpCD;
            default:
                break;
        }
    }

    private getOptLabel(state: string) {
        if (state === "send") {
            switch (this.sendType) {
                case OTPSendType.Register:

                default:
                    return "Send"
            }
        } else if (state === "resend") {
            switch (this.sendType) {
                case OTPSendType.Register:

                default:
                    return "Resend"
            }

        }
    }
}