retail-app/pages/mall/mallSuccess/index.vue

<template>
	<view class="success">
		<!-- <view class="bgc"></view> -->
		<view class="content">
			<!-- <view>
				<nav-bar title="none" icon="none" background="transparent" border-color="transparent"></nav-bar>
			</view> -->
			<view class="sur flex-column aic">
				<re-image imgSrc="/retail/mall/img_quancoin.png" width="240" height="240"></re-image>
				<view class="texts flex-column">
					<text class="suce-text">充值成功</text>
					<text>充值账号：{{phone}}</text>
					<text>套餐金额：¥{{price}}</text>
					<text>购买游戏币：{{gameCurrency}}</text>
					<text>充值时间：{{createTime}}</text>
					<text>订单号：{{orderNo}}</text>
				</view>
				<view class="btns">
					<u-button class="order" @click="toOrder">查看订单</u-button>
					<u-button class="home" @click="toHome">返回首页</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				gameCurrency:'',
				phone:'',
				orderNo:'',
				price:'',
				createTime:''
			}
		},
		onLoad(params){
			this.gameCurrency = params.gameCurrency,
			this.price = params.price
			this.orderNo = params.orderNo
			this.phone = params.phone
			this.createTime = params.createTime
		},
		methods: {
			// 返回订单
			toOrder() {
				uni.redirectTo({
					url: '/pages/accountRecharge/index'
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/gallery/index'
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.success {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		// .bgc {
			// position: absolute;

		// }

		.content {
			// z-index: 9;
			width: 100%;
			height: 100%;
			// height: 544rpx;
			background: linear-gradient(180deg, #FFF4D6 0%, rgba(255, 251, 193, 0.62) 40%, rgba(255, 221, 202, 0.32) 100%);
			padding: 32rpx;

			.sur {
				height: 100%;
				width: 100%;
				padding: 56rpx 0 64rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				.texts {
					margin-top: 48rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #2C2B28;

					.suce-text {
						font-weight: bold;
						font-size: 40rpx;
						text-align: center;
						margin-bottom: 32rpx;
					}
				}

				.btns {
					margin-top: 64rpx;

					button {
						width: 414rpx;
						height: 96rpx;
					}

					.order {
						background: linear-gradient(140deg, #FF8500 0%, #FFA600 100%);
						border-radius: 48rpx;
						font-weight: bold;
						font-size: 40rpx;
						color: #FFFFFF;
						margin-bottom: 32rpx;
					}

					.home {
						background: #FFFFFF;
						border-radius: 48rpx;
						border: 2rpx solid #9FA2B2;
						font-weight: 500;
						font-size: 40rpx;
						color: #2C2B28;
					}
				}
			}
		}
	}
</style>