cardSearch.html 11.6 KB
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="format-detection" content="telephone=no"/>
		<meta name="format-detection" content="email=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-title" content="">
		<meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
		<link rel="stylesheet" href="../../iconfont/iconfont.css" />
		<link rel="stylesheet" href="../../css/reset.css">
  		<link rel="stylesheet" href="../../css/mylist.css">
  		<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css?V=4.9">
  		<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css?V=4.9">
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			background: #fff;
		}
		.mapsearch{
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border-bottom: 1px solid #CCCCCC;
			height: 58px;
			position: fixed;
			top: 0;left: 0;
		}
		.mapsearch .filter{
			width: 100%;
			height: 58px;
			position: fixed;
			top: 0;left: 0;
			filter: blur(3px);
			-webkit-filter:blur(3px);
			z-index: 10;
			background: rgba(255,255,255,1);
		}
		.mapsearch .stext{
			border: 1px solid #CCCCCC;
			border-radius: 4px;
			width: 100%;
			height: 35px;
			line-height: 35px;
			overflow: hidden;
			position: relative;
			z-index: 111;
		}
		
		.mapsearch .stext .inputxc,.search .stext .sbutton{
			float: left;
			height: 35px;
			
		}
		.mapsearch .stext .inputxc{
			width: 80%;
			box-sizing: border-box;
			border: 0;
			border-right: 1px solid #ccc;
			padding-right: 10px;
		}
		.mapsearch .stext .sbutton{
			width: 20%;
			display: inline-block;
			text-align: center;
		}
		.mapsearch .stext .inputxc input{
			height: 100%;
			width: 88%;
			float: left;
			border: 0;
			outline: none;
		}
		.mapsearch .stext .inputxc i{
			display: inline-block;
			text-align: center;
			float: right;
			color: #9B9B9B;
		}
		.searchparkdata{
			margin-top: 60px;
			width: 100%;
		}
	</style>
	<body>
		<div class="mapsearch">
			<div class="filter"></div>
			<div class="stext">
				<div class="inputxc">
					<input type="text" id="ssearch"/>
					<i class="icon iconfont" style="display: none;" onclick="clearinput();">&#xe67b;</i>
				</div>
				<span class="sbutton">搜索</span>
			</div>
		</div>
		<div class="searchparkdata">
			<div class="weui-cells__title">请选择支持月卡年卡业务的停车场进行购买</div>
			<div id="myList" class="myList">
				<!--<div class="weui-panel__bd card-link" data-parkNo=""  style="cursor: pointer">
					<div class="weui-media-box weui-media-box_text weui-media-box-border">
						<h4 class="weui-media-box__title">中国传感网国际创新园</h4>
						<p class="weui-media-box__desc">江苏省无锡市菱湖大道</p >
						<ul class="weui-media-box__info">
							<li class="weui-media-box__info__meta month_card">月卡</li>
							<li class="weui-media-box__info__meta year_card">年卡</li>
						</ul>
						<div class="weui-cell__ft"></div>
					</div>
				</div>-->
			</div>
			<div class="nomoredata" style="width: 50%;margin: 25px auto 0;">
				<div style="width: 100%;text-align: center;"><i class="icon iconfont" style="font-size: 50px;color: #B2B2B2;">&#xe65e;</i></div>
				<p style="text-align: center;color: #B2B2B2;font-size: 13px;">没有停车场包年包月业务</p>
			</div>
			<div class="weui-loadmore" id="endInfo" style="display: none;">
			  <i class="weui-loading"></i>
			</div>
		</div>
		
	</body>
</html>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js?V=4.9"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js?V=4.9"></script>
<!--/*md5方法*/ start-->
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js?V=4.9"></script>
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js?V=4.9"></script>
<!--MD5 end-->
<script src="../../js/url.js"></script>
<script src="../../js/ajax.js"></script>
<script>
	$(function(){
		$("#ssearch").on('blur',function(){
			var val = $(this).val();
			if(val==''){
				$(this).next('i').css('display','none');
			}
			
		});
		$("#ssearch").on('focus',function(){
			$(this).next('i').css('display','inline');
		});
		$("#ssearch").on('keyup',function(){
			var val = $.trim($(this).val());
			if(!val||val==''){
				var mylist = document.getElementById('myList');
                mylist.innerHTML = '';
                $('.nomoredata').css('display','block');
                console.log('kongle空了 ');
			}else{
				
				searchData(val);
			}
		});/**/
		  //跳转至月卡年卡选择页
		$(document).on('click', '.card-link', function () {
			var pkNo = $(this).attr('data-parkId');
		    var parkAddr = $(this).attr('data-parkAddr');
		    var parkName = $(this).attr('data-parkName');
		    var src = 'card.html?parkId='+pkNo+"&parkName="+parkName+"&parkAddr="+parkAddr+"&";
		    window.location.assign(encodeURI(src));
		});
		
		//点击搜索按钮
		$(".sbutton").click(function(){
			var val = $.trim($("#ssearch").val());
			if(val==''){
				var mylist = document.getElementById('myList');
                mylist.innerHTML = '';
                $('.nomoredata').css('display','block');
			}else{
				searchData(val);
			}
		});
	});
	
	function searchData(parkName){
		var salt = jsajax.salt(32);
		var sort = [
			{keyname:'app_id',value:'0eca8f5373ca4866aec2f8e9d9367104'},
			{keyname:'deviceInfo',value:'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E'},
			{keyname:'salt',value:salt},
			{keyname:'sign_type',value:'md5'},
			{keyname:'parkName',value:parkName}
		];
		var md5sign = jsajax.getsign(sort);
		var jsondata = {
			app_id:'0eca8f5373ca4866aec2f8e9d9367104',
			deviceInfo:'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E',
			salt:salt,
			sign_type:'md5',
			sign:md5sign,
			parkName:parkName
		};
		jsajax.defaultReq(
			mUrl.selectPark,
			JSON.stringify(jsondata),
			function(data){
				console.log(JSON.stringify(data));
				if(data.code==0){
					var mylist = document.getElementById('myList');
                            mylist.innerHTML = '';
                            var datainfo = data.data;
                            if(datainfo.length>0){
                            	$('.nomoredata').css('display','none');
                            }else{
                            	$('.nomoredata').css('display','block');
                            }
                            for(var i=0;i<datainfo.length;i++){
                            	//循环一个停车场信息
                            	var datapark = datainfo[i].parkList;//获取单个停车场信息
                            	var cardh = '';
                            	var plNo = '';
                            	var plName = '';
                            	var plAddress = '';
                            	var catdtypeary = [];
                            	for(var j = 0;j<datapark.length;j++){
                            		var cardType = datapark[j].cardType;//卡类型 1.年卡 2.半年卡 3.季卡 4.月卡 5.日卡
                                    plNo = datapark[j].plNo;//停车场编号
                                    plName = datapark[j].plName;//停车场名称
                                    var carType = datapark[j].carType;//车类型 1.大型车 2,小型车
                                    plAddress = datapark[j].plAddress;//地址
                                    var cart = '';
                                    if(cardType==1){
                                    	var tu = false;
                                    	for(var n=0;n<catdtypeary.length;n++){
                                    		if(cardType==catdtypeary[n]){
                                    			tu = true;
                                    		}
                                    	}
                                    	if(!tu){
                                    		catdtypeary.push(cardType);
                                    		cardh +='<li class="weui-media-box__info__meta month_card">年卡</li>';
                                    	}
                                    }
                                    if(cardType==2){
                                    	var tu = false;
                                    	for(var n=0;n<catdtypeary.length;n++){
                                    		if(cardType==catdtypeary[n]){
                                    			tu = true;
                                    		}
                                    	}
                                    	if(!tu){
                                    		catdtypeary.push(cardType);
                                    		cardh +='<li class="weui-media-box__info__meta year_card">半年卡</li>';
                                    	}
                                    }
                                    if(cardType==3){
                                    	var tu = false;
                                    	for(var n=0;n<catdtypeary.length;n++){
                                    		if(cardType==catdtypeary[n]){
                                    			tu = true;
                                    		}
                                    	}
                                    	if(!tu){
                                    		catdtypeary.push(cardType);
                                    		cardh +='<li class="weui-media-box__info__meta month_card">季卡</li>';
                                    	}
                                    }
                                    if(cardType==4){
                                    	var tu = false;
                                    	for(var n=0;n<catdtypeary.length;n++){
                                    		if(cardType==catdtypeary[n]){
                                    			tu = true;
                                    		}
                                    	}
                                    	if(!tu){
                                    		catdtypeary.push(cardType);
                                    		cardh +='<li class="weui-media-box__info__meta year_card">月卡</li>';
                                    	}
                                    }
                                    if(cardType==5){
                                    	var tu = false;
                                    	for(var n=0;n<catdtypeary.length;n++){
                                    		if(cardType==catdtypeary[n]){
                                    			tu = true;
                                    		}
                                    	}
                                    	if(!tu){
                                    		catdtypeary.push(cardType);
                                    		cardh +='<li class="weui-media-box__info__meta month_card">日卡</li>';
                                    	}
                                    }
                                }
                            	mylist.innerHTML += '<div class="weui-panel__bd card-link" data-parkName="'+plName+'" data-parkAddr="'+plAddress+'" data-parkId="'+plNo+'"  style="cursor: pointer"> <div class="weui-media-box weui-media-box_text weui-media-box-border"> <h4 class="weui-media-box__title">'+plName+'</h4> <p class="weui-media-box__desc">'+plAddress+'</p > <ul class="weui-media-box__info"> '+cardh+' </ul> <div class="weui-cell__ft"></div> </div> </div>';
                            }
				}else{
					
				}
			}
		);
	}
	
/*	"deviceInfo" : "32161378-5DF9-4BA3-863B-09CC150BB8B6",
  "sign_type" : "md5",
  "sign" : "E613585B1D15DD334705B0C448BDD01C",
  "app_id" : "0eca8f5373ca4866aec2f8e9d9367104",
  "salt" : "YKMTNVYKHAAUXBTXXTQOBPBLVZCCDUEU",
  "parkName" : "静雅"*/
</script>