更改打包配置

tianwu
1 parent cec216f8
Showing 5 changed files with 405 additions and 125 deletions
apps/web-payment/.env.production
apps/web-payment/src/api/payment.ts
apps/web-payment/src/views/payment/index.vue
apps/web-payment/src/views/payment/paySuccess.vue
apps/web-payment/vite.config.mts
-VITE_BASE=/
+VITE_BASE = /pages/
  
 # 接口地址
-VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
+VITE_GLOB_API_URL=http://cashier.test.gszdtop.com
  
 # 是否开启压缩，可以设置为 none, brotli, gzip
 VITE_COMPRESS=none
@@ -51,3 +51,30 @@ export async function listUserCards(
     `/card/payment/listUserCards?pipelineId=${pipelineId}&userId=${userId}`,
   );
 }
+
+/**
+ * 查询支付状态
+ * @param paymentId
+ * @param mode
+ * @returns
+ */
+export async function paymentState(paymentId: number | string, mode: 'online') {
+  return requestClient.post<any>(
+    `/payment/cashier/paymentState?paymentId=${paymentId}&mode=${mode}`,
+  );
+}
+
+/**
+ * 中瑞特供查询
+ * @param paymentId
+ * @param mode
+ * @returns
+ */
+export async function zrPaymentState(
+  paymentId: number | string,
+  mode: 'online',
+) {
+  return requestClient.post<any>(
+    `/payment/cashier/zrPaymentState?paymentId=${paymentId}&mode=${mode}`,
+  );
+}
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from &#39;vue-router&#39;;
 import { fenToYuan } from '@vben/utils';
  
 import {
+  Close,
   CreditCard,
   SuccessFilled,
   Wallet,
@@ -13,7 +14,13 @@ import {
 import { ElButton, ElDialog, ElIcon, ElMessage, ElRadio } from 'element-plus';
 import qs from 'qs';
  
-import { getOpenId, listUserCards, orderInfo, orderPayment } from '#/api';
+import {
+  getOpenId,
+  listUserCards,
+  orderInfo,
+  orderPayment,
+  zrPaymentState,
+} from '#/api';
 import EnvironmentDetector from '#/composables/environmentDetector';
  
 import PasswordInput from './component/PasswordInput.vue';
@@ -49,7 +56,7 @@ const REDIRECT_CHANNEL_ID = 29;
  
 // 检查参数是否有效
 const hasValidParams = computed(() => {
-  return !!(token.value && code.value);
+  return !!(token.value || code.value);
 });
  
 const cardList = ref<Card[]>([]);
@@ -118,28 +125,23 @@ const getPaymentIcon = (channelName: string) =&gt; {
   }
 };
  
-const jumpTest = () => {
-  // jWeixin.miniProgram.redirectTo({
-  //   url: `/packageA/pages/wePay/index?amount=${displayAmount.value}&businessType=3&redirect=${true}`,
-  // });
-  router.push({
-    path: '/paymentSuccess',
-    query: {
-      amount: displayAmount.value,
-      success: 'true',
-      payType: '园区卡支付',
-    },
-  });
+// 判断是否是园区卡支付
+const isCardPayment = (pipeline: Pipeline) => {
+  const channelName = pipeline.channelName.toLowerCase();
+  return channelName.includes('园区卡') || channelName.includes('卡');
 };
  
 // 获取支付方式描述
 const getPaymentDesc = (pipeline: Pipeline) => {
+  // 只有当前选中的支付方式是园区卡支付，且已选择卡时，才显示卡号
   if (
     pipeline.pipelineId === currentPaymentMethod.value &&
+    isCardPayment(pipeline) &&
     selectedCard.value
   ) {
     return `卡号：${selectedCard.value.cardNo}`;
   }
+
   const channelName = pipeline.channelName.toLowerCase();
   if (channelName.includes('微信')) {
     return '推荐使用';
@@ -181,6 +183,9 @@ const handlepayBtnShowClick = async (pipeline: Pipeline) =&gt; {
     }
     showCardDialog.value = true;
   } else {
+    // 切换到其他支付方式时，清空已选择的园区卡
+    selectedCard.value = null;
+
     if (pipeline.channelId === REDIRECT_CHANNEL_ID) {
       payBtnShow.value = true;
       return;
@@ -192,7 +197,7 @@ const handlepayBtnShowClick = async (pipeline: Pipeline) =&gt; {
 const handleCardSelect = (card: Card) => {
   selectedCard.value = card;
   showCardDialog.value = false;
-  ElMessage.success(`已选择 ${card.name} 的园区卡`);
+  // ElMessage.success(`已选择 ${card.name} 的园区卡`);
   payBtnShow.value = true;
 };
  
@@ -203,7 +208,6 @@ const handlePasswordCancel = () =&gt; {
 };
  
 const handlePasswordComplete = async (password: string) => {
-  showPasswordDialog.value = false;
   try {
     const params = {
       tradeId: orderInfoData.value.tradeId,
@@ -216,14 +220,17 @@ const handlePasswordComplete = async (password: string) =&gt; {
     };
  
     const data = await orderPayment(params);
-    router.push({
-      path: '/paymentSuccess',
-      query: {
-        amount: displayAmount.value,
-        success: 'true',
-        payType: '园区卡支付',
-      },
-    });
+    // 园区卡支付成功开始轮询结果
+    checkPayResult(data.paymentId);
+    // router.push({
+    //   path: '/paymentSuccess',
+    //   query: {
+    //     amount: displayAmount.value,
+    //     payee: orderInfoData.value.mchName,
+    //     success: 'true',
+    //     payType: '园区卡支付',
+    //   },
+    // });
   } catch (error) {
     errorMessage.value = error?.message || '支付失败';
     payErrorDialog.value = true;
@@ -251,11 +258,10 @@ const queryPayment = async () =&gt; {
       payType: currentPayType.value.channelName,
       redirect: true,
       payee: orderInfoData.value.mchName,
-      redirectUrl: orderInfoData.value.redirectUrl,
     };
     const queryString = qs.stringify(params);
     if (typeof jWeixin !== 'undefined' && jWeixin.miniProgram) {
-      jWeixin.miniProgram.navigateTo({
+      jWeixin.miniProgram.redirectTo({
         url: `/packageA/pages/wxPay/index?${queryString}`,
       });
       loading.value = false;
@@ -276,7 +282,6 @@ const queryPayment = async () =&gt; {
       goods: orderInfoData.value.goods,
       amount: orderInfoData.value.amount,
       payType: currentPayType.value.channelName,
-      redirectUrl: orderInfoData.value.redirectUrl,
       payee: orderInfoData.value.mchName,
     };
     const queryString = qs.stringify(pramsData);
@@ -312,17 +317,17 @@ const handlePay = async () =&gt; {
   }
  
   const channelName = currentPayType.value.channelName.toLowerCase();
-  const isCardPayment =
+  const isCardPaymentMethod =
     channelName.includes('园区卡') || channelName.includes('卡支付');
  
-  if (isCardPayment && !selectedCard.value) {
+  if (isCardPaymentMethod && !selectedCard.value) {
     ElMessage.warning('请先选择园区卡');
     return;
   }
  
   loading.value = true;
  
-  if (isCardPayment) {
+  if (isCardPaymentMethod) {
     // 园区卡支付逻辑
     try {
       showPasswordDialog.value = true;
@@ -345,6 +350,12 @@ const handleCloseDialog = () =&gt; {
   payBtnShow.value = false;
 };
  
+// 点击遮罩层关闭
+const handleMaskClick = () => {
+  showCardDialog.value = false;
+  payBtnShow.value = false;
+};
+
 // 获取订单信息 支付方式等数据
 const getOrderInfo = async () => {
   try {
@@ -378,6 +389,86 @@ const getListUserCards = async () =&gt; {
   }
 };
  
+let pollTimer: any = null;
+let pollCount = 0;
+// 最大轮询次数
+const maxPollCount = 30;
+// 轮询间隔(毫秒)
+const pollInterval = 2000;
+
+const stopPollingPayResult = () => {
+  showPasswordDialog.value = false;
+  if (pollTimer) {
+    clearTimeout(pollTimer);
+    pollTimer = null;
+  }
+  pollCount = 0;
+};
+
+const paySuccessHandler = (data: any) => {
+  router.replace({
+    path: '/paymentSuccess',
+    query: {
+      amount: displayAmount.value,
+      payee: orderInfoData.value.mchName,
+      success: 'true',
+      payType: '园区卡支付',
+      redirectUrl: data.redirectUrl,
+    },
+  });
+};
+
+const payFailHandler = (msg: any) => {};
+
+const payTimeoutHandler = () => {
+  // errorMessage: '支付结果查询超时，请稍后在订单中查看支付状态'
+};
+
+const checkPayResult = async (paymentId: number | string) => {
+  try {
+    const data = await zrPaymentState(paymentId, 'online');
+    if (data?.state === 4) {
+      stopPollingPayResult();
+      paySuccessHandler(data);
+    } else if (data?.state === 6) {
+      // 支付失败
+      stopPollingPayResult();
+      payFailHandler(data?.message || '支付失败');
+    } else {
+      pollCount++;
+      if (pollCount < maxPollCount) {
+        pollTimer = setTimeout(() => {
+          checkPayResult(paymentId);
+        }, pollInterval);
+      } else {
+        // 超过最大轮询次数，停止轮询
+        console.log('支付结果查询超时');
+        stopPollingPayResult();
+        payTimeoutHandler();
+      }
+    }
+  } catch (error) {
+    ElMessage.error(JSON.stringify(error));
+    console.error('支付结果查询失败:', error);
+    if (error?.code === 'E504') {
+      stopPollingPayResult();
+      payFailHandler(error?.msg || '支付失败');
+    } else {
+      // 查询失败，继续轮询
+      pollCount++;
+
+      if (pollCount < maxPollCount) {
+        pollTimer = setTimeout(() => {
+          checkPayResult(paymentId);
+        }, pollInterval);
+      } else {
+        stopPollingPayResult();
+        payTimeoutHandler();
+      }
+    }
+  }
+};
+
 const init = async () => {
   token.value = (route.query?.token as string) || '';
   openId.value = (route.query?.openId as string) || '';
@@ -547,39 +638,51 @@ init();
       </div>
     </div>
  
-    <!-- 园区卡选择弹窗 -->
-    <ElDialog
-      v-model="showCardDialog"
-      title="选择园区卡"
-      width="90%"
-      :style="{ maxWidth: '500px' }"
-      class="card-dialog"
-      :close-on-click-modal="false"
-    >
-      <div class="card-list-dialog">
-        <div
-          v-for="card in cardList"
-          :key="card.cardNo"
-          class="card-item-dialog"
-          @click="handleCardSelect(card)"
-        >
-          <div class="card-item-info">
-            <p class="card-holder">{{ card.name }}</p>
-            <p class="card-number">{{ card.cardNo }}</p>
+    <!-- 园区卡选择底部弹出层 -->
+    <transition name="fade">
+      <div
+        v-if="showCardDialog"
+        class="bottom-sheet-mask"
+        @click="handleMaskClick"
+      ></div>
+    </transition>
+    <transition name="slide-up">
+      <div v-if="showCardDialog" class="bottom-sheet">
+        <div class="bottom-sheet-header">
+          <h3 class="bottom-sheet-title">选择园区卡</h3>
+          <div class="bottom-sheet-close" @click="handleCloseDialog">
+            <ElIcon :size="24" color="#6b7280">
+              <Close />
+            </ElIcon>
           </div>
-          <div class="card-balance">
-            <p class="balance-label">余额</p>
-            <p class="balance-value">¥{{ card.amount }}</p>
+        </div>
+        <div class="bottom-sheet-body">
+          <div class="card-list">
+            <div
+              v-for="card in cardList"
+              :key="card.cardNo"
+              class="card-item"
+              @click="handleCardSelect(card)"
+            >
+              <div class="card-item-info">
+                <p class="card-holder">{{ card.name }}</p>
+                <p class="card-number">{{ card.cardNo }}</p>
+              </div>
+              <div class="card-balance">
+                <p class="balance-label">余额</p>
+                <p class="balance-value">¥{{ fenToYuan(card.amount) }}</p>
+              </div>
+            </div>
+            <div v-if="cardList.length === 0" class="empty-card">
+              <p>暂无可用园区卡</p>
+            </div>
           </div>
         </div>
-        <div v-if="cardList.length === 0" class="empty-card">
-          <p>暂无可用园区卡</p>
+        <div class="bottom-sheet-footer">
+          <button class="cancel-button" @click="handleCloseDialog">取消</button>
         </div>
       </div>
-      <template #footer>
-        <ElButton @click="handleCloseDialog">取消</ElButton>
-      </template>
-    </ElDialog>
+    </transition>
  
     <ElDialog
       v-model="payErrorDialog"
@@ -680,6 +783,28 @@ init();
   }
 }
  
+// 遮罩层动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// 底部弹出动画
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+
 .cashier-container {
   min-height: 100vh;
   background: linear-gradient(
@@ -994,90 +1119,201 @@ init();
   }
 }
  
-// 园区卡选择弹窗
-.card-dialog {
-  :deep(.el-dialog__header) {
-    padding: 20px 24px;
+// 底部弹出层样式
+.bottom-sheet-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background-color: rgb(0 0 0 / 50%);
+}
+
+.bottom-sheet {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  max-height: 70vh;
+  background: #fff;
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -4px 20px rgb(0 0 0 / 10%);
+
+  .bottom-sheet-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px 16px;
     border-bottom: 1px solid #f0f0f0;
-  }
  
-  :deep(.el-dialog__title) {
-    font-size: 18px;
-    font-weight: 600;
-    color: #1f2937;
+    .bottom-sheet-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #1f2937;
+    }
+
+    .bottom-sheet-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      border-radius: 50%;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      &:active {
+        background-color: #e5e7eb;
+      }
+    }
   }
  
-  :deep(.el-dialog__body) {
-    padding: 24px;
+  .bottom-sheet-body {
+    flex: 1;
+    overflow: hidden;
   }
-}
  
-.card-list-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 400px;
-  overflow-y: auto;
+  .card-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: calc(70vh - 160px);
+    padding: 36px 24px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
  
-  .empty-card {
-    padding: 40px 20px;
-    color: #9ca3af;
-    text-align: center;
-  }
-}
+    &::-webkit-scrollbar-thumb {
+      background-color: rgb(0 0 0 / 20%);
+      border-radius: 2px;
+    }
  
-.card-item-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  cursor: pointer;
-  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
-  border: 2px solid transparent;
-  border-radius: 12px;
-  transition: all 0.3s ease;
-
-  &:hover {
-    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-    border-color: #10b981;
-    box-shadow: 0 4px 12px rgb(16 185 129 / 20%);
-    transform: translateY(-2px);
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    .empty-card {
+      padding: 40px 20px;
+      color: #9ca3af;
+      text-align: center;
+    }
   }
  
-  .card-item-info {
-    .card-holder {
-      margin: 0 0 4px;
-      font-size: 16px;
-      font-weight: 600;
-      color: #1f2937;
+  .card-item {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    cursor: pointer;
+    background: #fff;
+    border: 2px solid #f0f0f0;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, #fff9f1 0%, #ffe9d4 100%);
+      border-color: #ea4200;
+      box-shadow: 0 4px 12px rgb(234 66 0 / 20%);
+      transform: translateY(-2px);
     }
  
-    .card-number {
-      margin: 0;
-      font-family: 'Courier New', monospace;
-      font-size: 13px;
-      color: #6b7280;
+    &:active {
+      background: linear-gradient(135deg, #ffe9d4 0%, #ffd9b8 100%);
+      transform: translateY(0);
+    }
+
+    .card-item-info {
+      .card-holder {
+        margin: 0 0 4px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #1f2937;
+      }
+
+      .card-number {
+        margin: 0;
+        font-family: 'Courier New', monospace;
+        font-size: 16px;
+        color: #6b7280;
+      }
+    }
+
+    .card-balance {
+      text-align: right;
+
+      .balance-label {
+        margin: 0 0 4px;
+        font-size: 12px;
+        color: #6b7280;
+      }
+
+      .balance-value {
+        margin: 0;
+        font-size: 18px;
+        font-weight: bold;
+        color: #ea4200;
+      }
     }
   }
  
-  .card-balance {
-    text-align: right;
+  .bottom-sheet-footer {
+    flex-shrink: 0;
+    padding: 16px 24px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    border-top: 1px solid #f0f0f0;
  
-    .balance-label {
-      margin: 0 0 4px;
-      font-size: 12px;
+    .cancel-button {
+      width: 100%;
+      height: 44px;
+      font-size: 16px;
+      font-weight: 600;
       color: #6b7280;
-    }
+      cursor: pointer;
+      background: #f3f4f6;
+      border: none;
+      border-radius: 8px;
+      transition: all 0.2s;
+
+      &:hover {
+        background: #e5e7eb;
+      }
  
-    .balance-value {
-      margin: 0;
-      font-size: 18px;
-      font-weight: bold;
-      color: #10b981;
+      &:active {
+        transform: scale(0.98);
+      }
     }
   }
 }
  
+// 原有的card-dialog样式（用于错误提示弹窗）
+.card-dialog {
+  :deep(.el-dialog__header) {
+    padding: 20px 24px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  :deep(.el-dialog__title) {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 24px;
+  }
+}
+
 // 成功对话框
 .success-dialog {
   :deep(.el-dialog__body) {
@@ -16,7 +16,9 @@ const init = async () =&gt; {
 };
  
 const handleBack = () => {
-  if (
+  if (queryData.value.redirectUrl) {
+    window.location.href = queryData.value.redirectUrl;
+  } else if (
     typeof jWeixin !== 'undefined' &&
     jWeixin.miniProgram &&
     detector.value?.env.isMiniProgram
@@ -25,6 +27,15 @@ const handleBack = () =&gt; {
       url: `/pages/newhome/newhome`,
     });
   }
+  // if (
+  //   typeof jWeixin !== 'undefined' &&
+  //   jWeixin.miniProgram &&
+  //   detector.value?.env.isMiniProgram
+  // ) {
+  //   jWeixin.miniProgram.switchTab({
+  //     url: `/pages/newhome/newhome`,
+  //   });
+  // }
 };
  
 onMounted(() => {
@@ -35,7 +46,6 @@ onMounted(() =&gt; {
  
 <template>
   <div class="cashier-container" v-loading="loadLoading">
-    {{ detector?.env }}
     <!-- 正常支付界面 -->
     <div class="cashier-wrapper">
       <div class="pt-[40px]">
@@ -52,6 +62,12 @@ onMounted(() =&gt; {
             <div>支付金额</div>
             <div>{{ queryData?.amount }} 元</div>
           </div>
+          <div class="flex justify-between">
+            <div>收款方</div>
+            <div class="w-[70%] break-words">
+              {{ queryData?.payee }}
+            </div>
+          </div>
           <div class="mt-10 flex justify-between">
             <ElButton
               class="pay-button"
@@ -6,6 +6,7 @@ export default defineConfig(async () =&gt; {
   return {
     application: {},
     vite: {
+      base: '/pages/',
       plugins: [
         ElementPlus({
           format: 'esm',
@@ -17,7 +18,7 @@ export default defineConfig(async () =&gt; {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://10.28.3.34:8686',
+            target: 'http://cashier.test.gszdtop.com',
             ws: true,
           },
         },