立即查询一次支付状态

src/views/mall/cart/index.vue

@@ -238,11 +238,11 @@ const payCancel = () => {
   // window.open('/mall/user/order?tab=0')
   setTimeout(() => { router.push({ path: '/mall/user/order', query: { tab: 0 } }) }, 500);
 }
-const paySuccess = () => {
+const paySuccess = (e) => {
   // Snackbar.success('支付成功！')
   // showPay.value = false
   // setTimeout(() => { router.push({ path: '/mall/user/order', query: { tab: 10 } }) }, 500);
-  router.push({ path: '/mall/payOver'})
+  router.push({ path: '/mall/payOver', query: { price: e.price }})
 }
 </script>
 

src/views/mall/components/details.vue

@@ -171,10 +171,10 @@ const payCancel = () => {
   showPay.value = false
   setTimeout(() => { router.push({ path: '/mall/user/order', query: { tab: 0 } }) }, 500);
 }
-const paySuccess = () => {
+const paySuccess = (e) => {
   // Snackbar.success('支付成功，请前往我的订单查看！')
   // showPay.value = false
-  router.push({ path: '/mall/payOver'})
+  router.push({ path: '/mall/payOver', query: { price: e.price }})
 }
 
 // 添加购物车

src/views/mall/components/details/order/pay.vue

@@ -207,7 +207,7 @@ function clear() {
   remainder.value = 1
   payQrCodeTxt.value = '' // 二维码内容
   if (timer.value) clearInterval(timer.value); timer.value = null
-  if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
+  if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null
 }
 
 // 1.获得支付方式
@@ -265,9 +265,9 @@ const getPayStatus = async () => {
     const data = await getOrderPayStatus({ id: orderInfo.value.id || orderInfo.value.payOrderId })
     if ((data?.status - 0) === 10) {
       // 支付成功
-      if (timer.value) clearInterval(timer.value); timer.value = null
+      clear()
       setTimeout(() => {
-        emit('paySuccess')
+        emit('paySuccess', { price: orderInfo.value.price })
         if (isWalletPay.value) updateAccountInfo() // 更新余额
         // Snackbar.success('支付成功')
         if (route.fullPath === props.returnUrl) router.go(0) // 刷新页面
@@ -286,11 +286,12 @@ const remainderZhShow = ref('') // 倒计时展示
 
 const remainderTimer = ref(null)
 // 初始化倒计时
-const initIntervalFun = () => {
+const initIntervalFun = async () => {
   remainder.value = countdownTime // 初始倒计时时间
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
   if (timer.value) clearInterval(timer.value); timer.value = null
   //
+  await getPayStatus() // 立即查询一次支付状态
   remainderCalc(); remainderTimer.value = setInterval(() => { remainderCalc() }, 1000) // 倒计时计算
   timer.value = setInterval(() => { getPayStatus() }, 2000) // 轮巡支付状态
 }

src/views/mall/payOver/components/show.vue

@@ -1,12 +1,24 @@
 <!--  -->
 <template>
-  <div class="d-flex justify-center">
-    <span class="mdi mdi-check-circle"></span>
+  <div class="d-flex flex-column align-center">
+    <div style="color: #37ad1e; font-size: 60px;" class="mdi mdi-check-circle mt-5"></div>
+    <div style="font-weight: 600; color: #777;">支付成功</div>
+    <div style="font-weight: 500; color: #777;" class="mt-3">￥{{ price || 0.00 }}</div>
+    <div class="mt-3">
+      <v-btn class="mx-3" color="primary" variant="outlined" @click="go(router.push('/mall'))">商城首页</v-btn>
+      <v-btn class="mx-3" color="primary" variant="outlined" to="/mall/user/order">查看订单</v-btn>
+    </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({name: 'payOver-show'})
+import { useRoute } from 'vue-router'; const route = useRoute()
+import { useRouter } from 'vue-router'; const router = useRouter()
+import { ref } from 'vue'
+
+const price = ref(route?.query?.price && route.query.price-0 ? ((route.query.price-0)/100).toFixed(2) : 0)
+
 </script>
 <style lang="scss" scoped>
 </style>

src/views/mall/payOver/index.vue

@@ -4,7 +4,7 @@
   <v-card class="default-width">
     <showText></showText>
     <!-- 抽奖 -->
-    <div></div>
+    <div class="mt-10"></div>
   </v-card>
 </template>
 

src/views/mall/user/order/index.vue

@@ -176,11 +176,11 @@ const payCancel = () => {
   showPay.value = false
   // router.push({ path: '/mall/user/order', query: { tab: 0 } })
 }
-const paySuccess = () => {
+const paySuccess = (e) => {
   // Snackbar.success('支付成功！')
   // showPay.value = false
   // getOrderPage()
-  router.push({ path: '/mall/payOver'})
+  router.push({ path: '/mall/payOver', query: { price: e.price }})
 }
 
 </script>