支付页优化
This commit is contained in:
parent
5b46e38478
commit
0638f9acde
|
|
@ -154,8 +154,35 @@
|
|||
</body>
|
||||
|
||||
<script>
|
||||
// 支付页面模块化实现
|
||||
|
||||
// ========== 配置模块 ==========
|
||||
const CONFIG = {
|
||||
API: {
|
||||
LIST: '/pay/front/api/v1/payPage/list',
|
||||
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
|
||||
};
|
||||
|
||||
// ========== 工具函数模块 ==========
|
||||
const Utils = {
|
||||
// 从URL中提取参数
|
||||
function getQueryParam(param) {
|
||||
getQueryParam(param) {
|
||||
const queryString = window.location.search.substring(1);
|
||||
const params = queryString.split("&");
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
|
|
@ -165,69 +192,279 @@
|
|||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
// 验证订单号格式
|
||||
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 showLoading() {
|
||||
showLoading(text = "支付处理中，请稍等...") {
|
||||
document.getElementById("payment-info").style.display = "none";
|
||||
document.getElementById("pay-container").style.display = "none";
|
||||
document.getElementById("loading").style.display = "block";
|
||||
|
||||
const loadingElement = document.getElementById("loading");
|
||||
const loadingText = loadingElement.querySelector(".loading-text");
|
||||
if (loadingText) {
|
||||
loadingText.textContent = text;
|
||||
}
|
||||
|
||||
loadingElement.style.display = "block";
|
||||
},
|
||||
|
||||
// 关闭Loading效果
|
||||
function closeLoading() {
|
||||
closeLoading() {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
document.getElementById("payment-info").style.display = "block";
|
||||
document.getElementById("pay-container").style.display = "block";
|
||||
}
|
||||
},
|
||||
|
||||
// 清除支付状态标记
|
||||
clearRedirectFlag() {
|
||||
localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||
},
|
||||
|
||||
// 设置支付状态标记
|
||||
setRedirectFlag(value) {
|
||||
localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, value);
|
||||
},
|
||||
|
||||
// 获取支付状态标记
|
||||
getRedirectFlag() {
|
||||
return localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||
}
|
||||
};
|
||||
|
||||
// ========== 轮询处理模块 ==========
|
||||
const PollingManager = {
|
||||
// 处理轮询超时
|
||||
handleTimeout() {
|
||||
Utils.closeLoading();
|
||||
this.showError("支付结果查询超时，请稍后手动查询订单状态。");
|
||||
},
|
||||
|
||||
// 处理超过最大轮询次数
|
||||
handleMaxAttempts() {
|
||||
Utils.closeLoading();
|
||||
this.showError("支付结果查询次数已达上限，请稍后手动查询订单状态。");
|
||||
},
|
||||
|
||||
// 显示轮询错误信息
|
||||
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>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
// ========== 支付管理模块 ==========
|
||||
const PaymentManager = {
|
||||
// 处理支付回调
|
||||
function handlePaymentCallback() {
|
||||
const id = getQueryParam("no");
|
||||
if (!id) {
|
||||
closeLoading();
|
||||
handleCallback() {
|
||||
const id = Utils.getQueryParam("no");
|
||||
if (!id || !Utils.validateOrderNumber(id)) {
|
||||
Utils.closeLoading();
|
||||
console.error("无效的订单号");
|
||||
return;
|
||||
}
|
||||
// alert(`no:${id}`);
|
||||
|
||||
// 显示查询支付结果的loading
|
||||
Utils.showLoading("正在查询支付结果...");
|
||||
|
||||
// 轮询状态
|
||||
const pollState = {
|
||||
attempts: 0,
|
||||
startTime: Date.now(),
|
||||
lastDelay: CONFIG.POLLING.DELAY,
|
||||
errorCount: 0
|
||||
};
|
||||
|
||||
// 取消请求的控制器
|
||||
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(`/pay/front/api/v1/payPage/query?no=${id}`, {
|
||||
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("请求失败");
|
||||
if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
|
||||
return await response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
closeLoading();
|
||||
// alert(`订单状态:${data.status}`);
|
||||
pollState.errorCount = 0; // 重置错误计数
|
||||
switch (data.status) {
|
||||
case 2: // 处理中
|
||||
handlePaymentCallback(); // 重查状态
|
||||
case CONFIG.PAYMENT_STATUS.PROCESSING: // 处理中
|
||||
// 计算动态延迟
|
||||
const dynamicDelay = getDynamicDelay(pollState.attempts, pollState.errorCount);
|
||||
pollState.lastDelay = dynamicDelay;
|
||||
|
||||
// 延迟后继续轮询
|
||||
setTimeout(pollOrderStatus, dynamicDelay);
|
||||
break;
|
||||
case 3: // 支付成功
|
||||
// alert(data.return_url);
|
||||
if (data.return_url) {
|
||||
window.location.href = data.return_url; // 自动跳转
|
||||
}
|
||||
case CONFIG.PAYMENT_STATUS.SUCCESS: // 支付成功
|
||||
PaymentManager.handlePaymentSuccess(data);
|
||||
break;
|
||||
default: // 其他状态（待支付/失败/关闭）
|
||||
// alert("其他状态（待支付");
|
||||
fetchPaymentMethods();
|
||||
// window.location.reload();
|
||||
PaymentManager.handlePaymentCanceled();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
// closeLoading();
|
||||
window.location.reload();
|
||||
// 检查是否为取消错误
|
||||
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();
|
||||
},
|
||||
|
||||
// 处理支付成功
|
||||
handlePaymentSuccess(data) {
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理支付取消
|
||||
handlePaymentCanceled() {
|
||||
Utils.closeLoading();
|
||||
// 显示支付取消提示
|
||||
const payContainer = document.getElementById("pay");
|
||||
payContainer.innerHTML = `<p style="color: #666; margin-bottom: 20px;">支付已取消，您可以重新选择支付方式</p>`;
|
||||
PaymentManager.fetchPaymentMethods();
|
||||
},
|
||||
|
||||
// 获取支付方式列表
|
||||
function fetchPaymentMethods() {
|
||||
const id = getQueryParam("no");
|
||||
if (id) {
|
||||
fetch(`/pay/front/api/v1/payPage/list?id=${id}`, {
|
||||
method: "POST",
|
||||
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) {
|
||||
|
|
@ -243,40 +480,52 @@
|
|||
}
|
||||
})
|
||||
.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 (localStorage.getItem("auto-redirect") != 2) {
|
||||
// 否则设置自动跳转标记，并跳转
|
||||
localStorage.setItem("auto-redirect", 2);
|
||||
window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`;
|
||||
// 检查是否是从支付页面返回
|
||||
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 {
|
||||
closeLoading();
|
||||
renderPaymentMethods(data.data);
|
||||
// 从支付页面返回，显示支付方式选择
|
||||
Utils.closeLoading();
|
||||
PaymentManager.renderPaymentMethods(data.data);
|
||||
}
|
||||
} else {
|
||||
closeLoading();
|
||||
Utils.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");
|
||||
}
|
||||
PaymentManager.renderPaymentMethods(data.data);
|
||||
}
|
||||
},
|
||||
|
||||
// 渲染支付方式列表
|
||||
function renderPaymentMethods(paymentMethods) {
|
||||
renderPaymentMethods(paymentMethods) {
|
||||
const pay = document.getElementById("pay");
|
||||
pay.innerHTML = "<h3>请选择支付方式</h3>";
|
||||
|
||||
|
|
@ -337,40 +586,75 @@
|
|||
submitButton.textContent = "立即支付";
|
||||
|
||||
submitButton.onclick = function () {
|
||||
const no = getQueryParam("no");
|
||||
const selectedMethod = document.querySelector(
|
||||
'input[name="paymentMethod"]:checked'
|
||||
);
|
||||
if (selectedMethod) {
|
||||
window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${selectedMethod.value}&no=${no}`;
|
||||
} else {
|
||||
alert("请选择支付方式");
|
||||
}
|
||||
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(
|
||||
'input[name="paymentMethod"]:checked'
|
||||
);
|
||||
if (selectedMethod) {
|
||||
// 显示加载状态
|
||||
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 {
|
||||
alert("请选择支付方式");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 监听页面可见性变化
|
||||
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 () {
|
||||
// alert(`return:${getQueryParam("return")}`);
|
||||
if (getQueryParam("return")) {
|
||||
// alert("处理支付回调");
|
||||
handlePaymentCallback(); // 如果是支付回调且不是自动跳转，处理支付结果
|
||||
// 检查是否有return参数或已尝试支付的标记
|
||||
if (Utils.getQueryParam("return")) {
|
||||
PaymentManager.handleCallback(); // 如果是支付回调，处理支付结果
|
||||
} else if (localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2) {
|
||||
// 用户已经尝试过支付，检查订单状态（处理用户支付后直接返回的情况）
|
||||
PaymentManager.handleCallback();
|
||||
} 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue