orders_submitted.html 12.6 KB

原文件审查历史永久链接

<!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" />
		<link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/myweui.min.css" />
		<link rel="stylesheet" type="text/css" href="../assets/css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_3se1rq7vwl5.css" />
		<script type="text/javascript" src="../assets/font/iconfont.js"></script>
		<script type="text/javascript" src="../js/base.js"></script>
		<link rel="stylesheet" href="../css/orders_submitted.css" />
		<style>
			.weui-picker__group {
				font-size: 0.3rem;
			}
			.mold {
				display: none;
			}
			.weui-picker__action:first-child {
				text-align: left;
				color: #888;
			}

			.sss {
				display: none;
			}
			/*.move3 {
				display: none;
			}*/

			.move {
				display: none;
			}

			.move_main {
				animation: move 0.18s;
			}

			@keyframes move {
				0% {
					height: 1rem;
				}
				50% {
					height: 4rem;
				}
				100% {
					height: 4.55rem;
				}
			}

			.move_main3 {
				animation: move 0.18s;
			}

			.mold_out {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="taocan">
			套餐信息
		</div>
		<div class="information">
			<ul>
				<li class="mingcheng">
					<span>
						套餐名称
					</span >
					<span class="liang">
						8/13~8/15 两天攀岩活动
					</span>
				</li>
				<li class="mingcheng ming pelpe">
					<div class='li_span'>
						<span>
							出行时间
					    </span>
						<span class="liang lian ">
							<span class="showcang">2018/07/03&nbsp;至&nbsp;2018/07/07</span>
						</span>
					</div>
					<span>
							<i class="iconfont icon-common-jinru-copy"></i>
					</span>
				</li>
				<li class="mingcheng shuliang" id="shuliang">
					<span>
						购买数量
					</span>
					<div class="suan">
						<span class="reduce" id="del">-</span>
						<span class="val" id="quantity">1</span>
						<span class="add" id="add">+</span>
					</div>
				</li>
				<li class="mingcheng chu">
					<span class="chuxing">
						出行信息
					</span>

				</li>
			</ul>
		</div>
		<a href="Pedestrian_choice.html">
			<div class="chengke">
				<span>乘客信息</span>
				<div class="xuan">
					<span class="xuanze">
				 	请选则出行人
					 </span>
					<i class="iconfont icon-common-jinru-copy"></i>
				</div>
			</div>
		</a>
		<div class="qita">
			其他信息
		</div>

		<ul class="youhui">
			<a href="discountCoupon.html">
				<li class="you">
					<span>
					优惠券
				   </span >

				<div class="wu">
					<span class="liang lian waitmoney" >
					  ￥5代金券
				     </span>
					<span>
					<i class="iconfont icon-common-jinru-copy"></i>
				</span>
					</div>

				</li>
			</a>
			<li class="shang titles">
				<div>
					商家备注&nbsp;<span>(限十字以内)</span>
				</div>

				<input type="text" placeholder="点击可给商家留言" class="liang lian1"/>
			</li>
			<li class="dan jus">
				<span>
					单房差（一人一房）
				</span >
				<div class='dan_box'>
					<span class="liang lian2" >
					请选择
					</span>
				<span>
					<i class="iconfont icon-common-jinru-copy"></i>
				</span>
				</div>
			</li>
			<li class="dan1 me">
				<div class="danxuan">
					<i class="iconfont icon-duigou"></i>
				</div>
				<div class="wo">我已同意
					<a href="agreement.html" class="phurse">购买协议和合同协议</a>
				</div>
			</li>
		</ul>
		<div class="zhezhao">
		</div>
		<footer>
			<span>定金：￥600</span>
			<span>总价：￥1185</span>
			<!--<a href="orderPay.html">-->
			<input type="button" value="提交订单" class="sub" id="sub" />
			<!--</a>-->
		</footer>

		<div class='mold'>
			<div class='mold_main'>
				<span class="fon30">
					是否允许绑定手机号码？
				</span>
				<span>
					<span class="fon30" id="no">否</span>
				<span class="fon30 green" id="yes">允许</span>
				</span>
				<span class="fon26">
					注：绑定后可获得￥10代金券一张
				</span>
			</div>
		</div>

		<div class='move'>
			<div class='move_main'>
				<div class="change">
					<div class="fang">
						<span class="call">
								取消
							</span>
						<span class="single1">
								单人间&nbsp;&nbsp;(一人一房)
							</span>

						<span class="confirm">
									确定
						</span>
					</div>
				</div>
				<div class="required">
					<span class="yes">需要</span>
					<span>不需要</span>
				</div>

			</div>

		</div>
		<div class='move1'>
			<div class='move_main1'>
				<div class="shang2">
					<div class="shang1">
						<span class="choose">
							选择支付方式
						</span>
					</div>
					<div class="shang1 shan1 shang_list">
						<div class="shang1_inner">
							<div class="img_out">
								<img src="../images/yue.png" alt="" class="yue" />

							</div>
							<div>
								余额支付
							</div>
						</div>
						<div>
							<i class='iconfont icon-xuanzhong2'></i>
						</div>
					</div>
					<div class="shang1 shan1">
						<div class="shang1_inner">
							<div class="img_out">
								<img src="../images/wei.png" alt="" class="yue" />

							</div>
							<div>
								微信支付
							</div>
						</div>
						<div>
							<i class='iconfont'></i>
						</div>
					</div>
					<div class="shang1 shan1">
						<div class="shang1_inner">
							<div class="img_out">
								<img src="../images/zhi.png" alt="" class="yue" />

							</div>
							<div>
								支付宝支付
							</div>
						</div>
						<div>
							<i class='iconfont'></i>
						</div>
					</div>
					<div class="agreepay">

						确认支付
					</div>
				</div>
			</div>
		</div>
		<div class='mold_out'>
			<div class='mold_center'>
				<div class="scroll_out">
					<div class="scroll">
						<div class="money">
							<div class="year_change">
								<img src="../images/circle1.png"/>
								<span>2018/07/03&nbsp;至&nbsp;2018/07/06</span>
							</div>
							<div class="price">￥1190</div>
						</div>
						<div class="money">
							<div class="year_change">
								<img src="../images/circle.png"/>
								<span>2018/07/03&nbsp;至&nbsp;2018/07/07</span>
							</div>
							<div class="price">￥1190</div>
						</div>
						<div class="money">
							<div class="year_change">
								<img src="../images/circle.png"/>
								<span>2018/07/03&nbsp;至&nbsp;2018/07/08</span>
							</div>
							<div class="price">￥1190</div>
						</div>
						<div class="money">
							<div class="year_change">
								<img src="../images/circle.png"/>
								<span>2018/07/03&nbsp;至&nbsp;2018/07/09</span>
							</div>
							<div class="price">￥1190</div>
						</div>
						<div class="money">
							<div class="year_change">
								<img src="../images/circle.png"/>
								<span>2018/07/03&nbsp;至&nbsp;2018/07/09</span>
							</div>
							<div class="price">￥1190</div>
						</div>
						<div class="money">
							<div class="year_change">
								<img src="../images/circle.png"/>
								<span>2018/07/03&nbsp;至&nbsp;2018/07/09</span>
							</div>
							<div class="price">￥1190</div>
						</div>

					</div>
					<button class="bottom_button" value="">确定</button>
				</div>

			</div>

		</div>

		<!--点击输入要绑定的手机号-->
		<div class='move3'>
			<div class='move_main3'>
				<span class="tie_phone">输入绑定的手机号：</span>
				<input type="text" class="phone_input" placeholder="请输入手机号" />
				<span class="phone_btn"><span class="agreed">确认</span></span>
			</div>
		</div>
		</div>
		<script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../assets/js/swiper-3.4.2.min.js"></script>
		<script type="text/javascript" src="../assets/js/weui.js"></script>
		<script type="text/javascript" src="../assets/js/myweui.js"></script>
		<script type="text/javascript" src="../index.js"></script>
		<script>
			$(function() {
				//获取选择出行人页面的数据

				var name = decodeURI(getQueryString('name')).replace(/,/g, ' ');
				if(!name) {
					$('.xuanze').html('请选择出行人');
				} else {
					$('.xuanze').html(name);
				}

				function getQueryString(name) {
					var reg = new RegExp("(^|&)" +
						name + "=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if(r) return unescape(r[2]);
					//return null;
					return '请选择出行人';
				}

				$('.money img').click(function(event) {
			$(this).attr("src", "../images/circle1.png");
			$(this).parents('.money').siblings().find('img').attr("src", "../images/circle.png");
	});
				//获取选择选择代金券的数据

				var price = decodeURI(getQueryString_money('price')).replace(/,/g);
				if(!price) {
					$('.waitmoney').html('请选择代金券');
				} else {
					$('.waitmoney').html('代金券￥' + price);
				}

				function getQueryString_money(price) {
					var reg = new RegExp("(^|&)" +
						price + "=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if(r) return unescape(r[2]);
					return '';
				}

				var mold = $('.mold');
				$('.mold').click(function() {
					$(this).hide();
				})

				$('.mold_main').click(function(e) {
					e.stopPropagation();
				})
				$('.move_main3').click(function(e) {
					e.stopPropagation();
				})
				$('.move3').click(function() {
					$(this).hide();
				})
				//点击增加
				$("#add").click(function() {
					console.log(1);
					numAdd();
				});

				$("#del").click(function() {

					numDec();
				});

				/*商品数量+1*/
				function numAdd() {

					var num_add = parseInt($("#quantity").html()) + 1;
					$("#quantity").html(num_add);
				}
				/*商品数量-1*/
				function numDec() {
					if($("#quantity").html() <= 1) {
						return false;
					}
					var num_dec = parseInt($("#quantity").html()) - 1;
					$("#quantity").html(num_dec);

				}

				//我已同意购买协议和合同协议
				$(".danxuan").click(function() {
					if($('.icon-duigou').css('display') == 'none') {
						$('.icon-duigou').css('display', 'block');
					} else {
						$('.icon-duigou').css('display', 'none');
					}
				});
				$('.sub').click(function() {
					$('.mold').css('display', 'block');
				})
				$('.dan').click(function() {
					$('.move').css('display', 'block');

				})
				$('#yes').click(function() {
					$('.mold').css('display', 'none');
					if($('.mold').css('display') == 'none') {
						$('.move3').css('display', 'block');
					}
				})
				$('#no').click(function() {
					$('.mold').css('display', 'none');
					if($('.mold').css('display') == 'none') {
						$('.move1').css('display', 'block');
					}
				})

				$('.move_main').click(function(e) {
					e.stopPropagation();
				})
				$('.move_main1').click(function(e) {
					e.stopPropagation();
				})

				$('#sub').click(function() {

				})

				var liangVal = $('.lian2').html();
				var tem = '';
				$('.required span').click(function(e) {

					tem = $(this).html();

					$(this).css('color', 'red');
					$(this).siblings().css('color', '#000');
				});
				$('.call').click(function() {
					$('.lian2').html(liangVal);
				})

				$('.confirm').click(function(e) {
					$('.lian2').html(tem);
					liangVal = tem;
					$('.move').css('display', 'none');

				})
				$('.call').click(function(e) {
					$('.move').css('display', 'none');

				})
				$('.move').click(function(e) {
					$('.move').css('display', 'none');

				})

			})

			$('.pelpe').click(function() {
				$('.mold_out').css('display', 'block');
			})


			var index = 0;
			var num = 0;


			$('.bottom_button').click(function() {
				var inputLength = $('.mold_center').find('i').length;
				for(var i = 0; i < inputLength; i++) {
					if($('.mold_center').find('i').eq(i).attr("class") == "iconfont icon-radiobox") {
						num = num + 1;
						index = i;
					}
				}
				if(num == 0) {
					$('.mold_out').css('display', 'none');
				} else {
					$('.showcang').html($('.mold_center').find('span').eq(index).html());
					$('.mold_out').css('display', 'none');
				}
			})
			$('.shan1').click(function() {
				$(this).find('i').attr('class', 'iconfont icon-xuanzhong2');
				$(this).siblings().find('i').attr('class', 'iconfont');
			})
			$('.move1').click(function() {
				$(this).css('display', 'none');
			})
			$('.phone_btn').click(function() {
				$('.move3').css('display', 'none');
			})
			$('.dainji').click(function(){
				$('.dainji').css('display', 'none');
				$('.texteare1').focus();
			})
		</script>

	</body>

</html>