yshop-pro-uniapp/pages/payStatus/index.vue

<!--
    @name: 支付状态
    @author: kahu
    @date: 2023-11-08 12:10
    @description：index
    @update: 2023-11-08 12:10
-->
<script setup>
import { useRouter } from "@/hooks/useRouter";
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";
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支付失败
const {scrollTop} = useScroll()
const title = computed(() => {
  if (type.value === 0) return '查询中...'
  if (type.value === 1) return '支付成功'
  if (type.value === 2) return '支付失败'
})


const modalRef = ref()

/**
 * 打开弹窗
 */
function showModal(){
  unref(modalRef).show()
}


const retryTime = ref(3) // 重试次数

/**
 * 查询服务端支付状态
 */
async function queryOrderStatus() {
  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()
    }
  }, 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();
})

onLoad(async (options) => {
  // H5 和 APP 需要弹窗去确认
  // #ifdef H5
  await nextTick(()=>{
    showModal()
  })
  // #endif
  // #ifndef H5
  await queryOrderStatus()
  // #endif
})
</script>

<template>
  <view class="pay-status">
    <Header :scroll-top="scrollTop">
      {{ title }}
    </Header>
    <view class="status-main flex flex-column flex-ai__center">
      <image
          class="icon"
          v-if="Number(type)===0"
          :src="lazyLoading"
      />
      <image
          class="icon"
          v-if="Number(type)===1"
          :src="paySuccess"
      />
      <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
          class="animation-button button white-button"
          v-if="Number(type)===1"
          @click="toBackHome"
      >
        继续逛逛
      </view>
      <view
          class="animation-button button"
          v-if="Number(type)===1"
          @click="toOrderList(1)"
      >
        查看订单
      </view>
      <view
          class="animation-button button"
          v-if="Number(type)===2"
          @click="toOrderList(0)"
      >
        重新支付
      </view>
    </view>
    <!-- 商品推荐 -->
    <Recommend ref="recommendRef" />
    <Modal ref="modalRef" content="请确认支付是否完成？" @confirm="queryOrderStatus" @cancel="queryOrderStatus" />
  </view>
</template>

<style
    scoped
    lang="scss"
>
.pay-status {
  width: 100%;

  .status-main {
    @include usePadding(0, 130);
    width: 100%;
    font-size:36rpx;

    .icon {
      width: 170rpx;
      height: 170rpx;
      margin-bottom: 30rpx;
    }

    .col-icon {
      width: 240rpx;
      height: 120rpx;
    }

  }

  .button-group {
    margin-bottom: 30rpx;
    gap: 30rpx;
    display: flex;
    justify-content: center;

    .button {
      width: 230rpx;
      height: 80rpx;
      background: #333333;
      font-size: 34rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .white-button {
      background: $white-color;
      color: #333;
      border: 1rpx solid #333;
    }
  }
}
</style>