game_cocos_2c/assets/scripts/modules/lobby/ui/ClubView/ClubView.ts

import { AppKernel } from '@scripts/app/AppKernel';
import { UIViewID } from '@scripts/define/UIDefine';
import { VipRights } from '@scripts/define/VipDeine';
import { UICloseReason } from '@scripts/framework/ui/UILayer';
import { UIView } from '@scripts/framework/ui/UIView';
import { formatCurrency, formatGoodsNum } from '@scripts/utils/Helper';
import { setSpriteFrame } from '@scripts/utils/ResHelper';
import { CountdownTimer, formatTimes } from '@scripts/utils/TimesHelper';
import { addBtnClick, addTogClick, ImgFitMode, setAsLastSibling } from '@scripts/utils/UIHelper';
import { formatVipRights, getVipLbTitle as getVipLvTitle, getVipLvIcon, getVipName, getVipRightsIcon, getVipRightsName, isUnlockedRights } from '@scripts/utils/VipHelper';
import { _decorator, Button, Component, find, instantiate, Label, Mask, Node, ProgressBar, ScrollView, Sprite, SpriteFrame, Toggle, ToggleContainer, UITransform, v2 } from 'cc';
const { ccclass, property } = _decorator;

class VipTabNode {
    toggle: Toggle;

    constructor(readonly node: Node) {
        this.toggle = node.getComponent(Toggle);
    }
}

class RightsNode {
    res: string;
    icon: Sprite;
    lblBonus: Label;
    lblName: Label;
    lblUnlock: Label;
    unlockNode: Node;

    constructor(readonly node: Node) {
        this.icon = find("sptIcon", node).getComponent(Sprite);
        this.lblBonus = find("lblBonus", node).getComponent(Label);
        this.lblName = find("lblName", node).getComponent(Label);
        this.unlockNode = find("unlockNode", node);
        this.lblUnlock = find("unlockNode/lblUnlock", node).getComponent(Label);
    }
}

class RewardNode {
    lblValue: Label;
    icon: Sprite;

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

@ccclass('ClubView')
export class ClubView extends UIView {
    readonly viewId: UIViewID = UIViewID.ClubView;

    @property(Node)
    btnBack: Node;

    @property(Node)
    btnRule: Node;

    @property(Node)
    btnBirthday: Node;

    @property(ScrollView)
    tabScroll: ScrollView;

    @property(Node)
    tabItem: Node;

    @property(ScrollView)
    contentScroll: ScrollView;

    @property(Node)
    contentItem: Node;

    @property(Sprite)
    smallVipSp: Sprite;

    @property(Label)
    lblProgress: Label;

    @property(ProgressBar)
    lvProgressBar: ProgressBar;

    @property(Label)
    lblUpgradeTips: Label;

    @property(Label)
    lblExp: Label;

    @property(Label)
    lblExpTotal: Label;

    @property(Sprite)
    vipTitle: Sprite;

    @property(Label)
    lblVipDesc: Label;

    @property(Label)
    lblEnds: Label;

    @property(Sprite)
    vipIcon: Sprite;

    @property(Button)
    btnClaim: Button;

    @property(Node)
    scNode: Node;

    @property(Node)
    gcNode: Node;

    @property(Node)
    propNode: Node;

    private m_VipTabs: VipTabNode[] = [];
    private m_RightsNode: RightsNode[] = [];

    private m_ScReward: RewardNode;
    private m_GcReward: RewardNode;
    private m_PropReward: RewardNode;

    private m_Timer: CountdownTimer = new CountdownTimer();

    protected onCreate() {
        addBtnClick(this.btnBack, this.closeSelf, this);
        addBtnClick(this.btnRule, this.onBtnRuleClick, this);
        addBtnClick(this.btnBirthday, this.onBtnBirthdayClick, this);
        addBtnClick(this.btnClaim, this.onBtnClaimClick, this);

        this.m_ScReward = new RewardNode(this.scNode);
        this.m_GcReward = new RewardNode(this.gcNode);
        this.m_PropReward = new RewardNode(this.propNode);

        AppKernel.events.on('club:update', this.updateUserInfo, this);
    }

    private onBtnRuleClick() {
        AppKernel.ui.open(UIViewID.UIClubRules);
    }

    private onBtnBirthdayClick() {
        AppKernel.ui.open(UIViewID.UIBirthdayGift);
    }

    private onVipTabClick(toggle: Toggle) {
        if (!toggle.isChecked) return;
        const index = toggle['_customData'];
        this.updateContent(index);
    }

    protected async onBeforeOpen(_params: unknown) {
        const vipStore = AppKernel.stores.vipStore;
        let vipConfig = vipStore.vipConfig;
        if (!vipConfig) {
            await vipStore.reqVipConfig();
        };
    }

    protected onOpen(_params: unknown) {
        const vipConfig = AppKernel.stores.vipStore.vipConfig;
        if (!vipConfig) return;

        this.initVipTabs(AppKernel.stores.vipStore.maxVip);
        this.updateUserInfo();
    }

    protected onClose(_reason: UICloseReason) {
        this.m_Timer.stop();
    }

    private initVipTabs(max: number) {
        const vipConfig = AppKernel.stores.vipStore.vipConfig;
        const vipIndex = vipConfig.vipLevel - 1;
        for (let i = 0; i < max; i++) {
            let tabNode = this.m_VipTabs[i];
            if (!tabNode) {
                const itemNode = instantiate(this.tabItem);
                itemNode.setParent(this.tabScroll.content);
                tabNode = this.m_VipTabs[i] = new VipTabNode(itemNode);
            }

            tabNode.node.active = true;
            tabNode.toggle['_customData'] = i;
            tabNode.toggle.isChecked = i === vipIndex;
            if (tabNode.toggle.isChecked) this.onVipTabClick(tabNode.toggle);

            addTogClick(tabNode.toggle, this.onVipTabClick, this);

            const sptIcon = find("sptIcon", tabNode.node).getComponent(Sprite);
            setSpriteFrame(sptIcon, `textures/club/tabs/clublist_btn_lv0${i + 1}_n`);

            const checkMark = tabNode.toggle['_checkMark'];
            if (checkMark) setSpriteFrame(checkMark, `textures/club/tabs/clublist_btn_lv0${i + 1}_s`);

            if (i === max - 1) {
                const sptLine = find("sptLine", tabNode.node);
                if (sptLine) sptLine.active = false;
            }
        }

        this.tabScroll.scrollTo(v2(vipIndex / (max - 1), 0), 0.1, false);

        for (let i = max; i < this.m_VipTabs.length; i++) {
            this.m_VipTabs[i].node.active = false;
        }
    }

    private updateContent(vipIdx: number) {
        const vipStore = AppKernel.stores.vipStore;

        let nodeIdx = 0;
        let lockedNodes: Node[] = [];
        for (let right = VipRights.UpgradePoint; right < VipRights.Total; ++right) {
            let rightNode = this.m_RightsNode[nodeIdx];
            if (!rightNode) {
                const nodeItem = instantiate(this.contentItem);
                nodeItem.setParent(this.contentScroll.content);
                rightNode = this.m_RightsNode[nodeIdx] = new RightsNode(nodeItem);
            }

            const value = vipStore.getVipRights(vipIdx, right);
            rightNode.lblBonus.string = formatVipRights(right, value);
            rightNode.lblName.string = getVipRightsName(right);

            const icon = getVipRightsIcon(right);
            if (rightNode.res !== icon) {
                rightNode.res = icon;
                setSpriteFrame(rightNode.icon, icon);
            }


            const locked = !isUnlockedRights(value);
            rightNode.unlockNode.active = locked;
            if (locked) {
                lockedNodes.push(rightNode.node);
                const lockedLv = vipStore.getRightsUnlock(right);
                const vipName = getVipName(lockedLv + 1);
                rightNode.lblUnlock.string = AppKernel.i18n.t("vip.rights_unlocked", vipName);
            }


            setAsLastSibling(rightNode.node);
            rightNode.node.active = true;
            nodeIdx++;
        }

        lockedNodes.forEach((node) => {
            setAsLastSibling(node);
        })

        for (let i = nodeIdx; i < this.m_RightsNode.length; ++i) {
            this.m_RightsNode[i].node.active = false;
        }
    }

    private updateUserInfo() {
        const vipStore = AppKernel.stores.vipStore;
        const vipConfig = vipStore.vipConfig;
        const vipLv = vipConfig.vipLevel;
        const points = vipConfig.clubPoints;
        const nextPoints = vipStore.getUpgradePoints(vipLv - 1);
        const isMax = vipLv === AppKernel.stores.vipStore.maxVip;

        const now_lv_name = getVipName(vipLv);
        const next_lv_name = getVipName(vipLv + 1, isMax);
        this.lblProgress.string = `${now_lv_name} - ${next_lv_name}`;
        this.lvProgressBar.progress = points / nextPoints;
        this.lblExp.string = formatCurrency(points);
        this.lblExpTotal.string = "/" + formatCurrency(nextPoints);

        const expDiff = nextPoints - points;
        const tips = AppKernel.i18n.t("vip.upgrade_tips", formatCurrency(expDiff));
        this.lblUpgradeTips.string = expDiff <= 0 ? "" : tips;


        const res = getVipLvIcon(vipLv);
        setSpriteFrame(this.smallVipSp, res);
        setSpriteFrame(this.vipIcon, res);
        setSpriteFrame(this.vipTitle, getVipLvTitle(vipLv));
        const weekly = vipStore.getVipRights(vipLv - 1, VipRights.WeeklyBonus);
        const store = vipStore.getVipRights(vipLv - 1, VipRights.StoreExtra);
        const desc = AppKernel.i18n.t("vip.vip_desc", vipLv, weekly, store);
        this.lblVipDesc.string = desc;

        const weekly_bonus = vipConfig.rewards.weekly_bonus;
        this.btnClaim.interactable = weekly_bonus.claimable;
        if (weekly_bonus.reward) {
            this.m_ScReward.node.active = weekly_bonus.reward.sc > 0;
            this.m_GcReward.node.active = weekly_bonus.reward.gc > 0;
            this.m_PropReward.node.active = weekly_bonus.reward.clubpoint > 0;

            this.m_ScReward.lblValue.string = formatGoodsNum(weekly_bonus.reward.sc);
            this.m_GcReward.lblValue.string = formatGoodsNum(weekly_bonus.reward.gc);
            this.m_PropReward.lblValue.string = formatCurrency(weekly_bonus.reward.clubpoint);
        }
        this.lblEnds.string = "";
        this.m_Timer.start(weekly_bonus.countdownSeconds, (left) => {
            this.lblEnds.string = AppKernel.i18n.t("vip.ends_in", formatTimes(left));
        });

        const birthday_gift = vipConfig.rewards.birthday_gift;
        this.btnBirthday.active = birthday_gift.claimable;
    }

    private async onBtnClaimClick() {
        AppKernel.ui.loading(true);
        const res = await AppKernel.stores.vipStore.reqVipClaim('weekly_bonus');
        if (res) {
            //更新
        }
        AppKernel.ui.loading(false);
    }
}