kailin_mp/pages/orders/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}} {{item.spec}} 特惠价 ￥{{item.price}}
			</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 class="lotteryinfo" v-if="this.islotteryinfo">
			<view class="lottery_title">恭喜您预约成功，诚邀您参与以下活动</view>
			<view class="banner">
				<swiper class="swiper" :autoplay="true" >
					<swiper-item v-for="(item,index) in orderBannerList" :key="index">
						<image class="swiper_item_img" :src="item.thumb" mode="widthFix"  @click="navLottery(item.link_url)"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图
				orderBannerList:[],
				//是否展示抽奖区域
				islotteryinfo:0,
				//报单成功的商品信息
				productTitleInfo:[]
			}
		},
		onLoad(option) {
			//接受参数
			let productInfo =  option.params;
			
			if( productInfo ){
				//解密参数
				productInfo = decodeURIComponent(productInfo);
				//转成js数组对象
				productInfo	=  JSON.parse(productInfo);
				this.productTitleInfo = productInfo;
			}
		},
		onShow() {
			this.$http.request("/api/orders_banner/get_list").then((re)=>{
				if(re.code === "success"){
					this.orderBannerList = re.data;
					this.islotteryinfo =this.orderBannerList.length;
				}
			})
		},
		methods: {
			navOrder(){
				uni.redirectTo({
					url:"/pages/orders/index"
				})
			},
			navHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			navLottery(url){
				// 没有路径，不跳转
				if( !url )	return;
				// 转码
				let link_url = encodeURIComponent(url);
				// 跳转到webview
				uni.redirectTo({
					url:`/pages/webview/index?link_url=${link_url}`
				})
			}
		}
	}
</script>

<style lang="less">
	.order_completion_box{
		display:block;
		padding-bottom: 60rpx;
		.order_completion_title{
			display: block;
			width: 630rpx;
			margin: 20rpx 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: #e15c21;
			}
			.product_title{
				text-align: center;
				font-size: 24rpx;
			}
		}
		.nav_button{
			width: 630rpx;
			display: block;
			overflow: hidden;
			margin: 20rpx auto;
			line-height: 100rpx;
			.nav_order{
				text-align: center;
				margin: 30rpx 0rpx;
				border-radius: 60rpx;
				background-color: #e15c21;
				text{
					color: #eeeeee;
				}
			}
			.nav_home{
				text-align: center;
				border: 2rpx solid #6ca69e;
				margin: 30rpx 0rpx;
				border-radius: 60rpx;
			}
		}
		.lotteryinfo{
			width: 630rpx;
			overflow: hidden;
			margin: 50rpx auto;
			.lottery_title{
				display: block;
				height: 60rpx;
				font-size: 32rpx;
				line-height: 60rpx;
				text-align: center;
			}
			.banner{
				display: block;
				max-width: 630rpx;
				text-align: center;
				.swiper{
					display: block;
					max-width: 630rpx;
					text-align: center;
				}
			}
		}
		
		
		
	}
</style>