// 订单支付页面脚本 let countdownTimer; let statusCheckTimer; let timeLeft = 15 * 60; // 15分钟 // 页面加载时开始倒计时 document.addEventListener('DOMContentLoaded', function() { startCountdown(); }); // 页面卸载时清理定时器 window.addEventListener('beforeunload', function() { if (countdownTimer) clearInterval(countdownTimer); if (statusCheckTimer) clearInterval(statusCheckTimer); }); // 开始倒计时 function startCountdown() { const countdownElement = document.getElementById('countdown'); if (!countdownElement) return; countdownTimer = setInterval(() => { timeLeft--; const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; countdownElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; if (timeLeft <= 0) { clearInterval(countdownTimer); showAlert('订单已过期,请重新下单', 'warning'); setTimeout(() => { window.location.href = '/order/list'; }, 2000); } }, 1000); } // 开始支付 function startPayment() { const paymentSn = document.querySelector('[data-payment-sn]')?.dataset.paymentSn; const paymentMethod = document.querySelector('[data-payment-method]')?.dataset.paymentMethod; if (!paymentSn || !paymentMethod) { showAlert('支付信息获取失败', 'error'); return; } // 如果是模拟支付,直接显示控制面板,不需要调用接口 if (paymentMethod === 'simulate') { showAlert('请使用下方控制面板完成模拟支付', 'info'); return; } fetch('/payment/process', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ payment_sn: paymentSn, payment_method: paymentMethod }) }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { if (data.payment_type === 'qrcode') { showQRCode(data.qr_code_url); startStatusCheck(); } else if (data.payment_type === 'redirect') { window.open(data.pay_url, '_blank'); startStatusCheck(); } else if (data.payment_type === 'simulate') { showAlert('模拟支付已准备就绪', 'success'); } } else { showAlert(data.message || '支付启动失败', 'error'); } }) .catch(error => { console.error('支付启动错误:', error); showAlert('支付启动失败,请重试', 'error'); }); } // 显示二维码 function showQRCode(qrUrl) { const qrArea = document.getElementById('qrCodeArea'); const qrImage = document.getElementById('qrCodeImage'); if (!qrArea || !qrImage) return; // 这里应该使用真实的二维码生成库,现在用文本模拟 qrImage.innerHTML = `

微信支付二维码
`; qrArea.style.display = 'block'; } // 开始检查支付状态 function startStatusCheck() { statusCheckTimer = setInterval(() => { checkPaymentStatus(); }, 3000); // 每3秒检查一次 } // 检查支付状态 function checkPaymentStatus() { const paymentSn = document.querySelector('[data-payment-sn]')?.dataset.paymentSn; if (!paymentSn) return; fetch(`/payment/check_status/${paymentSn}`) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { if (data.status === 2) { // 支付成功 clearInterval(statusCheckTimer); clearInterval(countdownTimer); showPaymentSuccess(); } else if (data.status === 3) { // 支付失败 clearInterval(statusCheckTimer); showPaymentFail(); } } }) .catch(error => { console.error('状态检查失败:', error); }); } // 显示支付成功 function showPaymentSuccess() { const paymentArea = document.getElementById('paymentArea'); const actionButtons = document.getElementById('actionButtons'); const paymentStatus = document.getElementById('paymentStatus'); const successStatus = document.getElementById('successStatus'); if (paymentArea) paymentArea.style.display = 'none'; if (actionButtons) actionButtons.style.display = 'none'; if (paymentStatus) paymentStatus.style.display = 'block'; if (successStatus) successStatus.style.display = 'block'; showAlert('支付成功!正在跳转到订单详情...', 'success'); const orderId = document.querySelector('[data-order-id]')?.dataset.orderId; setTimeout(() => { if (orderId) { window.location.href = `/order/detail/${orderId}`; } else { window.location.href = '/order/list'; } }, 2000); } // 显示支付失败 function showPaymentFail() { const paymentArea = document.getElementById('paymentArea'); const paymentStatus = document.getElementById('paymentStatus'); const failStatus = document.getElementById('failStatus'); if (paymentArea) paymentArea.style.display = 'none'; if (paymentStatus) paymentStatus.style.display = 'block'; if (failStatus) failStatus.style.display = 'block'; showAlert('支付失败,请重新尝试', 'error'); // 显示重试按钮 setTimeout(() => { if (paymentArea) paymentArea.style.display = 'block'; if (paymentStatus) paymentStatus.style.display = 'none'; }, 3000); } // 取消订单 function cancelOrder() { const orderId = document.querySelector('[data-order-id]')?.dataset.orderId; if (!orderId) { showAlert('订单信息获取失败', 'error'); return; } showConfirm('确定要取消这个订单吗?', () => { fetch(`/order/cancel/${orderId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', } }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { showAlert('订单已取消,正在跳转...', 'success'); setTimeout(() => { window.location.href = '/order/list'; }, 1500); } else { showAlert(data.message || '取消订单失败', 'error'); } }) .catch(error => { console.error('取消订单错误:', error); showAlert('取消失败,请重试', 'error'); }); }); } // 模拟支付成功 function simulatePaymentSuccess() { const paymentSn = document.querySelector('[data-payment-sn]')?.dataset.paymentSn; if (!paymentSn) { showAlert('支付信息获取失败', 'error'); return; } // 显示处理中状态 const button = event.target; const originalText = button.innerHTML; button.innerHTML = ' 处理中...'; button.disabled = true; fetch(`/payment/simulate_success/${paymentSn}`, { method: 'POST', headers: { 'Content-Type': 'application/json', } }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { showAlert('模拟支付成功!', 'success'); setTimeout(() => { showPaymentSuccess(); }, 1000); } else { showAlert(data.message || '模拟支付失败', 'error'); button.innerHTML = originalText; button.disabled = false; } }) .catch(error => { console.error('模拟支付错误:', error); showAlert('模拟支付失败', 'error'); button.innerHTML = originalText; button.disabled = false; }); } // 模拟支付失败 function simulatePaymentFail() { const paymentSn = document.querySelector('[data-payment-sn]')?.dataset.paymentSn; if (!paymentSn) { showAlert('支付信息获取失败', 'error'); return; } showConfirm('确定要模拟支付失败吗?这将导致订单支付失败。', () => { // 显示处理中状态 const button = event.target; const originalText = button.innerHTML; button.innerHTML = ' 处理中...'; button.disabled = true; fetch(`/payment/simulate_fail/${paymentSn}`, { method: 'POST', headers: { 'Content-Type': 'application/json', } }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { if (data.success) { showAlert('模拟支付失败!', 'warning'); setTimeout(() => { showPaymentFail(); }, 1000); } else { showAlert(data.message || '模拟操作失败', 'error'); button.innerHTML = originalText; button.disabled = false; } }) .catch(error => { console.error('模拟支付失败错误:', error); showAlert('模拟操作失败', 'error'); button.innerHTML = originalText; button.disabled = false; }); }); } // 兼容旧版本的模拟支付函数 function simulatePayment() { simulatePaymentSuccess(); }