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.getSetting({
				withSubscriptions: true,
				success: (res) => {
					if (res.subscriptionsSetting[this.templateOrder] !== 'reject') {
						uni.requestSubscribeMessage({
							tmplIds: [this.templateOrder],
							success: (res) => {
								if (res[this.templateOrder] !== 'reject') {
									console.log('成功')
								} else {
									console.log('拒绝2')
								}
								uni.switchTab({
									url: '/pages/home/home'
								})
							},
							fail(err) {
								console.log('拒绝')
							}
						})
					} else {
						uni.showModal({
							content: '当前没有订阅，是否去设置打开？',
							confirmText: '确认',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											this.handleClick()
										}
									})
								} else {
									console.log('失败')
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/home/home'
										})
									}, 1500)
								}
							}
						})
					}
				}
			})
		}
	}
}
</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>