feat(pay/success): 支付成功页面参数处理

config/request.js

@@ -19,7 +19,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'https://t-app.beida666.com/prod-api'
+    config.baseURL = 'http://t-app.beida666.com/prod-api'
     //#endif
 
     //#ifdef QA_SERVER

pages/pay/index.vue

@@ -934,11 +934,11 @@ export default {
       let url, obj
       // 银行卡
       if (this.isBank) {
-        if (this.isBank == 'hf') {
+        if (this.isBank == PAY_TYPE.HUI_FU_BANK_CARD) {
           url = api.payConfirmHf
-        } else if (this.isBank == 'jd') {
+        } else if (this.isBank == PAY_TYPE.JING_DONG_BANK_CARD) {
           url = api.payConfirmJd
-        } else if (this.isBank == 'tl') {
+        } else if (this.isBank == PAY_TYPE.TONG_LIAN_BANK_CARD) {
           url = api.payConfirmTl
         }
         obj = {
@@ -1207,7 +1207,7 @@ export default {
     getPayAuthToken(payChannel) {
       return new Promise((resolve, reject) => {
         const extParam = {
-          source: !!this.isRecharge,
+          isRecharge: !!this.isRecharge,
           orderCode: this.orderCode,
           specialArea: this.specialArea,
         }

pages/pay/success.vue

@@ -4,7 +4,7 @@
     <view class="status-bar"></view>
 
     <!-- 成功状态区域 -->
-    <view class="success-section">
+    <view v-show="payStatus === 1" class="success-section">
       <view class="success-icon-wrapper">
         <view class="success-icon">
           <text class="success-checkmark">✓</text>
@@ -17,11 +17,31 @@
       </view>
 
       <view class="success-title">{{ paySuccessText }}</view>
-      <view v-if="isRecharge === undefined" class="success-subtitle"
+      <view
+        v-if="isRecharge === undefined && payStatus === 1"
+        class="success-subtitle"
         >您的订单已支付完成</view
       >
     </view>
+    <!-- 查询中状态区域 -->
+    <view v-show="payStatus === 0" class="loading-section">
+      <view class="loading-icon-wrapper">
+        <view class="loading-icon">
+          <view class="loading-spinner">
+            <view class="spinner-dot dot1"></view>
+            <view class="spinner-dot dot2"></view>
+            <view class="spinner-dot dot3"></view>
+          </view>
+        </view>
+        <view class="loading-rings">
+          <view class="loading-ring ring1"></view>
+          <view class="loading-ring ring2"></view>
+        </view>
+      </view>
 
+      <view class="loading-title">支付查询中...</view>
+      <view class="loading-subtitle">请稍等，正在确认您的支付状态</view>
+    </view>
     <!-- 操作按钮区域 -->
     <view class="action-section">
       <view class="button-group">
@@ -57,6 +77,7 @@ export default {
       orderCode: '',
       specialArea: null,
       isRecharge: undefined,
+      payStatus: 0,
     }
   },
   computed: {
@@ -74,8 +95,9 @@ export default {
   onLoad(options) {
     // 获取传递的参数
     const extParam = JSON.parse(atob(options.extParam || '{}'))
+    console.log(extParam, '..extParam')
     this.specialArea = extParam.specialArea
-    this.isRecharge = extParam.source
+    this.isRecharge = extParam.isRecharge
     this.orderCode = extParam.orderCode || ''
     if (this.orderCode) {
       setTimeout(() => {
@@ -107,6 +129,7 @@ export default {
     pollingPayStatus(orderCode) {
       payStatus({ businessCode: orderCode }).then(res => {
         if (res.data == 1) {
+          this.payStatus = 1
           clearTimeout(paySetTimeoutFlag)
           if ([1, 7, 24].includes(Number(this.specialArea))) {
             uni.showLoading({
@@ -322,6 +345,134 @@ export default {
   }
 }
 
+.spinner-dot {
+  position: relative;
+  width: 12rpx;
+  height: 12rpx;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
+}
+
+.spinner-dot.dot1 {
+  animation: dotBlink 1.4s ease-in-out infinite;
+}
+
+.spinner-dot.dot2 {
+  animation: dotBlink 1.4s ease-in-out 0.2s infinite;
+}
+
+.spinner-dot.dot3 {
+  animation: dotBlink 1.4s ease-in-out 0.4s infinite;
+}
+
+.loading-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 40rpx 40rpx;
+  position: relative;
+}
+
+.loading-icon-wrapper {
+  position: relative;
+  margin-bottom: 40rpx;
+}
+
+.loading-icon {
+  width: 120rpx;
+  height: 120rpx;
+  background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 8rpx 32rpx rgba(0, 91, 172, 0.4);
+}
+
+.loading-spinner {
+  position: relative;
+  width: 80rpx;
+  height: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.loading-rings {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.loading-ring {
+  position: absolute;
+  border: 2rpx solid #005bac;
+  border-radius: 50%;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.loading-ring.ring1 {
+  width: 140rpx;
+  height: 140rpx;
+  animation: loadingRipple 2s ease-out infinite;
+}
+
+.loading-ring.ring2 {
+  width: 180rpx;
+  height: 180rpx;
+  animation: loadingRipple 2s ease-out 0.8s infinite;
+}
+
+.loading-title {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 16rpx;
+  text-align: center;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+.loading-subtitle {
+  font-size: 28rpx;
+  color: #7f8c8d;
+  text-align: center;
+  line-height: 1.4;
+  opacity: 0.9;
+}
+
+@keyframes dotBlink {
+  0% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes loadingRipple {
+  0% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(0.1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
 // 暗黑模式适配
 @media (prefers-color-scheme: dark) {
   .success-page {
@@ -335,6 +486,14 @@ export default {
   .success-subtitle {
     color: #a0aec0;
   }
+
+  .loading-title {
+    color: #ffffff;
+  }
+
+  .loading-subtitle {
+    color: #a0aec0;
+  }
 }
 
 // 适配不同屏幕尺寸