baqing-shop/shop-app/subpackage/order/pay-result.vue

<template>
	<view class="pay-result">
		<u-icon
			:name="isSuccess ? 'checkmark-circle-fill' : 'close-circle-fill'"
			:color="isSuccess ? '#2e7d32' : '#999'"
			size="80"
		/>
		<text class="pay-result__title">{{ title }}</text>
		<text v-if="orderNo" class="pay-result__sub">订单号：{{ orderNo }}</text>
		<text class="pay-result__tip">{{ tip }}</text>
		<button v-if="isSuccess" class="pay-result__btn" @click="goHome">返回首页</button>
		<button v-else class="pay-result__btn" @click="goBackDetail">返回继续购买</button>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOrderDetail } from '@/api/order'
import { PAGE_HOME } from '@/utils/pageRoute'

const status = ref('')
const orderId = ref('')
const orderNo = ref('')

const isSuccess = computed(() => status.value === 'success')

const title = computed(() => (isSuccess.value ? '支付成功' : '订单已关闭'))

const tip = computed(() =>
	isSuccess.value
		? '商家将尽快为您发货'
		: '您已取消支付，可返回商品详情重新购买'
)

function goHome() {
	uni.switchTab({ url: PAGE_HOME })
}

function goBackDetail() {
	uni.navigateBack({ delta: 2 })
}

onLoad(async (options) => {
	status.value = options.status || ''
	orderId.value = options.orderId || ''
	if (orderId.value) {
		try {
			const res = await getOrderDetail(orderId.value)
			orderNo.value = (res.data && res.data.orderNo) || ''
		} catch (e) {
			// ignore
		}
	}
})
</script>

<style lang="scss" scoped>
.pay-result {
	min-height: 100vh;
	padding: 120rpx 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #f5f6f8;
}
.pay-result__title {
	margin-top: 32rpx;
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}
.pay-result__sub {
	margin-top: 16rpx;
	font-size: 26rpx;
	color: #666;
}
.pay-result__tip {
	margin-top: 24rpx;
	font-size: 26rpx;
	color: #999;
	text-align: center;
	line-height: 1.6;
}
.pay-result__btn {
	margin-top: 64rpx;
	width: 320rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	border: none;
}
</style>