game_cocos_2c/assets/scripts/modules/lobby/ui/Redeem/Main/RedeemMain.ts

import { AppKernel } from '@scripts/app/AppKernel';
import { CASH_BASE } from '@scripts/constants/App';
import { CURRENCY_TYPE } from '@scripts/define/Define';
import { PayoutGears } from '@scripts/define/PayDefine';
import { UIViewID } from '@scripts/define/UIDefine';
import { formatCurrency, formatGoodsNum, formatMaskEmail, safeFloor } from '@scripts/utils/Helper';
import { setSpriteFrame } from '@scripts/utils/ResHelper';
import { addBtnClick, addTogClick, setAsLastSibling } from '@scripts/utils/UIHelper';
import { _decorator, Component, EditBox, find, instantiate, Label, Node, ScrollView, Sprite, Toggle } from 'cc';
const { ccclass, property } = _decorator;

const FAST_MAX = -1;
const FastNum = [20, 50, 100, FAST_MAX];


@ccclass('RedeemMain')
export class RedeemMain extends Component {
    @property(Label)
    lblAmount: Label;

    @property(Label)
    lblFee: Label;

    @property(Label)
    lblFeePrefix: Label;

    @property(Label)
    lblReceive: Label;

    @property(Label)
    lblFeeTips: Label;

    @property(EditBox)
    inputNum: EditBox;

    @property(Node)
    payoutItem: Node;

    @property(ScrollView)
    payoutScroll: ScrollView;

    @property(Label)
    lblAccount: Label;

    @property(Node)
    btnEdit: Node;

    @property(Node)
    btnConfirm: Node;

    @property(Node)
    btnGrey: Node;

    @property([Node])
    btnFasts: Node[] = []

    private m_payouts: PayoutItem[] = [];
    private m_payoutIdx = -1;

    private get m_nowPayout() { return PayoutGears[this.m_payoutIdx]; }

    private get m_inputAmount() {
        const amount = Number(this.inputNum.string);
        if (Number.isNaN(amount)) return 0;
        return amount;
    }

    init() {
        this.btnGrey.active = false;
        addBtnClick(this.btnEdit, this.onBtnEidtClick, this);
        addBtnClick(this.btnConfirm, this.onBtnConfirmClick, this);

        AppKernel.events.on('wallet:update', this.onWalletUpdate, this);
        this.inputNum.node.on(EditBox.EventType.TEXT_CHANGED, this.onInputNum, this);

        this.btnFasts.forEach((btnFast, index) => {
            btnFast.active = index < FastNum.length;
            if (index < FastNum.length) {
                const num = FastNum[index];
                const label = find("Label", btnFast).getComponent(Label);
                label.string = num === FAST_MAX ? "MAX" : `${num} ${CURRENCY_TYPE.SC}`;
                addBtnClick(btnFast, () => { this.onBtnFastClick(num) });
            }
        })

        this.initPayouts();
        this.onAmountUpdate(0);
    }

    protected onDestroy(): void {
        AppKernel.events.offTarget(this);
    }

    private onWalletUpdate() {
        const gear = this.m_nowPayout;
        const withdraw = AppKernel.stores.withdrawStore;
        const account = withdraw.getPayoutAccount(gear.type);
        this.lblAccount.string = formatMaskEmail(account);
    }

    private onAmountUpdate(amount: number) {
        this.updateBtnGrey();
        const feeRate = AppKernel.stores.mainStore.withdrawFeeRate;
        const fee = safeFloor(feeRate / 100 * amount);
        const receive = safeFloor(amount - fee);
        this.lblAmount.string = formatCurrency(amount, 2) + " " + CURRENCY_TYPE.SC;
        this.lblFee.string = formatCurrency(fee, 2) + " " + CURRENCY_TYPE.SC;
        this.lblReceive.string = formatCurrency(receive, 2) + " " + CURRENCY_TYPE.SC;
    }

    private onInputNum(eidtBox: EditBox) {
        let num = Number(eidtBox.string);
        if (Number.isNaN(num)) return;

        const sumCanExchange = AppKernel.stores.withdrawStore.sumCanExchange;
        if (num > sumCanExchange) {
            num = sumCanExchange;
            this.inputNum.string = sumCanExchange.toString();
        }

        this.onAmountUpdate(num)
    }

    private onBtnFastClick(num: number) {
        const sumCanExchange = AppKernel.stores.withdrawStore.sumCanExchange;
        const isMax = num === FAST_MAX;
        if (isMax) {
            this.onAmountUpdate(sumCanExchange);
            this.inputNum.string = sumCanExchange.toString();
            return;
        }

        const value = Math.min(num, sumCanExchange);
        this.inputNum.string = value.toString();
        this.onAmountUpdate(value);
    }

    private onBtnEidtClick() {
        AppKernel.ui.open(UIViewID.UIPayoutEditor, this.m_nowPayout.type);
    }

    private async onBtnConfirmClick() {
        const amount = this.m_inputAmount;
        if (amount < 0) return;

        const payoutType = this.m_nowPayout.type;
        const payoutName = this.m_nowPayout.name;
        const withdraw = AppKernel.stores.withdrawStore;
        const limit = withdraw.getPayoutRange(payoutType);
        const minVal = Math.max(limit.min, withdraw.minExchange);
        const maxVal = Math.min(limit.max, withdraw.maxExchange);
        if (amount < minVal || amount > maxVal) {
            const tips = AppKernel.i18n.t("payout.limit", minVal, maxVal);
            AppKernel.ui.toast(tips);
            return;
        }


        const account = withdraw.getPayoutAccount(payoutType);
        const feeRate = AppKernel.stores.mainStore.withdrawFeeRate;
        const fee = safeFloor(feeRate / 100 * amount);
        const receive = safeFloor(amount - fee);
        AppKernel.ui.open(UIViewID.UIPayoutConfrim, {
            amount,
            reallAmount: receive,
            feeAmount: fee,
            feePercent: feeRate,
            method: payoutName,
            account,
            payoutType,
        });


        // AppKernel.ui.loading(true);

        // await withdraw.reqWithdrawPayout(amount);

        // AppKernel.ui.loading(false);

    }

    private updateBtnGrey() {
        const amount = this.m_inputAmount;
        if (amount <= 0) {
            this.btnGrey.active = true;
            return;
        }


        const account = this.lblAccount.string;
        if (!account || account.length === 0) {
            this.btnGrey.active = true;
            return;
        }

        this.btnGrey.active = false;
    }

    updateView() {
        const feeRate = AppKernel.stores.mainStore.withdrawFeeRate;
        const feeStr = feeRate.toFixed(1);
        const leastNum = 0.5;
        this.lblFeePrefix.string = AppKernel.i18n.t("redeem.service_fee", feeStr)
        this.lblFeeTips.string = AppKernel.i18n.t("redeem.servoce_fee_desc", feeStr, leastNum.toFixed(2));
    }

    private initPayouts() {
        this.m_payoutIdx = -1;
        const gears = PayoutGears;
        for (let i = 0; i < gears.length; ++i) {
            let item = this.m_payouts[i];
            if (!item) {
                const itemNode = instantiate(this.payoutItem);
                itemNode.setParent(this.payoutScroll.content);
                item = this.m_payouts[i] = new PayoutItem(itemNode);
                addTogClick(item.toggle, this.onPayoutItemClick, this);
            }

            const gear = gears[i];
            item.lblName.string = gear.name;
            setSpriteFrame(item.icon, gear.icon);
            item.node.active = true;
            item.node.name = i.toString();
            setAsLastSibling(item.node);
        }

        for (let i = gears.length; i < this.m_payouts.length; ++i) {
            const item = this.m_payouts[i]
            item.node.active = false;
        }

        this.m_payouts[0].toggle.isChecked = true;
        this.onChoosePayout(0);
    }

    private onPayoutItemClick(toggle: Toggle) {
        const idx = Number(toggle.node.name);
        if (idx !== this.m_payoutIdx) {
            this.onChoosePayout(idx);
        }
    }

    private onChoosePayout(idx: number) {
        this.m_payoutIdx = idx;
        this.onWalletUpdate();
        this.updateBtnGrey();
    }
}




class PayoutItem {
    icon: Sprite;
    toggle: Toggle;
    lblName: Label;
    lblKind: Label;

    constructor(readonly node: Node) {
        this.toggle = node.getComponent(Toggle);
        this.icon = find("sptIcon", node).getComponent(Sprite);
        this.lblName = find("lblName", node).getComponent(Label);
        this.lblKind = find("lblKind", node).getComponent(Label);
    }
}