<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: ''
		}
	},
	onLoad(options) {
		this.status = options.status
		console.log(this.status)
	},
	methods: {
		// 点击底部按钮回调
		handleClickBtn() {
			if (this.status === '1') {
				uni.switchTab({
					url: '/pages/home/home'
				})
			} else if (this.status === '2') {
			}
		}
	}
}
</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>
