Vue3实现微信支付宝PC端支付的步骤(附实例代码)

npm install qrcode.vue

<template>
  <div class="payment-container">
    <h2>订单支付</h2>
    <div v-if="!paymentSuccess">
      <div v-if="wechatCodeUrl" class="qrcode-section">
        <h3>微信支付</h3>
        <p>请使用微信扫描下方二维码完成支付</p>
        <qrcode-vue :value="wechatCodeUrl" :size="200" level="H" />
        <p class="notice">二维码将在 {{ countdown }} 秒后过期</p>
      </div>
      <div v-else>
        <p>正在生成支付二维码，请稍候...</p>
      </div>
    </div>
    <div v-if="paymentSuccess">
      <h3>支付成功！</h3>
      <p>正在跳转到订单详情页面...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import QrcodeVue from 'qrcode.vue';
import axios from 'axios'; // 假设已配置

const route = useRoute();
const router = useRouter();

const wechatCodeUrl = ref('');
const paymentSuccess = ref(false);
const countdown = ref(300); // 假设二维码5分钟过期

let pollTimer = null;
let countdownTimer = null;

const orderId = route.query.orderId; // 从路由获取订单ID

// 1. 获取微信支付二维码
const getWechatPayQrcode = async () => {
  try {
    const response = await axios.post('/api/payment/wechat-native', { orderId });
    wechatCodeUrl.value = response.data.code_url;
    // 成功获取二维码后，开始轮询和倒计时
    startPolling();
    startCountdown();
  } catch (error) {
    console.error('获取微信支付二维码失败:', error);
    alert('支付二维码生成失败，请重试！');
  }
};

// 2. 轮询支付状态
const checkPaymentStatus = async () => {
  try {
    const response = await axios.get(`/api/payment/status?orderId=${orderId}`);
    if (response.data.status === 'SUCCESS') {
      paymentSuccess.value = true;
      stopPolling(); // 支付成功，停止轮询
      // 跳转到成功页面
      setTimeout(() => {
        router.push(`/order-detail/${orderId}`);
      }, 2000);
    }
  } catch (error) {
    console.error('查询支付状态失败:', error);
  }
};

const startPolling = () => {
  // 每3秒查询一次
  pollTimer = setInterval(checkPaymentStatus, 3000);
};

const stopPolling = () => {
  if (pollTimer) {
    clearInterval(pollTimer);
  }
  if (countdownTimer) {
      clearInterval(countdownTimer);
  }
};

const startCountdown = () => {
    countdownTimer = setInterval(() => {
        if(countdown.value > 0) {
            countdown.value--;
        } else {
            stopPolling();
            alert('二维码已过期，请刷新页面重试');
        }
    }, 1000);
}


onMounted(() => {
  if (orderId) {
    getWechatPayQrcode();
  } else {
      alert('订单ID不存在！');
  }
});

// 组件卸载时，清除定时器，避免内存泄漏
onUnmounted(() => {
  stopPolling();
});
</script>

<style scoped>
.payment-container {
  text-align: center;
  padding: 40px;
}
.qrcode-section {
  display: inline-block;
  border: 1px solid #eee;
  padding: 20px;
}
.notice {
    color: #999;
}
</style>

<template>
  <div class="payment-container">
    <h2>订单支付</h2>
    <button @click="handleAlipay">使用支付宝支付</button>
    <!-- 这里就是用来接收和提交支付宝表单的容器 -->
    <div ref="alipayFormContainer"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const orderId = route.query.orderId;
const alipayFormContainer = ref(null); // 用于获取DOM元素

const handleAlipay = async () => {
  try {
    const response = await axios.post('/api/payment/alipay-pc', { orderId });
    const formHtml = response.data.form_html;

    // **关键步骤：提交支付宝返回的表单**
    if (alipayFormContainer.value) {
      // 1. 将表单HTML写入容器
      alipayFormContainer.value.innerHTML = formHtml;
      // 2. 找到表单并触发表单提交
      const form = alipayFormContainer.value.querySelector('form');
      if (form) {
        form.submit();
      } else {
        throw new Error('Alipay form not found in response.');
      }
    }
  } catch (error) {
    console.error('支付宝支付发起失败:', error);
    alert('支付失败，请稍后重试！');
  }
};
</script>

// 在 router/index.js 中配置路由
// { path: '/payment/success', name: 'PaymentSuccess', component: PaymentSuccess }

// PaymentSuccess.vue
<template>
  <div class="result-container">
    <div v-if="loading">正在确认支付结果...</div>
    <div v-else-if="paymentSuccess">
      <h3>支付成功！</h3>
      <p>订单号：{{ orderId }}</p>
    </div>
    <div v-else>
      <h3>支付结果确认失败</h3>
      <p>请稍后到您的订单中心查看最新状态。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const loading = ref(true);
const paymentSuccess = ref(false);
const orderId = ref('');

onMounted(async () => {
  // 从支付宝同步跳转的URL中获取订单号
  orderId.value = route.query.out_trade_no;

  if (orderId.value) {
    try {
      // 再次向自己的后端查询，获取最准确的支付状态
      const response = await axios.get(`/api/payment/status?orderId=${orderId.value}`);
      if (response.data.status === 'SUCCESS') {
        paymentSuccess.value = true;
      }
    } catch (error) {
      console.error('确认支付状态失败:', error);
    } finally {
      loading.value = false;
    }
  } else {
      loading.value = false;
  }
});
</script>

<template>
  <div class="payment-container">
    <h2>选择支付方式</h2>
    <div>
      <button @click="initiatePayment('wechat')">微信支付</button>
      <button @click="initiatePayment('alipay')">支付宝支付</button>
    </div>

    <!-- 统一的二维码展示区域 -->
    <div v-if="qrcodeUrl" class="qrcode-section">
      <h3>请使用{{ paymentMethod === 'wechat' ? '微信' : '支付宝' }}扫码支付</h3>
      <qrcode-vue :value="qrcodeUrl" :size="200" level="H" />
      <p>二维码有效时间剩余 {{ countdown }} 秒</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import QrcodeVue from 'qrcode.vue';
import axios from 'axios';

const route = useRoute();
const orderId = route.query.orderId;

const paymentMethod = ref('');
const qrcodeUrl = ref('');
const countdown = ref(300);

let pollTimer = null;
let countdownTimer = null;

// 发起支付（根据选择的支付方式）
const initiatePayment = async (method) => {
  // 清理之前的状态
  stopPolling();
  qrcodeUrl.value = '';
  paymentMethod.value = method;

  try {
    let apiUrl = '';
    if (method === 'wechat') {
      apiUrl = '/api/payment/wechat-native';
    } else if (method === 'alipay') {
      apiUrl = '/api/payment/alipay-qrcode'; // 调用支付宝扫码支付的下单接口
    }

    const response = await axios.post(apiUrl, { orderId });
    
    // 根据不同接口返回的字段名获取二维码链接
    qrcodeUrl.value = (method === 'wechat') ? response.data.code_url : response.data.qr_code;
    
    // 开始轮询和倒计时
    startPolling();
    startCountdown();
  } catch (error) {
    console.error(`${method}支付二维码生成失败:`, error);
    alert('支付二维码生成失败，请重试！');
  }
};

// 轮询支付状态（完全可复用）
const checkPaymentStatus = async () => {
  try {
    const response = await axios.get(`/api/payment/status?orderId=${orderId}`);
    if (response.data.status === 'SUCCESS') {
      stopPolling();
      alert('支付成功！');
      // router.push(...);
    }
  } catch (error) {
    console.error('查询支付状态失败:', error);
  }
};

const startPolling = () => {
  pollTimer = setInterval(checkPaymentStatus, 3000);
};

const startCountdown = () => {
  countdown.value = 300; // 重置倒计时
  countdownTimer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      stopPolling();
      qrcodeUrl.value = ''; // 清空二维码
      alert('二维码已过期，请重新选择支付方式');
    }
  }, 1000);
};

const stopPolling = () => {
  if (pollTimer) clearInterval(pollTimer);
  if (countdownTimer) clearInterval(countdownTimer);
};

onUnmounted(() => {
  stopPolling();
});
</script>