这个报错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() {
super.init();
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();
最新发布