429 lines
16 KiB
TypeScript
429 lines
16 KiB
TypeScript
/************************************************************************************
|
||
|
||
* FileName : UIHero.ts
|
||
* Description : 英雄详情界面
|
||
* Version : v1.0.0
|
||
* CreateTime : 2024-10-24 15:53:48
|
||
* Author :
|
||
* Copyright (c) since 2024
|
||
* ==============================================================
|
||
* Method Description:
|
||
*
|
||
* ==============================================================
|
||
************************************************************************************/
|
||
import {_decorator, instantiate, Node, Sprite, SpriteFrame, UITransform, v3, view, Label, v2, Button} from 'cc';
|
||
import {tgx_class} from "db://assets/core_tgx/base/ModuleContext";
|
||
import {ModuleDef} from "db://assets/scripts/ModuleDef";
|
||
import {tgxUIController, tgxUIMgr} from "db://assets/core_tgx/tgx";
|
||
import {GameUILayers} from "db://assets/scripts/GameUILayers";
|
||
import {Layout_UIHero} from "db://assets/module_arean/ui_hero_details/Layout_UIHero";
|
||
import {resLoader} from "db://assets/core_tgx/base/utils/ResLoader";
|
||
import {UserMgr} from "db://assets/module_basic/scripts/UserMgr";
|
||
import {HeroScrollCell} from "db://assets/module_arean/ui_hero_details/HeroScrollCell";
|
||
import {areanMgr} from "db://assets/module_arean/scripts/AreanManager";
|
||
import {UITotalScore} from "db://assets/module_arean/ui_hero_details/UITotalScore";
|
||
import {UITagDetails} from "db://assets/module_arean/ui_hero_details/UITagDetails";
|
||
import {UISkillDetails} from "db://assets/module_arean/ui_hero_details/UISkillDetails";
|
||
import {CommonFun} from "db://assets/module_arean/scripts/CommonFun";
|
||
import {UICurrencyTips} from "db://assets/module_arean/scripts/UICurrencyTips";
|
||
import {UserInfo} from "db://assets/module_basic/shared/types/UserInfo";
|
||
import { IHeroCfg } from '../../module_basic/shared/configs/interface/IHeroCfg';
|
||
import { ISkinCfg } from '../../module_basic/shared/configs/interface/ISkinCfg';
|
||
|
||
const { ccclass, property } = _decorator;
|
||
|
||
@tgx_class(ModuleDef.Arean)
|
||
export class UIHero extends tgxUIController {
|
||
// 当前打开的是英雄还是皮肤，1：英雄，2：皮肤
|
||
private _curOpenType : number = null;
|
||
// 当前打开界面时英雄ID
|
||
private _curHeroId : number = null;
|
||
// 当前打开界面时英雄ID
|
||
private _curHeroData : IHeroCfg = null;
|
||
|
||
// 当前选择的皮肤Id
|
||
private _curSkinId : number = 0;
|
||
|
||
private _curSkinIndex : number = null;
|
||
|
||
// 是否正在全屏
|
||
private _isFullScreen : boolean = false;
|
||
|
||
private _userInfo : UserInfo = null;
|
||
|
||
// 此英雄的所有皮肤信息（本地）
|
||
private _totalLocalSkinData : ISkinCfg[] = [];
|
||
|
||
constructor() {
|
||
super("ui_hero_details/ui_hero_details", GameUILayers.POPUP,Layout_UIHero)
|
||
}
|
||
|
||
protected async onCreated(params: any): Promise<void> {
|
||
console.log("UIHero.onCreated", params);
|
||
this._curOpenType = params.openType;
|
||
this._curHeroId = this._curOpenType === 2 ? areanMgr.cfgMgr.SkinData.getData(params.heroId).id : params.heroId;
|
||
if(this._curOpenType === 2) this._curSkinId = params.heroId;
|
||
this._userInfo = await UserMgr.inst.rpc_GetUserInfo(UserMgr.inst.userId);
|
||
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
// 关闭界面
|
||
this.onButtonEvent(layout.btnClose, () => {
|
||
this.close();
|
||
})
|
||
|
||
// 晶石介绍
|
||
this.onButtonEvent(layout.btnCrystal, () => {
|
||
this._openCurrency("crystal");
|
||
})
|
||
|
||
// 点券介绍
|
||
this.onButtonEvent(layout.btnQuan, () => {
|
||
this._openCurrency("quan");
|
||
})
|
||
|
||
// 充值界面
|
||
this.onButtonEvent(layout.btnRecharge, () => {
|
||
this._openRechargeLayer();
|
||
})
|
||
|
||
// 展示海报
|
||
this.onButtonEvent(layout.btnHaiBao, () => {
|
||
this._showHaiBao();
|
||
})
|
||
|
||
// 全屏展示
|
||
this.onButtonEvent(layout.btnFullScreen, () => {
|
||
this._updateFullScreen(true);
|
||
})
|
||
|
||
// 总评分
|
||
this.onButtonEvent(layout.btnTotalScore, () => {
|
||
this._openTotalScore();
|
||
})
|
||
|
||
// 关闭全屏
|
||
this.onButtonEvent(layout.btnMask, () => {
|
||
this._updateFullScreen(false);
|
||
})
|
||
|
||
// 更新pageView
|
||
this.onButtonEvent(layout.btnLeftArrow, () => {
|
||
this._updateHeroView("left");
|
||
})
|
||
|
||
// 更新pageView
|
||
this.onButtonEvent(layout.btnRightArrow, () => {
|
||
this._updateHeroView("right");
|
||
})
|
||
|
||
// 晶石购买英雄
|
||
this.onButtonEvent(layout.btnCrystalBuy, () => {
|
||
this._buyHero("crystal");
|
||
})
|
||
|
||
// 点券购买英雄
|
||
this.onButtonEvent(layout.btnQuanBuy, () => {
|
||
this._buyHero("quan");
|
||
})
|
||
|
||
let heroNode1 = layout.heroIntroduceType1;
|
||
for (let i = 1; i < 4; i++) {
|
||
let btn = heroNode1.getChildByName("attrNode").getChildByName("attr_" + i);
|
||
|
||
this.onButtonEvent(btn, (event: any) => {
|
||
// const node = event.target as Node;
|
||
// const button = node.getComponent(Button);
|
||
// console.log("button ============== ",button.clickEvents[0][`$args$`])
|
||
this._openTagDetails(i);
|
||
},null,"45646")
|
||
}
|
||
|
||
for (let i = 1; i < 6; i++) {
|
||
let btn = heroNode1.getChildByName("skillNode").getChildByName("skill_" + i);
|
||
|
||
this.onButtonEvent(btn, (event: any) => {
|
||
// const node = event.target as Node;
|
||
// const button = node.getComponent(Button);
|
||
// console.log("button ============== ",button.clickEvents[0][`$args$`])
|
||
this._openSkillDetails(i);
|
||
},null,"45646")
|
||
}
|
||
|
||
this._init();
|
||
}
|
||
|
||
// 标签详情界面
|
||
private _openTagDetails(index : number) : void{
|
||
tgxUIMgr.inst.showUI(UITagDetails,null,null,index);
|
||
}
|
||
|
||
// 标签详情界面
|
||
private _openSkillDetails(index : number) : void{
|
||
tgxUIMgr.inst.showUI(UISkillDetails,null,null,index);
|
||
}
|
||
|
||
// 初始化
|
||
private _init() : void{
|
||
this._curHeroData = areanMgr.cfgMgr.HeroDatas.getData(this._curHeroId);
|
||
this._totalLocalSkinData = CommonFun.getInstance().getChooseHeroAllSkin(this._curHeroId,areanMgr.cfgMgr.SkinData.getAllData());
|
||
if(this._totalLocalSkinData.length > 0){
|
||
if(this._curOpenType === 1) this._curSkinId = this._totalLocalSkinData.find(v => v.isDefault === 1).id;
|
||
}
|
||
this._initScrollView();
|
||
this._updateSkinNameAndHeroName();
|
||
this._updateHeroIcon();
|
||
this._updatePrice();
|
||
this.updateCrystal();
|
||
this.updateDianQuan();
|
||
this._updateHeroIntroduceTypeActive()
|
||
}
|
||
|
||
/**
|
||
* 总评分
|
||
* @private
|
||
*/
|
||
private _openTotalScore() : void{
|
||
tgxUIMgr.inst.showUI(UITotalScore,null,null,{});
|
||
}
|
||
|
||
// 货币介绍
|
||
private _openCurrency(currency: string) {
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
let _pos = layout.btnCrystal.node.getComponent(UITransform).convertToWorldSpaceAR(v3(0,0,0));
|
||
let t = layout.btnCrystal.node.position
|
||
let _pos2 = layout.btnCrystal.node.getComponent(UITransform).convertToWorldSpaceAR(v3(t.x,t.y,0));
|
||
// console.log("_pos ==== ",_pos,_pos2);
|
||
let vis = view.getVisibleSize();
|
||
let data = {
|
||
currencyId : 1,
|
||
pos : v3(_pos.x - vis.width/2, _pos.y - vis.height/2, 0),
|
||
}
|
||
tgxUIMgr.inst.showUI(UICurrencyTips,null,null,data);
|
||
}
|
||
|
||
// 更新水晶数量
|
||
public updateCrystal() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
layout.crystalCount.string = `${this._userInfo.coin}`;
|
||
}
|
||
|
||
// 更新水晶数量
|
||
public updateDianQuan() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
layout.quanCount.string = `${this._userInfo.coin}`;
|
||
}
|
||
|
||
// 打开充值界面
|
||
private _openRechargeLayer() : void{
|
||
|
||
}
|
||
|
||
// 展示海报
|
||
private _showHaiBao() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
}
|
||
|
||
// 全屏展示
|
||
private _updateFullScreen(isFullScreen : boolean) : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
if (this._isFullScreen === isFullScreen) return;
|
||
this._isFullScreen = isFullScreen;
|
||
layout.topNode.active = !isFullScreen;
|
||
layout.midNode.getChildByName("smallCurrency2").active = !isFullScreen;
|
||
layout.midNode.getChildByName("btnNode").active = !isFullScreen;
|
||
layout.bottomNode.active = !isFullScreen;
|
||
let sc : number = isFullScreen ? 1.5 : 1;
|
||
layout.midNode.getChildByName("heroIcon").scale = v3(sc, sc, sc);
|
||
}
|
||
|
||
// 更新皮肤名称和英雄名称
|
||
private _updateSkinNameAndHeroName() : void{
|
||
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
layout.skinName.string = skinData.name;
|
||
layout.heroName.string = this._curHeroData.name;
|
||
}
|
||
|
||
// 更新英雄信息
|
||
private _updateHeroIcon() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
let sp : SpriteFrame = resLoader.getSpriteFrame(`res/Image/SkinIcon/skinIcon_${this._curSkinId}`,ModuleDef.Arean);
|
||
if(sp) layout.heroIcon.getComponent(Sprite).spriteFrame = sp;
|
||
}
|
||
|
||
// 更新pageView
|
||
private _updateHeroView(arrow : string) : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
let heroData : IHeroCfg[] = areanMgr.cfgMgr.HeroDatas.getAllData();
|
||
let len : number = heroData.length;
|
||
let getHeroIndex = ()=>{
|
||
for(let i = 0; i < len; i++){
|
||
if(heroData[i].id == this._curHeroId) return i;
|
||
}
|
||
return 0;
|
||
}
|
||
let tmpIndex : number = getHeroIndex();
|
||
if(arrow == "left"){
|
||
tmpIndex--;
|
||
if(tmpIndex < 0) tmpIndex = len - 1;
|
||
}else{
|
||
tmpIndex++;
|
||
if(tmpIndex > len - 1) tmpIndex = 0;
|
||
}
|
||
this._curHeroId = heroData[tmpIndex].id;
|
||
this._init();
|
||
// this._curHeroData = heroData[tmpIndex];
|
||
// if(this._totalLocalSkinData.length > 0){
|
||
// this._curSkinId = this._totalLocalSkinData.find(v => v.isDefault === 1).id;
|
||
// }
|
||
// this._updateSkinNameAndHeroName()
|
||
// this._updateHeroIcon();
|
||
// this._initScrollView();
|
||
// this._clickSkinCallBack(skinData[tmpIndex].id);
|
||
// layout.skinScrollView.scrollToOffset(v2(tmpIndex * 200, 0), 0.5, true);
|
||
}
|
||
|
||
// 购买英雄
|
||
private _buyHero(currency : string) : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
}
|
||
|
||
private _updatePrice() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
// @ts-ignore
|
||
let showPrice = this._userInfo.skin.includes(this._curSkinId);
|
||
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
|
||
if(skinData.isDefault){
|
||
// @ts-ignore
|
||
let haveHero = this._userInfo.hero.includes(this._curHeroId);
|
||
layout.midNode.getChildByName("smallCurrency2").active = !haveHero;
|
||
if(!haveHero){
|
||
let heroData : IHeroCfg = areanMgr.cfgMgr.HeroDatas.getData(this._curHeroId);
|
||
// TODO 测试数据
|
||
this.updateCrystalPrice(1);
|
||
this.updateDianQuanPrice(2);
|
||
}
|
||
}else{
|
||
// @ts-ignore
|
||
let haveSkin = this._userInfo.skin.includes(this._curSkinId);
|
||
layout.midNode.getChildByName("smallCurrency2").active = !haveSkin;
|
||
if(!haveSkin){
|
||
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
|
||
this.updateCrystalPrice(skinData.crystalPrice);
|
||
this.updateDianQuanPrice(skinData.ticketingPrice);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 更新晶石价格
|
||
public updateCrystalPrice(value : number) : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
if(value && value > 0){
|
||
layout.crystalCountBuy.string = `${value}`;
|
||
}else{
|
||
layout.crystalCountBuy.node.active = false;
|
||
}
|
||
}
|
||
|
||
// 更新点券价格
|
||
public updateDianQuanPrice(value : number) : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
if(value && value > 0){
|
||
layout.quanCountBuy.string = `${value}`;
|
||
}else{
|
||
layout.quanCountBuy.node.active = false;
|
||
}
|
||
}
|
||
|
||
// 更新英雄介绍类型显示
|
||
private _updateHeroIntroduceTypeActive() : void{
|
||
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
// @ts-ignore
|
||
this._isHaveCurSkin = this._userInfo.skin.includes(this._curSkinId);
|
||
let defaultHero = skinData.isDefault === 1;
|
||
layout.heroIntroduceType1.active = defaultHero;
|
||
layout.heroIntroduceType2.active = !defaultHero;
|
||
if(defaultHero){
|
||
this._updateHeroIntroduceType1();
|
||
}else{
|
||
this._updateHeroIntroduceType2();
|
||
}
|
||
this._updateHeroIcon();
|
||
}
|
||
|
||
// 更新英雄介绍内容
|
||
private _updateHeroIntroduceType1() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
let node : Node = layout.heroIntroduceType1;
|
||
}
|
||
|
||
// 更新英雄介绍内容
|
||
private _updateHeroIntroduceType2() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
let node : Node = layout.heroIntroduceType2;
|
||
let des = ["语音表现","音效表现","特效彩蛋"];
|
||
let skinData = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
|
||
for(let i = 1; i < 4; i++){
|
||
let element : Node = node.getChildByName("attrNode").getChildByName(`attr_${i}`).getChildByName("node");
|
||
|
||
let icon : Node = element.getChildByName("icon");
|
||
let sp: SpriteFrame = resLoader.getSpriteFrame(`res/Image/SkinIcon/skinIcon_${i}`, ModuleDef.Arean);
|
||
if (sp) icon.getComponent(Sprite).spriteFrame = sp;
|
||
|
||
let label : Label = element.getChildByName("lab").getComponent(Label);
|
||
label.string = des[i - 1];
|
||
}
|
||
node.getChildByName("heroAtrrLabel").getComponent(Label).string = skinData.desc;
|
||
node.getChildByName("collectionNode").getChildByName("count").getComponent(Label).string = `${skinData.collectionScore}`;
|
||
}
|
||
|
||
// 初始化pageView
|
||
private _initScrollView() : void{
|
||
let layout: Layout_UIHero = this.layout as Layout_UIHero;
|
||
layout.skinScrollView.content.destroyAllChildren();
|
||
let skinData : ISkinCfg[] = this._totalLocalSkinData;
|
||
let count : number = skinData.length;
|
||
for (let i = 0; i < count; i++) {
|
||
let element : Node = instantiate(layout.cell);
|
||
let data = skinData[i];
|
||
element.active = true;
|
||
layout.skinScrollView.content.addChild(element);
|
||
// @ts-ignore
|
||
let isHave = this._userInfo.skin.includes(data.id);
|
||
element.getComponent(HeroScrollCell).setData(data,isHave,this._clickSkinCallBack.bind(this));
|
||
}
|
||
}
|
||
|
||
// 英雄列表点击回调
|
||
private _clickSkinCallBack(heroId : number) : void{
|
||
console.log("点击的皮肤id === ",heroId);
|
||
this._curSkinId = heroId;
|
||
let _skinIndex = this._checkCurSkinIndex();
|
||
if(this._curSkinIndex == _skinIndex) return;
|
||
this._curSkinIndex = _skinIndex;
|
||
let children : Node[] = this.layout.skinScrollView.content.children;
|
||
let len : number = children.length;
|
||
for (let i = 0; i < len; i++) {
|
||
// if(i === 0) continue;
|
||
let sc = children[i].getComponent(HeroScrollCell);
|
||
sc.updateChooseActive(sc.data.id == heroId);
|
||
}
|
||
this._updateHeroIntroduceTypeActive();
|
||
this._updatePrice();
|
||
this._updateSkinNameAndHeroName();
|
||
}
|
||
|
||
// 计算当前的索引
|
||
private _checkCurSkinIndex() : number{
|
||
let skinData = areanMgr.cfgMgr.SkinData.getAllData();
|
||
let len : number = skinData.length;
|
||
for (let i = 0; i < len; i++) {
|
||
let element = skinData[i];
|
||
if(element.id == this._curSkinId){
|
||
return i;
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
} |