支付问题优化
This commit is contained in:
parent
0638f9acde
commit
46500f1c93
|
|
@ -52,6 +52,101 @@
|
|||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
flex: 1;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.paid-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.paid-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.unpaid-button {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.unpaid-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Toast提示样式 */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 12px 24px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
z-index: 1001;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.toast.hide {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
}
|
||||
|
||||
/* loading样式 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
|
|
@ -151,17 +246,32 @@
|
|||
<div class="loading-spinner"></div>
|
||||
<p class="loading-text">支付处理中，请稍等...</p>
|
||||
</div>
|
||||
|
||||
<!-- 支付状态确认弹窗 -->
|
||||
<div id="payment-status-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<h3>支付状态确认</h3>
|
||||
<p>请确认您的支付状态</p>
|
||||
<div class="modal-buttons">
|
||||
<button id="btn-paid" class="modal-button paid-button">已支付</button>
|
||||
<button id="btn-unpaid" class="modal-button unpaid-button">未支付</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast提示 -->
|
||||
<div id="toast" class="toast" style="display: none;"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
// 支付页面模块化实现
|
||||
|
||||
const API_BASE_URL = 'https://pay.cdlsxd.cn';
|
||||
// ========== 配置模块 ==========
|
||||
const CONFIG = {
|
||||
API: {
|
||||
LIST: '/pay/front/api/v1/payPage/list',
|
||||
SUBMIT: '/pay/front/api/v1/payPage/submit',
|
||||
QUERY: '/pay/front/api/v1/payPage/query'
|
||||
LIST: API_BASE_URL + '/pay/front/api/v1/payPage/list',
|
||||
SUBMIT: API_BASE_URL + '/pay/front/api/v1/payPage/submit',
|
||||
QUERY: API_BASE_URL + '/pay/front/api/v1/payPage/query'
|
||||
},
|
||||
POLLING: {
|
||||
MAX_ATTEMPTS: 30,
|
||||
|
|
@ -170,13 +280,16 @@
|
|||
REQUEST_TIMEOUT: 10000
|
||||
},
|
||||
LOCAL_STORAGE: {
|
||||
AUTO_REDIRECT: 'auto-redirect'
|
||||
AUTO_REDIRECT: 'auto-redirect',
|
||||
AUTO_REDIRECT_TIMESTAMP: 'auto-redirect-timestamp'
|
||||
},
|
||||
PAYMENT_STATUS: {
|
||||
PROCESSING: 2,
|
||||
SUCCESS: 3
|
||||
},
|
||||
REDIRECT_DELAY: 3000
|
||||
REDIRECT_DELAY: 3000,
|
||||
// 自动跳转标记的有效期（毫秒）
|
||||
REDIRECT_FLAG_EXPIRY: 10 * 60 * 1000 // 10分钟
|
||||
};
|
||||
|
||||
// ========== 工具函数模块 ==========
|
||||
|
|
@ -219,7 +332,7 @@
|
|||
loadingText.textContent = text;
|
||||
}
|
||||
|
||||
loadingElement.style.display = "block";
|
||||
loadingElement.style.display = "flex";
|
||||
},
|
||||
|
||||
// 关闭Loading效果
|
||||
|
|
@ -232,16 +345,79 @@
|
|||
// 清除支付状态标记
|
||||
clearRedirectFlag() {
|
||||
localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||
localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT_TIMESTAMP);
|
||||
},
|
||||
|
||||
// 设置支付状态标记
|
||||
setRedirectFlag(value) {
|
||||
localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, value);
|
||||
localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT_TIMESTAMP, Date.now().toString());
|
||||
},
|
||||
|
||||
// 获取支付状态标记
|
||||
getRedirectFlag() {
|
||||
return localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||
},
|
||||
|
||||
// 检查自动跳转标记是否有效
|
||||
isRedirectFlagValid() {
|
||||
const flag = localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||
const timestampStr = localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT_TIMESTAMP);
|
||||
|
||||
if (!flag || !timestampStr) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const timestamp = parseInt(timestampStr, 10);
|
||||
if (isNaN(timestamp)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查标记是否在有效期内
|
||||
return (Date.now() - timestamp) < CONFIG.REDIRECT_FLAG_EXPIRY;
|
||||
},
|
||||
|
||||
// 显示支付状态确认弹窗
|
||||
showPaymentStatusModal() {
|
||||
const modal = document.getElementById('payment-status-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
},
|
||||
|
||||
// 隐藏支付状态确认弹窗
|
||||
hidePaymentStatusModal() {
|
||||
const modal = document.getElementById('payment-status-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
},
|
||||
|
||||
// 显示Toast提示
|
||||
showToast(message, duration = 3000) {
|
||||
const toast = document.getElementById('toast');
|
||||
if (toast) {
|
||||
toast.textContent = message;
|
||||
toast.className = 'toast show';
|
||||
|
||||
// 自动隐藏
|
||||
setTimeout(() => {
|
||||
Utils.hideToast();
|
||||
}, duration);
|
||||
}
|
||||
},
|
||||
|
||||
// 隐藏Toast提示
|
||||
hideToast() {
|
||||
const toast = document.getElementById('toast');
|
||||
if (toast) {
|
||||
toast.className = 'toast hide';
|
||||
|
||||
// 动画结束后完全隐藏
|
||||
setTimeout(() => {
|
||||
toast.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -250,12 +426,16 @@
|
|||
// 处理轮询超时
|
||||
handleTimeout() {
|
||||
Utils.closeLoading();
|
||||
// 清除自动跳转标记
|
||||
Utils.clearRedirectFlag();
|
||||
this.showError("支付结果查询超时，请稍后手动查询订单状态。");
|
||||
},
|
||||
|
||||
// 处理超过最大轮询次数
|
||||
handleMaxAttempts() {
|
||||
Utils.closeLoading();
|
||||
// 清除自动跳转标记
|
||||
Utils.clearRedirectFlag();
|
||||
this.showError("支付结果查询次数已达上限，请稍后手动查询订单状态。");
|
||||
},
|
||||
|
||||
|
|
@ -370,7 +550,11 @@
|
|||
PaymentManager.handlePaymentSuccess(data);
|
||||
break;
|
||||
default: // 其他状态（待支付/失败/关闭）
|
||||
PaymentManager.handlePaymentCanceled();
|
||||
// 显示未查到支付状态的提示
|
||||
Utils.closeLoading();
|
||||
Utils.showToast("未查到支付状态");
|
||||
// 重新显示支付状态确认弹窗
|
||||
Utils.showPaymentStatusModal();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -451,6 +635,8 @@
|
|||
// 处理支付取消
|
||||
handlePaymentCanceled() {
|
||||
Utils.closeLoading();
|
||||
// 清除自动跳转标记，避免影响后续支付
|
||||
Utils.clearRedirectFlag();
|
||||
// 显示支付取消提示
|
||||
const payContainer = document.getElementById("pay");
|
||||
payContainer.innerHTML = `<p style="color: #666; margin-bottom: 20px;">支付已取消，您可以重新选择支付方式</p>`;
|
||||
|
|
@ -484,6 +670,8 @@
|
|||
})
|
||||
.catch((error) => {
|
||||
Utils.closeLoading();
|
||||
// 清除自动跳转标记
|
||||
Utils.clearRedirectFlag();
|
||||
console.error("获取支付方式失败:", error);
|
||||
const pay = document.getElementById("pay");
|
||||
pay.innerHTML = `
|
||||
|
|
@ -508,20 +696,27 @@
|
|||
pay.innerHTML = "<h3>支付环境异常，请检查</h3>";
|
||||
} else if (data.data.length === 1) {
|
||||
// 检查是否是从支付页面返回
|
||||
if (Utils.getRedirectFlag() != 2) {
|
||||
// 首次访问且只有一种支付方式，自动跳转
|
||||
if (Utils.getRedirectFlag() != 2 || !Utils.isRedirectFlagValid()) {
|
||||
// 首次访问或标记已失效，且只有一种支付方式，自动跳转
|
||||
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);
|
||||
Utils.showPaymentStatusModal();
|
||||
}
|
||||
} else {
|
||||
// 多种支付方式，先检查是否从支付页面返回
|
||||
if (Utils.getRedirectFlag() == 2 && Utils.isRedirectFlagValid()) {
|
||||
// 从支付页面返回，显示支付状态确认弹窗
|
||||
Utils.closeLoading();
|
||||
// 多种支付方式，展示支付界面
|
||||
Utils.showPaymentStatusModal();
|
||||
} else {
|
||||
Utils.closeLoading();
|
||||
// 首次访问或标记已失效，展示支付界面
|
||||
PaymentManager.renderPaymentMethods(data.data);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 渲染支付方式列表
|
||||
|
|
@ -611,6 +806,8 @@
|
|||
// 设置超时检查，如果长时间未跳转则显示错误
|
||||
setTimeout(() => {
|
||||
Utils.closeLoading();
|
||||
// 清除自动跳转标记，避免影响后续支付
|
||||
Utils.clearRedirectFlag();
|
||||
const payContainer = document.getElementById("pay");
|
||||
payContainer.innerHTML = `
|
||||
<h3 style="color: red;">支付提交超时</h3>
|
||||
|
|
@ -622,6 +819,8 @@
|
|||
}, 5000);
|
||||
} catch (error) {
|
||||
Utils.closeLoading();
|
||||
// 清除自动跳转标记，避免影响后续支付
|
||||
Utils.clearRedirectFlag();
|
||||
alert("支付提交失败，请重试");
|
||||
console.error("支付提交失败:", error);
|
||||
}
|
||||
|
|
@ -633,29 +832,47 @@
|
|||
|
||||
// 监听页面可见性变化
|
||||
document.addEventListener("visibilitychange", function () {
|
||||
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>`;
|
||||
// 按回退键返回，重新获取支付方式
|
||||
PaymentManager.fetchPaymentMethods();
|
||||
if (!document.hidden && localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2 && Utils.isRedirectFlagValid()) {
|
||||
// 当页面从隐藏变为可见，且有有效标记时，显示支付状态确认弹窗
|
||||
// 这样无论用户是支付成功后切换回来，还是点击完成跳回来，都能让用户确认支付状态
|
||||
Utils.closeLoading();
|
||||
Utils.showPaymentStatusModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载时执行
|
||||
window.onload = function () {
|
||||
// 检查是否有return参数或已尝试支付的标记
|
||||
if (Utils.getQueryParam("return")) {
|
||||
PaymentManager.handleCallback(); // 如果是支付回调，处理支付结果
|
||||
} else if (localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2) {
|
||||
// 用户已经尝试过支付，检查订单状态（处理用户支付后直接返回的情况）
|
||||
PaymentManager.handleCallback();
|
||||
if (Utils.getQueryParam("return") || (localStorage.getItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT) == 2 && Utils.isRedirectFlagValid())) {
|
||||
// 用户从支付页面返回，显示支付状态确认弹窗
|
||||
Utils.closeLoading();
|
||||
Utils.showPaymentStatusModal();
|
||||
} else {
|
||||
// 首次访问，清除可能的旧标记并设置新标记
|
||||
localStorage.removeItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT);
|
||||
localStorage.setItem(CONFIG.LOCAL_STORAGE.AUTO_REDIRECT, 1);
|
||||
// 首次访问或标记已失效，清除可能的旧标记并设置新标记
|
||||
Utils.clearRedirectFlag();
|
||||
Utils.setRedirectFlag(1);
|
||||
PaymentManager.fetchPaymentMethods(); // 获取支付方式
|
||||
}
|
||||
|
||||
// 绑定弹窗按钮事件
|
||||
document.getElementById('btn-paid').addEventListener('click', function() {
|
||||
// 显示加载状态
|
||||
Utils.showLoading("正在查询支付结果...");
|
||||
// 隐藏弹窗
|
||||
Utils.hidePaymentStatusModal();
|
||||
// 查询订单状态
|
||||
PaymentManager.handleCallback();
|
||||
});
|
||||
|
||||
document.getElementById('btn-unpaid').addEventListener('click', function() {
|
||||
// 隐藏弹窗
|
||||
Utils.hidePaymentStatusModal();
|
||||
// 清除支付状态标记
|
||||
Utils.clearRedirectFlag();
|
||||
Utils.setRedirectFlag(1);
|
||||
// 重新获取支付方式
|
||||
PaymentManager.fetchPaymentMethods();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue