qjd-user-uniapp/pagesMain/paySuccess.vue

<template>
	<view class="container">
		<view class="pay-icon">
			<view class="iconfont iconqueding"></view>
		</view>
		<view class="pay-title">支付成功</view>
		<view class="pay-text">您已支付成功，您所购买的商品正在向您飞奔， 请耐心等待！</view>
		<view class="pay-text">3秒后自动跳转订单详情...</view>
		<view class="pay-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="goToOrderList()" class="button1">查看订单</u-button>
			<u-button type="success" shape="circle" :ripple="true" :hair-line="false" :plain="true" @click="goToIndex()" class="button2">返回首页</u-button>
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
			    orderId: '',
				timeoutID:0
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.timeoutID = setTimeout(() => {
				uni.redirectTo({
					url: '/pagesMain/orderDetail?orderId=' + this.orderId + '&orderStatus=' + 2
				});
			},3000)
		},
		methods: {
			//  查看订单
			goToOrderList() {
				// uni.navigateTo({
				// 	url: '/pagesMain/orderList?type=1'
				// });
				clearTimeout(this.timeoutID)
				uni.navigateTo({
					 url: '/pagesMain/orderDetail?orderId=' + this.orderId + '&orderStatus=' + 2
				});
			},
			//  返回首页
			goToIndex() {
				clearTimeout(this.timeoutID)
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
		position: absolute;

		.pay-icon {
			width: 100%;
			height: 120px;
			margin-top: 50px;
			float: left;
			text-align: center;

			.iconqueding {
				color: #52A63A;
				font-size: 120px;
				font-size: 240px;
				line-height: 120px;
			}
		}

		.pay-title {
			width: 100%;
			height: 20px;
			float: left;
			margin: 16px 0 20px 0;
			font-size: 16px;
			font-family: PingFang SC;
			color: #333333;
			line-height: 20px;
			text-align: center;
		}

		.pay-text {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 0 60px;
			font-size: 13px;
			font-family: PingFang SC;
			color: #666666;
			line-height: 22px;
			text-align: center;
		}

		.pay-handle {
			width: 230px;
			height: 100px;
			float: left;
			position: absolute;
			bottom: 60px;
			left: 50%;
			transform: translateX(-50%);

			.button1 {
				/deep/button {
					background-color: #56a83a !important;
					border: none !important;
				}

				margin-bottom: 12px;
				float: left;
				width: 100%;
				height: 34px;
			}

			.button2 {
				/deep/button {
					background-color: #74bd60 !important;
					border: none !important;
					color: white !important;
				}
				float: left;
				width: 100%;
				height: 34px;
			}
		}
	}
</style>