minec.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">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../js/bootstrap/bootstrap.css" />
		<link rel="stylesheet" href="css/vipcard.css" />
	</head>
	<style>
		body,html{
			width: 100%;
			height: auto;
			min-height: 100%;
			box-sizing: border-box;
		}
		body{
			padding: 10px;
			background: -moz-linear-gradient(top, rgba(113, 152, 130, 1), rgba(38,154, 196, 1)) ;
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(113, 152, 130, 1)), to(rgba(38,154, 196, 1))) ;
	        background: -o-linear-gradient(top, rgba(113, 152, 130, 1), rgba(38,154, 196, 1));
		}
		.minectop {
			margin-bottom: 35px;
		}
		.minectop i{
			color: #fff;
		}
		.mineclist{
			width: 100%;
			padding:0 24px;
		}
		.mineclist .oned{
			width: 100%;
			margin: 0 auto 10px;
			height: auto;
			box-sizing: border-box;
			border-radius: 8px;
			position: relative;
			float: left;
			box-shadow: 0 3px 10px rgba(0,0,0,0.3);
		}
		.mineclist .oned:nth-child(3n+1){
			background: -moz-linear-gradient(-45deg, #46a4b3, #88ad86);
			background: -o-linear-gradient(-45deg, #46a4b3, #88ad86);
			background: -webkit-linear-gradient(-45deg, #46a4b3, #88ad86);
			background: linear-gradient(-45deg, #46a4b3, #88ad86);
		}
		.mineclist .oned:nth-child(3n+2){
			background: -moz-linear-gradient(-45deg, #589ef4, #0196be);
			background: -o-linear-gradient(-45deg, #589ef4, #0196be);
			background: -webkit-linear-gradient(-45deg, #589ef4, #0196be);
			background: linear-gradient(-45deg, #589ef4, #0196be); 
		}
		.mineclist .oned:nth-child(3n+3){
			background: -moz-linear-gradient(-45deg, #bd5ebe, #fc7493);
			background: -o-linear-gradient(-45deg, #bd5ebe, #fc7493);
			background: -webkit-linear-gradient(-45deg, #bd5ebe, #fc7493);
			background: linear-gradient(-45deg, #bd5ebe, #fc7493); 
		}
		/*.mineclist .list{
		    float: left;
		    position: relative;
			width: 100%;
			margin: 0 auto;
			height: 100%;
			padding: 11px;
			box-sizing: border-box;
			border-radius: 8px;
			background: url(imgs/shuiyy.png)no-repeat center center;
			background-size: 90% !important;
		}*/
		.mineclist .list>span{
			position: absolute;
			right: 0;
			top: 50%;
			width: 36px;
			height: 36px;
			font-size: 20px;
			margin-top: -12px;
			text-align: center;
			color: #fff;
		}
		/*.mineclist .list .cardstype{
			padding: 0;
			margin-bottom: 20.3px;
			background:  url(imgs/ztesy.png)no-repeat top right ;
			background-size: 61px !important;
		}*/
		.mineclist .list .cardstype li{
			padding-right: 8px;
			padding-left: 0;
			display: inline-block;
			float: left;
		}
		.mineclist .list .cardstype li div{
			font-size: 11px;
		    border: 1px solid #fff;
		    text-align: center;
		    color: #fff;
		    padding: 0 5px;
		    min-width: 30px;
		    text-align: center;
		}
		.mineclist .list .carNumber{
			font-size: 24px;
			color: #fff;
			padding-right: 30px;
			box-sizing: border-box;
			float: left;
		}
		.mineclist .list .parks{
			width: 100%;
			float: left;
			color: #fff;
			padding-right: 30px;
			box-sizing: border-box;
		}
		.mineclist .list .parks>div:first-child{
			font-size: 18px;
		}
		.mineclist .list .parks .parksaddr{
			  font-size: 12px;
			  display: none;
		}
		.mineclist .list .parks>div{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.mineclist .list .enddate{
			color: #fff;
			font-size: 10px;
			float: right;
			margin-top: 16px;
		}
	</style>
	<body onclick="">
		<div class="minectop">
			<i class="icon iconfont" onclick="javascript:window.history.go(-1)">&#xe601;</i>
		</div>
		<div class="mineclist">
			<!--<div class="oned">
				<div class="list">
					<span class="icon iconfont">&#xe61e;</span>
		    		<ul class="cardstype col-xs-12">
			 	 		<li><div>年卡</div></li>
			 	 		<li><div>半年卡</div></li>
			 	 		<li><div>季卡</div></li>
			 	 		<li><div>月卡</div></li>
			 	 		<li><div>日卡</div></li>
				    </ul>
				    <div class="carNumber">苏BSHDFKS</div>
				    <div class="parks">
				  		<div class="parksname">中国传感网中国传感网创新园停车场中国传感网创新园停车场中国传感网创新园停车场创新园停车场</div>
				  		<div class="parksaddr"></div>
				    </div>
				    <div class="enddate">有效期:<span>2017-01-11</span></div>
		    	</div>
			</div>-->
		</div>
		<div class="jilu" style="display: none;position: absolute;top: 50%;width: 100%;text-align: center;margin-top: -7px;color: #fff;">抱歉,无购买记录</div>
	</body>
</html>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/bootstrap/bootstrap.js"></script>
<script src="../../js/md5.min.js"></script>
<script src="../../js/url.js"></script>
<script src="../../js/ajax.js"></script>
<script>
	$(function(){
		//获取数据
		var apporwx = mUrl.getApporWX();
		if(apporwx){
			if(apporwx=='wx'){
				getMyParkCardInfo();
			}
		}
		//点击每个会员卡进入界面
		$('body').on('click','.mineclist .oned',function(){
			var token = mUrl.GetToken();
			/*var plNo = $(this).attr('data-parkno');
			var cardNo = $(this).attr('data-cardno');
			var danjia = $(this).attr('data-price');
			var cardType = $(this).attr('data-cardType');
			var carType = $(this).attr('data-carType');
			var parkname = $(this).attr('data-parkName');//停车场名称
			var carNumber = $(this).attr('data-carNumber');//车牌号
			var cardCouponsId = $(this).attr('data-cardId');
			var expDate = $(this).attr('data-expDate');//截止时间
			var effDate = $(this).attr('data-effDate');//开始时间*/
			var custCardNo = $(this).attr('data-custCardNo');//用户会员卡no
			
			//div.setAttribute('data-parkAddr',parkAddr);//停车场位置
			//若不在此判断token则下个页面就没有选择车牌
			if(token&&token!='null'&&token!=''){
				var href = 'vipbuyedpay.html';//'vipbuyedpay.html';
				var datasrc = '?custCardNo='+custCardNo;
				//var datasrc = '?plNo='+plNo+'&cardNo='+cardNo+'&cardprice='+danjia+'&cardType='+cardType+'&carType='+carType+'&carNumber='+carNumber+'&cardCouponsId='+cardCouponsId+'&optType=2&expDate='+expDate+'&parkname='+parkname+'&effDate='+effDate+'&';
				window.location.assign(encodeURI(href+datasrc));
			}else{
				var appwx = mUrl.getApporWX();
				if(appwx=='wx'){
					window.location.href = '../../commonp/binding.html';
				}else if(appwx=='android'){
					JSInterface.relogin();
				}else if(appwx=='ios'){
					window.webkit.messageHandlers.relogin.postMessage(null);
				}
			}
		});
	})
	function setToken(token,jwd,device){
		$('.minectop i').css('display','block');
		mUrl.SetToken(token);
		sessionStorage.setItem('lonandlat',jwd);//传入的数据格式为josn格式
		mUrl.setDevice(device);
		getMyParkCardInfo()
	}
	function gett(openid){
		jsajax.gett(openid,function(n){
			if(n==1){//用户已绑定手机号
	    		console.log('获取用户token ');
	    	}else if(n==0){//用户未绑定手机号
	    		mUrl.SetToken(null);
	    		console.log('用户未绑定手机号');
	    	}
		});
	}
	
	//获取用户购买会员卡
	function getMyParkCardInfo() {
    	var salt = jsajax.salt(6);//随机生成的盐值
    	var device = mUrl.getDevice();
    	var token = mUrl.GetToken();
	    var ary = [
	    	{keyname:'app_id',value:'0eca8f5373ca4866aec2f8e9d9367104'},
    		{keyname:'deviceInfo',value:device},
    		{keyname:'salt',value:salt},
    		{keyname:'token',value:token},
    		{keyname:'sign_type',value:'md5'}
	    ];
      var sign = jsajax.getsign(ary);
	    var jsonInfo = {
	    	app_id:'0eca8f5373ca4866aec2f8e9d9367104',
			salt:salt,
			deviceInfo:device,
			sign_type:'md5',
			sign:sign,
			token:token  	
	    };
	    console.log(JSON.stringify(jsonInfo));
	    jsajax.defaultReq(
	        mUrl.vipbuyed,//mUrl.getminecard,//mUrl.myParkCardList,
	        JSON.stringify(jsonInfo),
	        function(data){
	        	console.log(JSON.stringify(data));
	        	if(data.code=='0'){
	        		var datas = data.data;
	        		$('.mineclist').html('');
	        		if(datas&&datas.length>0){
	        			for(var i=0;i<datas.length;i++){
	        				var div = document.createElement('div');
	        				var carNumber = datas[i].carNumber;//车牌号
		      				var parkId = datas[i].parkNo;//停车场编号;
		      				var effDate = datas[i].effDate;//开始时间;
		      				var cardName = datas[i].cardName;//卡名称;
		      				var parkName = datas[i].parkName;//停车场名称;
		      				var id = datas[i].custCardId;//续费会员卡;
		      				var cardNo = datas[i].cardNo;//卡编号;
		      				var expDate = datas[i].expDate;//结束时间;
		      				var cardType = datas[i].cardType;
		      				var parkAddr = datas[i].parkAddr;
		      				var carType = datas[i].carType;
		      				var cardPrice = datas[i].price;
		      				var state = datas[i].cardStatus;
		      				
		      				//新增属性
		      				var num = datas[i].num;
		      				var custCardNo = datas[i].custCardNo;
		      				var useType = datas[i].useType;//是否通用
		      				var totalAmount = datas[i].totalAmount;
		      				var saleChannel = datas[i].saleChannel;
		      				
		      				
		      				
		      				
				      		var cardtstr = '';
				      		var carstr = '';
				      		cardtstr = cardType=='1'?'年卡':(cardType=='2'?'半年卡':(cardType=='3'?'季卡':(cardType=='4'?'月卡':(cardType=='5'?'日卡':''))));
							carstr = carType=='2'?'小型车':'大型车';
							var vipType = datas[i].vipType;
							div.className = 'oned';//list
							div.setAttribute('data-parkno',parkId);//停车场编号
							div.setAttribute('data-cardno',cardNo);//卡编号
							div.setAttribute('data-price',cardPrice);//单价
							div.setAttribute('data-parkName',parkName);//停车场名称
							div.setAttribute('data-carType',carType);//车类型
							div.setAttribute('data-cardType',cardType);//卡类型
							div.setAttribute('data-carNumber',carNumber);//车牌号
							div.setAttribute('data-parkAddr',parkAddr);//停车场位置
							div.setAttribute('data-effDate',effDate);//开始时间
							div.setAttribute('data-expDate',expDate);//截止时间
							div.setAttribute('data-cardId',id);//截止时间
							div.setAttribute('data-custCardNo',custCardNo);//用户会员卡no
							
							div.setAttribute('onclick','');//截止时间
							div.innerHTML = '<div class="list">'
								+'<span class="icon iconfont">&#xe61e;</span>'
					    		+'<ul class="cardstype col-xs-12">'
						 	 		+'<li><div>'+cardtstr+'</div></li>'
						 	 		+'<li><div>'+carstr+'</div></li>'
							    +'</ul>'
							    +'<div class="carNumber">'+carNumber+'</div>'
							    +'<div class="parks">'
							  		+'<div class="parksname">'+carstr+cardtstr+'</div>'
							  		/*+'<div class="parksaddr">'+parkAddr+'</div>'*/
							    +'</div>'
							    +'<div class="enddate">有效期:<span>'+expDate+'</span></div>'
					    	+'</div>';
					    	$('.mineclist').append(div);
	        			}
	        		}else{
	        			$('.jilu').css('display','block');
	        		}
	        	}else{
	        		$('.jilu').css('display','block');
	        		alert(data.message);
	        		/*var openid = mUrl.GetOpenid();
	        		if(data.code=='-10000'){
	        			gett(openid);
	        		}*/
	        	}
	        }
	    )
    }
</script>