mrr.sj.front/pages/shop/pay-success.vue

<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: "",
				path: "",
				identity: "",
			};
		},
		onLoad(options) {
			console.log(options, 'options查看订单');
			if (options.orderId) {
				this.orderId = options.orderId;
			}
			if (options.path) {
				this.path = options.path;
			}
			if (options.identity) {
				this.identity = options.identity;
			}
		},
		methods: {
			goToOrder() {
				if (this.path) {
					uni.redirectTo({
						url: `${this.path}?order_id=${this.orderId}&identity=${this.identity}`,
					});
				} else {
					uni.redirectTo({
						url: "/pages/shop/buyorder-detail?id=" + this.orderId,
					});
				}
			},
		},
	};
</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>