novel-front-pc/src/components/common/WechatPayment.vue

<template>
    <div class="wechat-payment">
        <!-- 支付弹窗 -->
        <el-dialog
            v-model="visible"
            title="微信支付"
            width="400px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="payment-content">
                <!-- 支付信息 -->
                <div class="payment-info">
                    <div class="payment-title">{{ paymentData.title }}</div>
                    <div class="payment-amount">
                        ¥<span class="amount-value">{{ formatAmount(paymentData.amount) }}</span>
                    </div>
                </div>

                <!-- 支付状态 -->
                <div class="payment-status">
                    <template v-if="paymentStatus === 'pending'">
                        <div class="qr-container">
                            <div class="qr-code" ref="qrCodeRef">
                                <!-- 二维码将在这里生成 -->
                                <div style="color: #999; font-size: 12px;">正在加载支付二维码...</div>
                            </div>
                            <div class="qr-tips">
                                <el-icon class="scan-icon"><Iphone /></el-icon>
                                <p>请使用微信扫码支付</p>
                                <p class="tips-text">扫码后请在手机上完成支付</p>
                            </div>
                        </div>
                        <!-- 倒计时 -->
                        <div class="countdown">
                            <span>支付剩余时间：</span>
                            <span class="countdown-time">{{ formatTime(countdown) }}</span>
                        </div>
                    </template>

                    <template v-else-if="paymentStatus === 'loading'">
                        <div class="loading-status">
                            <el-icon class="loading-icon"><Loading /></el-icon>
                            <p>正在生成支付二维码...</p>
                        </div>
                    </template>

                    <template v-else-if="paymentStatus === 'success'">
                        <div class="success-status">
                            <el-icon class="success-icon"><CircleCheck /></el-icon>
                            <p>支付成功！</p>
                            <p class="success-tips">感谢您的支付，页面即将跳转...</p>
                        </div>
                    </template>

                    <template v-else-if="paymentStatus === 'failed'">
                        <div class="failed-status">
                            <el-icon class="failed-icon"><CircleClose /></el-icon>
                            <p>支付失败</p>
                            <p class="failed-tips">{{ errorMessage || '支付过程中出现异常，请重试' }}</p>
                        </div>
                    </template>

                    <template v-else-if="paymentStatus === 'timeout'">
                        <div class="timeout-status">
                            <el-icon class="timeout-icon"><Clock /></el-icon>
                            <p>支付超时</p>
                            <p class="timeout-tips">二维码已过期，请重新发起支付</p>
                        </div>
                    </template>
                </div>
            </div>

            <!-- 操作按钮 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button 
                        v-if="paymentStatus === 'pending'" 
                        @click="refreshQrCode"
                        :loading="refreshing"
                    >
                        刷新二维码
                    </el-button>
                    <el-button 
                        v-if="paymentStatus === 'failed' || paymentStatus === 'timeout'" 
                        type="primary"
                        @click="retryPayment"
                    >
                        重新支付
                    </el-button>
                    <el-button 
                        @click="handleCancel"
                        :disabled="paymentStatus === 'loading'"
                    >
                        {{ paymentStatus === 'success' ? '关闭' : '取消支付' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, computed, nextTick, onUnmounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { orderApi, wechatPayApi } from '@/api/user';
import { 
    Iphone, 
    Loading, 
    CircleCheck, 
    CircleClose, 
    Clock 
} from '@element-plus/icons-vue';
import QRCode from 'qrcode';


export default {
    name: 'WechatPayment',
    components: {
        Iphone,
        Loading,
        CircleCheck,
        CircleClose,
        Clock
    },
    props: {
        // 是否显示支付弹窗
        modelValue: {
            type: Boolean,
            default: false
        },
        // 支付数据
        paymentData: {
            type: Object,
            default: () => ({
            })
        }
    },
    emits: ['update:modelValue', 'success', 'cancel', 'failed'],
    setup(props, { emit }) {
        const visible = computed({
            get: () => props.modelValue,
            set: (value) => emit('update:modelValue', value)
        });

        const qrCodeRef = ref(null);
        const paymentStatus = ref('loading');
        const countdown = ref(300);
        const refreshing = ref(false);
        const errorMessage = ref('');
        
        let pollingTimer = null;
        let countdownTimer = null;
        let outTradeNo = '';
        let orderId = '';

        // 格式化金额
        const formatAmount = (amount) => {
            return (amount / 100).toFixed(2);
        };

        // 格式化时间
        const formatTime = (seconds) => {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
        };

        // 生成二维码
        const generateQrCode = async (codeUrl) => {
            try {
                console.log('开始生成二维码');
                
                // 等待DOM更新
                await nextTick();
                
                // 多次检查DOM元素是否存在
                let retryCount = 0;
                while (!qrCodeRef.value && retryCount < 20) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                    retryCount++;
                    await nextTick();
                }
                
                if (!qrCodeRef.value) {
                    throw new Error('二维码容器元素未找到');
                }
                
                // 清空容器
                qrCodeRef.value.innerHTML = '';
                
                // 生成二维码
                const canvas = document.createElement('canvas');
                await QRCode.toCanvas(canvas, codeUrl, {
                    width: 200,
                    height: 200,
                    margin: 1,
                    color: {
                        dark: '#000000',
                        light: '#FFFFFF'
                    }
                });
                
                // 将canvas添加到容器中
                qrCodeRef.value.appendChild(canvas);
                
                console.log('二维码生成成功');
            } catch (error) {
                console.error('生成二维码失败:', error);
                ElMessage.error(`生成二维码失败: ${error.message}`);
                
                // 如果二维码生成失败，显示错误信息
                if (qrCodeRef.value) {
                    qrCodeRef.value.innerHTML = `
                        <div style="width: 200px; height: 200px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; text-align: center;">
                            二维码生成失败<br/>请点击刷新重试
                        </div>
                    `;
                } else {
                    // 如果容器都找不到，强制设置状态显示错误
                    paymentStatus.value = 'failed';
                    errorMessage.value = '二维码容器未找到，请刷新页面重试';
                }
            }
        };

        // 创建支付订单
        const createPaymentOrder = async () => {
            try {
                paymentStatus.value = 'loading';
                
                if (!props.paymentData.packageId) {
                    throw new Error('缺少套餐ID');
                }

                const params = {
                    packageId: props.paymentData.packageId,
                    payType: 'web'
                };

                // 创建订单
                const result = await orderApi.createPayPackageOrder(params);

                if (result.success && result.result) {
                    const { codeURL, orderId: responseOrderId } = result.result;
                    orderId = responseOrderId;
                    outTradeNo = responseOrderId; // 使用orderId作为outTradeNo
                    
                    // 先切换状态为pending，让DOM元素渲染出来
                    paymentStatus.value = 'pending';
                    
                    // 等待DOM更新完成后再生成二维码
                    await nextTick();
                    await new Promise(resolve => setTimeout(resolve, 100)); // 额外等待100ms确保DOM渲染完成
                    
                    await generateQrCode(codeURL);
                    
                    startPolling();
                    startCountdown();
                } else {
                    throw new Error(result.message || '创建支付订单失败');
                }
            } catch (error) {
                console.error('创建支付订单失败:', error);
                paymentStatus.value = 'failed';
                errorMessage.value = error.message;
                ElMessage.error(error.message || '创建支付订单失败');
            }
        };

        // 开始轮询支付状态
        const startPolling = () => {
            if (pollingTimer) {
                clearInterval(pollingTimer);
            }

            pollingTimer = setInterval(async () => {
                await checkPaymentStatus();
            }, 2000);
        };

        // 停止轮询
        const stopPolling = () => {
            if (pollingTimer) {
                clearInterval(pollingTimer);
                pollingTimer = null;
            }
        };

        // 检查支付状态
        const checkPaymentStatus = async () => {
            try {
                if (!outTradeNo) {
                    return;
                }

                // 调用微信支付状态查询接口
                const response = await wechatPayApi.queryWechatPayStatus(outTradeNo);
                
                if (response.success) {
                    const paymentState = response.result;
                    
                    console.log('支付状态查询结果:', paymentState);
                    
                    switch (paymentState) {
                        case 'SUCCESS':
                            // 支付成功
                            handlePaymentSuccess();
                            break;
                        case 'CLOSED':
                        case 'REVOKED':
                        case 'PAYERROR':
                            // 支付失败的状态
                            handlePaymentFailed(getPaymentStateMessage(paymentState));
                            break;
                        case 'REFUND':
                            // 已退款
                            handlePaymentFailed('支付已退款');
                            break;
                        case 'NOTPAY':
                        case 'USERPAYING':
                            // 未支付或用户支付中，继续轮询
                            console.log('支付状态:', getPaymentStateMessage(paymentState));
                            break;
                        default:
                            console.log('未知支付状态:', paymentState);
                            break;
                    }
                }
            } catch (error) {
                console.error('查询支付状态失败:', error);
                // 查询失败不影响轮询继续
            }
        };

        // 获取支付状态的中文描述
        const getPaymentStateMessage = (state) => {
            const stateMap = {
                'SUCCESS': '支付成功',
                'REFUND': '转入退款',
                'NOTPAY': '未支付',
                'CLOSED': '已关闭',
                'REVOKED': '已撤销',
                'USERPAYING': '用户支付中',
                'PAYERROR': '支付失败'
            };
            return stateMap[state] || `未知状态: ${state}`;
        };

        // 处理支付成功
        const handlePaymentSuccess = () => {
            paymentStatus.value = 'success';
            stopPolling();
            stopCountdown();
            
            ElMessage.success('支付成功！');
            emit('success', orderId);
            
            setTimeout(() => {
                visible.value = false;
            }, 3000);
        };

        // 处理支付失败
        const handlePaymentFailed = (message) => {
            paymentStatus.value = 'failed';
            errorMessage.value = message;
            stopPolling();
            stopCountdown();
            
            ElMessage.error(message || '支付失败');
            emit('failed', message);
        };

        // 开始倒计时
        const startCountdown = () => {
            countdown.value = 300;
            
            countdownTimer = setInterval(() => {
                countdown.value--;
                
                if (countdown.value <= 0) {
                    handlePaymentTimeout();
                }
            }, 1000);
        };

        // 停止倒计时
        const stopCountdown = () => {
            if (countdownTimer) {
                clearInterval(countdownTimer);
                countdownTimer = null;
            }
        };

        // 处理支付超时
        const handlePaymentTimeout = () => {
            paymentStatus.value = 'timeout';
            stopPolling();
            stopCountdown();
            
            ElMessage.warning('支付超时，请重新发起支付');
        };

        // 刷新二维码
        const refreshQrCode = async () => {
            refreshing.value = true;
            try {
                await createPaymentOrder();
            } finally {
                refreshing.value = false;
            }
        };

        // 重新支付
        const retryPayment = () => {
            errorMessage.value = '';
            createPaymentOrder();
        };

        // 取消支付
        const handleCancel = async () => {
            if (paymentStatus.value === 'success') {
                visible.value = false;
                return;
            }

            try {
                await ElMessageBox.confirm(
                    '确定要取消支付吗？',
                    '取消支付',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '继续支付',
                        type: 'warning',
                    }
                );

                stopPolling();
                stopCountdown();
                
                visible.value = false;
                emit('cancel');
            } catch {
                // 用户选择继续支付
            }
        };

        // 监听弹窗显示状态
        watch(visible, (newVal) => {
            if (newVal && props.paymentData.packageId) {
                createPaymentOrder();
            } else {
                stopPolling();
                stopCountdown();
                paymentStatus.value = 'loading';
                errorMessage.value = '';
                outTradeNo = '';
                orderId = '';
            }
        });

        // 组件卸载时清理
        onUnmounted(() => {
            stopPolling();
            stopCountdown();
        });

        return {
            visible,
            qrCodeRef,
            paymentStatus,
            countdown,
            refreshing,
            errorMessage,
            formatAmount,
            formatTime,
            refreshQrCode,
            retryPayment,
            handleCancel
        };
    }
};
</script>

<style lang="scss" scoped>
.wechat-payment {
    .payment-content {
        text-align: center;
        padding: 20px 0;

        .payment-info {
            margin-bottom: 20px;

            .payment-title {
                font-size: 18px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 8px;
            }

            .payment-amount {
                font-size: 24px;
                color: #0A2463;
                font-weight: 700;

                .amount-value {
                    font-size: 32px;
                }
            }
        }

        .payment-status {
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .qr-container {
                .qr-code {
                    margin-bottom: 16px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 200px;
                    min-width: 200px;
                    
                    :deep(canvas) {
                        border-radius: 8px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        max-width: 100%;
                        height: auto;
                    }
                    
                    // 确保容器有背景，方便调试
                    border: 1px solid #eee;
                    border-radius: 8px;
                }

                .qr-tips {
                    .scan-icon {
                        font-size: 32px;
                        color: #0A2463;
                        margin-bottom: 8px;
                    }

                    p {
                        margin: 4px 0;
                        color: #606266;

                        &:first-of-type {
                            font-size: 16px;
                            font-weight: 600;
                            color: #303133;
                        }
                    }

                    .tips-text {
                        font-size: 14px;
                        color: #909399;
                    }
                }
            }

            .countdown {
                margin-top: 16px;
                font-size: 14px;
                color: #909399;

                .countdown-time {
                    color: #F56C6C;
                    font-weight: 600;
                }
            }

            .loading-status,
            .success-status,
            .failed-status,
            .timeout-status {
                display: flex;
                flex-direction: column;
                align-items: center;

                .loading-icon {
                    font-size: 48px;
                    color: #0A2463;
                    animation: rotate 2s linear infinite;
                    margin-bottom: 16px;
                }

                .success-icon {
                    font-size: 48px;
                    color: #67C23A;
                    margin-bottom: 16px;
                }

                .failed-icon,
                .timeout-icon {
                    font-size: 48px;
                    color: #F56C6C;
                    margin-bottom: 16px;
                }

                p {
                    margin: 4px 0;
                    font-size: 16px;
                    color: #303133;

                    &:first-of-type {
                        font-weight: 600;
                        font-size: 18px;
                    }
                }

                .success-tips,
                .failed-tips,
                .timeout-tips {
                    font-size: 14px;
                    color: #909399;
                }
            }
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: center;
        gap: 12px;

        .el-button {
            &.el-button--primary {
                background-color: #0A2463;
                border-color: #0A2463;

                &:hover {
                    background-color: #083354;
                    border-color: #083354;
                }
            }
        }
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

// 响应式设计
@media (max-width: 768px) {
    .wechat-payment {
        :deep(.el-dialog) {
            width: 90% !important;
            margin: 5vh auto !important;
        }

        .payment-content {
            padding: 16px 0;

            .payment-info {
                .payment-title {
                    font-size: 16px;
                }

                .payment-amount {
                    font-size: 20px;

                    .amount-value {
                        font-size: 28px;
                    }
                }
            }

            .payment-status {
                min-height: 250px;

                .qr-container {
                    .qr-code {
                        :deep(canvas) {
                            width: 160px !important;
                            height: 160px !important;
                        }
                    }
                }
            }
        }
    }
}
</style>