//银行输入框弹窗
showBankEditPopup(bankData) {
// 检查银行图标路径
const iconPath = this.bankIconMap[bankData.bankCode];
if (!iconPath) {
console.warn("未找到银行图标:", bankData.bankCode);
return;
}
// 存储当前激活的HTML输入框引用
this.currentActiveInput = null;
this.htmlInput = null; // 初始化htmlInput
// 创建输入框弹窗背景
const popupBg = new Sprite(Texture.from("assets/UIWithdraw/商店底4.png"));
popupBg.anchor.set(0.5, 0.5);
popupBg.position.set(
this.bankBackground.position.x,
this.bankBackground.position.y
);
popupBg.width = this.bankBackground.width;
popupBg.height = this.bankBackground.height;
this.bankPopup.addChild(popupBg);
// 提款方式文字
this.payeeAccountText = new Text("Payee Account", {
fontFamily: "Arial",
fontSize: 40 * this.app.rat,
fill: 0xffffff,
align: "center",
fontWeight: "bold",
stroke: 0x000000,
strokeThickness: 2 * this.app.rat,
});
this.payeeAccountText.anchor.set(0.5, 0.5);
const textX = popupBg.x;
const textY = popupBg.y - popupBg.height / 2 + this.payeeAccountText.height / 2 + 30 * this.app.rat;
this.payeeAccountText.position.set(textX, textY);
this.bankPopup.addChild(this.payeeAccountText);
// === 计算居中位置 ===
const popupCenterX = popupBg.x;
const popupCenterY = popupBg.y;
const popupWidth = popupBg.width;
const popupHeight = popupBg.height;
const labelStartX = popupBg.x - popupWidth / 2 + 80 * this.app.rat;
const inputStartX = labelStartX + 250 * this.app.rat;
const inputWidth = 600 * this.app.rat;
const inputHeight = 60 * this.app.rat;
// === 第一行：银行名称和图标 ===
const firstRowY = popupBg.y - popupHeight / 2 + 120 * this.app.rat;
// Bank Name 标签
const bankNameLabel = new Text("Bank Name", {
fontFamily: "Arial",
fontSize: 30 * this.app.rat,
fill: 0x000000
});
bankNameLabel.anchor.set(0, 0.5);
bankNameLabel.position.set(labelStartX, firstRowY+15);
this.bankPopup.addChild(bankNameLabel);
// 银行图标背景框
const frameSprite = new Sprite(Texture.from("assets/UIWithdraw/UI1_22.png"));
frameSprite.width = 150 * this.app.rat;
frameSprite.height = 100 * this.app.rat;
frameSprite.anchor.set(0.5, 0.5);
frameSprite.position.set(inputStartX + 50 * this.app.rat, firstRowY+20);
this.bankPopup.addChild(frameSprite);
// 银行图标
const bankIcon = new Sprite(Texture.from(this.bankIconMap[bankData.bankCode]));
bankIcon.anchor.set(0.5, 0.5);
bankIcon.width = 100 * this.app.rat;
bankIcon.height = 60 * this.app.rat;
bankIcon.position.set(frameSprite.x, frameSprite.y);
this.bankPopup.addChild(bankIcon);
// === 第二行：手机号码输入 ===
const secondRowY = firstRowY + 150 * this.app.rat;
const phoneLabel = new Text("Phone Number", {
fontFamily: "Arial",
fontSize: 30 * this.app.rat,
fill: 0x000000
});
phoneLabel.anchor.set(0, 0.5);
phoneLabel.position.set(labelStartX, secondRowY);
this.bankPopup.addChild(phoneLabel);
// Phone Number 输入框背景
const phoneInputBg = new Graphics();
phoneInputBg.beginFill(0x5c2a23);
phoneInputBg.lineStyle(2 * this.app.rat, 0x654321);
phoneInputBg.drawRect(
inputStartX-10,
secondRowY - inputHeight / 2,
inputWidth,
inputHeight
);
phoneInputBg.endFill();
phoneInputBg.eventMode = 'static';
phoneInputBg.cursor = 'pointer';
this.bankPopup.addChild(phoneInputBg);
// Phone Number 输入文本
const phoneInputText = new Text("", {
fontFamily: "Arial",
fontSize: 22 * this.app.rat,
fill: 0xFFFFFF,
fontWeight: "bold"
});
phoneInputText.anchor.set(0, 0.5);
phoneInputText.position.set(
phoneInputBg.x + 15 * this.app.rat,
phoneInputBg.y + phoneInputBg.height / 2
);
this.bankPopup.addChild(phoneInputText);
// === 第三行：收款账户输入 ===
const thirdRowY = secondRowY + 100 * this.app.rat;
const accountLabel = new Text("Payee Account", {
fontFamily: "Arial",
fontSize: 30 * this.app.rat,
fill: 0x000000
});
accountLabel.anchor.set(0, 0.5);
accountLabel.position.set(labelStartX, thirdRowY);
this.bankPopup.addChild(accountLabel);
// Payee Account 输入框背景
const accountInputBg = new Graphics();
accountInputBg.beginFill(0x5c2a23);
accountInputBg.lineStyle(2 * this.app.rat, 0x654321);
accountInputBg.drawRect(
inputStartX-10,
thirdRowY - inputHeight / 2,
inputWidth,
inputHeight
);
accountInputBg.endFill();
accountInputBg.eventMode = 'static';
accountInputBg.cursor = 'pointer';
this.bankPopup.addChild(accountInputBg);
// Payee Account 输入文本
const accountInputText = new Text("", {
fontFamily: "Arial",
fontSize: 22 * this.app.rat,
fill: 0xFFFFFF,
fontWeight: "bold"
});
accountInputText.anchor.set(0, 0.5);
accountInputText.position.set(
accountInputBg.x + 15 * this.app.rat,
accountInputBg.y + accountInputBg.height / 2
);
this.bankPopup.addChild(accountInputText);
// === 保存按钮 ===
const saveButtonY = thirdRowY + 100 * this.app.rat;
const saveButton = new Sprite(Texture.from("assets/UIWithdraw/UI1_09.png"));
saveButton.position.set(popupCenterX - 120 * this.app.rat, saveButtonY-10);
saveButton.width = 300 * this.app.rat;
saveButton.height = 90 * this.app.rat;
saveButton.eventMode = 'static';
saveButton.cursor = 'pointer';
this.bankPopup.addChild(saveButton);
this.saveText = new Text(super.getLocalWords("confirmationText"), {
fontFamily: "Arial",
fontSize: 40 * this.app.rat,
fill: 0xFFFFFF,
fontWeight: "bold"
});
this.saveText.anchor.set(0.5);
this.saveText.position.set(
saveButton.x + saveButton.width / 2,
saveButton.y + saveButton.height / 2
);
this.bankPopup.addChild(this.saveText);
// === 关闭按钮 ===
const closeButton = new Sprite(Texture.from("assets/UIWithdraw/UI8_6.png"));
closeButton.anchor.set(0.5);
closeButton.width = 38 * this.app.rat;
closeButton.height = 37 * this.app.rat;
closeButton.position.set(
popupBg.x + popupWidth / 2 - 60 * this.app.rat,
popupBg.y - popupHeight / 2 + 48 * this.app.rat
);
closeButton.eventMode = 'static';
closeButton.cursor = 'pointer';
this.bankPopup.addChild(closeButton);
// === 输入框点击事件处理 ===
const setupInput = (inputBg, inputText, inputType = "text") => {
inputBg.on('pointerdown', (event) => {
event.stopPropagation();
console.log("this.currentActiveInput~~~"+this.currentActiveInput);
if (this.currentActiveInput) {
this.completeCurrentInput();
}
// 获取输入框在屏幕上的位置
const canvasBounds = this.app.view.getBoundingClientRect();
const inputBounds = inputBg.getBounds();
// 创建HTML输入框
this.htmlInput = document.createElement('input');
this.htmlInput.type = inputType;
this.htmlInput.style.position = 'fixed';
this.htmlInput.style.left = `${canvasBounds.left + inputBounds.x}px`;
this.htmlInput.style.top = `${canvasBounds.top + inputBounds.y}px`;
this.htmlInput.style.width = `${inputBounds.width}px`;
this.htmlInput.style.height = `${inputBounds.height}px`;
this.htmlInput.style.fontSize = '22px';
this.htmlInput.style.padding = '0 15px';
this.htmlInput.style.border = 'none';
this.htmlInput.style.outline = 'none';
this.htmlInput.style.backgroundColor = 'transparent';
this.htmlInput.style.color = '#FFFFFF';
this.htmlInput.style.zIndex = '10000';
this.htmlInput.style.caretColor = '#FFFFFF'; // 光标颜色
this.htmlInput.value = inputText.text;
document.body.appendChild(this.htmlInput);
// 存储当前激活的输入信息
this.currentActiveInput = {
inputText,
handleKeydown: null,
handleOutsideClick: null
};
this.htmlInput.focus(); // 聚焦并选中文本
this.htmlInput.select();
// 实时更新输入内容到PIXI文本
const updateText = () => {
inputText.text = this.htmlInput.value;
};
// 输入事件监听 - 实时更新
this.htmlInput.addEventListener('input', updateText);
// 键盘事件处理
const handleKeydown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
this.completeCurrentInput();
}
};
// 点击外部关闭的处理
const handleOutsideClick = (e) => {
if (e.target !== this.htmlInput) {
this.completeCurrentInput();
}
};
// 存储事件处理器以便清理
this.currentActiveInput.handleKeydown = handleKeydown;
this.currentActiveInput.handleOutsideClick = handleOutsideClick;
// 绑定事件
document.addEventListener('keydown', handleKeydown);
setTimeout(() => {
document.addEventListener('mousedown', handleOutsideClick);
}, 100);
});
};
// 设置输入框
setupInput(phoneInputBg, phoneInputText, "tel");
setupInput(accountInputBg, accountInputText, "text");
// 完成当前输入的方法
this.completeCurrentInput = () => {
if (this.currentActiveInput) {
const { inputText, handleKeydown, handleOutsideClick } = this.currentActiveInput;
if (this.htmlInput && document.body.contains(this.htmlInput)) {
// 先更新PIXI文本
inputText.text = this.htmlInput.value;
// 强制刷新显示
inputText.alpha = 0;
setTimeout(() => {inputText.alpha = 1;
}, 10);
// 移除HTML输入框
document.body.removeChild(this.htmlInput);
}
// 移除事件监听器
if (handleKeydown) {
document.removeEventListener('keydown', handleKeydown);
}
if (handleOutsideClick) {
document.removeEventListener('mousedown', handleOutsideClick);
}
this.currentActiveInput = null;
this.htmlInput = null;
this.app.renderer.render(this.app.stage);
}
};
// 保存所有弹窗元素的引用
const popupElements = [
phoneInputText, accountInputText,
popupBg, bankNameLabel, frameSprite, bankIcon,
phoneLabel, phoneInputBg,
accountLabel, accountInputBg,
saveButton, this.saveText, closeButton,
this.payeeAccountText
];
// 关闭按钮点击事件
closeButton.on('pointerdown', () => {
this.completeCurrentInput();// 当前输入
popupElements.forEach(element => { // 移除所有PIXI元素
if (element && element.parent) {
this.bankPopup.removeChild(element);
}
});
// 清理方法引用
this.completeCurrentInput = null;
this.currentActiveInput = null;
this.htmlInput = null;
});
// 保存按钮点击事件
saveButton.on('pointerdown', () => {
console.log("保存银行信息");
console.log("手机号码:", phoneInputText.text);
console.log("收款账户:", accountInputText.text);
// 先完成当前输入
this.completeCurrentInput();
// 然后关闭弹窗
closeButton.emit('pointerdown');
});
}需求: 两个输入框 输入值 但是框里面没显示这是怎么回事
最新发布
本文介绍如何在移动应用开发中，通过`fixed`定位配合父元素padding调整，确保提交按钮始终显示在底部，避免遮挡主要内容。关键在于理解如何处理浮动和空间布局。
扫一扫
到【灌水乐园】发言
3051
