105 lines
4.5 KiB
JavaScript
105 lines
4.5 KiB
JavaScript
import { applyLang, bindHeader, connectToApp, createMask, get, getUserId, post, t, toast } from "../bd-static/shared.js";
|
|
|
|
let ways = [];
|
|
let cards = [];
|
|
let form = { userId: getUserId(), cardType: "", cardName: "", cardNo: "", payee: "" };
|
|
|
|
bindHeader("bank_card");
|
|
applyLang();
|
|
document.getElementById("addButton").addEventListener("click", openAddSheet);
|
|
connectToApp().then(loadData);
|
|
|
|
async function loadData() {
|
|
try {
|
|
const [wayResponse, cardResponse] = await Promise.all([get("/wallet/bank/withdrawal_ways"), get("/wallet/bank-card/list")]);
|
|
ways = wayResponse.body || [];
|
|
cards = cardResponse.body || [];
|
|
render();
|
|
} catch (error) {
|
|
toast(error.response?.errorMsg || error.message);
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
const current = cards.find((item) => item.use);
|
|
document.getElementById("currentCard").innerHTML = current
|
|
? `<div>${t("payee")}: ${current.payee || "-"}</div><div class="subtle">${t("card_number")}: ${current.cardNo || "-"}</div>`
|
|
: `<div class="subtle">${t("no_bank_cards_in_use")}</div>`;
|
|
const list = document.getElementById("cardList");
|
|
list.innerHTML = "";
|
|
if (!cards.length) {
|
|
list.innerHTML = `<article class="card card-pad"><div class="subtle">${t("no_bank_cards_added")}</div></article>`;
|
|
return;
|
|
}
|
|
cards.forEach((item) => {
|
|
const card = document.createElement("article");
|
|
card.className = "card card-pad";
|
|
card.style.marginBottom = "10px";
|
|
card.innerHTML = `
|
|
<div>${t("payee")}: ${item.payee || "-"}</div>
|
|
<div class="subtle">${t("card_number")}: ${item.cardNo || "-"}</div>
|
|
<div class="row" style="margin-top:10px">
|
|
<button class="danger-btn" type="button" data-delete>${t("delete")}</button>
|
|
${item.use ? `<button class="soft-btn" type="button" disabled>${t("using")}</button>` : `<button class="primary-btn" type="button" data-use>${t("use")}</button>`}
|
|
</div>
|
|
`;
|
|
card.querySelector("[data-delete]").addEventListener("click", () => deleteCard(item.id));
|
|
const use = card.querySelector("[data-use]");
|
|
if (use) use.addEventListener("click", () => useCard(item.id));
|
|
list.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function openAddSheet() {
|
|
form = { userId: getUserId(), cardType: "", cardName: "", cardNo: "", payee: "" };
|
|
const sheet = document.createElement("section");
|
|
sheet.className = "sheet";
|
|
sheet.innerHTML = `
|
|
<div class="sheet-title">${t("add_new_payment_method")}</div>
|
|
<div class="subtle">${t("withdrawal_method")}:</div>
|
|
<div class="input-box"><select class="field" id="cardType"><option value="">${t("choose_withdrawal_method")}</option>${ways.map((way) => `<option value="${way}">${way}</option>`).join("")}</select></div>
|
|
<div id="cardNameWrap" hidden><div class="subtle">${t("card_name")}:</div><div class="input-box"><input class="field" id="cardName" placeholder="${t("enter_card_name")}"></div></div>
|
|
<div class="subtle">${t("card_number")}:</div><div class="input-box"><input class="field" id="cardNo" placeholder="${t("enter_card_number")}"></div>
|
|
<div class="subtle">${t("payee")}:</div><div class="input-box"><input class="field" id="payee" placeholder="${t("enter_payee")}"></div>
|
|
<div style="display:flex;justify-content:center;margin-top:10px"><button class="primary-btn" id="confirmAdd" type="button">${t("confirm")}</button></div>
|
|
`;
|
|
createMask(sheet);
|
|
const type = sheet.querySelector("#cardType");
|
|
type.addEventListener("change", () => {
|
|
form.cardType = type.value;
|
|
form.cardName = type.value === "USDT" ? "USDT" : "";
|
|
sheet.querySelector("#cardNameWrap").hidden = type.value !== "BANK";
|
|
});
|
|
sheet.querySelector("#confirmAdd").addEventListener("click", async () => {
|
|
form.cardName = type.value === "BANK" ? sheet.querySelector("#cardName").value.trim() : form.cardName;
|
|
form.cardNo = sheet.querySelector("#cardNo").value.trim();
|
|
form.payee = sheet.querySelector("#payee").value.trim();
|
|
if (!form.cardType || !form.cardName || !form.cardNo || !form.payee) return;
|
|
try {
|
|
await post("/wallet/bank-card/add", form);
|
|
document.getElementById("modalMask").remove();
|
|
await loadData();
|
|
} catch (error) {
|
|
toast(error.response?.errorMsg || error.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function deleteCard(id) {
|
|
try {
|
|
await post("/wallet/bank-card/delete", { id });
|
|
await loadData();
|
|
} catch (error) {
|
|
toast(error.response?.errorMsg || error.message);
|
|
}
|
|
}
|
|
|
|
async function useCard(id) {
|
|
try {
|
|
await post("/wallet/bank-card/use", { id });
|
|
await loadData();
|
|
} catch (error) {
|
|
toast(error.response?.errorMsg || error.message);
|
|
}
|
|
}
|