education_mp/pages/score/completion.vue

<template>
	<view class="order_completion_box">
		<view class="order_completion_title">
			<view class="completion_icon">
				<uni-icons class="icon" type="checkmarkempty" size="40" color="#eeeeee"></uni-icons>
			</view>
			<view class="product_title" v-for="(item,index) in productTitleInfo" :key="index">
				 {{item.name}}已兑换成功
			</view>
		</view>
		<view class="nav_button">
			<view class="nav_order" @click="navOrder()">
				<text>查看订单</text>
			</view>
			<view class="nav_home" @click="navHome()">
				<text>返回首页</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//报单成功的商品信息
				productTitleInfo:[]
			}
		},
		onLoad(option) {
			//接受参数
			let productInfo =  option.params;
			
			if( productInfo ){
				//解密参数
				productInfo = decodeURIComponent(productInfo);
				//转成js数组对象
				productInfo	=  JSON.parse(productInfo);
				this.productTitleInfo = productInfo;
			}
		},
		onShow() {
		},
		methods: {
			navOrder(){
				uni.redirectTo({
					url:"/pages/score/orders"
				})
			},
			navHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="less">
	.order_completion_box{
		display:block;
		padding-bottom: 60rpx;
		.order_completion_title{
			display: block;
			width: 630rpx;
			// height: 300rpx;
			margin: 30rpx auto;
			line-height: 2.0;
			.completion_icon{
				width:150rpx;
				height: 150rpx;
				margin: 30rpx auto;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center; 
				background-color: #00bba5;
			}
			.product_title{
				text-align: center;
				font-size: 24rpx;
			}
		}
		.nav_button{
			width: 630rpx;
			height: 300rpx;
			margin: 80rpx auto;
			display: block;
			line-height: 100rpx;
			.nav_order{
				text-align: center;
				margin: 30rpx 0rpx;
				border-radius: 60rpx;
				background-color: #00bba5;
				text{
					color: #fff;
				}
			}
			.nav_home{
				text-align: center;
				border: 2rpx solid #00bba5;
				margin: 30rpx 0rpx;
				border-radius: 60rpx;
			}
		}

	}
</style>