Pedestrian_choice.html 6.3 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_k1lcewwscuf.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/Pedestrian choice.css" />
		<style>
			.weui-picker__group {
				font-size: 0.3rem;
			}
			.icon-duigou.now {
				color: rgb(254, 10, 1);
			}
			a{
				color:#000;
			}
			.bianji{
				margin-right:0.3rem;
			}
		</style>
	</head>

	<body>

		<ul class="people">
			<li class="userInfo">
				<div class="guo">
					<div class="gli">
						<!--<div>-->
						<div class="circle">
							<i class="iconfont icon-duigou"></i>
					    </div>
						<!--</div>-->
						<!--<i class="iconfont icon-yuancircle46"></i>-->
						<div class="xin">
							<span class="guoxin">
							<span class="name">郭新宇</span>&nbsp;&nbsp;&nbsp; &nbsp;136120645435</span>
							<span>身份证:123543546576868</span>
						</div>
					</div>
					<div class="bian">
					<a href="addPartner.html">
						<div class="bianji">
							<i class="iconfont icon-bianji"></i>编辑
						</div>
					</a>
						<div class="delete">
							<i class="iconfont icon-shanchu"></i> 删除
						</div>
					</div>
				</div>
			</li>
			<li class="userInfo">
				<div class="guo">
					<div class="gli">
						<div class="circle">
						  <i class="iconfont icon-duigou"></i>
					    </div>

						<!--</div>-->
						<!--<i class="iconfont icon-yuancircle46"></i>-->
						<div class="xin">
							<span class="guoxin">
							<span class="name">郭新宇</span>&nbsp;&nbsp;&nbsp; &nbsp;136120645435</span>
							<span>身份证:123543546576868</span>
						</div>
					</div>
					<div class="bian">
					<a href="addPartner.html">
						<div class="bianji">
							<i class="iconfont icon-bianji"></i>编辑
						</div>
					</a>
						<div class="delete">
							<i class="iconfont icon-shanchu"></i>删除
						</div>
					</div>
			</li>
			<li class="userInfo">
				<div class="guo">
					<div class="gli">
						<div class="circle">
						  <i class="iconfont icon-duigou"></i>
					    </div>

						<!--</div>-->
						<!--<i class="iconfont icon-yuancircle46"></i>-->
						<div class="xin">
							<span class="guoxin">
							<span class="name">郭新宇</span>&nbsp;&nbsp;&nbsp; &nbsp;136120645435</span>
							<span>身份证:123543546576868</span>
						</div>
					</div>
					<div class="bian">
					<a href="addPartner.html">
						<div class="bianji">
							<i class="iconfont icon-bianji"></i>编辑
						</div>
				    </a>
						<div class="delete">
							<i class="iconfont icon-shanchu"></i>删除
						</div>
					</div>
			</li>
		</ul>
		</div>
		<div class="quanxuan">
			<div class="check">
				<div class="circle" id="selectAll">
					<i class="iconfont icon-duigou"></i>
				</div>
				<spn>全选</span>
			</div>
			<button class="agree" onclick="agreeFun()">
            		确定
            </button>
		</div>
		<a href="travelPartner.html">
			<div class="tianjia ok">
		    	添加出行人
		    </div>
		</a>
		<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>
		</script>
	</body>

</html>
<script type="text/javascript">
		$('.delete').click(function(){
			$(this).parents('.userInfo').remove();
		})
	var num= $('.people li').length;
	var count = 0;
	var circle=$('.circle');
		var nameArr = [];
		circle.click(function(){ 
		if($(this).find('.icon-duigou').hasClass("now")){

				$(this).find('.icon-duigou').removeClass("now");
				$(this).find('.icon-duigou').css('color','rgba(255, 255, 255)');
                $(this).css('border','0.02rem solid #999');

                
			}else {

			    $(this).find('.icon-duigou').addClass("now");
			    $(this).find('.icon-duigou').css('color','rgb(254, 10, 1)');
                $(this).css('border','0.02rem solid rgb(254, 10, 1)');

			}
			 
			var len=$(".people").find('.icon-duigou.now').length;
			console.log(len);
			if(num == len) {
				$("#selectAll").css('border','0.02rem solid rgb(254, 10, 1)');
        		$("#selectAll").find('.icon-duigou').css('color','rgba(254, 10, 1)');
        		
			}else{
				$("#selectAll").css('border','0.02rem solid rgb(153, 153, 153)');
        		$("#selectAll").find('.icon-duigou').css('color','rgb(255, 255, 255)');
			}

		})
		//全选反选
		
		
		$("#selectAll").click(function(){
			if(circle.find('.icon-duigou').css('color')=='rgb(255, 255, 255)'){
				circle.find('.icon-duigou').css('color','rgb(254, 10, 1)');
                circle.css('border','0.02rem solid rgb(254, 10, 1)');
			}else{
				circle.find('.icon-duigou').css('color','rgb(255, 255, 255)');
                circle.css('border','0.02rem solid #999');
			}
				
		})
	
	var arr=[];

	
	
	// 点击确定时,出行人名字添加到数组,回显到订单提交页面;
	function agreeFun() {
		var nameArr = [];
		for (var i = 0; i < $(".userInfo").length; i++ ) {
		
			if($(".userInfo").eq(i).find(".icon-duigou").hasClass("now")) {
				var name = $(".userInfo").find(".name").html();				
				if(nameArr.length >= 2) {			
					break;
					
				}else {
					nameArr.push(name);
				}
			}
		}
			var name=encodeURI(encodeURI(nameArr));
			var url="orders_submitted.html?name="+name;
		    window.location.href = url;
	}
	//添加出行人
	function getQueryString(name) {
				var reg = new RegExp("(^|&)" +
					name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				//return null;
				return '请选择出行人';
			}
    function add(){
    	var arrlist=decodeURI(getQueryString('arrlist')).replace(/,/g ,' ');
    	//$("#parentIndustryUL").append(" <li value="+industry.xyIndustryId+">"+industry.industryName+"</li>");
    }
    //add();
    
</script>