代码提交

pages/payStatus/index.vue

@@ -7,7 +7,7 @@
 -->
 <script setup>
 import { useRouter } from "@/hooks/useRouter";
-import { computed, ref, unref } from "vue";
+import { computed, ref, unref,nextTick } from "vue";
 import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
 import { checkPay } from "@/api/order";
 import { CacheKey } from "@/utils/config";
@@ -15,32 +15,32 @@ import Header from '@/components/Header/index.vue'
 import Recommend from '@/components/Recommend/index.vue'
 import { useInterface } from "@/hooks/useInterface";
 import { useScroll } from "@/hooks/useScroll";
+import Modal from "@/components/Modal/index.vue";
+import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
+import { lazyLoading, payError, paySuccess } from "@/utils/images";
 
 const {getParams, goBack, push, pushToTab} = useRouter()
 const {loading,hideLoading} = useInterface()
 const type = ref(0) // 支付状态 ： 0支付中 1支付成功 2支付失败
-useScroll()
+const {scrollTop} = useScroll()
 const title = computed(() => {
-  if (type.value === 0) return '支付中...'
+  if (type.value === 0) return '查询中...'
   if (type.value === 1) return '支付成功'
   if (type.value === 2) return '支付失败'
 })
 
-const routerParams = ref({})
+
+const modalRef = ref()
 
 /**
- * 去订单列表
- * @param type 0 待支付 1 待发货
+ * 打开弹窗
  */
-function toOrderList(type) {
-  push({url: '/pages/orderList/orderList'}, {data: {type}, type: 'reLaunch'})
+function showModal(){
+  unref(modalRef).show()
 }
 
-function toBackHome() {
-  pushToTab({url: '/pages/index/index'})
-}
 
-const retryTime = ref(3)
+const retryTime = ref(3) // 重试次数
 
 /**
  * 查询服务端支付状态
@@ -72,10 +72,28 @@ async function queryOrderStatus() {
     } finally {
       hideLoading()
     }
-  }, 1000)
+  }, 500)
+}
+
+
+
+/**
+ * 去订单列表
+ * @param type 0 待支付 1 待发货
+ */
+function toOrderList(type) {
+  push({url: '/pages/orderList/orderList'}, {data: {type}, type: 'reLaunch'})
+}
+
+/**
+ * 返回首页
+ */
+function toBackHome() {
+  pushToTab({url: '/pages/index/index'})
 }
 
 const recommendRef = ref(null)
+
 onReachBottom(() => {
   unref(recommendRef).onReachBottom && unref(recommendRef).onReachBottom();
 })
@@ -83,43 +101,41 @@ onReachBottom(() => {
 onLoad(async (options) => {
   // H5 和 APP 需要弹窗去确认
   // #ifdef H5
-  uni.showModal({
-    content: '请确认支付是否完成',
-    success: async () => {
-      await queryOrderStatus()
-    }
+  await nextTick(()=>{
+    showModal()
   })
   // #endif
+  // #ifndef H5
   await queryOrderStatus()
+  // #endif
 })
 </script>
 
 <template>
   <view class="pay-status">
-    <Header>
+    <Header :scroll-top="scrollTop">
       {{ title }}
     </Header>
     <view class="status-main flex flex-column flex-ai__center">
       <image
           class="icon"
-          v-if="Number(type)===2"
-
-          src="@/static/icon/pay/pay-error.png"
-      />
-      <image
-          class="icon col-icon"
-          v-else-if="Number(type)===0"
-          src="@/static/icon/logo.png"
+          v-if="Number(type)===0"
+          :src="lazyLoading"
       />
       <image
           class="icon"
-          v-else
-          src="@/static/icon/pay/pay-success.png"
+          v-if="Number(type)===1"
+          :src="paySuccess"
       />
-
-      <view class="text">
+      <image
+          class="icon"
+          v-if="Number(type)===2"
+          :src="payError"
+      />
+      <view class="text" v-if="[1,2].includes(Number(type))">
         {{ title }}
       </view>
+      <ListLoadLoading v-else :show-line="false" text="查询中..." />
     </view>
     <view class="button-group flex flex-ai__center flex-jc__center">
       <view
@@ -146,6 +162,7 @@ onLoad(async (options) => {
     </view>
     <!-- 商品推荐 -->
     <Recommend ref="recommendRef" />
+    <Modal ref="modalRef" content="请确认支付是否完成？" @confirm="queryOrderStatus" @cancel="queryOrderStatus" />
   </view>
 </template>
 
@@ -159,17 +176,19 @@ onLoad(async (options) => {
   .status-main {
     @include usePadding(0, 130);
     width: 100%;
+    font-size:36rpx;
 
     .icon {
       width: 170rpx;
       height: 170rpx;
-      margin-bottom: 20rpx;
+      margin-bottom: 30rpx;
     }
 
     .col-icon {
       width: 240rpx;
       height: 120rpx;
     }
+
   }
 
   .button-group {