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, nextTick, ref, unref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { checkPay, checkRecharge, orderInfo } 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 campaignType = ref(0)  // 1拼团 2秒杀 3砍价 4拼团成团
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 orderType.value === 2 ? toMyBalance() : toOrderList(0)
      }
      const parse = JSON.parse(payInfoStr);
      // 商品
      if (orderType.value === 1) {
        if (parse.options && parse.options.isGroup) {
          campaignType.value = 1
        }
        const res = await checkPay({
          ...parse.payData,
          uni: parse.payData.orderId || ''
        });
        if (!res) {
          // 支付失败重新查询
          if (retryTime.value > 0) {
            retryTime.value--
            await queryOrderStatus()
          } else {
            type.value = 2
            uni.removeStorageSync(CacheKey.PAY_INFO)
          }
          return
        } else {
          type.value = 1
          uni.removeStorageSync(CacheKey.PAY_INFO)
        }
        // 平团
        if (parse.options && parse.options.isGroup) {
          const order = await orderInfo({key: parse.payData.orderId})
          if (order && order._status._type === '8') {
            campaignType.value = 4
          }
        }
      }
      if (orderType.value === 2) {
        const res = await checkRecharge({
          id: parse.payData.orderId
        })
        console.log(res)
        if (Number(res) === 0) {
          // 支付失败重新查询
          if (retryTime.value > 0) {
            retryTime.value--
            await queryOrderStatus()
          } else {
            type.value = 2
            uni.removeStorageSync(CacheKey.PAY_INFO)
          }
        } else {
          type.value = 1
          uni.removeStorageSync(CacheKey.PAY_INFO)
        }
      }
    } catch (e) {
      retryTime.value = 0
      type.value = 2
      uni.removeStorageSync(CacheKey.PAY_INFO)
    } finally {
      hideLoading?.()
    }
  }, 500)
}


/**
 * 去订单列表
 * @param status 0 待支付 1 待发货 5待成团
 */
function toOrderList(status) {
  // 支付成功才走
  if (type.value === 1) {
    if (campaignType.value === 1) {
      status = 5
    }
    if (campaignType.value === 4) {
      status = 1
    }
  }
  push({url: '/pages/orderList/orderList'}, {data: {type: status}, type: 'reLaunch'})
}

function toMyBalance() {
  push({url: '/views/account/balance/index'}, {data: {}, type: 'reLaunch'})
}

/**
 * 返回首页
 */
function toBackHome() {
  pushToTab({url: '/root/index/index'})
}

const recommendRef = ref(null)

onReachBottom(() => {
  unref(recommendRef).onReachBottom && unref(recommendRef).onReachBottom();
})

const orderType = ref(1) // 1商品 2充值

onLoad(async (options) => {
  if (options.details) {
    options = getParams?.(options)
  }
  console.log(options)
  // type
  orderType.value = Number(options.type) || 1
  // const params = getParams(options)
  // campaignType.value = params.campaignType
  // 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">
      <template v-if="orderType === 1">
        <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>
      </template>
      <template v-else>
        <view
            class="animation-button button"
            v-if="Number(type)===1"
            @click="toMyBalance"
        >
          我的余额
        </view>
      </template>
    </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>