<template>
	<view class="success-page">
		<!-- 自定义导航栏 -->
		<custom-navbar title="支付成功" :showBack="true" backgroundColor="#FFFFFF"></custom-navbar>

		<!-- 成功提示 -->
		<view class="success-content">
			<image src="/static/images/success_icon.png" mode="aspectFit" class="success-icon"></image>
			<text class="success-text">支付成功</text>
		</view>

		<!-- 查看订单按钮 -->
		<view class="btn-box" @click="goToOrder">
			<text class="btn-text">查看订单</text>
		</view>
	</view>
</template>

<script>
	import customNavbar from '@/components/custom-navbar/custom-navbar.vue'

	export default {
		components: {
			customNavbar
		},
		data() {
			return {
				orderId: '',
				serviceType: 1, //订单类型，1普通，2自营
			}
		},
		onLoad(options) {
			console.log(options, '查看订单options');
			if (options.orderId) {
				this.orderId = options.orderId
			}
			if (options.serviceType) {
				this.serviceType = options.serviceType
			}
		},
		methods: {
			goToOrder() {
				if (this.serviceType == 1) {
					uni.redirectTo({
						url: `/pages/order/userorder-detail?id=${this.orderId}`
					})
				} else {
					uni.redirectTo({
						url: `/pages/order/userorder-detail?id=${this.orderId}&serviceType=2`
					})
				}

			}
		}
	}
</script>

<style>
	.success-page {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.success-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 120rpx;
	}

	.success-icon {
		width: 250rpx;
		height: 184rpx;
		margin-bottom: 40rpx;
	}

	.success-text {
		font-size: 40rpx;
		color: #333333;
		font-weight: 500;
	}

	.action-button {
		width: 686rpx;
		height: 88rpx;
		background: #FF4B4B;
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 80rpx auto 0;
	}

	/* 多端适配 */
	/* #ifdef H5 */
	.success-page {
		padding-bottom: 0;
	}

	/* #endif */

	/* #ifdef APP-PLUS || MP */
	.success-page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* #endif */
</style>