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

import { AppKernel } from '@scripts/app/AppKernel';
import { MailOtpType, OtpType } from '@scripts/store';
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,  // 重置密码
    BindEmail, // 绑定邮箱
    ChangeEmailOld, // 修改邮箱（旧邮箱）
    ChangeEmailNew, // 修改邮箱（新邮箱）
    BindPhone,  // 绑定手机
    ChangePhoneOld, // 修改手机（旧手机）
    ChangePhoneNew, // 修改手机（新手机）
    Unbind3rdLogin, // 解绑第三方登录
}

@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() {
        if (this._sending) return;
        this._sending = true;

        const { mainStore, mailStore } = AppKernel.stores;
        switch (this.sendType) {
            case OTPSendType.Register: {
                const account = this.account.string;
                if (!account) break;

                const isEmail = checkIsEmail(account);
                isEmail
                    ? await mailStore.reqSendCode(account, "register")
                    : await mainStore.reqSendCode(account);

                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.ResetPsd: {
                const account = this.account.string;
                if (!account) break;

                const isEmail = checkIsEmail(account);
                isEmail
                    ? await mailStore.reqSendCode(account, "reset_password")
                    : await mainStore.reqSendCode(account);

                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.BindEmail: {
                const account = this.account.string;
                if (!account) break;

                await mailStore.reqBindEmailCode({ account });
                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.ChangeEmailOld: {
                const { Email: account } = AppKernel.stores.mainStore.userInfo;
                if (!account) break;

                await mailStore.reqChangeEmailCode({
                    account,
                    target: "old"
                });
                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.ChangeEmailNew: {
                const account = this.account.string;
                if (!account) break;

                await mailStore.reqChangeEmailCode({
                    account,
                    target: "new"
                });
                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.BindPhone: {
                const account = this.account.string;
                if (!account) break;

                await mainStore.reqSendCode(account);
                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.ChangePhoneOld: {
                const { Phone: account } = AppKernel.stores.mainStore.userInfo;
                if (!account) break;

                await mainStore.reqSendCode(account, true);
                this._account = account;
                this.startTimer();
                break;
            }
            case OTPSendType.ChangePhoneNew: {
                const account = this.account.string;
                if (!account) break;

                await mainStore.reqSendCode(account);
                this._account = account;
                this.startTimer();
                break;
            }

            case OTPSendType.Unbind3rdLogin: {
                const account = this.account.string;
                if (!account) break;

                const isEmail = checkIsEmail(account);
                await mainStore.reqUnBind3rdCode({
                    verify_type: isEmail ? "email" : "phone"
                });
                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.getOtpCD(MailOtpType.Register)
                    : mainStore.getOtpCD(OtpType.Main);

            case OTPSendType.ResetPsd:
                return isEmail
                    ? mailStore.getOtpCD(MailOtpType.Reset)
                    : mainStore.getOtpCD(OtpType.Main);

            case OTPSendType.BindEmail:
                return mailStore.getOtpCD(MailOtpType.Bind);

            case OTPSendType.ChangeEmailOld:
                return mailStore.getOtpCD(MailOtpType.ChangeOld);

            case OTPSendType.ChangeEmailNew:
                return mailStore.getOtpCD(MailOtpType.ChangeNew);

            case OTPSendType.BindPhone:
            case OTPSendType.ChangePhoneNew:
                return mainStore.getOtpCD(OtpType.Main);

            case OTPSendType.ChangePhoneOld:
                return mainStore.getOtpCD(OtpType.ChangeOld);

            case OTPSendType.Unbind3rdLogin:
                return mainStore.getOtpCD(OtpType.Unbind3rd);

            default:
                break;
        }
    }

    private getOptLabel(state: string) {
        if (state === "send") {
            switch (this.sendType) {
                case OTPSendType.BindEmail:
                case OTPSendType.ChangeEmailNew:
                case OTPSendType.BindPhone:
                case OTPSendType.ChangePhoneNew:
                case OTPSendType.Unbind3rdLogin:
                    return "Send Code"
                case OTPSendType.ChangeEmailOld:
                case OTPSendType.ChangePhoneOld:
                    return "Send to Current"

                default:
                    return "Send"
            }
        } else if (state === "resend") {
            switch (this.sendType) {
                case OTPSendType.BindEmail:
                case OTPSendType.ChangeEmailOld:
                case OTPSendType.ChangeEmailNew:
                case OTPSendType.BindPhone:
                case OTPSendType.ChangePhoneOld:
                case OTPSendType.ChangePhoneNew:
                case OTPSendType.Unbind3rdLogin:
                    return "Resend Code"

                default:
                    return "Resend"
            }

        }
    }
}