squidGame/tgx-games-client/assets/module_arean/ui_bag/UIBag.ts

import {director, instantiate, Label, Node, Toggle} from "cc";
import {tgx_class, tgxAudioMgr, tgxUIController, tgxUITipsBar} from "db://assets/core_tgx/tgx";
import {GameUILayers} from "db://assets/scripts/GameUILayers";
import {ModuleDef} from "db://assets/scripts/ModuleDef";
import {Layout_UIBag} from "db://assets/module_arean/ui_bag/Layout_UIBag";
import {UserMgr} from "db://assets/module_basic/scripts/UserMgr";
import {
    BagToggleArray,
    EAreanItemType, IRewardData,
    ItemAttributes
} from "db://assets/module_basic/shared/protocols/public/arean/AreanTypeDef";
import {areanMgr} from "db://assets/module_arean/scripts/AreanManager";
import {BagItem} from "db://assets/module_arean/ui_bag/BagItem";
import {BagItemDetail} from "db://assets/module_arean/ui_bag/BagItemDetail";
import {CommonFun} from "db://assets/module_arean/scripts/CommonFun";
import {RoomEvent} from "db://assets/module_basic/scripts/GameMgr";
import {EMusicDefine} from "db://assets/module_basic/Define/MusicDefine";
import { IPropCfg } from "../../module_basic/shared/configs/interface/IPropCfg";

@tgx_class(ModuleDef.Arean)
export class UIBag extends tgxUIController {
    private _conditionBagNodes: Map<number, Node> = new Map<number, Node>();
    private _curChooseBagType : EAreanItemType = EAreanItemType.None;
    /** 当前显示的道具 */
    private _curShowItems : ItemAttributes[] = [];
    /** 当前选中的道具 */
    private _curChooseItemID : number = null;
    constructor() {
        super("ui_bag/ui_bag", GameUILayers.POPUP, Layout_UIBag);
    }

    protected onCreated(): void {
        let layout = this.layout as Layout_UIBag;
        console.log("道具信息 ===",UserMgr.inst.userInfo.itemList);

        this.onButtonEvent(layout.btnClose, () => {
            tgxAudioMgr.inst.playCommonBtn(EMusicDefine.EFFECT_CLOSE);
            this.close();
        });


        let detail : BagItemDetail = layout.itemDetail.getComponent(BagItemDetail);
        detail.setCallBack((result)=>{
            console.log("道具使用详情回调 ===",result);
            let res = result.res;
            if(res.code === 0){
                let item = res.item;
                let reward = res.rewards;
                CommonFun.getInstance().updateItemList(item);
                CommonFun.getInstance().updateCurrey(reward);
                director.emit(RoomEvent.ChangeCoin);
                this._useItemResult(item,reward);
            }else{
                tgxUITipsBar.show("使用失败");
            }
        })

        let len : number = BagToggleArray.length;
        for (let i : number = 0; i < len; i++) {
            let element = BagToggleArray[i];
            let node = layout.toggleGroup.getChildByName(`Toggle${i + 1}`);
            node.active = true;
            let toggle : Toggle = node.getComponent(Toggle);
            node.getChildByName("name").getComponent(Label).string = element.name;
            let attr : { tag : number,type : EAreanItemType} = {
                tag : i,
                type : element.type
            }
            toggle.node.attr(attr);
            this._conditionBagNodes.set(i,toggle.node);
            toggle.node.on('toggle', (target: Toggle)=>{
                //@ts-ignore
                this._changeHeroToggleChecked(target.node.tag,target.node.type)
            }, this);
        }

        this._updateBagList();
        this._updateDetail();
    }

    /** 获取选择展示的背包类型 */
    private _getChooseType(index : number) : EAreanItemType {
        let len : number = BagToggleArray.length;
        for (let i = 0; i < len; i++) {
            if(i === index){
                return BagToggleArray[i].type;
            }
        }
        return EAreanItemType.None;
    }

    // 刷新英雄toggle状态
    private _changeHeroToggleChecked(index: number,chooseType : EAreanItemType) {
        this._conditionBagNodes.forEach((node : Node,_name : number)=>{
            let choose : Node = node.getChildByName("Checkmark");
            choose.active = _name === index;
        })
        let curChooseType : EAreanItemType = this._getChooseType(index);
        if(this._curChooseBagType === curChooseType) return;
        this._curChooseBagType = curChooseType;
        // this._updateScrollView(ETAG_NAME.Hero,uiName);
        this._updateBagList();
        this._updateDetail();
    }

    /** 是否属于全部展示的道具 */
    private _isExistAll(_type : EAreanItemType) : boolean{
        return _type !== EAreanItemType.Currency && _type !== EAreanItemType.Hero && _type !== EAreanItemType.Skin;
    }

    /** 计算当前标签要展示的道具 */
    private _calBagItem() : void{
        this._curShowItems.length = 0;
        let items : ItemAttributes[] = UserMgr.inst.userInfo.itemList;
        let len : number = items.length;
        for (let i : number = 0; i < len; i++) {
            let element : ItemAttributes = items[i];
            let propData : IPropCfg  = areanMgr.cfgMgr.PropData.getData(element.itemId);
            if(this._curChooseBagType === EAreanItemType.None){
                if(propData && this._isExistAll(propData.type)){
                    this._curShowItems.push(element);
                }
            }else{
                if(propData && propData.type === this._curChooseBagType){
                    this._curShowItems.push(element);
                }
            }
        }
    }


    /**刷新列表*/
    private _updateBagList() : void {
        let layout : Layout_UIBag = this.layout as Layout_UIBag;
        layout.bagRoot.destroyAllChildren();
        this._curChooseItemID = null;
        this._calBagItem();
        console.log("当前选择展示的背包类型 === ",this._curChooseBagType, this._curShowItems);
        let len : number = this._curShowItems.length;
        let index : number = 0;
        for (let i : number = 0; i < len; i++) {
            let element : ItemAttributes = this._curShowItems[i];
            if(element.itemCount <= 0) continue;
            if(index === 0) this._curChooseItemID = element.itemId;
            index++;
            let item : Node = instantiate(layout.itemPrefab);
            layout.bagRoot.addChild(item);
            item.active = true;
            let comp : BagItem = item.getComponent(BagItem);
            comp.setData(element,this._curChooseItemID,this.onClick.bind(this));
            item.active = true;
        }
    }

    /** 重置选中状态 */
    private _resetChooseState() : void{
        let layout : Layout_UIBag = this.layout as Layout_UIBag;
        let child : Node[] = layout.bagRoot.children;
        let len = child.length;
        for (let i = 0; i < len; i++) {
            let element = child[i];
            let bagItem :　BagItem = element.getComponent(BagItem);
            if(bagItem) bagItem.updateChooseState(false);
        }
    }

    /** 选择事件 */
    onClick(element : ItemAttributes) : void {
        console.log("选择的道具属性 === ",element);
        this._curChooseItemID = element.itemId;
        this._resetChooseState();
        this._updateDetail();
    }

    /** 刷新详情 */
    private _updateDetail() : void{
        let layout : Layout_UIBag = this.layout as Layout_UIBag;
        layout.itemDetail.active = this._curChooseItemID !== null;
        layout.emptyLabelNode.active = this._curChooseItemID === null;
        if(this._curChooseItemID){
            let serverData : ItemAttributes = this._curShowItems.find((item : ItemAttributes) => item.itemId === this._curChooseItemID);
            if(serverData){
                let detail : BagItemDetail = layout.itemDetail.getComponent(BagItemDetail);
                detail.setData(serverData);
            }
        }
    }

    /** 使用道具结果 */
    private _useItemResult(item : ItemAttributes,reward : IRewardData[]) : void{
        let layout : Layout_UIBag = this.layout as Layout_UIBag;
        if(item){
            let count = item.itemCount > 0;
            layout.itemDetail.active = count;
            let child : Node[] = layout.bagRoot.children;
            let len : number = child.length;
            let element : Node = child.find((e : Node) => e.getComponent(BagItem).getItemId() === item.itemId);
            if(element){
                element.active = count;
                element.getComponent(BagItem).updateCount(item.itemCount);
            }
            CommonFun.getInstance().showCommonReward(reward);
        }
    }
}