single.html 5.0 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="../assets/css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_6y9erxzbkn2.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/single.css" />
		<style>
			.weui-picker__group {
				font-size: 0.3rem;
			}
		</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">
					<div class='li_span'>
						<span>
						出行时间
					   </span >
						<span class="liang lian" >
							2018/07/03  至 2018/07/06
						</span>

					</div>

					<span>
							<i class="iconfont icon-common-jinru-copy"></i>
					</span>
				</li>
				<li class="mingcheng shuliang" id="shuliang">
					<span>
						购买数量
					</span>
				    <span class="suan">
						<span class="reduce" id="del">-</span>
						<input type="text" value="1" class="val" id="quantity"/>
						<span class="add" id="add">+</span>
					</span>
				</li>
				<li class="mingcheng chu">
					<span class="chuxing">
						出行信息
					</span>
					
				</li>
			</ul>
		</div>
		<div class="chengke">
			<span>乘客信息</span>
			<div class="xuan">
				<span class="xuanze">
					请选则出行人
				 </span>
				<i class="iconfont icon-common-jinru-copy"></i>
			</div>
		</div>
		<div class="qita">
			其他信息
		</div>

		<ul class="youhui">
			<li class="you">
				<span>
					优惠券
				</span >
				<div class="wu">
					<span class="liang lian" >
					  ¥5代金券
				     </span>
				<span>
					<i class="iconfont icon-common-jinru-copy"></i>
				</span>
				</div>

			</li>
			<li class="shang">
				<span>
					商家备注
				</span>
				<span class="liang lian1">
					     点击可给商家留言
				</span>
			</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="dan me">
				<span class="danxuan"></span>
				<span class="wo">我已同意购买协议和合同协议</span>
			</li>
		</ul>
		<div class="zhezhao">
			
		</div>
		<footer>

			<span>定金:¥600</span>
			<span>总价:¥1185</span>
			<input type="button" value="提交订单" />

		</footer>
		<div class='mold'>
			<div class='mold_main'>
				<span class="botm">
					<span class="cancel">
					     取消
					</span>
					<span class="room">
						单人间(一人一房)
					</span>
					<span class="argee">
						确定
					</span>
				</span>
				<span class="require">
					<span>需要</span>
					<span>不需要</span>
				</span>
			</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="../index.js"></script>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				autoplay: 1500, //可选选项,自动滑动
				loop: true
			})
			$('.chengke').click(function() {
				weui.picker([{
					label: '1',
					value: 1
				}, {
					label: '2',
					value: 2
				}, {
					value: 3
				}, {
					label: '4',
					value: 4
				}, {
					label: '5',
					value: 5
				}], {
					onChange: function(result) {},
					onConfirm: function(result) {
						//          var year=$('#year');
						//          year.val(result[0].label)
						$('.xuanze').html(result[0].label)

					}
				});
			})
	//点击增加
	 $("#add").click(function(){
	    numAdd();
	  });
	    
	  $("#del").click(function(){
	    numDec();
	  });
	})
	/*商品数量+1*/
	function numAdd(){
	  var num_add = parseInt($("#quantity").val())+1; 
	  
//	  if($("#quantity").val()==""){
//	    num_add = 1;
//	  }
  $("#quantity").val(num_add);
//	  var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
//	  $("#totalPrice").html(total.toFixed(2));
	}
	/*商品数量-1*/
	function numDec(){
	  var num_dec = parseInt($("#quantity").val())-1;
//	  if(num_dec<1){
//	    //购买数量必须大于或等于1
//	    alert("not lt 1");
//	  }
//	  else{
	    $("#quantity").val(num_dec);
//	    var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
//	    $("#totalPrice").html(total.toFixed(2));
//	  }
	}
		</script>
	</body>

</html>