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>正在跳轉(zhuǎn)到訂單詳情頁面...</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'; // 假設(shè)已配置

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

const wechatCodeUrl = ref('');
const paymentSuccess = ref(false);
const countdown = ref(300); // 假設(shè)二維碼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. 輪詢支付狀態(tài)
const checkPaymentStatus = async () => {
  try {
    const response = await axios.get(`/api/payment/status?orderId=${orderId}`);
    if (response.data.status === 'SUCCESS') {
      paymentSuccess.value = true;
      stopPolling(); // 支付成功，停止輪詢
      // 跳轉(zhuǎn)到成功頁面
      setTimeout(() => {
        router.push(`/order-detail/${orderId}`);
      }, 2000);
    }
  } catch (error) {
    console.error('查詢支付狀態(tài)失敗:', 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不存在！');
  }
});

// 組件卸載時，清除定時器，避免內(nèi)存泄漏
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;

    // **關(guān)鍵步驟：提交支付寶返回的表單**
    if (alipayFormContainer.value) {
      // 1. 將表單HTML寫入容器
      alipayFormContainer.value.innerHTML = formHtml;
      // 2. 找到表單并觸發(fā)表單提交
      const form = alipayFormContainer.value.querySelector('form');
      if (form) {
        form.submit();
      } else {
        throw new Error('Alipay form not found in response.');
      }
    }
  } catch (error) {
    console.error('支付寶支付發(fā)起失敗:', error);
    alert('支付失敗，請稍后重試！');
  }
};
</script>

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

// PaymentSuccess.vue
<template>
  <div class="result-container">
    <div v-if="loading">正在確認(rèn)支付結(jié)果...</div>
    <div v-else-if="paymentSuccess">
      <h3>支付成功！</h3>
      <p>訂單號：{{ orderId }}</p>
    </div>
    <div v-else>
      <h3>支付結(jié)果確認(rèn)失敗</h3>
      <p>請稍后到您的訂單中心查看最新狀態(tài)。</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 () => {
  // 從支付寶同步跳轉(zhuǎn)的URL中獲取訂單號
  orderId.value = route.query.out_trade_no;

  if (orderId.value) {
    try {
      // 再次向自己的后端查詢，獲取最準(zhǔn)確的支付狀態(tài)
      const response = await axios.get(`/api/payment/status?orderId=${orderId.value}`);
      if (response.data.status === 'SUCCESS') {
        paymentSuccess.value = true;
      }
    } catch (error) {
      console.error('確認(rèn)支付狀態(tài)失敗:', 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>

    <!-- 統(tǒng)一的二維碼展示區(qū)域 -->
    <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;

// 發(fā)起支付（根據(jù)選擇的支付方式）
const initiatePayment = async (method) => {
  // 清理之前的狀態(tài)
  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'; // 調(diào)用支付寶掃碼支付的下單接口
    }

    const response = await axios.post(apiUrl, { orderId });
    
    // 根據(jù)不同接口返回的字段名獲取二維碼鏈接
    qrcodeUrl.value = (method === 'wechat') ? response.data.code_url : response.data.qr_code;
    
    // 開始輪詢和倒計時
    startPolling();
    startCountdown();
  } catch (error) {
    console.error(`${method}支付二維碼生成失敗:`, error);
    alert('支付二維碼生成失敗，請重試！');
  }
};

// 輪詢支付狀態(tài)（完全可復(fù)用）
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('查詢支付狀態(tài)失敗:', 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>