zh-cashier-app/pages/index/success.vue

<template>
	<view class="success-box">
		<view class="box-1"></view>
		
		<view class="img-1">
			<image class="img-2" src="@/static/img/s-2.png" mode="scaleToFill"></image>
			
			<view class="text-align-center fs-32 fc-3 fw-400 mb-25 ">支付成功</view>
			
			<view class="text-align-center fs-42 fc-3 fw-b mb-120 ">￥{{totalPrice}}</view>
			
			<view class="fs-30 text-align-center fc-6 fw-400 ">请取走你的小票和商品</view>
		</view>
		
		<view class="box-border-box box-2">
			<view class="" @click="buy()">继续购买</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				totalPrice:'',
			}
		},
		onLoad(e) {
			this.totalPrice = e.money
		},
		methods:{
			buy(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.success-box{
		width: 100%;
		height: 100vh;
		background-color: #F2F3F5;
		position: relative;
		
		.box-2{
			margin-top: 600rpx;
			padding: 0 40rpx;
			view{
				width: 46%;
				height: 83rpx;
				line-height: 83rpx;
				border-radius: 69rpx;
				border: 2rpx solid #1778FD;
				text-align: center;
				color: #1778FD;
				font-size: 32rpx;
				margin: 0 auto;
			}
		}
		
		.box-1{
			width: 750rpx;
			height: 272rpx;
			background: #0473CF;
			border-radius: 0 0 100rpx 100rpx;
			
		}
		.img-1{
			background: url('@/static/img/s-1.png') no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 185rpx;
			left: 48rpx;
			width: 650rpx;
			height: 610rpx;
			z-index: 0;
			box-sizing: border-box;
			padding-top: 78rpx;
		}
		.img-2{
			width: 160rpx;
			height: 127rpx;
			margin: 0 auto 35rpx auto;
			z-index: 2;
		}
		.mb-120{
			margin-bottom: 140rpx;
		}
	}
</style>