<template>
	<view class="container">
		<view class="statusBox">
			<view class="successBox" v-if="orderStatus==='1'">
				<i class="iconfont icon-dengdai"></i>
				<text class="statusText">订单支付成功</text>
				<text @click="viewDetail()" class="viewOrder">查看订单 ></text>
			</view>
			<view class="failBox" v-if="orderStatus!=='1'">
				<text style="color:#F04604"><i class="iconfont icon-guanbi"></i>订单支付失败</text>
				<view class="optionBox">
					<text @click="cancelOrder()">取消订单</text>
					<text @click="continuePay()">继续支付</text>
				</view>
			</view>
		</view>
		<!-- 精选课程 -->
		<view class="courlistBox">
			<view class="course_content">
				<view class="tag">
					<h4>精品课程</h4>
					<view @click="goToCourselist()">更多<text class="iconfont icon-youjiantou"></text></view>
				</view>
				<courselist :tagIds="[1111]" :onlyShowList="0"></courselist>
			</view>
		</view>
	</view>
</template>

<script>
	import courselist from '@/pages/courselist/courselist.vue';
	import api from "@/api/api";
	export default {
		components:{courselist},
		data() {
			return {
				fileId:'',
				orderId:'',
				orderStatus:'2'
			};
		},
		methods:{
			viewDetail(){
				// 查看详情
				uni.navigateTo({
					url:`/pages/orderDetail/orderDetail?id=${this.orderId}`
				})
			},
			goToCourselist(){
				uni.navigateTo({
					url:'../../pages/courselist/courselist'
				})
			},
			continuePay(){
				uni.navigateTo({
					url:`/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}`
				})
			},
			cancelOrder(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.orderStatus = options.orderStatus;
			this.fileId = options.fileId;
		}
	}
</script>

<style lang="scss">
		.statusBox{
			padding: 30rpx 0;
			background-color: #fff;
			margin-bottom: 10rpx;
			.successBox{
				display: flex;
				flex-direction: column;
				align-items: center;
				.statusText{
					color: #20279B;
					font-size: 36rpx;
				}
				.viewOrder{
					color: #666666;
					font-size: 30rpx;
					margin-top: 30rpx;
				}
				.iconfont{
					margin-bottom: 30rpx;
					font-size: 100rpx;
					color: #20279B;
				}
			}
		
			.failBox{
				display: flex;
				flex-direction: column;
				align-items: center;
				.iconfont{
					border: 1px solid #F15A1F;
					padding: 12rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.optionBox{
					display: flex;
					justify-content: center;
					margin-top: 60rpx;
					text{
						border-radius: 40rpx;
						background-color: #20279B;
						color: #fff;
						font-size: 30rpx;
						padding: 10rpx 50rpx;
						margin-right: 20rpx;
						&:first-child{
							background-color: transparent;
							color: #20279B;
							border: 1px solid #20279B;
						}
					}
				}
			}
		}
		.course_content{
			background: #fff;
			position: relative;
			padding: 0 30rpx 100rpx 30rpx;
			.tag{
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				h4{
					margin-left: 20rpx;
				}
			}
			.tag:before{
				position: absolute;
				left: 20rpx;
				top: 20rpx;
				display: inline-block;
				content: '';
				width: 2px;
				height: 16px;
				background-color: #F15A1F;
				border-radius: 2px;
			}
		}
		
</style>
