Homestay_manage_app/pages/payStatus/payStatus.vue

<template>
	<view class="container">
		<!-- 图标区域 -->
		<img class="img" :src="status === '1' ? '../../static/index/success.png' : '../../static/index/fail.png'" />
		<!-- 支付状态区域 -->
		<view class="status">{{ status === '1' ? '支付成功' : '支付失败' }}</view>
		<!-- 底部按钮区域 -->
		<view class="btn" @click="handleClickBtn">{{ status === '1' ? '返回主页' : '重新支付' }}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 支付状态
			status: '',
			// 订单进度模版id
			templateOrder: 'ERU1ZY9IqwNkDxWyFJvo5VSE7ua-wey3SqhZgjqLDtU'
		}
	},
	onLoad(options) {
		this.status = options.status
		console.log(this.status)
	},
	onUnload() {
		this.handleClickBtn()
	},
	methods: {
		// 点击底部按钮回调
		handleClickBtn() {
			if (this.status === '1') {
				// 返回主页
				this.getMessage()
			} else if (this.status === '2') {
				// 重新支付
				uni.navigateBack(1)
			}
		},
		// 订阅消息
		getMessage() {
			uni.requestSubscribeMessage({
				tmplIds: [this.templateOrder],
				success: (res) => {
					for (let key in res) {
						if (res[key] === 'accept') {
							uni.showToast({
								title: '订阅成功',
								icon: 'success',
								mask: true
							})
						}
						// else if (res[key] === 'reject') {
						// 	uni.showToast({
						// 		title: '订阅失败',
						// 		icon: 'none',
						// 		mask: true
						// 	})
						// }
					}
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/orderManage/orderManage'
						})
					}, 1500)
				},
				fail: (res) => {
					console.log(2)
					console.log(res)
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	background-color: #fff;

	.img {
		margin-top: 80rpx;
		width: 134rpx;
		height: 134rpx;
		text-align: center;
	}

	.status {
		margin-top: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.btn {
		position: absolute;
		bottom: 75rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 710rpx;
		height: 96rpx;
		font-size: 32rpx;
		color: #fff;
		border-radius: 64rpx;
		background-color: #096562;
	}
}
</style>