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 { dataPersistenceMgr } from "../Frame/dataPersistenceMgr.js";
class uiShop extends uiBase {
mainContainer; // 主界面容器
overlay; // 背景遮罩
shopBg3Container; // 弹窗容器
shopBgButton; // 按钮
buttonText; // 按钮文字
closeButton; // 叉叉按钮
introduceText; // 介绍背景
isInist = false;
isPivotInitialized = false;
CONTAINER_WIDTH = 650;
CONTAINER_HEIGHT = 400;
shopGoodsList = [];
_rpLabel = "Rp"; // 默认值，将在 localize() 中更新
// 记录当前选中的索引和金额值
selectedIndex = -1; // 当前选中的金额框索引
selectedAmountValue = 0; // 当前选中的金额数值
selectedStarCount = 0; // 当前赠送的星数
id = 0; // 当前选中的id
inputDisplayText; // 显示选中金额的文本
rechargeYes; // 可点击亮色图
rechargeNo; // 不可点击灰色图
depositHistory; // 历史记录按钮
depositHistoryText; // 历史记录文本
// =====银行选择弹窗容器 =====
bankPopupContainer; // 充值支付银行弹窗容器
bankList= [];
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",
]);
// 同时获取商店数据和银行数据
await Promise.all([
this.SendShopData(),
this.SendShopBankData(true) // 传入true表示是初始化调用
]);
// === 主界面内容 ===
const shopBg1 = new Sprite(Texture.from("assets/UIShop/商店底2.png"));
shopBg1.width = 650;
shopBg1.height = 55;
shopBg1.position.set(-330, -184);
const shopBg2 = new Sprite(Texture.from("assets/UIShop/商店底1_1.png"));
shopBg2.width = 650;
shopBg2.height = 390;
shopBg2.position.set(-330, -210);
this.closeButton = new Sprite(Texture.from("assets/UIShop/UI1_03.png"));//主界面叉叉按钮
this.closeButton.width = 50;
this.closeButton.height = 50;
this.closeButton.anchor.set(1, 0);
this.closeButton.position.set(335 - 20, -190 + 20); // 右上偏移
this.closeButton.eventMode = "static";
this.closeButton.cursor = "pointer";
this.closeButton.on("pointerdown", () => this.hide());
// 主界面装饰文本
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: -25, y: -170 } }
);
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: -110, y: -100 } }
);
this.inputAmountText = Object.assign(
new Text("haha", {fontFamily: "Arial",fontSize: 14.5,fill: 0xd37744,align: "center",
}),
{ anchor: { x: 0.5, y: 0 }, position: { x: -90, y: -70 } }
);
const inputBox = new Sprite(Texture.from("assets/UIShop/UI1_02.png")); // 输入框图
inputBox.width = 275;
inputBox.height *= this.app.rat;
inputBox.anchor.set(0.5, 0.5);
inputBox.position.set(-80, -60);
// 显示选中金额的文本
this.inputDisplayText = new Text("", {
fontSize: 18,
fill: 0xb18b5b, // 和金额框颜色一致
fontFamily: "Arial",
fontWeight: "bold",
});
this.inputDisplayText.anchor.set(0.5);
this.inputDisplayText.position.set(-80, -60); // 与 inputBox 对齐
this.inputDisplayText.visible = false; // 初始不显示
const clearInput = new Sprite(Texture.from("assets/UIShop/UI1_17.png")); // 输入框里的叉叉
clearInput.width *= this.app.rat;
clearInput.height *= this.app.rat;
clearInput.anchor.set(0.5, 0.5);
clearInput.position.set(40, -60);
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(80, -60);
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(180, -60);
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(180, -60);
this.freeAmountText = Object.assign(
new Text("haha", {
fontFamily: "Arial",
fontSize: 14,
fill: 0xcf9f6c,
align: "center",
fontWeight: "bold",
}),
{ anchor: { x: 0.5, y: 0.5 }, position: { x: 180, y: -80 } }
);
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: 185, y: -50 } }
);
this.selectAmountText = Object.assign(
new Text("haha", {
fontFamily: "Arial",
fontSize: 18,
fill: 0xcf9f6c,
align: "center",
fontWeight: "bold",
}),
{ anchor: { x: 0.5, y: 0.5 }, position: { x: -10, y: -20 } }
);
// 将所有子元素添加到 mainContainer
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表示没有选中
// 调整金额框的间距参数
const startX = -220; // 起始X坐标(靠左右位置)
const startY = 30; // 起始Y坐标
const spacingX = 100; // X轴间距(左右间隔)
const spacingY = 60; // Y轴间距(上下间隔)
for (let i = 0; i < 8; 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);
// 5. 创建文本显示 - 星星
const starText = new Text("", {
fontSize: 11,
fill: 0xffffff, // 白色
fontWeight: "normal",
fontFamily: "Arial, sans-serif",
});
starText.anchor.set(0.5, 0.5);
// 计算位置（4个一排，共2排）
const row = Math.floor(i / 4); // 第几行：0或1
const col = i % 4; // 第几列：0,1,2,3
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;
}
// 设置金额文本（非零才加 Rp 前缀）
const label = this._rpLabel || "Rp";
amountText.text = count > 0 ? `${label} ${count}` : "0";
starText.text = starCount > 0 ? `+${starCount}` : "+0";
// 给金额图添加点击事件
amount.on("pointerdown", () => {
// 如果支付弹窗已显示，则忽略点击
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;
// 输入框显示为 "Rp 数值"
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";
}
});
// 将创建的元素存储到数组
this.amountSprites.push(amount);
this.starSprites.push(star);
this.shineSprites.push(shine);
// 按层级顺序添加到容器（从下到上）
this.mainContainer.addChild(amount); // 最底层：金额图
this.mainContainer.addChild(shine); // 中间层：发光边框
this.mainContainer.addChild(star); // 最上层：五角星
this.mainContainer.addChild(starText); // 星星数量文本
this.mainContainer.addChild(amountText); // 金额文本
}
// === 充值按钮：亮色（可点）与灰色（不可点）切换 ===
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 = "none"; // 初始禁用交互
rechargeYes.cursor = "default";
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: 20,
fill: 0xffffff,
align: "center",
stroke: "#FFA500",
}),
{ anchor: { x: 0.5, y: 0.5 }, position: { x: -20, y: 135 } }
);
// 添加到容器
this.mainContainer.addChild(rechargeYes, rechargeNo, this.depositText2);
this.rechargeYes = rechargeYes;
this.rechargeNo = rechargeNo;
// 绑定点击事件：只有亮色按钮才可点击
rechargeYes.on("pointerdown", async () => {
// 如果支付弹窗已显示，则忽略点击
if (this.bankPopupContainer && this.bankPopupContainer.visible) {
return;
}
if (this.selectedIndex !== -1) {
console.log("充值发起支付请求，金额:", this.selectedAmountValue, "赠送星数:", this.selectedStarCount,"id:", this.id);
// 调起支付逻辑(获取支付银行接口)
await this.SendShopBankData(false); // 传入false表示不是初始化调用
}
});
// =======点击充值弹窗开始=========
this.bankPopupContainer = new Container();
this.bankPopupContainer.visible = false; // 初始隐藏
this.bankPopupContainer.zIndex = 100; // 确保置顶
this.bankPopupContainer.position.set(-270, -110); // 居中对齐主界面
// 创建弹窗背景
const bank = new Sprite(Texture.from("assets/UIShop/商店底1_1.png"));
bank.width = 550;
bank.height = 250;
bank.position.set(0, 0);
this.bankPopupContainer.addChild(bank);
this.tipText = new Text("请选择支付方式", {fontFamily: "Arial",fontSize: 24,fill: 0xffffff,align: "center"
});
this.tipText.anchor.set(0.5,0.5);
this.tipText.position.set(275, 50);
this.bankPopupContainer.addChild(this.tipText);
console.log("银行值拉拉数据~~~", this.bankList);
// 关闭充值弹窗按钮
const closeBankBtn = new Sprite(Texture.from("assets/UIShop/UI1_03.png"));
closeBankBtn.width *= this.app.rat;
closeBankBtn.height *= this.app.rat;
closeBankBtn.position.set(500, -10);
closeBankBtn.eventMode = "static";
closeBankBtn.cursor = "pointer";
closeBankBtn.on("pointerdown", () => {
this.bankPopupContainer.visible = false;
if (this.overlay) this.overlay.visible = false;//恢复主界面亮度
if (this.closeButton) {//主界面叉叉按钮可点击
this.closeButton.eventMode = "static";
this.closeButton.cursor = "pointer";
}
// 恢复主界面的交互性
this.enableMainContainerInteractivity(true);
});
this.bankPopupContainer.addChild(closeBankBtn);
// 将 bankPopupContainer 添加到 container中
this.container.addChild(this.bankPopupContainer);
// =======充值弹窗结束=========
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(220, 140);
this.depositHistory.interactive = true;
this.depositHistory.buttonMode = true;
this.mainContainer.addChild(this.depositHistory);
this.depositHistory.on('pointerdown', () => { // 添加点击事件监听器
// 如果支付弹窗已显示，忽略点击
if (this.bankPopupContainer && this.bankPopupContainer.visible) {
return;
}
console.log('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(180, 140);
this.depositHistoryText = Object.assign(//提示历史文字(历史)
new Text("haha", {
fontFamily: "Arial",
fontSize: 12,
fill: 0xd87910,
align: "center"
}),
{ anchor: { x: 0.5, y: 0.5 }, position: { x: 235, y: 139 } }
);
this.mainContainer.addChild(threeStripes, this.depositHistoryText);
// === 弹窗与遮罩 ===
this.overlay = new Graphics();
this.overlay.beginFill(0x000000, 0.6);
this.overlay.drawRect(-375, -667, 750, 1334);
this.overlay.endFill();
this.overlay.visible = true;
this.container.addChild(this.overlay);
const shopBg3 = new Sprite(Texture.from("assets/UIShop/商店底3.png"));
shopBg3.width = 450;
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 + 48, shopBg3.height / 2 - 10);
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, 80);
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 (this.overlay) this.overlay.visible = false;
if (this.closeButton) {
this.closeButton.eventMode = "static";
this.closeButton.cursor = "pointer";
}
});
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;
}
// 启用或禁用主界面的交互性
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;
// 开启动画
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.overlay) this.overlay.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();
}
hide() {
this.container.visible = false;
}
localize() {
this.buttonText.text = super.getLocalWords("Confirmation");
this.introduceText.text = super.getLocalWords("introduce");
this.depositText.text = super.getLocalWords("deposit");
this.depositText2.text = super.getLocalWords("deposit");
this.topUpAmountText.text = super.getLocalWords("topUpAmount");
this.inputAmountText.text = super.getLocalWords("inputAmount");
this.freeAmountText.text = super.getLocalWords("freeAmount");
this._rpLabel = super.getLocalWords("rp") || "Rp";
this.rpText.text = `${this._rpLabel} 0`; // 默认状态
this.selectAmountText.text = super.getLocalWords("selectAmount");
this.inputAmountText.visible = true;
this.depositHistoryText.text = super.getLocalWords("depositHistory");
this.tipText.text = super.getLocalWords("tip");
}
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 SendShopBankData(isInit = false) {
try {
// 如果是初始化调用，使用第一个商品的ID
const goodsId = isInit && this.shopGoodsList.length > 0 ? this.shopGoodsList[0].id : this.id;
const requestData = {
token: gameData.gameToken,
playerIndex: gameData.playerDto.playerIndex,
goodsId: goodsId,
};
console.log("发送请求参数:", requestData);
const response = await networkMgr.postMessage("getPaymentBank", requestData);
if (!response) {
throw new Error("接口返回空数据");
}
this.bankList = response.bankList || response["bankList"] || [];
console.log("获取支付银行数据:", this.bankList);
// 如果不是初始化调用，显示弹窗
if (!isInit) {
this.bankPopupContainer.visible = true;//获取到了数据就显示弹窗
this.overlay.visible = true;//背景变黑暗
if (this.closeButton) {//主界面叉叉按钮 不可点击
this.closeButton.eventMode = "none";
this.closeButton.cursor = "default";
}
this.enableMainContainerInteractivity(false);// 禁止主界面的交互
}
} catch (error) {
console.error("获取银行数据失败:", error);
this.bankList = [];
}
}
}
export const UIShop = new uiShop();
需求:同上获取到支付银行接口，里面的bankList是有5条数据，按照索引来的，
打印是0: {id: 10, bankId: 1, bankCode: 'DANA', payoutLimit: 20000}bankCode: "DANA"bankId: 1id: 10payoutLimit: 20000[[Prototype]]: Object1: {id: 20, bankId: 2, bankCode: 'OVO', payoutLimit: 20000}2: {id: 30, bankId: 8, bankCode: 'QRIS', payoutLimit: 20000}3: {id: 50, bankId: 4, bankCode: 'BNI', payoutLimit: 20000}4: {id: 60, bankId: 5, bankCode: 'BRI', payoutLimit: 20000}
然后我希望支付弹出框里面显示5个这个图assets/UIShop/UI1_22.png，
然后5条数据映射这五个图，每条数据有属于
自己的bankId、id、bankCode、payoutLimit，点击这五个图的时候也套一个这个发光边框assets/UIShop/UI1_11.png，
这样我看得出来是点击的哪个bankId图，然后打印我点击的那个图bankId、id、bankCode、payoutLimit，弹出框就显示五个图片不用显示文字，
我只是想映射下，
懂我意思吗，再改一下 全文写下来，记得别落了注释,谢谢
本文介绍了一个HTML5结合SQLite的应用场景下，如何使用JavaScript创建一个用于模态输入和修改数据的遮罩层。该遮罩层能够自适应屏幕大小并随页面滚动而居中显示，同时提供了关闭功能。
扫一扫
2170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
