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="btns">
			<view class="btn_1" @click="handleClickBtn">{{ status === '1' ? '返回主页' : '重新支付' }}</view>
			<view class="btn_2" v-if="status === '1'" @click="handleGoDetail">查看详情</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			// 支付状态
			status: '',
			// 订单进度模版id
			templateOrder: 'c9whRYC3d8ebNI_RdyG2X_1BBDwy2625hHmRWlW5Z9U'
		}
	},
	onLoad(options) {
		this.id = options.id
		this.status = options.status
	},
	onUnload() {
		this.handleClickBtn()
	},
	methods: {
		// 点击底部按钮回调
		handleClickBtn() {
			if (this.status === '1') {
				// 返回主页
				this.getMessage()
			} else if (this.status === '2') {
				// 重新支付
				uni.navigateBack(1)
			}
		},
		handleGoDetail() {
			uni.navigateTo({
				url: `/pages/orderDetail/orderDetail?id=${this.id}`
			})
		},
		// 订阅消息
		getMessage() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			uni.getSetting({
				withSubscriptions: true,
				success: (res) => {
					uni.hideLoading()
					// console.log(res)
					if (res.subscriptionsSetting[this.templateOrder] !== 'reject') {
						uni.requestSubscribeMessage({
							tmplIds: [this.templateOrder],
							success: (res) => {
								// console.log(res)
								if (res[this.templateOrder] !== 'reject') {
									// console.log('成功')
								} else {
									// console.log('拒绝2')
								}
								uni.switchTab({
									url: '/pages/home3/home3'
								})
							},
							fail(err) {
								console.log(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/home3/home3'
										})
									}, 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;
	}

	.btns {
		position: absolute;
		bottom: 75rpx;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;

		.btn_1 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			color: #fff;
			border-radius: 64rpx;
			background-color: #096562;
		}

		.btn_2 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			color: #096562;
			border: 1rpx solid #096562;
			border-radius: 64rpx;
			background-color: #fff;
		}
	}
}
</style>