303 lines
7.2 KiB
Vue
303 lines
7.2 KiB
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>
|