修复支付宝支付

backend/src/views/package/list.vue

@@ -114,14 +114,32 @@
         <el-table-column prop="create_time" label="下单时间" width="170" align="center" />
       </el-table>
     </el-dialog>
+
+    <!-- 支付弹窗 -->
+    <el-dialog v-model="payVisible" title="扫码支付" width="420px" :close-on-click-modal="false">
+      <div v-if="payParams?.code_url" class="pay-body">
+        <canvas ref="qrRef" class="pay-qr"></canvas>
+        <p class="pay-tip">请使用{{ currentChannelName }}扫码支付</p>
+        <p class="pay-amount">¥{{ Number(payAmount || 0).toFixed(2) }}</p>
+      </div>
+      <div v-else-if="payParams?.redirect_url" class="pay-body">
+        <p class="pay-tip">正在跳转{{ currentChannelName }}收银台…</p>
+        <el-button type="primary" @click="openPayUrl(payParams.redirect_url)">重新打开支付页</el-button>
+      </div>
+      <p class="pay-status">{{ payStatusText }}</p>
+      <template #footer>
+        <el-button @click="handleCancelPay">取消支付</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { ArrowLeft, OfficeBuilding, Box, User, InfoFilled } from "@element-plus/icons-vue";
+import QRCode from "qrcode";
 import { useAuthStore } from "@/stores/auth";
 import {
   getPackageList,
@@ -138,6 +156,13 @@ const loading = ref(false);
 const packages = ref<any[]>([]);
 const buyingIds = ref<Record<string, boolean>>({});
 
+const payVisible = ref(false);
+const payParams = ref<any>(null);
+const payStatusText = ref("");
+const payAmount = ref(0);
+const currentChannelName = ref("");
+const qrRef = ref<HTMLCanvasElement | null>(null);
+
 const ordersVisible = ref(false);
 const myOrders = ref<any[]>([]);
 const ordersLoading = ref(false);
@@ -183,6 +208,21 @@ const loadMyOrders = async () => {
   }
 };
 
+const openPayUrl = (url: string) => {
+  if (url) window.open(url, "_blank", "noopener,noreferrer");
+};
+
+const renderQR = async () => {
+  if (!payParams.value?.code_url) return;
+  await nextTick();
+  if (!qrRef.value) return;
+  try {
+    await QRCode.toCanvas(qrRef.value, payParams.value.code_url, { width: 200, margin: 1 });
+  } catch (e) {
+    console.error("二维码生成失败:", e);
+  }
+};
+
 const handleBuy = async (pkg: any) => {
   buyingIds.value[pkg.id] = true;
   try {
@@ -195,13 +235,15 @@ const handleBuy = async (pkg: any) => {
       package_code: pkg.code,
       channel,
       pay_type: "",
+      // 支付宝同步回跳地址：必须是完整 http(s) 地址，且不能带 # 和自定义参数，
+      // 否则支付成功后收银台倒计时结束无处可跳、页面卡住，故取站点根路径
+      return_url: window.location.origin + window.location.pathname,
     });
     if (res.code !== 200) {
       ElMessage.error(res.msg || "下单失败");
       return;
     }
     const orderNo = res.data?.order_no || "";
-    const payParams = res.data?.pay_params || null;
     const offline = res.data?.offline === true;
 
     if (offline) {
@@ -210,10 +252,14 @@ const handleBuy = async (pkg: any) => {
       return;
     }
 
-    // 在线支付：复用产品购买的支付弹窗逻辑
-    // 这里简单跳转到产品购买页的支付流程，或直接展示支付二维码
-    // 为简化，直接用 orderNo 轮询状态
-    ElMessage.success("下单成功，请完成支付");
+    // 在线支付：展示扫码二维码或跳转收银台，并轮询订单状态
+    payParams.value = res.data?.pay_params || null;
+    payAmount.value = Number(res.data?.amount || pkg.price || 0);
+    currentChannelName.value = channels.find((x: any) => x.channel === channel)?.name || channel;
+    payStatusText.value = "请在有效期内完成支付，支付成功后由平台开通功能";
+    payVisible.value = true;
+    await renderQR();
+    if (payParams.value?.redirect_url) openPayUrl(payParams.value.redirect_url);
     startPolling(orderNo);
   } catch (e: any) {
     ElMessage.error(e?.message || "下单失败");
@@ -247,11 +293,12 @@ const checkOrder = async (orderNo: string, silent = false) => {
       if (status === "activated") {
         stopPolling();
         ElMessage.success("购买成功，套餐已开通");
+        payVisible.value = false;
         loadMyOrders();
         return;
       }
       if (status === "paid") {
-        if (!silent) ElMessage.info("已支付，等待平台开通…");
+        payStatusText.value = "已支付，等待平台开通…";
         return;
       }
       if (!silent) ElMessage.info("尚未检测到支付成功，请确认已完成支付");
@@ -261,15 +308,23 @@ const checkOrder = async (orderNo: string, silent = false) => {
   }
 };
 
+const handleCancelPay = () => {
+  stopPolling();
+  payVisible.value = false;
+  ElMessage.info("已取消，订单仍可在「我的订单」中查看");
+};
+
 watch(ordersVisible, (v) => {
   if (v) loadMyOrders();
 });
 
+watch(payVisible, (v) => {
+  if (!v) stopPolling();
+});
+
 onMounted(() => {
   loadPackages();
 });
-
-import { watch } from "vue";
 </script>
 
 <style scoped lang="less">
@@ -443,6 +498,34 @@ import { watch } from "vue";
   }
 }
 
+.pay-body {
+  text-align: center;
+
+  .pay-qr {
+    width: 200px;
+    height: 200px;
+  }
+
+  .pay-tip {
+    font-size: 14px;
+    color: #606266;
+    margin: 12px 0 4px;
+  }
+
+  .pay-amount {
+    font-size: 20px;
+    font-weight: 700;
+    color: #f56c6c;
+    margin: 0;
+  }
+}
+
+.pay-status {
+  text-align: center;
+  font-size: 13px;
+  color: #909399;
+}
+
 .empty-state {
   text-align: center;
   padding: 80px 20px;