taibai_shopping/app/static/js/pay.js

// 订单支付页面脚本
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() {
    countdownTimer = setInterval(() => {
        timeLeft--;

        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;

        document.getElementById('countdown').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;
    }

    fetch('/payment/process', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            payment_sn: paymentSn,
            payment_method: paymentMethod
        })
    })
    .then(response => 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 {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        showAlert('支付启动失败，请重试', 'error');
    });
}

// 显示二维码
function showQRCode(qrUrl) {
    const qrArea = document.getElementById('qrCodeArea');
    const qrImage = document.getElementById('qrCodeImage');

    // 这里应该使用真实的二维码生成库，现在用文本模拟
    qrImage.innerHTML = `
        <div style="width: 200px; height: 200px; margin: 0 auto; background: #f0f0f0;
                    display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;">
            <div style="text-align: center;">
                <i class="bi bi-qr-code display-4"></i><br>
                <small>微信支付二维码</small>
            </div>
        </div>
    `;

    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 => response.json())
    .then(data => {
        if (data.success) {
            if (data.status === 2) { // 支付成功
                clearInterval(statusCheckTimer);
                clearInterval(countdownTimer);
                showPaymentSuccess();
            }
        }
    })
    .catch(error => {
        console.error('状态检查失败:', error);
    });
}

// 显示支付成功
function showPaymentSuccess() {
    document.getElementById('paymentArea').style.display = 'none';
    document.getElementById('paymentStatus').style.display = 'block';

    const orderId = document.querySelector('[data-order-id]')?.dataset.orderId;
    setTimeout(() => {
        window.location.href = `/order/detail/${orderId}`;
    }, 2000);
}

// 取消订单
function cancelOrder() {
    const orderId = document.querySelector('[data-order-id]')?.dataset.orderId;

    if (!orderId) {
        showAlert('订单信息获取失败', 'error');
        return;
    }

    if (confirm('确定要取消这个订单吗？')) {
        fetch(`/order/cancel/${orderId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('订单已取消', 'success');
                setTimeout(() => {
                    window.location.href = '/order/list';
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('取消失败，请重试', 'error');
        });
    }
}

// 模拟支付成功（开发测试用）
function simulatePayment() {
    const paymentSn = document.querySelector('[data-payment-sn]')?.dataset.paymentSn;

    if (!paymentSn) {
        showAlert('支付信息获取失败', 'error');
        return;
    }

    if (confirm('这是测试功能，确定要模拟支付成功吗？')) {
        fetch(`/payment/simulate_success/${paymentSn}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('模拟支付成功', 'success');
                setTimeout(() => {
                    showPaymentSuccess();
                }, 1000);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('模拟支付失败', 'error');
        });
    }
}