<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<script type="text/javascript" src="../js/base.js"></script>
		<link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../assets/css/swiper-3.4.2.min.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />-->
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_6y9erxzbkn2.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<script type="text/javascript" src="../assets/font/iconfont.js">
		</script>
		<link rel="stylesheet" href="../css/myOrder.css" />
		<style type="text/css">
			.inputStyle {
				width: 6.86rem;
				height: 0.8rem;
				font-size: 0.32rem;
				border: 1px solid rgba(235, 235, 235, 1);
				border-radius: 0.4rem;
				margin: 0.2rem auto;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				color: #999;
				background: #fff;
				z-index: 99;
			}
			
			.icon-sousuo {
				font-size: 0.3rem;
				/*color: #ccc;*/
				margin-right: 0.2rem;
				margin-top: -0.09rem;
				font-size: 0.4rem;
			}
			
			.inputItem {
				padding-top: 0.06rem;
				outline: none;
				border: none;
				color: #777;
				width: 73%;
				height: 100%;
				/* padding-left: 2rem; */
				text-align: left;
				overflow: hidden;
			}
			
			.head {
				padding-bottom: 0.2rem;
				position: fixed;
				top: 0;
				background: #fff;
				justify-content: center;
				display: flex;
				width: 100%;
				z-index: 100;
				height: 1rem;
			}
		</style>
	</head>

	<body>
		<div class="head">
			<div id="" class="inputStyle" onclick="">
				<i class="iconfont icon-sousuo"></i>
				<input class="inputItem" type="text" value="" placeholder="搜索订单号" />
				<span class="sou_right">搜索</span>
			</div>
		</div>

		<!-- 待付定金-->
		<div class="choice" id="topNav">
			<div class="swiper-wrapper">
				<div class="swiper-slide active_top">
					<span>全部</span>
				</div>
				<div class="swiper-slide ">

					待付定金

				</div>
				<div class="swiper-slide">

					已付定金

				</div>
				<div class="swiper-slide">

					待付尾款

				</div>
				<div class="swiper-slide">

					待完成

				</div>
				<div class="swiper-slide">

					待评价

				</div>
				<div class="swiper-slide">

					已完成

				</div>
			</div>
		</div>
		<!--待付定金-->
		<div class="good_out_stay" data-id="1111">
			<div class="good">
				<span>订单号:20180808001</span>
				<span class="confirmed">待付定金</span>
			</div>
			<div class="goods">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			    <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>
				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>
			<div class="btnlist">
				<div class="btnleft can">取消</div>
				<div class="btnright ">付款</div>
			</div>

		</div>

		<!--已付定金-->
		<div class="good_out_payed">
			<div class="good">
				<span>订单号:20180808001</span>
				<span class="confirmed">已付定金</span>
			</div>
			<div class="goods yifu">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			       <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>

				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>
		</div>
		<div class="good_out_paybalance">
			<div class="good">
				<span>订单号:20180808001</span>
				<span class="confirmed">待付尾款</span>
			</div>
			<div class="goods">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			       <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>

				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>
			<div class="btnlist">

				<div class="btnright ">付款</div>
			</div>
		</div>
		<div class="good_out_tocomplete">
			<div class="good">
				<span>订单号:20180808001</span>

				<span class="confirmed">待完成</span>

			</div>
			<div class="goods yifu">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			       <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>

				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>

		</div>
		<!--待评价-->
		<div class="ping">
			<div class="good_out_evaluate">
				<div class="good">
					<span>订单号:20180808001</span>
					<span class="confirmed">待评价</span>
				</div>
				<div class="goods">
					<div class="pic_row">
						<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
						<span class="two">
		  			        <span>两天攀岩活动</span>
						<span class="price">
			  			       <span>定金 ¥600</span>
						<span>价格 ¥1190</span>
						</span>
						</span>
						</span>
					</div>
					<span class="five">
		  			x5
		  	</span>
				</div>
				<div class="btnlist">
					<div class="pingjia">评价</div>
				</div>
			</div>
		</div>

		<div class="complated">
			<div class="good">
				<span>订单号:20180808001</span>
				<span class="confirmed">已完成</span>
			</div>
			<div class="goods">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			       <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>

				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>
			<div class="btnlist">
				<!--<div class="btnleft">取消</div>-->
				<div class="btnright ">删除</div>
			</div>
		</div>
		<div class="cancels">
			<div>
				<div class="good">
					<span>订单号:20180808001</span>
					<span class="confirmed">已取消</span>
				</div>
			</div>
			<div class="goods">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			       <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>

				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>
			<div class="btnlist">
				<!--<div class="btnleft">取消</div>-->
				<div class="btnright ">删除</div>
			</div>
		</div>

		<!--已退款-->
		<div class="good_out_refundmoney">
			<div class="good">
				<span>订单号:20180808001</span>
				<span class="confirmed">已退款</span>

			</div>
			<div class="goods yifu">
				<div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="../images/banner1.jpg" alt="" />
		  		       </span>
					<span class="two">
		  			        <span>两天攀岩活动</span>
					<span class="price">
			  			       <span>定金 ¥600</span>
					<span>价格 ¥1190</span>
					</span>
					</span>
					</span>

				</div>
				<span class="five">
		  			x5
		  	</span>
			</div>

		</div>
		<!--确认取消弹出框-->
		<div class="confirm_cancel">
			<div class="confirm_main">
				<div class="hint">
					确认取消?
				</div>
				<div class="true">确定取消订单吗?</div>
				<div class="choose">
					<span class="confirm_yes">取消</span>
					<span class="confirm_no">确定</span>
				</div>
			</div>
		</div>
		<!--toast-->
		<div id="toast" style='display: none;'>
			<div class="weui-mask_transparent"></div>
			<div class="weui-toast">
				<!--<i class="weui-icon-success-no-circle weui-icon_toast"></i>-->
				<p class="weui-toast__content">已完成</p>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script>
			//初始化
			var mySwiper = new Swiper('#topNav', {
				freeMode: true,
				freeModeMomentumRatio: 0.5,
				slidesPerView: 'auto',
				//		    loop:true,
				slideToClickedSlide: true,
				observer: true,
				observeParents: true,
			});
		</script>
	</body>

</html>
<script type="text/javascript" src="../assets/js/common.js"></script>
<script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/swiper-3.4.2.jquery.min.js"></script>
<script>
	//确认取消弹出框
	$('.can').click(function() {
		var id = $(this).parents('.good_out').data("id");
		console.log(id);
		$('.confirm_cancel').css('display', 'block');
		$('.confirm_yes').click(function() {
			console.log("点击确定按钮获取整个li的id为:" + id);
			$('.confirm_cancel').css('display', 'none');
		})
		$('.confirm_no').click(function() {
			$('.confirm_cancel').css('display', 'none');
		})
		$('.confirm_main').click(function() {
			event.stopPropagation();
			//	 	$(this).css('display','none');
		})
	})

	//确认取消弹出框
	$('.btnright').click(function() {
		var id = $(this).parents('.good_out').data("id");
		console.log(id);
		$('.confirm_cancel').css('display', 'block');
		$('.confirm_yes').click(function() {
			console.log("点击确定按钮获取整个li的id为:" + id);
			$('.confirm_cancel').css('display', 'none');
		})
		$('.confirm_no').click(function() {
			$('.confirm_cancel').css('display', 'none');
		})
		$('.confirm_main').click(function() {
			event.stopPropagation();
			//	 	$(this).css('display','none');
		})
	})
	//阻止按钮的点击冒泡
	$('.btnlist').click(function(event) {
		event.stopPropagation();
	});
	$('.choice .swiper-slide').click(function() {
		$(this).addClass("active_top").siblings().removeClass("active_top");;
	})
	//点击跳转到待付定金页面
	$('.good_out_stay').click(function() {
		window.location.href = 'refund.html';
	})
	//点击跳转到已付定金页面
	$('.good_out_payed').click(function() {
		window.location.href = 'payed.html';
	})
	$('.pingjia').click(function() {
		window.location.href = 'evaluate.html';
	})
	$('.complated').click(function() {
		window.location.href = 'complated.html';
	})

	$('.cancels').click(function() {
		window.location.href = 'cancel.html';
	})
	$('.ping').click(function() {
		window.location.href = 'speak.html';
	})
	//点击跳转到待付尾款页面
	$('.good_out_paybalance').click(function() {
		window.location.href = 'paybalance.html';
	})
	//点击跳转到待完成页面
	$('.good_out_tocomplete').click(function() {
		window.location.href = 'tocomplete.html';
	})
	//点击跳转到待完成页面
	$('.good_out_evaluate').click(function() {
		window.location.href = 'evaluate.html';
	})
	//点击跳转到已退款页面
	$('.good_out_refundmoney').click(function() {
		window.location.href = 'refundmoney.html';
	})
</script>
<script>
	$('.sou_right').click(function() {
		var val = $('.inputItem').val();
		var patrn = /^[0-9]*$/;
		if(!patrn.test(val)) {
			toast('请输入数字');

		}
	})
</script>