edu/uniapp/src/pages/payment_result/payment_result.vue

<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <!-- 页面状态 -->
    <page-status :status="status">
        <template #error>
            <u-empty text="订单不存在" mode="order"></u-empty>
        </template>
        <template #default>
            <view class="payment-result p-[20rpx]">
                <view class="result bg-white p-[20rpx] rounded-md">
                    <view class="flex flex-col items-center my-[40rpx]">
                        <!-- 支付状态图片 -->
                        <u-image
                            class="status-image"
                            :src="paymentStatus['image']"
                            width="100"
                            height="100"
                            shape="circle"
                        />
                        <!-- 支付状态文字 -->
                        <text class="text-2xl font-medium mt-[20rpx]"
                            >{{ paymentStatus['text'] }}
                        </text>
                        <view class="text-3xl font-medium mt-[20rpx]">
                            ¥ {{ orderInfo.order.order_amount }}
                        </view>
                    </view>

                    <!-- 支付信息 -->
                    <view class="result-info">
                        <view class="result-info__item">
                            <text>订单编号</text>
                            <text>{{ orderInfo.order.order_sn }}</text>
                        </view>
                        <view class="result-info__item">
                            <text>付款时间</text>
                            <text>{{ orderInfo.order.pay_time }}</text>
                        </view>
                        <view class="result-info__item">
                            <text>支付方式</text>
                            <template v-if="orderInfo.pay_status">
                                <text>{{ orderInfo.order.pay_way || '-' }}</text>
                            </template>
                            <template v-else>
                                <text>未支付</text>
                            </template>
                        </view>
                    </view>
                </view>
                <view class="mt-[40rpx]">
                    <view class="mb-[20rpx]">
                        <u-button
                            v-if="pageOptions.from == 'recharge'"
                            type="primary"
                            shape="circle"
                            hover-class="none"
                            @click="goOrder"
                        >
                            继续充值
                        </u-button>
                    </view>
                    <view class="mb-[20rpx]">
                        <u-button
                            type="primary"
                            plain
                            shape="circle"
                            hover-class="none"
                            @click="goHome"
                        >
                            返回首页
                        </u-button>
                    </view>
                </view>
            </view>
        </template>
    </page-status>
</template>

<script lang="ts" setup>
import { bankFeeTradeQuery, getPayResult } from '@/api/pay'
import { PageStatusEnum } from '@/enums/appEnums'
import { onLoad } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'uniapp-router-next'
import { getAliyunImageUrl } from '@/utils/imageUtils'

const router = useRouter()

const mapStatus = {
    succeed: {
        text: '支付成功',
        image: getAliyunImageUrl('static/images/payment/icon_succeed.png')
    },
    waiting: {
        text: '等待支付',
        image: getAliyunImageUrl('static/images/payment/icon_waiting.png')
    }
}
const status = ref(PageStatusEnum['LOADING'])
const pageOptions = ref({
    id: '',
    from: ''
})
const orderInfo = reactive<any>({
    order: {},
    pay_status: 0
})
const paymentStatus = computed(() => {
    const status = !!orderInfo.pay_status
    return mapStatus[status ? 'succeed' : 'waiting']
})

const initPageData = () => {
    return new Promise((resolve, reject) => {
        // 报名缴费（开放银行）结果页：使用 outTradeNo 查单
        if (pageOptions.value.from === 'bankFee') {
            bankFeeTradeQuery({ outTradeNo: pageOptions.value.id })
                .then((data: any) => {
                    const tradeState = data?.tradeState
                    const totalFeeFen = Number(data?.totalFeeFen || 0)
                    Object.assign(orderInfo, {
                        pay_status: tradeState === 'SUCCESS' ? 1 : 0,
                        order: {
                            order_amount: totalFeeFen ? (totalFeeFen / 100).toFixed(2) : '-',
                            order_sn: pageOptions.value.id,
                            pay_time: '-',
                            pay_way: data?.payWay ? String(data.payWay) : '-'
                        }
                    })
                    resolve(data)
                })
                .catch((err) => reject(err))
            return
        }

        // 兼容旧的充值/框架支付结果页
        getPayResult({ order_id: pageOptions.value.id, from: pageOptions.value.from })
            .then((data) => {
                Object.assign(orderInfo, data)
                resolve(data)
            })
            .catch((err) => reject(err))
    })
}

const goHome = () => {
    router.reLaunch('/pages/index/index')
}

const goOrder = () => {
    switch (pageOptions.value.from) {
        case 'recharge':
            router.navigateBack()
            break
    }
}

onLoad(async (options: any) => {
    try {
        if (!options.id) throw new Error('订单不存在')
        pageOptions.value = options
        await initPageData()
        status.value = PageStatusEnum['NORMAL']
    } catch (err) {
        console.log(err)
        status.value = PageStatusEnum['ERROR']
    }
})
</script>

<style lang="scss" scoped>
.result-info {
    .result-info__item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
    }
}
</style>