feat(payment):增加支付状态查询以及正式环境打包地址修改

tianwu
1 parent 607807d2
Showing 4 changed files with 172 additions and 10 deletions
apps/web-payment/.env.production
apps/web-payment/src/api/payment.ts
apps/web-payment/src/views/payment/index.vue
apps/web-payment/vite.config.mts
 VITE_BASE = /pages/
  
 # 接口地址
-VITE_GLOB_API_URL=https://cashier.test.gszdtop.com
+VITE_GLOB_API_URL=https://cashier.pay.gszdtop.com
  
 # 是否开启压缩，可以设置为 none, brotli, gzip
 VITE_COMPRESS=none
@@ -78,3 +78,14 @@ export async function zrPaymentState(
     `/payment/cashier/zrPaymentState?paymentId=${paymentId}&mode=${mode}`,
   );
 }
+
+/**
+ *
+ * @param tradeId
+ * @returns
+ */
+export async function checkorder(tradeId: number | string) {
+  return requestClient.post<any>(
+    `payment/cashier/checkOrder?tradeId=${tradeId}`,
+  );
+}
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onUnmounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
  
 import { fenToYuan } from '@vben/utils';
@@ -17,6 +17,7 @@ import VConsole from &#39;vconsole&#39;;
 import wx from 'weixin-js-sdk';
  
 import {
+  checkorder,
   getOpenId,
   listUserCards,
   orderInfo,
@@ -74,6 +75,13 @@ const loading = ref&lt;boolean&gt;(false);
 const paymentSuccess = ref<boolean>(false);
 const payErrorDialog = ref<boolean>(false);
 const errorMessage = ref<string>('支付失败');
+const orderExpired = ref<boolean>(false);
+const orderCheckTimer = ref<any>(null);
+
+// 订单检查相关配置
+const ORDER_CHECK_INTERVAL = 15_000; // 每10秒检查一次
+const ORDER_CHECK_MAX_COUNT = 180; // 最多检查180次（30分钟）
+let orderCheckCount = 0;
  
 const handleShowConsole = () => {
   const vConsole = new VConsole({ theme: 'dark' });
@@ -189,6 +197,12 @@ const loadOpenId = async () =&gt; {
  
 // 方法
 const handlepayBtnShowClick = async (pipeline: Pipeline) => {
+  // 如果订单已过期，阻止操作
+  if (orderExpired.value) {
+    ElMessage.error('订单已过期，请重新下单');
+    return;
+  }
+
   currentPaymentMethod.value = pipeline.pipelineId;
   currentPayType.value = pipeline;
   payBtnShow.value = false;
@@ -215,6 +229,12 @@ const handlepayBtnShowClick = async (pipeline: Pipeline) =&gt; {
 };
  
 const handleCardSelect = (card: Card) => {
+  // 如果订单已过期，阻止操作
+  if (orderExpired.value) {
+    ElMessage.error('订单已过期，请重新下单');
+    return;
+  }
+
   selectedCard.value = card;
   showCardDialog.value = false;
   // ElMessage.success(`已选择 ${card.name} 的园区卡`);
@@ -253,6 +273,7 @@ const handlePasswordComplete = async (password: string) =&gt; {
     // });
   } catch (error) {
     errorMessage.value = error?.message || '支付失败';
+    showPasswordDialog.value = false;
     payErrorDialog.value = true;
     console.error(error);
   } finally {
@@ -338,6 +359,12 @@ const queryPayment = async () =&gt; {
 };
  
 const handlePay = async () => {
+  // 如果订单已过期，阻止操作
+  if (orderExpired.value) {
+    ElMessage.error('订单已过期，请重新下单');
+    return;
+  }
+
   if (!currentPayType.value) {
     ElMessage.warning('请先选择支付方式');
     return;
@@ -510,6 +537,62 @@ const checkPayResult = async (paymentId: number | string) =&gt; {
   }
 };
  
+// 停止订单检查轮询
+const stopOrderCheck = () => {
+  if (orderCheckTimer.value) {
+    clearInterval(orderCheckTimer.value);
+    orderCheckTimer.value = null;
+  }
+  orderCheckCount = 0;
+};
+
+// 检查订单是否过期
+const checkOrderExpired = async () => {
+  // 如果已经标记为过期，则不再检查
+  if (orderExpired.value) {
+    stopOrderCheck();
+    return;
+  }
+
+  // 超过最大检查次数，停止检查
+  if (orderCheckCount >= ORDER_CHECK_MAX_COUNT) {
+    console.log('订单检查次数已达上限');
+    stopOrderCheck();
+    return;
+  }
+
+  try {
+    orderCheckCount++;
+    const data = await checkorder(orderInfoData.value.tradeId);
+    // 检查订单状态
+  } catch (error) {
+    if (String(error?.code) !== '200') {
+      orderExpired.value = true;
+      stopOrderCheck();
+
+      // 重置所有支付相关状态
+      resetPaymentState();
+
+      // 显示过期提示
+      errorMessage.value = '订单已过期，请重新下单';
+      payErrorDialog.value = true;
+    }
+    console.error('检查订单状态失败:', error);
+    // 检查失败不影响用户操作，继续轮询
+  }
+};
+
+// 启动订单检查
+const startOrderCheck = () => {
+  // 首先执行一次检查
+  checkOrderExpired();
+
+  // 然后启动定时检查
+  orderCheckTimer.value = setInterval(() => {
+    checkOrderExpired();
+  }, ORDER_CHECK_INTERVAL);
+};
+
 const init = async () => {
   token.value = (route.query?.token as string) || '';
   openId.value = (route.query?.openId as string) || '';
@@ -520,6 +603,9 @@ const init = async () =&gt; {
   try {
     loadLoading.value = true;
     await getOrderInfo();
+
+    // 订单信息加载成功后，开始检查订单是否过期
+    startOrderCheck();
   } catch (error) {
     // ElMessage.error(error?.message || '获取订单信息失败');
     errorMessage.value = error?.message || '获取订单信息失败';
@@ -529,6 +615,12 @@ const init = async () =&gt; {
   }
 };
  
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  stopOrderCheck();
+  stopPollingPayResult();
+});
+
 init();
 </script>
  
@@ -572,8 +664,16 @@ init();
           <p class="subtitle">快捷·安全</p>
         </div>
  
+        <!-- 订单过期提示横幅 -->
+        <div v-if="orderExpired" class="expired-banner">
+          <ElIcon :size="20" color="#f59e0b">
+            <WarningFilled />
+          </ElIcon>
+          <span>订单已过期，请重新下单</span>
+        </div>
+
         <!-- 订单金额卡片 -->
-        <div class="amount-card">
+        <div class="amount-card" :class="{ 'is-expired': orderExpired }">
           <div class="amount-content">
             <p class="amount-label">订单金额</p>
             <p class="amount-value">¥{{ displayAmount }}</p>
@@ -582,7 +682,7 @@ init();
         </div>
  
         <!-- 支付方式选择 -->
-        <div class="payment-section">
+        <div class="payment-section" :class="{ 'is-expired': orderExpired }">
           <div class="section-header">
             <span class="section-title">选择支付方式</span>
           </div>
@@ -592,7 +692,10 @@ init();
             v-for="pipeline in paymentPipelines"
             :key="pipeline.pipelineId"
             class="payment-item"
-            :class="{ active: currentPaymentMethod === pipeline.pipelineId }"
+            :class="{
+              active: currentPaymentMethod === pipeline.pipelineId,
+              disabled: orderExpired,
+            }"
             @click="handlepayBtnShowClick(pipeline)"
           >
             <div class="payment-item-left">
@@ -662,6 +765,7 @@ init();
             <ElRadio
               :model-value="currentPaymentMethod"
               :label="pipeline.pipelineId"
+              :disabled="orderExpired"
               size="large"
             />
           </div>
@@ -675,14 +779,20 @@ init();
       <!-- 底部支付按钮 -->
       <div class="payment-footer">
         <ElButton
-          :disabled="!payBtnShow"
+          :disabled="!payBtnShow || orderExpired"
           class="pay-button"
           type="primary"
           size="large"
           :loading="loading"
           @click="handlePay"
         >
-          {{ loading ? '处理中...' : `确认支付 ¥${displayAmount}` }}
+          {{
+            orderExpired
+              ? '订单已过期'
+              : loading
+                ? '处理中...'
+                : `确认支付 ¥${displayAmount}`
+          }}
         </ElButton>
       </div>
     </div>
@@ -743,7 +853,9 @@ init();
     >
       <div class="color-[#333] items-center">
         <img src="/fail.png" class="m-auto block h-[64px] w-[64px]" />
-        <div class="py-[20px] text-center text-[20px] font-bold">支付失败</div>
+        <div class="py-[20px] text-center text-[20px] font-bold">
+          {{ orderExpired ? '订单已过期' : '支付失败' }}
+        </div>
         <div class="w-full overflow-y-auto text-left text-[18px] leading-6">
           {{ errorMessage }}
         </div>
@@ -866,6 +978,38 @@ init();
   );
 }
  
+// 订单过期横幅样式
+.expired-banner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #78350f;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border: 1px solid #fbbf24;
+  border-radius: 8px;
+  animation: slideUp 0.5s ease-out;
+}
+
+// 过期状态样式
+.is-expired {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.6;
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    background: rgb(255 255 255 / 30%);
+    border-radius: inherit;
+  }
+}
+
 // 错误提示容器
 .error-container {
   display: flex;
@@ -1057,7 +1201,7 @@ init();
       margin-bottom: 0;
     }
  
-    &:hover {
+    &:hover:not(.disabled) {
       border-color: #fecaca;
     }
  
@@ -1065,6 +1209,11 @@ init();
       border-color: #ea4200;
     }
  
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     .payment-item-left {
       display: flex;
       gap: 16px;
@@ -1163,6 +1312,8 @@ init();
  
     &:disabled {
       cursor: not-allowed;
+      background: #9ca3af;
+      box-shadow: none;
       opacity: 0.5;
     }
   }
@@ -18,7 +18,7 @@ export default defineConfig(async () =&gt; {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://cashier.test.gszdtop.com',
+            target: 'https://cashier.test.gszdtop.com',
             ws: true,
           },
         },