UI day 1 UIView

1 .当应用程序加载完成的时候触发,此时如果你想让应用程序在加载的时候显示内容,就在该方法中写入要显示的内容
- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
#pragma mark  self.window的认知
创建应用程序的窗口self.window是本应用窗口对象,主要作用将内容呈现给用户
UIScreen是个屏幕类
[UIScreen mainScreen]获取主屏幕
[[UIScreen mainScreen] bounds]]获取主屏幕的大小
self.window= [[[UIWindowalloc]initWithFrame:[[UIScreenmainScreen]bounds]]autorelease];
// Override point for customization after application launch.
   //UIColor是个颜色类;设置self.window.backgroundColor的颜色
   
self.window.backgroundColor= [UIColorwhiteColor];
   
//self.window设置为应用的主屏幕,并显示出来,也就是可见
    [
self.windowmakeKeyAndVisible];
   对于屏幕上看到的内容,都是UIView以及UIView的子类
    UIView代表屏幕上的一块矩形区域
    如果想在屏幕上绘制一个矩形,需要知道左上2的坐标(即使距离屏幕左上角(屏幕坐标系的原点),还有矩形的宽和高
    /*
    
快速创建结构体变量
     CGRect
(位置,大小)
     CERectMake
();
     CGPoint(
)
     CGPointMake
();
    
     CGSize
(大小)
     CGSizeMake
();
    
     */
2.创建一个UIView对象   
步骤:
1.创建ULView对象
UIView*redView = [[UIViewalloc]initWithFrame:CGRectMake(50,100,100,100)];
3.修改视图的背景颜色,默认是透明的
redView.backgroundColor= [UIColorredColor];
4.添加到父视图上
[self.window addSubview:redView];
2.释放所有权
[redViewrelease];
   
3.
UIView*greenView = [[UIViewalloc]initWithFrame:CGRectMake(50,200,100,100)];
    greenView.
backgroundColor= [UIColorredColor];
    [self.window addSubview:greenView];
    cView.alpha=0.8;//控制透明度
    cView.hidden= YES;//控制的显隐性
    [greenViewrelease];
想查看屏幕大小不需要记忆,可以获取屏幕大小后打印即可,想查看不同屏幕大小时,只需要更改设备名称。
   CGRect  new = [[UIScreenmainScreen]bounds];
   将结构体变量转为字符串对象输入
   NSStringFromCGRect();
   NSStringFromCGSize();
   NSStringFromCGPoint();
   NSLog(@"%@",NSStringFromCGRect(new));

4.UIView的一些重要属性
UIView的常见属性
1)subViews:子视图,获取到一个视图的所有子视图,一个视图可以有多个子视图
(2)superview:父视图,获取到一个视图的父视图,一个视图只能有一个父视图
(3)Hidden显隐性,控制视图的显示或者隐藏;BOOL类型,默认值是No,显示视图
(4)alpha:透明度,透明度的范围:0.0~1.1之间,默认是1.0
(5)background,视图的背景颜色,颜色通过UIColor赋值
(6)tag值:标记,作为这个视图的唯一标示,整数值,一般都用在100以上
5.获取window上的所有子视图
UIWindow
NSArray*subArray =self.window.subviews;
NSLog(@"%@",subArray);

6.获取窗口的父视图
self.window没有父视图
UIView*father =self.window.superview;
NSLog(@"%@",father);
   
7.获取cView父视图
 UIView*fatherView1 = cView.superview;
   
NSLog(@"===%@",fatherView1);
   
UIView *m = aView.superview;
   
NSLog(@"======%@",m);

8.通过tag值获取视图
父视图可以通过viewWithTag方法拿到它身上的子视图
UIView*tagView =  [self.windowviewWithTag:103];
NSLog(@"-----%@",tagView);
#pragma mark -在分组的基础上再加一条横线
#pragma mark通过调用方法展示self.window上的子视图
[self showViewUseTag:103];


//通过tag值获得子视图
- (
void)showViewUseTag:(NSInteger)tag{
   
   
//通过tag值可以再其他的方法中拿到self.window上的子视图
 
UIView  *view =   [self.windowviewWithTag:tag];
    view.
backgroundColor= [UIColor redColor];
   
NSLog(@"mmmmm%@",view);
}

9.获取aview的方法
1.self.window + tag
UIView*aaView = [self.windowviewWithTag:101];
NSLog(@"======================%@",aaView);
2.通过subviews
UIView*AView =self.window.subviews[1];
NSLog(@"---------------%@",AView);
3.通过下标
UIView*AAView = [self.window.subviewsobjectAtIndex:1];
NSLog(@"+++++++++++++++%@",AAView);
4.通过tag值获得子视图;也就是调用方法
[selfMMViewUseTag:101];
- (void)MMViewUseTag:(NSInteger)aatag{
   UIView *aaaView = [self.windowviewWithTag:aatag];
   
NSLog(@"====================================%@",aaaView);
}

10.这是最简单的写法
- (void)dealloc
{
//    [_window release];
//    _window = nil;
   
self.window=nil;
    [
super dealloc];
}

11.UIView的重量级属性
UIView的重量级属性:frame  center   bounds

1.frame:包含(左上角的坐标以及size矩形区域的大小),主要用来控制一个视图的位置和大小,其中位置相对于父视图原点坐标的x轴和y轴距离

2.center:中心点,视图的中心点的坐标,相对于父视图坐标原点位置
center.x=frame.origin.x + frame.size.width/2
center.y=frame.origin.y + frame.size.height/2
center改变,frame也变;frame改变,center也变

3.bounds:边界,一个视图的边界,CGRectoriginsize),origin是矩形区域左上角相对于自身坐标系的原点位置,size是矩形区域的大小,一个视图创建出来后,默认boundsorigin的位置和自身视图的原点是重合的;bounds的(size)大小和frame的(size)大小是一样的;修改一个视图的boundsoriginxy)时候,视图的frame不变,centrer也不变;(只做了解)修改一个视图的sizeframe变化,center不变

4.修改boundsorigin的影响的自身原点的坐标位置,也即是影响了自身子视图的位置

12.#pragma mark 修改一个视图frame
UIView*aView = [[UIViewalloc]initWithFrame:CGRectMake(60,184,200,200)];
定义一个矩形的结构体变量
  CGRect rect = CGRectMake(100,100,200,200) ;
    aView.
frame = rect;
   
    aView.frame.origin.x = 100;视图的frame不能被单个修改,只能整体赋值
   CGRect rect1 = aView.frame;//先把frame取出来,赋到
    rect1.origin.x= 100;
    rect1.origin.y= 100;
    aView.frame= rect1;


13.#pragma mark 修改一个视图的center
//    aView.center.x = 100;视图的center不能被单个修改,只能整体赋值
  CGPoint center = CGPointMake(100,100) ;
    aView.center= center;
   
NSLog(@"====%@",NSStringFromCGPoint(aView.center));
   
NSLog(@"%@",NSStringFromCGRect(aView.frame));
   


14.#pragma mark 修改一个视图的bounds
    aView.bounds= CGRectMake(100,0,100,200);
   
NSLog(@"%@",NSStringFromCGRect(aView.bounds));
   
NSLog(@"====%@",NSStringFromCGPoint(aView.center));
   NSLog(@"%@",NSStringFromCGRect(aView.frame));
    addSubview:在父视图上添加子视图

15.insertSubview:A  aboveSubvoew:B  B视图上插入A视图
    [self.windowinsertSubview:bViewaboveSubview:cView];

   
   intserSubview:A beloSubview:B B视图下插入A视图
    [self.windowinsertSubview:cViewbelowSubview:bView];
   
   insertSubview:A atIndex:下标, A视图添加到指定位置
    [self.windowinsertSubview:cViewatIndex:1];
   
   调整视图关系的方法
   bringSubviewToFront将视图A调整到所有子视图的最前面
    [self.windowbringSubviewToFront:aView];
   
   sendSubviewToBack:将视图A调整到所有子视图的最后面
    [self.windowsendSubviewToBack:aView];
   
 exchangeSubviewAtIndex:下标1  withSubviewAtIndex:下标2交换两个指定位置的子视图
  [self.window exchangeSubviewAtIndex:1withSubviewAtIndex:2];
   
   removeFromSuperviewA视图从父视图上移除
    [cView removeFromSuperview];

16.视图的层级关系
     1.最后添加的子视图肯定在所有视图的最前面
     2.
子视图永远都在父视图的前面
     3.
子视图的添加是有顺序的
     4.
父视图通过subview数组管理所有的子视图
     5.
如果想调整视图之间的层级关系,需要通过父视图来调整
     6.
如果想从父视图上移除,使用将要移除的对象来调用方法

17.定时器
           第一个参数:设置每过多长时间执行一次定时操作 
    
第二个参数:有谁来执行操作
    
第三个参数:选择执行的操作
    
第四个参数:用户信息nil
    
第五个参数:是否需要重复定时器操作

[NSTimerscheduledTimerWithTimeInterval:0.5target:selfselector:@selector(printHello)userInfo:nilrepeats:YES];
   
self.window.backgroundColor= [UIColorwhiteColor];
    [self.windowmakeKeyAndVisible];
self.window.backgroundColor= [UIColorwhiteColor];
    [self.windowmakeKeyAndVisible];
#pragma mark 实现选择器中的方法
- (void)printHello{
   
NSLog(@"Hello");
}










uiBase.js:12 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setSize') at uiBankData.init (uiBase.js:12:20) at uiBankData.init (uiBankData.js:32:12) at uiBankData.showForGoods (uiBankData.js:331:16) at _Sprite.<anonymous> (uiShop.js:621:20) at EventBoundary._notifyListeners (EventBoundary.ts:1472:26) at EventBoundary.notifyTarget (EventBoundary.ts:667:18) at EventBoundary.propagate (EventBoundary.ts:302:14) at EventBoundary.dispatchEvent (EventBoundary.ts:211:14) at EventBoundary.mapPointerDown (EventBoundary.ts:690:14) at EventBoundary.mapEvent (EventBoundary.ts:232:28) 这是报什么错误,就是我调用uiBankData类的时候import uiBase from "./uiBase.js"; import { Container, Graphics, Text, Assets, Sprite, Texture } from "pixi.js"; import gameData from "../Frame/gameDataMgr.js"; import networkMgr from "../Frame/networkMgr.js"; import { UIManager } from "../Frame/uiManager.js"; import { BlackMaskBg } from "../Frame/CommonUI/blackMaskBg"; import { UIBankData } from "../UIView/uiBankData.js"; class uiShop extends uiBase { mainContainer; // 主界面容器 blockBg; // 背景遮罩 shopBg3Container; // 弹窗容器 shopBgButton; // 按钮 buttonText; // 按钮文字 closeButton; // 叉叉按钮 introduceText; // 介绍背景 isInist = false; isPivotInitialized = false; CONTAINER_WIDTH = 650; CONTAINER_HEIGHT = 400; shopGoodsList = []; _rpLabel = gameData.currencySign; // 使用动态货币符号 // 记录当前选中的索引和金额值 selectedIndex = -1; // 当前选中的金额框索引 selectedAmountValue = 0; // 当前选中的金额数值 selectedStarCount = 0; // 当前赠送的星数 id = 0; // 当前选中的id inputDisplayText; // 显示选中金额的文本 rechargeYes; // 可点击亮色图 rechargeNo; // 不可点击灰色图 depositHistory; // 历史记录按钮 depositHistoryText; // 历史记录文本 // =====支付成功展示 ===== paymentSuccessContainer; // 支付成功展示容器 paymentAmountText; // 支付金额文本 paymentConfirmButton; // 支付成功确认按钮 scrollContainer; //创建滚动容器 // =====历史记录弹窗容器 ===== historyListContainer; recordList = []; historyTextObjects = []; // 用于存储每条记录的所有文本对象(因为要每条记录都参与本地化) async init() { super.init(); // 创建主界面容器 this.mainContainer = new Container(); this.mainContainer.position.set(330, 210); this.container.addChild(this.mainContainer); // 预加载资源 await Assets.load([ "assets/UIShop/+.png", "assets/UIShop/复制.png", "assets/UIShop/商店底1_1.png", "assets/UIShop/商店底2.png", "assets/UIShop/商店底3.png", "assets/UIShop/赠送底.png", "assets/UIShop/赠送金额底.png", "assets/UIShop/UI1_02.png", "assets/UIShop/UI1_03.png", "assets/UIShop/UI1_05.png", "assets/UIShop/UI1_07.png", "assets/UIShop/UI1_09_2.png", "assets/UIShop/UI1_09.png", "assets/UIShop/UI1_11.png", "assets/UIShop/UI1_14.png", "assets/UIShop/UI1_17.png", "assets/UIShop/UI1_22.png", "assets/UIShop/商店底4.png", "assets/UIShop/UI8_6.png", "assets/UIShop/WithdrawalBankIcon_DANA.png", "assets/UIShop/WithdrawalBankIcon_OVO.png", "assets/UIShop/WithdrawalBankIcon_QRIS.png", "assets/UIShop/WithdrawalBankIcon_BNI.png", "assets/UIShop/WithdrawalBankIcon_BRI.png", "assets/UIShop/WithdrawalBankIcon_ALLIANCE.png", "assets/UIShop/WithdrawalBankIcon_BCA.png", "assets/UIShop/WithdrawalBankIcon_BIMB.png", "assets/UIShop/商店底5.png", "assets/UIShop/复制.png", "assets/UIShop/商店底1_12.png", ]); // 获取商店数据 await this.SendShopData(); // === 主界面内容 === // 创建主界面后面黑幕 const app = this.app; this.overallWidth = app.screen.width; this.overallHeight = app.screen.height; const opacity = 0.6; //黑幕 const blackMask = new Graphics(); blackMask.beginFill(0x000000, opacity); blackMask.drawRect(-this.overallWidth * 0.51, -this.overallHeight * 0.53, this.overallWidth*1.13, this.overallHeight); blackMask.endFill(); this.mainContainer.addChild(blackMask); //黑幕 //let blackMask = new BlackMaskBg({ parent: this.mainContainer }); const shopBg2 = new Sprite(Texture.from("assets/UIShop/商店底1_12.png")); shopBg2.width = this.overallWidth; shopBg2.height = this.overallHeight; const offsetX = -this.overallWidth * 0.5; // 向左偏移整体宽度的 50% const offsetY = -this.overallHeight * 0.53; // 向上偏移高度的 20% shopBg2.position.set(offsetX, offsetY); this.closeButton = new Sprite(Texture.from("assets/UIShop/UI1_03.png")); //主界面叉叉按钮 this.closeButton.width = 40; this.closeButton.height = 40; this.closeButton.anchor.set(1, 0); this.closeButton.position.set(this.overallWidth/2-10, -this.overallHeight/2); this.closeButton.eventMode = "static"; this.closeButton.cursor = "pointer"; this.closeButton.on("pointerdown", () => this.hide()); const textX = shopBg2.position.x + shopBg2.width * 0.5; const textY = shopBg2.position.y+10; // 主界面装饰文本 this.depositText = Object.assign( new Text("存款deposit", { fontFamily: "Arial", fontSize: 35, fill: 0xffff84, align: "center", stroke: "#FFA500", strokeThickness: 2, fontWeight: "bold", }), { anchor: { x: 0.5, y: 0 }, position: { x: textX, y: textY } }, ); this.topUpAmountText = Object.assign( new Text("haha", { fontFamily: "Arial", fontSize: 14, fill: 0xcf9f6c, align: "center", fontWeight: "bold", }), { anchor: { x: 0.5, y: 0 },position: { x: this.overallWidth * -0.15, y:this.overallHeight* -0.3 } }, ); this.inputAmountText = Object.assign( new Text("haha", { fontFamily: "Arial", fontSize: 14.5, fill: 0xd37744, align: "center", }), { anchor: { x: 0.5, y: 0 }, position: { x: this.overallWidth * -0.12, y:this.overallHeight* -0.23 } }, ); const inputBox = new Sprite(Texture.from("assets/UIShop/UI1_02.png")); // 输入框图 inputBox.width *= this.app.rat; inputBox.height *= this.app.rat; inputBox.anchor.set(0.5, 0.5); inputBox.position.set( this.overallWidth * -0.10+5, this.overallHeight* -0.21, ); // 显示选中金额的文本 this.inputDisplayText = new Text("", { fontSize: 18, fill: 0xb18b5b, fontFamily: "Arial", fontWeight: "bold", }); this.inputDisplayText.anchor.set(0.5); this.inputDisplayText.position.set( this.overallWidth * -0.15, this.overallHeight* -0.21, ); this.inputDisplayText.visible = false; // 初始不显示 const clearInput = new Sprite(Texture.from("assets/UIShop/UI1_17.png")); // 输入框里的叉叉 clearInput.width *= this.app.rat+0.2; clearInput.height *= this.app.rat+0.1; clearInput.anchor.set(0.5, 0.5); clearInput.position.set( this.overallWidth * 0.07, this.overallHeight* -0.21, ); clearInput.eventMode = "static"; clearInput.cursor = "pointer"; // 绑定叉叉点击事件:清除输入框中的金额 clearInput.on("pointerdown", () => { if (this.inputDisplayText.visible) { this.clearSelection(); // 清除状态 } }); const addPicture = new Sprite(Texture.from("assets/UIShop/+.png")); // 加号图 addPicture.width *= this.app.rat; addPicture.height *= this.app.rat; addPicture.anchor.set(0.5, 0.5); addPicture.position.set( this.overallWidth * 0.15, this.overallHeight* -0.21, ); const givePicture = new Sprite( Texture.from("assets/UIShop/赠送金额底.png"), ); // 赠送金额底 givePicture.width *= this.app.rat; givePicture.height *= this.app.rat; givePicture.anchor.set(0.5, 0.5); givePicture.position.set( this.overallWidth * 0.29, this.overallHeight* -0.21, ); const givePicture2 = new Sprite(Texture.from("assets/UIShop/赠送底.png")); // 赠送底 givePicture2.width *= this.app.rat; givePicture2.height *= this.app.rat; givePicture2.anchor.set(0.5, 0.5); givePicture2.position.set( this.overallWidth * 0.29, this.overallHeight* -0.21, ); this.freeAmountText = Object.assign( new Text("haha", { fontFamily: "Arial", fontSize: 11, fill: 0xcf9f6c, align: "center", fontWeight: "bold", }), { anchor: { x: 0.5, y: 0.5 }, position: { x: this.overallWidth * 0.29, y:this.overallHeight* -0.26 } }, ); this.rpText = Object.assign( new Text("haha", { fontFamily: "Arial", fontSize: 25, fill: 0xffffff, align: "center", fontWeight: "bold", }), { anchor: { x: 0.5, y: 0.5 }, position: { x: this.overallWidth * 0.28, y:this.overallHeight* -0.18 } }, ); this.selectAmountText = Object.assign( new Text("haha", { fontFamily: "Arial", fontSize: 15, fill: 0xcf9f6c, align: "center", fontWeight: "bold", }), { anchor: { x: 0.5, y: 0.5 }, position: { x: this.overallWidth * -0.1, y:this.overallHeight* -0.12 } }, ); //添加到舞台 画面上 this.mainContainer.addChild( shopBg2, // shopBg1, this.closeButton, inputBox, clearInput, addPicture, givePicture, givePicture2, ); this.mainContainer.addChild( this.depositText, this.topUpAmountText, this.inputAmountText, this.freeAmountText, this.rpText, this.selectAmountText, this.inputDisplayText, ); console.log("看一下有没有赋值进去~~~", this.shopGoodsList); // 创建金额框图8个、小红角星8张、发光边框8个 this.amountSprites = []; // 存储所有金额图的数组 this.starSprites = []; // 存储所有五角星的数组 this.shineSprites = []; // 存储所有发光边框的数组 this.selectedIndex = -1; // 当前选中的索引,-1表示没有选中 // === 创建滚动容器 === this.scrollContainer = new Container(); this.scrollContainer.x = 0; this.scrollContainer.y = 0; this.mainContainer.addChild(this.scrollContainer); // === 设置滚动参数 === const visibleRows = 2; // 显示2排 const colsPerRow = 4; // 每排3个 const totalRows = Math.ceil(this.shopGoodsList.length / colsPerRow); // 总排数 const scrollableHeight = (totalRows - visibleRows) * 60; // 可滚动的高度 // === 设置遮罩,限制显示区域 === const mask = new Graphics(); mask.beginFill(0x000000, opacity); mask.drawRect(-this.overallWidth * 0.51, -this.overallHeight * 0.53, this.overallWidth*1.13, this.overallHeight); mask.endFill(); this.scrollContainer.mask = mask; this.mainContainer.addChild(mask); // 调整金额框的间距参数 const startX = this.overallWidth * -0.2; // 起始X坐标 const startY = this.overallHeight* 0.01; // 起始Y坐标 const spacingX = 100; // X轴间距(左右间隔) const spacingY = 60; // Y轴间距(上下间隔) for (let i = 0; i < this.shopGoodsList.length; i++) { // 1. 创建发光边框图 const shine = new Sprite(Texture.from("assets/UIShop/UI1_11.png")); shine.width *= this.app.rat; shine.height *= this.app.rat; shine.anchor.set(0.5, 0.5); shine.visible = false; // 初始隐藏,只有选中时才显示 // 2. 创建金额框图 const amount = new Sprite(Texture.from("assets/UIShop/UI1_22.png")); amount.width *= this.app.rat; amount.height *= this.app.rat; amount.anchor.set(0.5, 0.5); amount.interactive = true; // 启用点击交互 amount.buttonMode = true; // 鼠标移到上面变成手型 // 3. 创建小红角星图 const star = new Sprite(Texture.from("assets/UIShop/UI1_14.png")); star.width *= this.app.rat; star.height *= this.app.rat; star.anchor.set(0.5, 0.5); // 4. 创建文本显示 - 金额 const amountText = new Text("", { fontSize: 15, fill: 0xff7e36, // 橘色 fontFamily: "Arial", }); amountText.anchor.set(0.5, 0.5); amountText.interactive = true; // 启用点击交互 amountText.buttonMode = true; // 鼠标移到上面变成手型 amountText.cursor = "pointer"; // 设置鼠标指针为手型 // 5. 创建文本显示 - 星星 const starText = new Text("", { fontSize: 11, fill: 0xffffff, // 白色 fontWeight: "normal", fontFamily: "Arial, sans-serif", }); starText.anchor.set(0.5, 0.5); starText.interactive = true; // 启用点击交互 starText.buttonMode = true; // 鼠标移到上面变成手型 starText.cursor = "pointer"; // 设置鼠标指针为手型 // 计算位置(每排3个,多排) const row = Math.floor(i / colsPerRow); const col = i % colsPerRow; const xPos = startX + col * spacingX; const yPos = startY + row * spacingY; // 设置所有元素的位置 shine.position.set(xPos, yPos); // 发光边框在底层 amount.position.set(xPos, yPos); // 金额框在中间 star.position.set(xPos + 18, yPos - 22); // 五角星在金额框右上方 amountText.position.set(xPos, yPos + 2); // 金额文本在金额框中心偏下 starText.position.set(xPos + 18, yPos - 25); // 星星数量文本在五角星中心 // shopGoodsList获取数据 let item, extraItem, count, starCount, id; if (this.shopGoodsList && this.shopGoodsList[i]) { item = this.shopGoodsList[i].items[0]; extraItem = this.shopGoodsList[i].extraItems[0]; count = item ? item.count : 0; starCount = extraItem ? extraItem.count : 0; id = this.shopGoodsList[i].id; } else { count = 0; starCount = 0; id = 0; } // 设置金额文本 const label = this._rpLabel; amountText.text = count > 0 ? `${label} ${count}` : "0"; // 只有当starCount大于0时才显示星星图片和文本 if (starCount > 0) { starText.text = `+${starCount}`; star.visible = true; starText.visible = true; star.interactive = true; star.buttonMode = true; } else { starText.text = ""; star.visible = false; starText.visible = false; star.interactive = false; star.buttonMode = false; } // 创建点击处理函数 const handleItemClick = () => { if (this.bankPopupContainer && this.bankPopupContainer.visible) { // 如果支付弹窗已显示 return; } // 先隐藏所有发光边框 for (let j = 0; j < this.shineSprites.length; j++) { this.shineSprites[j].visible = false; } // 显示当前点击的发光边框 this.shineSprites[i].visible = true; this.selectedIndex = i; this.selectedAmountValue = count; this.selectedStarCount = starCount; this.id = id; this.inputDisplayText.text = `${label} ${count}`; //// 输入框显示为"货币" this.inputDisplayText.visible = true; this.inputAmountText.visible = false; // 隐藏提示文字 // rpText 显示为纯数字 this.rpText.text = `${this._rpLabel} ${this.formatNumberWithUnit(starCount)}`; console.log( "选中了第", i + 1, "个金额图,金额:", count, "赠送星:", starCount, "id:", id, ); // 选中后切换为亮色可点击按钮 if (this.rechargeYes && this.rechargeNo) { this.rechargeYes.visible = true; this.rechargeNo.visible = false; this.rechargeYes.eventMode = "static"; this.rechargeYes.cursor = "pointer"; } }; // 给金额图添加点击事件 amount.on("pointerdown", handleItemClick); // 给金额文本添加点击事件 amountText.on("pointerdown", handleItemClick); // 当starCount大于0时,才给星星图片和文本添加点击事件 if (starCount > 0) { star.on("pointerdown", handleItemClick); starText.on("pointerdown", handleItemClick); } // 将创建的元素存储到数组 this.amountSprites.push(amount); this.starSprites.push(star); this.shineSprites.push(shine); // 按层级顺序添加到滚动容器(从下到上) this.scrollContainer.addChild(amount); // 最底层:金额图 this.scrollContainer.addChild(shine); // 中间层:发光边框 // 只有当starCount大于0时,才添加星星图片和文本到容器 if (starCount > 0) { this.scrollContainer.addChild(star); // 最上层:五角星 this.scrollContainer.addChild(starText); // 星星数量文本 } this.scrollContainer.addChild(amountText); // 金额文本 } // === 添加滚动功能 === if (scrollableHeight > 0) { // 只有需要滚动时才添加滚动功能 let isDragging = false; let lastY = 0; let currentScrollY = 0; // 鼠标/触摸按下事件 this.scrollContainer.interactive = true; this.scrollContainer.on("mousedown", (event) => { isDragging = true; lastY = event.data.global.y; }); this.scrollContainer.on("touchstart", (event) => { isDragging = true; lastY = event.data.global.y; }); // 鼠标/触摸移动事件 this.scrollContainer.on("mousemove", (event) => { if (isDragging) { const deltaY = event.data.global.y - lastY; lastY = event.data.global.y; // 更新滚动位置,限制在可滚动范围内 currentScrollY += deltaY; currentScrollY = Math.max( -scrollableHeight, Math.min(0, currentScrollY), ); this.scrollContainer.y = currentScrollY; } }); this.scrollContainer.on("touchmove", (event) => { if (isDragging) { const deltaY = event.data.global.y - lastY; lastY = event.data.global.y; // 更新滚动位置,限制在可滚动范围内 currentScrollY += deltaY; currentScrollY = Math.max( -scrollableHeight, Math.min(0, currentScrollY), ); this.scrollContainer.y = currentScrollY; } }); // 鼠标/触摸释放事件 this.scrollContainer.on("mouseup", () => { isDragging = false; }); this.scrollContainer.on("touchend", () => { isDragging = false; }); this.scrollContainer.on("mouseupoutside", () => { isDragging = false; }); this.scrollContainer.on("touchendoutside", () => { isDragging = false; }); // 鼠标滚轮事件 this.scrollContainer.on("wheel", (event) => { const scrollAmount = event.deltaY > 0 ? 30 : -30; // 滚轮滚动量 // 更新滚动位置,限制在可滚动范围内 currentScrollY += scrollAmount; currentScrollY = Math.max( -scrollableHeight, Math.min(0, currentScrollY), ); this.scrollContainer.y = currentScrollY; }); } // === 充值按钮:亮色(可点)与灰色(不可点)切换 === const rechargeYes = new Sprite(Texture.from("assets/UIShop/UI1_09.png")); // 可点击亮色图 rechargeYes.width *= this.app.rat; rechargeYes.height *= this.app.rat; rechargeYes.anchor.set(0.5, 0.5); rechargeYes.position.set(-20, 140); rechargeYes.visible = false; // 初始隐藏 rechargeYes.eventMode = "static"; // 启用交互 rechargeYes.cursor = "pointer"; const rechargeNo = new Sprite(Texture.from("assets/UIShop/UI1_09_2.png")); // 不可点击灰色图 rechargeNo.width *= this.app.rat; rechargeNo.height *= this.app.rat; rechargeNo.anchor.set(0.5, 0.5); rechargeNo.position.set(-20, 140); rechargeNo.visible = true; // 初始显示 rechargeNo.eventMode = "none"; rechargeNo.cursor = "default"; // 创建按钮文字 - 保持你的本地化逻辑 this.depositText2 = Object.assign( new Text("嘟嘟嘟", { fontFamily: "Arial", fontSize: 25, fill: 0xffffff, align: "center", stroke: "#FFA500", }), { anchor: { x: 0.5, y: 0.5 } } ); // 灰色按钮的文字 const depositTextNo = Object.assign( new Text("嘟嘟嘟", { fontFamily: "Arial", fontSize: 25, fill: 0xcccccc, // 灰色文字 align: "center", }), { anchor: { x: 0.5, y: 0.5 } } ); this.depositText2.position.set(0, -5); // 相对于亮色按钮的位置 depositTextNo.position.set(0, -5); // 相对于灰色按钮的位置 rechargeYes.addChild(this.depositText2); rechargeNo.addChild(depositTextNo); // 添加到主容器 this.mainContainer.addChild(rechargeYes, rechargeNo); this.rechargeYes = rechargeYes; this.rechargeNo = rechargeNo; // 保存灰色按钮文字引用 this.depositTextNo = depositTextNo; // 绑定点击事件 rechargeYes.on("pointerdown", async () => { // 先检查是否选择了金额 if (this.selectedIndex === -1) return; // 设置回调:当用户在银行弹窗点击 UIBankData.onPaymentRequest = async (selectedBank) => { // 执行支付求 await this.sendPaymentRequest(selectedBank); // 关闭银行弹窗 UIBankData.hide(); }; // 显示银行弹窗(传入当前商品 ID) await UIBankData.showForGoods(this.id); }); // =======支付成功展示容器开始========= this.paymentSuccessContainer = new Container(); this.paymentSuccessContainer.visible = false; // 初始隐藏 this.paymentSuccessContainer.zIndex = 200; // 最高层级 this.paymentSuccessContainer.eventMode = "static"; // 启用交互 // 创建全屏透明背景 const successOverlay = new Graphics(); successOverlay.beginFill(0x000000, 0.01); // 透明 successOverlay.drawRect(-375, -667, 750, 1334); successOverlay.endFill(); this.paymentSuccessContainer.addChild(successOverlay); // 创建支付金额文本 this.paymentAmountText = new Text("", { fontFamily: "Arial", fontSize: 60, fill: 0xffff00, // 黄色 align: "center", fontWeight: "bold", stroke: "#000000", strokeThickness: 4, }); this.paymentAmountText.anchor.set(0.5); this.paymentAmountText.position.set(0, 0); this.paymentSuccessContainer.addChild(this.paymentAmountText); // 创建确认按钮 this.createPaymentConfirmButton(); // 点击任意位置隐藏支付成功展示 this.paymentSuccessContainer.on("pointerdown", (event) => { // 检查点击的是否是确认按钮,如果不是则隐藏 if ( !event.target || !event.target.parent || event.target.parent !== this.paymentConfirmButton ) { this.hidePaymentSuccess(); } }); // 将支付成功容器添加到根容器 this.container.addChild(this.paymentSuccessContainer); // =======支付成功展示容器结束========= this.depositHistory = new Sprite(Texture.from("assets/UIShop/UI1_05.png")); //历史记录图按钮 this.depositHistory.width *= this.app.rat; this.depositHistory.height *= this.app.rat; this.depositHistory.anchor.set(0.5, 0.5); this.depositHistory.position.set(this.overallWidth/2-110, this.overallHeight/2-50); this.depositHistory.interactive = true; this.depositHistory.buttonMode = true; this.mainContainer.addChild(this.depositHistory); const threeStripes = new Sprite(Texture.from("assets/UIShop/UI1_07.png")); //三条杠图(历史) threeStripes.width *= this.app.rat; threeStripes.height *= this.app.rat; threeStripes.anchor.set(0.5, 0.5); threeStripes.position.set(this.overallWidth/2-160, this.overallHeight/2-50); threeStripes.interactive = true; // 添加交互 threeStripes.buttonMode = true; // 添加按钮模式 this.depositHistoryText = Object.assign( //提示历史文字(主界面点击的历史) new Text("haha", { fontFamily: "Arial", fontSize: 12, fill: 0xd87910, align: "center", }), { anchor: { x: 0.5, y: 0.5 }, position: { x: this.overallWidth/2-105, y: this.overallHeight/2-50 } }, ); this.depositHistoryText.interactive = true; // 添加交互 this.depositHistoryText.buttonMode = true; // 添加按钮模式 this.mainContainer.addChild(threeStripes, this.depositHistoryText); // 创建统一的点击处理函数 const handleHistoryClick = async () => { // 如果支付弹窗已显示,忽略点击 if (this.bankPopupContainer && this.bankPopupContainer.visible) { return; } console.log("depositHistory 被点击了"); await this.SendHistoryData(); }; // 为所有三个元素添加点击事件 this.depositHistory.on("pointerdown", handleHistoryClick); threeStripes.on("pointerdown", handleHistoryClick); this.depositHistoryText.on("pointerdown", handleHistoryClick); // === 历史记录弹窗开始=== this.historyListContainer = new Container(); this.historyListContainer.visible = false; // 默认隐藏 this.historyListContainer.zIndex = 100;//内容透明度 this.historyListContainer.position.set( this.overallWidth * -0.35, // 距离左侧 this.overallHeight * -0.3 // 距离顶部 ); // 背景图 const recordBg = new Sprite(Texture.from("assets/UIShop/商店底5.png")); recordBg.anchor.set(0.5, 0.5); recordBg.width = this.overallWidth * 1.2; recordBg.height = this.overallHeight * 1; recordBg.position.set( this.overallWidth * 0.35, this.overallHeight* 0.3, ); this.historyText = Object.assign( new Text("haha", { fontFamily: "Arial", fontSize: 20, fill: 0xfff1a5, align: "center", }), { anchor: { x: 0.5, y: 0.5 }, position: { x: this.overallWidth* 0.35, y: this.overallHeight* -0.14} }, ); this.historyListContainer.addChild(recordBg, this.historyText); // 关闭按钮 const closeHistory = new Sprite(Texture.from("assets/UIShop/UI1_03.png")); closeHistory.width *= this.app.rat; closeHistory.height *= this.app.rat; closeHistory.position.set( this.overallWidth * 0.7, this.overallHeight* -0.1, ); closeHistory.eventMode = "static"; closeHistory.cursor = "pointer"; closeHistory.on("pointerdown", () => { this.historyListContainer.visible = false; if (this.blockBg) this.blockBg.visible = false; this.enableMainContainerInteractivity(true); // 恢复主界面操作 if (this.selectedAmountValue > 0) { this.inputAmountText.visible = false; // 隐藏提示文字 } }); this.historyListContainer.addChild(closeHistory); this.container.addChild(this.historyListContainer); // === 历史记录弹窗结束 === // === 弹窗与阴影遮罩 === //黑幕 let blockBg = new BlackMaskBg({ parent: this.container }); this.blockBg=blockBg; const shopBg3 = new Sprite(Texture.from("assets/UIShop/商店底3.png")); shopBg3.width = 500; shopBg3.height = 300; shopBg3.position.set(0, 0); this.shopBg3Container = new Container(); this.shopBg3Container.position.set(-240, -140); this.shopBg3Container.addChild(shopBg3); this.container.addChild(this.shopBg3Container); this.introduceText = new Text("介绍背景", { fontFamily: "Arial", fontSize: 13, fill: 0xffffff, align: "center", stroke: " #000000", strokeThickness: 0, lineHeight: 25, }); this.introduceText.anchor.set(0.5); this.introduceText.position.set( shopBg3.width / 2 + 60, shopBg3.height / 2 - 5, ); this.shopBg3Container.addChild(this.introduceText); this.shopBgButton = new Sprite(Texture.from("assets/UIShop/UI1_09.png")); this.shopBgButton.width = 210; this.shopBgButton.height = 60; this.shopBgButton.position.set(-80, 100); this.shopBgButton.eventMode = "static"; this.shopBgButton.cursor = "pointer"; this.buttonText = new Text("哈咯", { fontSize: 28, fill: 0xffffff, align: "center", stroke: "#000000", strokeThickness: 2, }); this.buttonText.anchor.set(0.5); this.buttonText.position.set( this.shopBgButton.width / 2, this.shopBgButton.height / 2, ); this.shopBgButton.addChild(this.buttonText); this.shopBgButton.on("pointerdown", () => { // 点击按钮后隐藏弹窗 if (this.shopBg3Container) this.shopBg3Container.visible = false; if (this.shopBgButton) this.shopBgButton.visible = false; if (blockBg) blockBg.visible = false; if (this.closeButton) { this.closeButton.eventMode = "static"; this.closeButton.cursor = "pointer"; } this.enableMainContainerInteractivity(true); }); this.container.addChild(this.shopBgButton); // 只设置一次 pivot:围绕内容中心缩放 if (!this.isPivotInitialized) { this.mainContainer.pivot.set( this.CONTAINER_WIDTH / 2, this.CONTAINER_HEIGHT / 2, ); this.isPivotInitialized = true; } // 初始化状态 this.resetState(); this.localize(); this.isInist = true; } // 创建支付成功确认按钮 createPaymentConfirmButton() { // 创建确认按钮 this.paymentConfirmButton = new Sprite( Texture.from("assets/UIShop/UI1_09.png"), ); this.paymentConfirmButton.width = 200; this.paymentConfirmButton.height = 80; this.paymentConfirmButton.anchor.set(0.5, 0.5); this.paymentConfirmButton.position.set(5, 150); this.paymentConfirmButton.eventMode = "static"; this.paymentConfirmButton.cursor = "pointer"; // 创建按钮文字 this.confirmText = new Text("这是Confirm", { fontFamily: "Arial", fontSize: 30, fill: 0xffffff, align: "center", stroke: "#FFA500", }); this.confirmText.anchor.set(0.5, 0.5); this.confirmText.position.set(0, 0); this.paymentConfirmButton.addChild(this.confirmText); // 绑定点击事件 this.paymentConfirmButton.on("pointerdown", () => { this.hidePaymentSuccess(); }); // 添加到支付成功容器 this.paymentSuccessContainer.addChild(this.paymentConfirmButton); } // 显示支付成功动画 showPaymentSuccess(amount) { UIBankData.hide(); // 恢复主界面交互 this.enableMainContainerInteractivity(true); // 设置支付金额文本 显示数字 this.paymentAmountText.text = amount.toString(); // 显示支付成功容器 this.paymentSuccessContainer.visible = true; // 动画效果:透明到不透明,再放大 this.paymentAmountText.alpha = 0; this.paymentAmountText.scale.set(0.5); // 动画序列 const animate = () => { // 渐显 if (this.paymentAmountText.alpha < 1) { this.paymentAmountText.alpha += 0.05; requestAnimationFrame(animate); return; } // 放大 if (this.paymentAmountText.scale.x < 1.2) { this.paymentAmountText.scale.x += 0.02; this.paymentAmountText.scale.y += 0.02; requestAnimationFrame(animate); return; } // 缩小回正常 if (this.paymentAmountText.scale.x > 1) { this.paymentAmountText.scale.x -= 0.01; this.paymentAmountText.scale.y -= 0.01; requestAnimationFrame(animate); } }; // 开始动画 animate(); } // 隐藏支付成功展示 hidePaymentSuccess() { this.paymentSuccessContainer.visible = false; } // 启用或禁用主界面的交互性 enableMainContainerInteractivity(enable) { // 设置主容器内所有可交互元素的交互性 this.closeButton.eventMode = enable ? "static" : "none"; this.closeButton.cursor = enable ? "pointer" : "default"; // 设置金额框的交互性 for (const amount of this.amountSprites) { amount.eventMode = enable ? "static" : "none"; amount.cursor = enable ? "pointer" : "default"; } // 设置充值按钮的交互性 if (this.rechargeYes) { this.rechargeYes.eventMode = enable && this.selectedIndex !== -1 ? "static" : "none"; this.rechargeYes.cursor = enable && this.selectedIndex !== -1 ? "pointer" : "default"; } // 设置历史记录按钮的交互性 if (this.depositHistory) { this.depositHistory.eventMode = enable ? "static" : "none"; this.depositHistory.cursor = enable ? "pointer" : "default"; } // 设置清除输入按钮的交互性 const clearInput = this.mainContainer.children.find( (child) => child.texture && child.texture.textureCacheIds && child.texture.textureCacheIds.includes("assets/UIShop/UI1_17.png"), ); if (clearInput) { clearInput.eventMode = enable ? "static" : "none"; clearInput.cursor = enable ? "pointer" : "default"; } } // 清除选中状态 clearSelection() { this.inputDisplayText.visible = false; this.inputAmountText.visible = true; // 恢复提示文字 this.selectedIndex = -1; this.selectedAmountValue = 0; this.selectedStarCount = 0; this.rpText.text = `${this._rpLabel} 0`; // 恢复 rpText 为默认状态 for (const shine of this.shineSprites) { // 隐藏所有发光边框 shine.visible = false; } // 清除选择时切回灰色按钮 if (this.rechargeYes && this.rechargeNo) { this.rechargeYes.visible = false; this.rechargeNo.visible = true; this.rechargeYes.eventMode = "none"; this.rechargeYes.cursor = "default"; } } async show() { console.log(this.constructor.name + " 1"); if (!this.isInist) { await this.init(); } else { this.resetState(); } console.log(this.constructor.name + " 2"); this.container.visible = true; UIManager.hideLoading(); // 开启动画 //this.animateOpen(); } // 动画从中间向两边展开 animateOpen() { this.mainContainer.scale.set(0, 1); const duration = 500; const startTime = performance.now(); const tick = (currentTime) => { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 2); // 缓动效果 this.mainContainer.scale.x = easeProgress; if (progress < 1) { requestAnimationFrame(tick); } }; requestAnimationFrame(tick); } resetState() { if (this.shopBg3Container) this.shopBg3Container.visible = true; if (this.shopBgButton) this.shopBgButton.visible = true; if (this.blockBg) this.blockBg.visible = true; if (this.mainContainer) { this.mainContainer.alpha = 1; this.mainContainer.scale.set(1); } if (this.closeButton) { this.closeButton.eventMode = "none"; this.closeButton.cursor = "default"; } // 重置选择状态 this.clearSelection(); this.enableMainContainerInteractivity(false); } hide() { this.container.visible = false; } //本地化 async localize() { this.uiname = "uiShop"; await super.localize(); // 使用 setLocalWords 方法统一设置本地化文本 super.setLocalWords(this.buttonText, "Confirmation"); super.setLocalWords(this.introduceText, "introduce"); super.setLocalWords(this.depositText, "deposit"); super.setLocalWords(this.depositText2, "deposit"); super.setLocalWords(this.depositTextNo, "deposit"); super.setLocalWords(this.topUpAmountText, "topUpAmount"); super.setLocalWords(this.inputAmountText, "inputAmount"); super.setLocalWords(this.freeAmountText, "freeAmount"); super.setLocalWords(this.selectAmountText, "selectAmount"); super.setLocalWords(this.depositHistoryText, "depositHistory"); super.setLocalWords(this.confirmText, "confirm"); super.setLocalWords(this.historyText, "depositHistory"); // 使用动态货币符号 this._rpLabel = gameData.currencySign; this.rpText.text = `${this._rpLabel} 0`; this.inputAmountText.visible = true; // 历史记录本地化 if (this.historyTextObjects && this.historyTextObjects.length > 0) { this.historyTextObjects.forEach((recordTexts) => { if (recordTexts.amountLabel && recordTexts.amountLabel.localKey) { super.setLocalWords(recordTexts.amountLabel, recordTexts.amountLabel.localKey); } if (recordTexts.orderLabel && recordTexts.orderLabel.localKey) { super.setLocalWords(recordTexts.orderLabel, recordTexts.orderLabel.localKey); } if (recordTexts.timeLabel && recordTexts.timeLabel.localKey) { super.setLocalWords(recordTexts.timeLabel, recordTexts.timeLabel.localKey); } if (recordTexts.statusLabel && recordTexts.statusLabel.localKey) { super.setLocalWords(recordTexts.statusLabel, recordTexts.statusLabel.localKey); } if (recordTexts.statusFinished && recordTexts.statusFinished.localKey) { super.setLocalWords(recordTexts.statusFinished, recordTexts.statusFinished.localKey); } if (recordTexts.statusProcessing && recordTexts.statusProcessing.localKey) { super.setLocalWords(recordTexts.statusProcessing, recordTexts.statusProcessing.localKey); } if (recordTexts.statusWaiting && recordTexts.statusWaiting.localKey) { super.setLocalWords(recordTexts.statusWaiting, recordTexts.statusWaiting.localKey); } }); } // 无数据提示 if (this.noDataText) { super.setLocalWords(this.noDataText, "oDataText"); } } formatNumberWithUnit(value) { if (value == null || isNaN(value)) return "0"; let formatted; if (value >= 1_000_000_000_000) { formatted = (value / 1_000_000_000_000).toFixed(2).replace(/\.00$/, ""); return `${formatted}T`; } else if (value >= 1_000_000_000) { formatted = (value / 1_000_000_000).toFixed(2).replace(/\.00$/, ""); return `${formatted}B`; } else if (value >= 1_000_000) { formatted = (value / 1_000_000).toFixed(2).replace(/\.00$/, ""); return `${formatted}M`; } else if (value >= 1_000) { formatted = (value / 1_000).toFixed(2).replace(/\.00$/, ""); return `${formatted}K`; } else { return String(value); } } // 接口求:获取商店商品列表 async SendShopData() { const requestData = { token: gameData.gameToken, playerIndex: gameData.playerDto.playerIndex, }; console.log("发送求参数:", requestData); const response = await networkMgr.postMessage("getShopGoods", requestData); if (!response) { throw new Error("接口返回空数据"); } this.shopGoodsList = response.shopGoodsList || response["shopGoodsList"] || []; console.log("获取商店数据:", this.shopGoodsList); if (this.isInist) { this.localize(); } } // 获取银行数据 async preloadBankData() { if (this.shopGoodsList.length > 0) { try { const requestData = { token: gameData.gameToken, playerIndex: gameData.playerDto.playerIndex, goodsId: this.shopGoodsList[0].id, }; await networkMgr.postMessage("getPaymentBank", requestData); console.log("预加载银行数据完成"); } catch (e) { console.warn("预加载银行数据失败", e); } } } // 发送支付求 async SendPaymentRequest() { if (!this.selectedBankData || !this.id) { console.error("未选择银行或商品"); return; } try { const requestData = { token: gameData.gameToken, playerIndex: gameData.playerDto.playerIndex, goodsId: this.id, bankId: this.selectedBankData.bankId, bankCode: this.selectedBankData.bankCode, }; console.log("发送支付求参数:", requestData); const response = await networkMgr.postMessage("payment", requestData); if (!response) { throw new Error("支付接口返回空数据"); } console.log("支付接口返回:", response); if (response.result === 0) { console.log("支付成功,金额:", response.amount); // 显示支付成功动画 this.showPaymentSuccess(response.amount); } else { // 支付失败 console.error("支付失败:", response.msg); } } catch (error) { console.error("支付求失败:", error); } } // 历史记录接口 async SendHistoryData(isInit = false) { try { const requestData = { token: gameData.gameToken, playerIndex: gameData.playerDto.playerIndex, }; console.log("发送历史求参数:", requestData); const response = await networkMgr.postMessage( "getPaymentRecord", requestData, ); if (!response) { throw new Error("接口返回空数据"); } this.recordList = response.recordList || response["recordList"] || []; // 渲染历史记录列表 this.renderHistoryList(); // 如果不是初始化调用,显示弹窗 if (!isInit) { this.historyListContainer.visible = true; this.blockBg.visible = true; for (const shine of this.bankShineSprites) { shine.visible = false; } this.enableMainContainerInteractivity(false); } this.localize(); } catch (error) { console.error("获取历史记录失败:", error); this.recordList = []; // 渲染列表 this.renderHistoryList(); if (!isInit) { this.historyListContainer.visible = true; this.blockBg.visible = true; this.enableMainContainerInteractivity(false); } } } // 历史记录列表 renderHistoryList() { // 清空之前的记录和文本对象 if (this.scrollContent) { this.scrollContent.removeChildren(); } this.historyTextObjects = []; // 配置 const listWidth = this.overallWidth * 0.7; const listHeight = this.overallHeight * 0.7; const itemHeight = this.overallHeight * 0.28; //每条记录的内容多高 const contentStartX = this.overallWidth *-0.01; const contentStartY = 0; // 重新创建滚动内容容器 this.scrollContent = new Container(); this.scrollContent.position.set(contentStartX, contentStartY); this.historyListContainer.addChild(this.scrollContent); // 如果没有数据,显示提示文字 if (!this.recordList || this.recordList.length === 0) { this.noDataText = new Text("暂无充值记录", { fontSize: 18, fill: 0x999999, }); this.noDataText.anchor.set(0.5); this.noDataText.position.set(listWidth / 2, 100); this.scrollContent.addChild(this.noDataText); return; } // 有数据时遍历生成每一条记录 this.recordList.forEach((record, index) => { const y = index * itemHeight; // 为每条记录创建一个对象来存储所有文本元素 const recordTexts = {}; // 圆角背景框 const bg = new Graphics(); bg.lineStyle(2, 0x7d503a, 0.6); // 边框颜色 bg.beginFill(0x7d503a, 0.3); // 背景色 bg.drawRoundedRect( 10, // x y + 5, // y listWidth - 15, // 宽:左右各留边距 itemHeight - 10, // 高:上下留空 18, // 圆角半径 ); bg.endFill(); this.scrollContent.addChild(bg); // 时间格式化 const date = new Date(record.createDate); const formattedTime = date.toLocaleString("en-US", { month: "numeric", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true, }); // 充值金额标签 recordTexts.amountLabel = new Text("Top up amount", { fontSize: 13, fill: 0xb88e7e, }); recordTexts.amountLabel.position.set(20, y + 12); recordTexts.amountLabel.localKey = "amountText"; // 添加本地化标识 // 充值金额值 recordTexts.amountValue = new Text(`${record.amount.toLocaleString()}`, { //recordTexts.amountValue = new Text(`${this._rpLabel} ${record.amount.toLocaleString()}`, { fontSize: 13, fill: 0xe1ae68, }); recordTexts.amountValue.position.set(180, y + 12); // 订单标签 recordTexts.orderLabel = new Text("Recharge Order", { fontSize: 13, fill: 0xb88e7e, }); recordTexts.orderLabel.position.set(20, y + 32); recordTexts.orderLabel.localKey = "rechargeOrderText"; // 订单号 recordTexts.orderId = new Text(record.id, { fontSize: 13, fill: 0xb77760, }); recordTexts.orderId.position.set(180, y + 32); // 时间标签 recordTexts.timeLabel = new Text("Top up time", { fontSize: 13, fill: 0xb88e7e, }); recordTexts.timeLabel.position.set(20, y + 52); recordTexts.timeLabel.localKey = "rechargeTimeText"; // 时间值 recordTexts.timeValue = new Text(formattedTime, { fontSize: 13, fill: 0xb77760, }); recordTexts.timeValue.position.set(180, y + 52); // 状态标签 recordTexts.statusLabel = new Text("Order status", { fontSize: 13, fill: 0xb88e7e, }); recordTexts.statusLabel.position.set(20, y + 72); recordTexts.statusLabel.localKey = "statusText"; // 状态文本 recordTexts.statusFinished = new Text("已成功", { fontSize: 12, fill: 0x00ff00, }); recordTexts.statusFinished.position.set(180, y + 72); recordTexts.statusFinished.visible = record.status === "1"; recordTexts.statusFinished.localKey = "status_1"; recordTexts.statusProcessing = new Text("在等待处理", { fontSize: 12, fill: 0xffff00, }); recordTexts.statusProcessing.position.set(180, y + 72); recordTexts.statusProcessing.visible = record.status === "0"; recordTexts.statusProcessing.localKey = "status_0"; recordTexts.statusWaiting = new Text("失败", { fontSize: 12, fill: 0xaa0000, }); recordTexts.statusWaiting.position.set(180, y + 72); recordTexts.statusWaiting.visible = !( record.status === "1" || record.status === "0" ); recordTexts.statusWaiting.localKey = "status_2"; // 添加到滚动容器 this.scrollContent.addChild( recordTexts.amountLabel, recordTexts.amountValue, recordTexts.orderLabel, recordTexts.orderId, recordTexts.timeLabel, recordTexts.timeValue, recordTexts.statusLabel, recordTexts.statusFinished, recordTexts.statusProcessing, recordTexts.statusWaiting, ); // 存储到数组 this.historyTextObjects.push(recordTexts); // 复制图标(点击复制订单号) const copyIcon = new Sprite(Texture.from("assets/UIShop/复制.png")); copyIcon.width = 55 * this.app.rat; copyIcon.height = 55 * this.app.rat; copyIcon.anchor.set(0.5); copyIcon.position.set(listWidth - 40, y + itemHeight / 2); // 靠右居中 copyIcon.eventMode = "static"; copyIcon.cursor = "pointer"; copyIcon.on("pointerdown", (e) => { e.stopPropagation(); navigator.clipboard .writeText(record.id) .then(() => { console.log(`已复制订单号: ${record.id}`); copyIcon.tint = 0x00ff00; setTimeout(() => { copyIcon.tint = 0xffffff; }, 300); }) .catch((err) => { alert("复制失败,手动选择文本复制"); console.warn("Clipboard error:", err); }); }); this.scrollContent.addChild(copyIcon); }); // 限制可见范围 const clipMask = new Graphics(); clipMask.beginFill(0x000000, 0.01); clipMask.drawRect(0, 0, listWidth, listHeight); clipMask.endFill(); clipMask.position.set(0, 0); this.historyListContainer.addChild(clipMask); this.scrollContent.mask = clipMask; // 添加拖拽滚动功能 this.setupHistoryScroll(); } // 设置历史记录滚动功能 setupHistoryScroll() { const listHeight = 250; // 显示区域高度 const itemHeight = 95; // 每条记录的高度 let isDragging = false; let dragStartY = 0; let scrollStartY = 0; this.app.view.removeEventListener( "pointermove", this.handleHistoryPointerMove, ); this.app.view.removeEventListener("pointerup", this.handleHistoryPointerUp); this.app.view.removeEventListener( "pointerupoutside", this.handleHistoryPointerUp, ); this.handleHistoryPointerMove = (e) => { if (!isDragging) return; const dy = e.clientY - dragStartY; let newY = scrollStartY + dy; const maxScrollUp = 0; const totalItemsHeight = this.recordList.length * itemHeight; const maxScrollDown = listHeight - totalItemsHeight; if (newY > maxScrollUp) newY = maxScrollUp; else if (newY < maxScrollDown) newY = maxScrollDown; this.scrollContent.y = newY; }; this.handleHistoryPointerUp = () => { isDragging = false; this.scrollContent.cursor = "grab"; }; // 设置滚动容器的交互 this.scrollContent.eventMode = "static"; this.scrollContent.cursor = "grab"; this.scrollContent.on("pointerdown", (event) => { isDragging = true; dragStartY = event.global.y; scrollStartY = this.scrollContent.y; this.scrollContent.cursor = "grabbing"; event.stopPropagation(); }); // 绑定全局事件 this.app.view.addEventListener( "pointermove", this.handleHistoryPointerMove, ); this.app.view.addEventListener("pointerup", this.handleHistoryPointerUp); this.app.view.addEventListener( "pointerupoutside", this.handleHistoryPointerUp, ); } // 提供给外部 async sendPaymentRequest(bankData) { if (!bankData || !this.id) { console.error("缺少必要参数:bankData 或 goodsId"); return; } try { const requestData = { token: gameData.gameToken, playerIndex: gameData.playerDto.playerIndex, goodsId: this.id, bankId: bankData.bankId, bankCode: bankData.bankCode, }; const response = await networkMgr.postMessage("payment", requestData); if (response && response.result === 0) { console.log("支付成功,金额:", response.amount); this.showPaymentSuccess(response.amount); } else { console.error("支付失败:", response?.msg || "未知错误"); } } catch (error) { console.error("支付求异常:", error); } } } export const UIShop = new uiShop(); import uiBase from "./uiBase.js"; import { Container, Graphics, Sprite, Text, Texture } from "pixi.js"; import gameData from "../Frame/gameDataMgr.js"; import networkMgr from "../Frame/networkMgr.js"; import { BlackMaskBg } from "../Frame/CommonUI/blackMaskBg.js"; class uiBankData extends uiBase { container; popupContainer; // 银行弹窗主容器 blockBg; // 黑色遮罩 bankList = []; // 接口返回的银行数据 bankSprites = []; // 银行背景按钮数组 bankShineSprites = []; // 发光边框数组 selectedBankIndex = -1; selectedBankData = null; // UI 元素引用 bankScrollContainer; confirmButtonYes; confirmButtonNo; confirmTextYes; confirmTextNo; closeBtn; // 回调函数 onPaymentRequest = null; // 尺寸缓存 overallWidth = 750; overallHeight = 1334; bankBgSprite=null; async init() { if (this.isInist) return; super.init(); if (!this.app || !this.container) { console.error("uiBase 初始化失败,缺少 app 或 container"); return; } this.overallWidth = this.app.screen.width; this.overallHeight = this.app.screen.height; // 创建弹窗容器 this.popupContainer = new Container(); this.popupContainer.visible = false; this.popupContainer.zIndex = 100; this.popupContainer.position.set(-270, -110); this.container.addChild(this.popupContainer); // 创建遮罩层 this.blockBg = new BlackMaskBg({ parent: this.container }); this.blockBg.visible = false; await this.createUI(); this.isInist = true; } async createUI() { const { popupContainer } = this; const app = this.app; // === 弹窗背景 === const bankBgTexture = await Texture.from("assets/UIShop/商店底4.png"); const bank = new Sprite(bankBgTexture); bank.width = this.overallWidth * 0.95; bank.height = this.overallHeight * 0.95; bank.anchor.set(0.5, 0.5); bank.position.set( this.overallWidth * 0.42, this.overallHeight * 0.4 ); popupContainer.addChild(bank); this.bankBgSprite = bank; // === 标题文本 === const tipText = new Text("选择支付方式", { fontFamily: "Arial", fontSize: 25, fill: 0xfff1a5, align: "center", }); tipText.anchor.set(0.5, 0.5); tipText.position.set( bank.x, bank.y - bank.height / 2 + tipText.height / 2 + 15 ); popupContainer.addChild(tipText); // === 银行介绍文字 === const bankIntroduceText = new Text("银行介绍", { fontFamily: "Arial", fontSize: 13, fill: 0xd18b5c, align: "center", }); bankIntroduceText.anchor.set(0.5, 0.5); bankIntroduceText.position.set( bank.x, bank.y + bank.height / 2 - 90 ); popupContainer.addChild(bankIntroduceText); // === 关闭按钮(叉叉)=== const closeBtn = new Sprite(Texture.from("assets/UIShop/UI8_6.png")); closeBtn.width *= app.rat; closeBtn.height *= app.rat; closeBtn.position.set( bank.x + bank.width / 2 - 40 - closeBtn.width / 2, bank.y - bank.height / 2 + 10 + closeBtn.height / 2 ); closeBtn.eventMode = "static"; closeBtn.cursor = "pointer"; closeBtn.on("pointerdown", () => { this.hide(); }); popupContainer.addChild(closeBtn); this.closeBtn = closeBtn; // === 创建银行选择区域 === this.createBankSelectionArea(bank); // === 创建确认按钮 === this.createConfirmButton(bank); } createBankSelectionArea(bank) { // 清除旧元素 if (this.bankScrollContainer) { this.bankScrollContainer.destroy({ children: true }); } this.bankSprites = []; this.bankShineSprites = []; const maxPerRow = 4; const bankTop = bank.y - bank.height / 2; const bankBottom = bank.y + bank.height / 2; const bankLeft = bank.x - bank.width / 2; const bankRight = bank.x + bank.width / 2; const bankCenterX = bank.x; const titleBottom = bankTop + 60; const introduceTextTop = bankBottom - 50; const availableHeight = introduceTextTop - titleBottom; const iconSize = Math.min(bank.width * 0.5, availableHeight * 0.2); const rowHeight = iconSize * 1.5; const totalRows = Math.ceil(this.bankList.length / maxPerRow); const spacingX = (bank.width * 0.8 - maxPerRow * iconSize) / (maxPerRow - 1); const startX = bankCenterX - ((maxPerRow * iconSize + (maxPerRow - 1) * spacingX) / 2) + iconSize / 2; const startY = titleBottom + (availableHeight - totalRows * rowHeight) / 2 + iconSize / 2; // 映射表 const bankIconMap = { DANA: "assets/UIShop/WithdrawalBankIcon_DANA.png", OVO: "assets/UIShop/WithdrawalBankIcon_OVO.png", QRIS: "assets/UIShop/WithdrawalBankIcon_QRIS.png", BNI: "assets/UIShop/WithdrawalBankIcon_BNI.png", BRI: "assets/UIShop/WithdrawalBankIcon_BRI.png", }; this.bankScrollContainer = new Container(); this.bankScrollContainer.x = bankLeft; this.bankScrollContainer.y = 0; this.popupContainer.addChild(this.bankScrollContainer); const maskHeight = availableHeight * 0.5; const maskY = titleBottom; const maskWidth = bank.width * 0.8; const maskX = bankLeft + bank.width * 0.1; const mask = new Graphics(); mask.beginFill(0xffffff); mask.drawRect(maskX, maskY, maskWidth, maskHeight); mask.endFill(); this.bankScrollContainer.mask = mask; this.popupContainer.addChild(mask); for (let i = 0; i < this.bankList.length; i++) { const bankData = this.bankList[i]; const bankCode = bankData.bankCode; const iconPath = bankIconMap[bankCode]; if (!iconPath) continue; // 发光边框 const shine = new Sprite(Texture.from("assets/UIShop/UI1_11.png")); shine.width = iconSize * 1.9; shine.height = iconSize * 1; shine.anchor.set(0.5, 0.5); shine.visible = false; // 背景按钮 const bgSprite = new Sprite(Texture.from("assets/UIShop/UI1_22.png")); bgSprite.width = iconSize * 1.8; bgSprite.height = iconSize * 0.9; bgSprite.anchor.set(0.5, 0.5); bgSprite.interactive = true; bgSprite.buttonMode = true; // Logo 图标 const logo = new Sprite(Texture.from(iconPath)); logo.width = iconSize * 1.3; logo.height = iconSize * 0.8; logo.anchor.set(0.5, 0.5); bgSprite.addChild(logo); // 布局位置 const row = Math.floor(i / maxPerRow); const col = i % maxPerRow; const xPos = startX + col * (iconSize + spacingX); const yPos = startY + row * rowHeight; shine.position.set(xPos, yPos); bgSprite.position.set(xPos, yPos); // 点击事件 bgSprite.on("pointerdown", () => { this.bankShineSprites.forEach(s => s.visible = false); shine.visible = true; this.selectedBankIndex = i; this.selectedBankData = bankData; this.updateConfirmButtonState(); }); this.bankSprites.push(bgSprite); this.bankShineSprites.push(shine); this.bankScrollContainer.addChild(bgSprite, shine); } // 滚动 this.addScrolling(maskHeight, totalRows, rowHeight, bankLeft); } addScrolling(maskHeight, totalRows, rowHeight, bankLeft) { if (totalRows <= 1) return; let isDragging = false; let lastY = 0; let currentScrollY = 0; const scrollableHeight = (totalRows - 1) * rowHeight; const container = this.bankScrollContainer; container.eventMode = "static"; const move = (e) => { if (!isDragging) return; const deltaY = e.data.global.y - lastY; lastY = e.data.global.y; currentScrollY += deltaY; currentScrollY = Math.max(-scrollableHeight, Math.min(0, currentScrollY)); container.y = bankLeft + currentScrollY; }; container.on("mousedown", (e) => { isDragging = true; lastY = e.data.global.y; }); container.on("touchstart", (e) => { isDragging = true; lastY = e.data.global.y; }); container.on("mousemove", move); container.on("touchmove", move); ["mouseup", "touchend", "mouseupoutside", "touchendoutside"].forEach(evt => container.on(evt, () => isDragging = false) ); container.on("wheel", (e) => { const delta = e.deltaY > 0 ? 15 : -15; currentScrollY += delta; currentScrollY = Math.max(-scrollableHeight, Math.min(0, currentScrollY)); container.y = bankLeft + currentScrollY; }); } createConfirmButton(bank) { const bottomMargin = 30; const buttonY = bank.y + bank.height / 2 - bottomMargin; const buttonX = bank.x; // 亮色按钮 this.confirmButtonYes = new Sprite(Texture.from("assets/UIShop/UI1_09.png")); this.confirmButtonYes.width *= this.app.rat; this.confirmButtonYes.height *= this.app.rat; this.confirmButtonYes.anchor.set(0.5, 0.5); this.confirmButtonYes.position.set(buttonX, buttonY); this.confirmButtonYes.visible = false; this.confirmButtonYes.eventMode = "none"; // 灰色按钮 this.confirmButtonNo = new Sprite(Texture.from("assets/UIShop/UI1_09_2.png")); this.confirmButtonNo.width *= this.app.rat; this.confirmButtonNo.height *= this.app.rat; this.confirmButtonNo.anchor.set(0.5, 0.5); this.confirmButtonNo.position.set(buttonX, buttonY); this.confirmButtonNo.visible = true; // 文字 this.confirmTextYes = new Text("确认", { fontSize: 40, fill: 0xffffff, align: "center", stroke: "#FFA500" }); this.confirmTextNo = new Text("确认", { fontSize: 40, fill: 0xffffff, align: "center", stroke: "#FFA500" }); [this.confirmTextYes, this.confirmTextNo].forEach(t => { t.anchor.set(0.5, 0.5); t.position.set(0, -5); }); this.confirmButtonYes.addChild(this.confirmTextYes); this.confirmButtonNo.addChild(this.confirmTextNo); this.popupContainer.addChild(this.confirmButtonYes, this.confirmButtonNo); // 绑定点击 this.confirmButtonYes.on("pointerdown", async () => { if (this.selectedBankData && typeof this.onPaymentRequest === 'function') { await this.onPaymentRequest(this.selectedBankData); } }); this.updateConfirmButtonState(); } updateConfirmButtonState() { const visible = this.selectedBankIndex !== -1; this.confirmButtonYes.visible = visible; this.confirmButtonNo.visible = !visible; this.confirmButtonYes.eventMode = visible ? "static" : "none"; this.confirmButtonYes.cursor = visible ? "pointer" : "default"; } // 获取银行数据并显示弹窗 async showForGoods(goodsId) { if (!this.isInist) { console.log("正在初始化 UIBankData..."); await this.init(); } if (!this.popupContainer || !this.bankBgSprite) { console.error("popupContainer 或 bankBgSprite 初始化失败"); return; } try { const res = await networkMgr.postMessage("getPaymentBank", { token: gameData.gameToken, playerIndex: gameData.playerDto.playerIndex, goodsId, }); this.bankList = res?.bankList || []; this.selectedBankIndex = -1; this.selectedBankData = null; if (this.bankList.length === 0) { console.warn("无可用支付银行"); return; } this.createBankSelectionArea(this.bankBgSprite); this.popupContainer.visible = true; this.blockBg.visible = true; } catch (e) { console.error("获取银行失败:", e); } } hide() { this.popupContainer.visible = false; this.blockBg.visible = false; } } export const UIBankData = new uiBankData();
最新发布
12-10
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值