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() {
    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 = `
        <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 => {
        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 = '<i class="bi bi-hourglass-split"></i> 处理中...';
    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 = '<i class="bi bi-hourglass-split"></i> 处理中...';
        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();
}