You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
694 lines
22 KiB
694 lines
22 KiB
<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>
|