代码提交

pages/payStatus/index.vue

@@ -8,14 +8,18 @@
 <script setup>
 import { useRouter } from "@/hooks/useRouter";
 import { computed, ref, unref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-import { checkH5Pay } from "@/api/order";
+import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
+import { checkPay } from "@/api/order";
 import { CacheKey } from "@/utils/config";
+import Header from '@/components/Header/index.vue'
+import Recommend from '@/components/Recommend/index.vue'
+import { useInterface } from "@/hooks/useInterface";
+import { useScroll } from "@/hooks/useScroll";
 
 const {getParams, goBack, push, pushToTab} = useRouter()
-
+const {loading,hideLoading} = useInterface()
 const type = ref(0) // 支付状态 ： 0支付中 1支付成功 2支付失败
-
+useScroll()
 const title = computed(() => {
   if (type.value === 0) return '支付中...'
   if (type.value === 1) return '支付成功'
@@ -36,23 +40,48 @@ function toBackHome() {
   pushToTab({url: '/pages/index/index'})
 }
 
+const retryTime = ref(3)
+
 /**
  * 查询服务端支付状态
  */
 async function queryOrderStatus() {
-  const payInfoStr = uni.getStorageSync(CacheKey.PAY_INFO);
-  if (payInfoStr) {
-    const parse = JSON.parse(payInfoStr);
-    const res = await checkH5Pay(parse);
-    type.value = res ? 1 : 2
-    uni.removeStorageSync(CacheKey.PAY_INFO)
-  } else {
-    // 没有订单缓存直接跳到订单页面
-    toOrderList(0)
-  }
+  loading({title: '查询中...'})
+  // 异步去查，有可能接口比微信快
+  setTimeout(async () => {
+    try {
+      const payInfoStr = uni.getStorageSync(CacheKey.PAY_INFO);
+      // 没有订单缓存直接跳到订单页面
+      if (!payInfoStr) return toOrderList(0)
+
+      const parse = JSON.parse(payInfoStr);
+      const res = await checkPay(parse);
+      if (!res) {
+        // 支付失败重新查询
+        if (retryTime.value > 0) {
+          retryTime.value--
+          await queryOrderStatus()
+        } else {
+          type.value = 2
+          uni.removeStorageSync(CacheKey.PAY_INFO)
+        }
+        return
+      }
+      type.value = 1
+      uni.removeStorageSync(CacheKey.PAY_INFO)
+    } finally {
+      hideLoading()
+    }
+  }, 1000)
 }
 
+const recommendRef = ref(null)
+onReachBottom(() => {
+  unref(recommendRef).onReachBottom && unref(recommendRef).onReachBottom();
+})
+
 onLoad(async (options) => {
+  // H5 和 APP 需要弹窗去确认
   // #ifdef H5
   uni.showModal({
     content: '请确认支付是否完成',
@@ -61,23 +90,15 @@ onLoad(async (options) => {
     }
   })
   // #endif
-  const params = getParams(options);
-  if (params && params.type === 1) {
-    type.value = 1
-  } else {
-    type.value = 2
-  }
+  await queryOrderStatus()
 })
 </script>
 
 <template>
   <view class="pay-status">
-    <uv-navbar
-        :fixed="false"
-        :title="title"
-        left-arrow
-        @leftClick="goBack"
-    />
+    <Header>
+      {{ title }}
+    </Header>
     <view class="status-main flex flex-column flex-ai__center">
       <image
           class="icon"
@@ -123,6 +144,8 @@ onLoad(async (options) => {
         重新支付
       </view>
     </view>
+    <!-- 商品推荐 -->
+    <Recommend ref="recommendRef" />
   </view>
 </template>