支付页优化
This commit is contained in:
parent
5b46e38478
commit
0638f9acde
|
|
@ -154,223 +154,507 @@
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 从URL中提取参数
|
// 支付页面模块化实现
|
||||||
function getQueryParam(param) {
|
|
||||||
const queryString = window.location.search.substring(1);
|
|
||||||
const params = queryString.split("&");
|
|
||||||
for (let i = 0; i < params.length; i++) {
|
|
||||||
const [key, value] = params[i].split("=");
|
|
||||||
if (key === param) {
|
|
||||||
return decodeURIComponent(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示Loading效果
|
// ========== 配置模块 ==========
|
||||||
function showLoading() {
|
const CONFIG = {
|
||||||
document.getElementById("payment-info").style.display = "none";
|
API: {
|
||||||
document.getElementById("pay-container").style.display = "none";
|
LIST: '/pay/front/api/v1/payPage/list',
|
||||||
document.getElementById("loading").style.display = "block";
|
SUBMIT: '/pay/front/api/v1/payPage/submit',
|
||||||
}
|
QUERY: '/pay/front/api/v1/payPage/query'
|
||||||
|
},
|
||||||
|
POLLING: {
|
||||||
|
MAX_ATTEMPTS: 30,
|
||||||
|
DELAY: 2000,
|
||||||
|
TIMEOUT: 60000,
|
||||||
|
REQUEST_TIMEOUT: 10000
|
||||||
|
},
|
||||||
|
LOCAL_STORAGE: {
|
||||||
|
AUTO_REDIRECT: 'auto-redirect'
|
||||||
|
},
|
||||||
|
PAYMENT_STATUS: {
|
||||||
|
PROCESSING: 2,
|
||||||
|
SUCCESS: 3
|
||||||
|
},
|
||||||
|
REDIRECT_DELAY: 3000
|
||||||
|
};
|
||||||
|
|
||||||
// 关闭Loading效果
|
// ========== 工具函数模块 ==========
|
||||||
function closeLoading() {
|
const Utils = {
|
||||||
document.getElementById("loading").style.display = "none";
|
// 从URL中提取参数
|
||||||
document.getElementById("payment-info").style.display = "block";
|
getQueryParam(param) {
|
||||||
document.getElementById("pay-container").style.display = "block";
|
const queryString = window.location.search.substring(1);
|
||||||
}
|
const params = queryString.split("&");
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
// 处理支付回调
|
const [key, value] = params[i].split("=");
|
||||||
function handlePaymentCallback() {
|
if (key === param) {
|
||||||
const id = getQueryParam("no");
|
return decodeURIComponent(value);
|
||||||
if (!id) {
|
|
||||||
closeLoading();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// alert(`no:${id}`);
|
|
||||||
// 查询订单状态
|
|
||||||
fetch(`/pay/front/api/v1/payPage/query?no=${id}`, {
|
|
||||||
method: "POST",
|
|
||||||
})
|
|
||||||
.then(async (response) => {
|
|
||||||
if (!response.ok) throw new Error("请求失败");
|
|
||||||
return await response.json();
|
|
||||||
})
|
|
||||||
.then((data) => {
|
|
||||||
closeLoading();
|
|
||||||
// alert(`订单状态:${data.status}`);
|
|
||||||
switch (data.status) {
|
|
||||||
case 2: // 处理中
|
|
||||||
handlePaymentCallback(); // 重查状态
|
|
||||||
break;
|
|
||||||
case 3: // 支付成功
|
|
||||||
// alert(data.return_url);
|
|
||||||
if (data.return_url) {
|
|
||||||
window.location.href = data.return_url; // 自动跳转
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default: // 其他状态（待支付/失败/关闭）
|
|
||||||
// alert("其他状态（待支付");
|
|
||||||
fetchPaymentMethods();
|
|
||||||
// window.location.reload();
|
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
.catch((error) => {
|
return null;
|
||||||
// closeLoading();
|
},
|
||||||
window.location.reload();
|
|
||||||
});
|
// 验证订单号格式
|
||||||
}
|
validateOrderNumber(orderNo) {
|
||||||
|
// 订单号格式验证：假设订单号由字母、数字、下划线组成，长度在10-32之间
|
||||||
|
const orderNoPattern = /^[a-zA-Z0-9_]{10,32}$/;
|
||||||
|
return orderNoPattern.test(orderNo);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查是否为同域请求
|
||||||
|
isSameOrigin(url) {
|
||||||
|
const parser = document.createElement('a');
|
||||||
|
parser.href = url;
|
||||||
|
return parser.origin === window.location.origin;
|
||||||
|
},
|
||||||
|
|
||||||
// 获取支付方式列表
|
// 显示Loading效果
|
||||||
function fetchPaymentMethods() {
|
showLoading(text = "支付处理中，请稍等...") {
|
||||||
const id = getQueryParam("no");
|
document.getElementById("payment-info").style.display = "none";
|
||||||
if (id) {
|
document.getElementById("pay-container").style.display = "none";
|
||||||
fetch(`/pay/front/api/v1/payPage/list?id=${id}`, {
|
|
||||||
method: "POST",
|
const loadingElement = document.getElementById("loading");
|
||||||
})
|
const loadingText = loadingElement.querySelector(".loading-text");
|
||||||
.then(async (response) => {
|
if (loadingText) {
|
||||||
if (response.ok) {
|
loadingText.textContent = text;
|
||||||
const data = await response.json();
|
}
|
||||||
console.log(data);
|
|
||||||
if (data.code !== 200) {
|
loadingElement.style.display = "block";
|
||||||
throw new Error("无效");
|
},
|
||||||
} else {
|
|
||||||
return data;
|
// 关闭Loading效果
|
||||||
}
|
closeLoading() {
|
||||||
} else {
|
document.getElementById("loading").style.display = "none";
|
||||||
throw new Error("无效");
|
document.getElementById("payment-info").style.display = "block";
|
||||||
}
|
document.getElementById("pay-container").style.display = "block";
|
||||||
})
|
},
|
||||||
.then((data) => {
|
|
||||||
// 处理返回的数据，例如渲染支付方式列表
|
// 清除支付状态标记
|
||||||
if (data === null || data.data.length === 0) {
|
clearRedirectFlag() {
|
||||||
const pay = document.getElementById("pay");
|
localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||||
pay.innerHTML = "<h3>支付环境异常，请检查</h3>";
|
},
|
||||||
} else if (data.data.length === 1) {
|
|
||||||
if (localStorage.getItem("auto-redirect") != 2) {
|
// 设置支付状态标记
|
||||||
// 否则设置自动跳转标记，并跳转
|
setRedirectFlag(value) {
|
||||||
localStorage.setItem("auto-redirect", 2);
|
localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, value);
|
||||||
window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
|
},
|
||||||
} else {
|
|
||||||
closeLoading();
|
// 获取支付状态标记
|
||||||
renderPaymentMethods(data.data);
|
getRedirectFlag() {
|
||||||
}
|
return localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||||
} else {
|
|
||||||
closeLoading();
|
|
||||||
// 多种支付方式，展示支付界面
|
|
||||||
renderPaymentMethods(data.data);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
closeLoading();
|
|
||||||
console.error("获取支付方式失败:", error);
|
|
||||||
// const pay = document.getElementById("pay");
|
|
||||||
// pay.innerHTML =
|
|
||||||
// '<h3 style="color: red;">获取支付方式失败，请刷新重试</h3>';
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
closeLoading();
|
|
||||||
console.error("Order no not found in URL");
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 渲染支付方式列表
|
// ========== 轮询处理模块 ==========
|
||||||
function renderPaymentMethods(paymentMethods) {
|
const PollingManager = {
|
||||||
const pay = document.getElementById("pay");
|
// 处理轮询超时
|
||||||
pay.innerHTML = "<h3>请选择支付方式</h3>";
|
handleTimeout() {
|
||||||
|
Utils.closeLoading();
|
||||||
|
this.showError("支付结果查询超时，请稍后手动查询订单状态。");
|
||||||
|
},
|
||||||
|
|
||||||
const paymentList = document.getElementById("payment-list");
|
// 处理超过最大轮询次数
|
||||||
paymentList.innerHTML = "";
|
handleMaxAttempts() {
|
||||||
|
Utils.closeLoading();
|
||||||
|
this.showError("支付结果查询次数已达上限，请稍后手动查询订单状态。");
|
||||||
|
},
|
||||||
|
|
||||||
// 标记是否是第一个支付方式
|
// 显示轮询错误信息
|
||||||
let isFirstMethod = true;
|
showError(message) {
|
||||||
|
const payContainer = document.getElementById("pay-container");
|
||||||
|
payContainer.innerHTML = `
|
||||||
|
<div style="text-align: center; padding: 40px;">
|
||||||
|
<h3 style="color: #ff5500;">支付结果查询失败</h3>
|
||||||
|
<p style="margin: 20px 0;">${message}</p>
|
||||||
|
<div style="display: flex; justify-content: center; gap: 20px;">
|
||||||
|
<button onclick="location.reload()" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
|
||||||
|
重新查询
|
||||||
|
</button>
|
||||||
|
<button onclick="Utils.clearRedirectFlag(); PaymentManager.fetchPaymentMethods()" style="background-color: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
|
||||||
|
返回支付
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
paymentMethods.forEach((method) => {
|
// ========== 支付管理模块 ==========
|
||||||
const listItem = document.createElement("li");
|
const PaymentManager = {
|
||||||
listItem.className = "payment-option";
|
// 处理支付回调
|
||||||
|
handleCallback() {
|
||||||
const radioInput = document.createElement("input");
|
const id = Utils.getQueryParam("no");
|
||||||
radioInput.type = "radio";
|
if (!id || !Utils.validateOrderNumber(id)) {
|
||||||
radioInput.name = "paymentMethod";
|
Utils.closeLoading();
|
||||||
radioInput.value = method.pay_channel_id;
|
console.error("无效的订单号");
|
||||||
radioInput.id = `method-${method.pay_channel_id}`;
|
return;
|
||||||
|
|
||||||
// 如果是第一个支付方式，默认选中
|
|
||||||
if (isFirstMethod) {
|
|
||||||
radioInput.checked = true;
|
|
||||||
listItem.classList.add("selected");
|
|
||||||
isFirstMethod = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const label = document.createElement("label");
|
// 显示查询支付结果的loading
|
||||||
label.htmlFor = `method-${method.pay_channel_id}`;
|
Utils.showLoading("正在查询支付结果...");
|
||||||
label.textContent = method.pay_name;
|
|
||||||
|
// 轮询状态
|
||||||
if (method.icon_url) {
|
const pollState = {
|
||||||
const icon = document.createElement("img");
|
attempts: 0,
|
||||||
icon.src = method.icon_url;
|
startTime: Date.now(),
|
||||||
icon.style.height = "24px";
|
lastDelay: CONFIG.POLLING.DELAY,
|
||||||
icon.style.marginRight = "10px";
|
errorCount: 0
|
||||||
label.prepend(icon);
|
};
|
||||||
|
|
||||||
|
// 取消请求的控制器
|
||||||
|
let abortController = null;
|
||||||
|
|
||||||
|
// 计算动态轮询间隔
|
||||||
|
function getDynamicDelay(attempts, errorCount) {
|
||||||
|
// 初始间隔较短，随着尝试次数增加而延长
|
||||||
|
let baseDelay = CONFIG.POLLING.DELAY;
|
||||||
|
|
||||||
|
// 每5次尝试增加基础间隔
|
||||||
|
const delayIncrease = Math.floor(attempts / 5) * 500;
|
||||||
|
|
||||||
|
// 网络错误时增加额外延迟
|
||||||
|
const errorDelay = errorCount * 1000;
|
||||||
|
|
||||||
|
// 计算最终延迟，不超过最大间隔
|
||||||
|
const finalDelay = Math.min(baseDelay + delayIncrease + errorDelay, 10000);
|
||||||
|
|
||||||
|
return finalDelay;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 执行轮询
|
||||||
|
function pollOrderStatus() {
|
||||||
|
// 检查是否超时
|
||||||
|
if (Date.now() - pollState.startTime > CONFIG.POLLING.TIMEOUT) {
|
||||||
|
PollingManager.handleTimeout();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否超过最大轮询次数
|
||||||
|
if (pollState.attempts >= CONFIG.POLLING.MAX_ATTEMPTS) {
|
||||||
|
PollingManager.handleMaxAttempts();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
pollState.attempts++;
|
||||||
|
|
||||||
|
// 取消之前的请求（如果有）
|
||||||
|
if (abortController) {
|
||||||
|
abortController.abort();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新的取消控制器
|
||||||
|
abortController = new AbortController();
|
||||||
|
|
||||||
|
// 查询订单状态
|
||||||
|
fetch(`${CONFIG.API.QUERY}?no=${id}`, {
|
||||||
|
method: "POST",
|
||||||
|
timeout: CONFIG.POLLING.REQUEST_TIMEOUT,
|
||||||
|
signal: abortController.signal
|
||||||
|
})
|
||||||
|
.then(async (response) => {
|
||||||
|
if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
|
||||||
|
return await response.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
pollState.errorCount = 0; // 重置错误计数
|
||||||
|
switch (data.status) {
|
||||||
|
case CONFIG.PAYMENT_STATUS.PROCESSING: // 处理中
|
||||||
|
// 计算动态延迟
|
||||||
|
const dynamicDelay = getDynamicDelay(pollState.attempts, pollState.errorCount);
|
||||||
|
pollState.lastDelay = dynamicDelay;
|
||||||
|
|
||||||
|
// 延迟后继续轮询
|
||||||
|
setTimeout(pollOrderStatus, dynamicDelay);
|
||||||
|
break;
|
||||||
|
case CONFIG.PAYMENT_STATUS.SUCCESS: // 支付成功
|
||||||
|
PaymentManager.handlePaymentSuccess(data);
|
||||||
|
break;
|
||||||
|
default: // 其他状态（待支付/失败/关闭）
|
||||||
|
PaymentManager.handlePaymentCanceled();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
// 检查是否为取消错误
|
||||||
|
if (error.name === 'AbortError') {
|
||||||
|
console.log("轮询请求已取消");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 网络错误或请求失败
|
||||||
|
console.error("查询订单状态失败:", error);
|
||||||
|
pollState.errorCount++;
|
||||||
|
|
||||||
|
// 如果是第5次或10次失败，显示网络不稳定提示
|
||||||
|
if (pollState.attempts % 5 === 0) {
|
||||||
|
const loadingText = document.querySelector('.loading-text');
|
||||||
|
if (loadingText) {
|
||||||
|
loadingText.textContent = `支付处理中，请稍等...（网络不稳定，正在重试）`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算动态延迟，网络错误时增加延迟
|
||||||
|
const dynamicDelay = getDynamicDelay(pollState.attempts, pollState.errorCount);
|
||||||
|
pollState.lastDelay = dynamicDelay;
|
||||||
|
|
||||||
|
setTimeout(pollOrderStatus, dynamicDelay);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开始轮询
|
||||||
|
pollOrderStatus();
|
||||||
|
},
|
||||||
|
|
||||||
listItem.appendChild(radioInput);
|
// 处理支付成功
|
||||||
listItem.appendChild(label);
|
handlePaymentSuccess(data) {
|
||||||
paymentList.appendChild(listItem);
|
Utils.closeLoading();
|
||||||
|
// 清除自动跳转标记，避免影响后续支付
|
||||||
|
Utils.clearRedirectFlag();
|
||||||
|
|
||||||
|
// 显示支付成功提示
|
||||||
|
const payContainer = document.getElementById("pay");
|
||||||
|
payContainer.innerHTML = `
|
||||||
|
<div style="text-align: center; padding: 40px;">
|
||||||
|
<h3 style="color: #28a745;">支付成功！</h3>
|
||||||
|
<p style="margin: 20px 0; font-size: 16px;">正在为您跳转...<span id="countdown">${Math.ceil(CONFIG.REDIRECT_DELAY / 1000)}</span></p>
|
||||||
|
<p style="color: #666; font-size: 14px;">如果没有自动跳转，请点击下方按钮</p>
|
||||||
|
<button onclick="window.location.href='${data.return_url}'" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 10px;">
|
||||||
|
立即跳转
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 添加倒计时跳转
|
||||||
|
let countdown = Math.ceil(CONFIG.REDIRECT_DELAY / 1000);
|
||||||
|
const countdownElement = document.getElementById("countdown");
|
||||||
|
const countdownInterval = setInterval(() => {
|
||||||
|
countdown--;
|
||||||
|
if (countdownElement) {
|
||||||
|
countdownElement.textContent = countdown;
|
||||||
|
}
|
||||||
|
if (countdown <= 0) {
|
||||||
|
clearInterval(countdownInterval);
|
||||||
|
if (data.return_url) {
|
||||||
|
window.location.href = data.return_url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
// 如果有返回URL，设置跳转
|
||||||
|
if (data.return_url) {
|
||||||
|
// 设置自动跳转
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = data.return_url;
|
||||||
|
}, CONFIG.REDIRECT_DELAY);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// 点击整个区域也可以选择
|
// 处理支付取消
|
||||||
listItem.addEventListener("click", () => {
|
handlePaymentCanceled() {
|
||||||
// 移除所有选中样式
|
Utils.closeLoading();
|
||||||
document.querySelectorAll(".payment-option").forEach((item) => {
|
// 显示支付取消提示
|
||||||
item.classList.remove("selected");
|
const payContainer = document.getElementById("pay");
|
||||||
|
payContainer.innerHTML = `<p style="color: #666; margin-bottom: 20px;">支付已取消，您可以重新选择支付方式</p>`;
|
||||||
|
PaymentManager.fetchPaymentMethods();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取支付方式列表
|
||||||
|
fetchPaymentMethods() {
|
||||||
|
const id = Utils.getQueryParam("no");
|
||||||
|
if (id && Utils.validateOrderNumber(id)) {
|
||||||
|
// 显示获取支付方式的loading
|
||||||
|
Utils.showLoading("正在加载支付方式...");
|
||||||
|
fetch(`${CONFIG.API.LIST}?id=${id}`, {
|
||||||
|
method: "POST"
|
||||||
|
})
|
||||||
|
.then(async (response) => {
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(data);
|
||||||
|
if (data.code !== 200) {
|
||||||
|
throw new Error("无效");
|
||||||
|
} else {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw new Error("无效");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
PaymentManager.processPaymentMethods(data, id);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
Utils.closeLoading();
|
||||||
|
console.error("获取支付方式失败:", error);
|
||||||
|
const pay = document.getElementById("pay");
|
||||||
|
pay.innerHTML = `
|
||||||
|
<h3 style="color: red;">获取支付方式失败</h3>
|
||||||
|
<p style="color: #666;">请检查网络连接或刷新页面重试</p>
|
||||||
|
<button onclick="location.reload()" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
|
||||||
|
刷新重试
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Utils.closeLoading();
|
||||||
|
console.error("Order no not found in URL");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理支付方式数据
|
||||||
|
processPaymentMethods(data, id) {
|
||||||
|
// 处理返回的数据，例如渲染支付方式列表
|
||||||
|
if (data === null || data.data.length === 0) {
|
||||||
|
const pay = document.getElementById("pay");
|
||||||
|
pay.innerHTML = "<h3>支付环境异常，请检查</h3>";
|
||||||
|
} else if (data.data.length === 1) {
|
||||||
|
// 检查是否是从支付页面返回
|
||||||
|
if (Utils.getRedirectFlag() != 2) {
|
||||||
|
// 首次访问且只有一种支付方式，自动跳转
|
||||||
|
Utils.setRedirectFlag(2);
|
||||||
|
window.location.href = `${CONFIG.API.SUBMIT}?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
|
||||||
|
} else {
|
||||||
|
// 从支付页面返回，显示支付方式选择
|
||||||
|
Utils.closeLoading();
|
||||||
|
PaymentManager.renderPaymentMethods(data.data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Utils.closeLoading();
|
||||||
|
// 多种支付方式，展示支付界面
|
||||||
|
PaymentManager.renderPaymentMethods(data.data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 渲染支付方式列表
|
||||||
|
renderPaymentMethods(paymentMethods) {
|
||||||
|
const pay = document.getElementById("pay");
|
||||||
|
pay.innerHTML = "<h3>请选择支付方式</h3>";
|
||||||
|
|
||||||
|
const paymentList = document.getElementById("payment-list");
|
||||||
|
paymentList.innerHTML = "";
|
||||||
|
|
||||||
|
// 标记是否是第一个支付方式
|
||||||
|
let isFirstMethod = true;
|
||||||
|
|
||||||
|
paymentMethods.forEach((method) => {
|
||||||
|
const listItem = document.createElement("li");
|
||||||
|
listItem.className = "payment-option";
|
||||||
|
|
||||||
|
const radioInput = document.createElement("input");
|
||||||
|
radioInput.type = "radio";
|
||||||
|
radioInput.name = "paymentMethod";
|
||||||
|
radioInput.value = method.pay_channel_id;
|
||||||
|
radioInput.id = `method-${method.pay_channel_id}`;
|
||||||
|
|
||||||
|
// 如果是第一个支付方式，默认选中
|
||||||
|
if (isFirstMethod) {
|
||||||
|
radioInput.checked = true;
|
||||||
|
listItem.classList.add("selected");
|
||||||
|
isFirstMethod = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const label = document.createElement("label");
|
||||||
|
label.htmlFor = `method-${method.pay_channel_id}`;
|
||||||
|
label.textContent = method.pay_name;
|
||||||
|
|
||||||
|
if (method.icon_url) {
|
||||||
|
const icon = document.createElement("img");
|
||||||
|
icon.src = method.icon_url;
|
||||||
|
icon.style.height = "24px";
|
||||||
|
icon.style.marginRight = "10px";
|
||||||
|
label.prepend(icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
listItem.appendChild(radioInput);
|
||||||
|
listItem.appendChild(label);
|
||||||
|
paymentList.appendChild(listItem);
|
||||||
|
|
||||||
|
// 点击整个区域也可以选择
|
||||||
|
listItem.addEventListener("click", () => {
|
||||||
|
// 移除所有选中样式
|
||||||
|
document.querySelectorAll(".payment-option").forEach((item) => {
|
||||||
|
item.classList.remove("selected");
|
||||||
|
});
|
||||||
|
// 添加当前选中样式
|
||||||
|
listItem.classList.add("selected");
|
||||||
|
radioInput.checked = true;
|
||||||
});
|
});
|
||||||
// 添加当前选中样式
|
|
||||||
listItem.classList.add("selected");
|
|
||||||
radioInput.checked = true;
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// 添加提交按钮
|
// 添加提交按钮
|
||||||
const submitButton = document.createElement("button");
|
const submitButton = document.createElement("button");
|
||||||
submitButton.type = "button";
|
submitButton.type = "button";
|
||||||
submitButton.textContent = "立即支付";
|
submitButton.textContent = "立即支付";
|
||||||
|
|
||||||
submitButton.onclick = function () {
|
submitButton.onclick = function () {
|
||||||
const no = getQueryParam("no");
|
PaymentManager.submitPayment();
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonContainer = document.createElement("div");
|
||||||
|
buttonContainer.style.textAlign = "center";
|
||||||
|
buttonContainer.appendChild(submitButton);
|
||||||
|
paymentList.appendChild(buttonContainer);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交支付
|
||||||
|
submitPayment() {
|
||||||
|
const no = Utils.getQueryParam("no");
|
||||||
const selectedMethod = document.querySelector(
|
const selectedMethod = document.querySelector(
|
||||||
'input[name="paymentMethod"]:checked'
|
'input[name="paymentMethod"]:checked'
|
||||||
);
|
);
|
||||||
if (selectedMethod) {
|
if (selectedMethod) {
|
||||||
window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${selectedMethod.value}&no=${no}`;
|
// 显示加载状态
|
||||||
|
Utils.showLoading();
|
||||||
|
// 尝试导航到支付页面，如果失败则显示错误
|
||||||
|
try {
|
||||||
|
Utils.setRedirectFlag(2);
|
||||||
|
window.location.href = `${CONFIG.API.SUBMIT}?pay_channel_id=${selectedMethod.value}&no=${no}`;
|
||||||
|
// 设置超时检查，如果长时间未跳转则显示错误
|
||||||
|
setTimeout(() => {
|
||||||
|
Utils.closeLoading();
|
||||||
|
const payContainer = document.getElementById("pay");
|
||||||
|
payContainer.innerHTML = `
|
||||||
|
<h3 style="color: red;">支付提交超时</h3>
|
||||||
|
<p style="color: #666;">请检查网络连接并重试</p>
|
||||||
|
<button onclick="location.reload()" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
|
||||||
|
重新提交
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
}, 5000);
|
||||||
|
} catch (error) {
|
||||||
|
Utils.closeLoading();
|
||||||
|
alert("支付提交失败，请重试");
|
||||||
|
console.error("支付提交失败:", error);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
alert("请选择支付方式");
|
alert("请选择支付方式");
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
};
|
||||||
const buttonContainer = document.createElement("div");
|
|
||||||
buttonContainer.style.textAlign = "center";
|
|
||||||
buttonContainer.appendChild(submitButton);
|
|
||||||
paymentList.appendChild(buttonContainer);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听页面可见性变化
|
// 监听页面可见性变化
|
||||||
document.addEventListener("visibilitychange", function () {
|
document.addEventListener("visibilitychange", function () {
|
||||||
if (!document.hidden && localStorage.getItem("auto-redirect") == 2) {
|
if (!document.hidden && localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2) {
|
||||||
|
// 显示支付取消提示
|
||||||
|
const payContainer = document.getElementById("pay");
|
||||||
|
payContainer.innerHTML = `<p style="color: #666; margin-bottom: 20px;">支付已取消，您可以重新选择支付方式</p>`;
|
||||||
// 按回退键返回，重新获取支付方式
|
// 按回退键返回，重新获取支付方式
|
||||||
fetchPaymentMethods();
|
PaymentManager.fetchPaymentMethods();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 页面加载时执行
|
// 页面加载时执行
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
// alert(`return:${getQueryParam("return")}`);
|
// 检查是否有return参数或已尝试支付的标记
|
||||||
if (getQueryParam("return")) {
|
if (Utils.getQueryParam("return")) {
|
||||||
// alert("处理支付回调");
|
PaymentManager.handleCallback(); // 如果是支付回调，处理支付结果
|
||||||
handlePaymentCallback(); // 如果是支付回调且不是自动跳转，处理支付结果
|
} else if (localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2) {
|
||||||
|
// 用户已经尝试过支付，检查订单状态（处理用户支付后直接返回的情况）
|
||||||
|
PaymentManager.handleCallback();
|
||||||
} else {
|
} else {
|
||||||
localStorage.setItem("auto-redirect", 1); // 设置自动跳转标记
|
// 首次访问，清除可能的旧标记并设置新标记
|
||||||
fetchPaymentMethods(); // 获取支付方式
|
localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||||
|
localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, 1);
|
||||||
|
PaymentManager.fetchPaymentMethods(); // 获取支付方式
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue