book-hi/pages-home/pages/order-success.vue

<template>
	<view class="order-success">
		<image class="success-icon" src="../static/success.png" mode="widthFix"></image>
		<text class="success-title">订单提交成功</text>
		<text class="success-message">您的订单已提交，书嗨稍后将安排快递上门取书！</text>
		<view class="button-group">
			<u-button class="notify-button" :custom-style="{borderColor: '#07c160',width:'235rpx',
            color: '#07c160'}" type="default" @click="notifyStatusChange">状态变更通知</u-button>
			<u-button :custom-style="{background: '#07c160',width:'235rpx',
            color: '#ffffff'}" class="view-order-button" type="primary" @click="viewOrder">查看订单</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			notifyStatusChange() {
				// 处理状态变更通知逻辑
				console.log('状态变更通知')
			},
			viewOrder() {
				// 处理查看订单逻辑
				console.log('查看订单')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-success {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		padding: 34rpx 0 44rpx 0;

		.success-icon {
			width: 200rpx;
			height: 200rpx;
		}

		.success-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 40rpx;
			color: #333333;
			line-height: 107rpx;
		}

		.success-message {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 40rpx;
		}

		.button-group {
			display: flex;
			justify-content: center;
			gap: 70rpx;
		}
	}
</style>