addCar.html 11.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="selecttitle">添加车牌</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="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css?v=1.1">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css?v=1.1">-->
    <link rel="stylesheet" href="../../js/bootstrap/bootstrap.css" />
    <!--<link rel="stylesheet" href="../../../css/reset.css">-->
    <link rel="stylesheet" href="../../js/carsoft/carstyle.css"/>
    <link rel="stylesheet" href="css/fxcommon.css"/>
</head>
<style>
	body,html{
		height: 100%;
		
	}
	body{
		box-sizing: border-box;
	}
	.addcp{
		margin-top:37px;
		padding: 0 26px;
	}
	.addcp .hhhd{
		color: #fff;
		text-align: center;
		font-size: 17px;
		padding: 15px 0 6px;
		box-sizing: border-box;
	}
	.addbtnp{
		width: 100%;
		padding: 76px 57px 0;
		box-sizing: border-box;
	}
	.addbtnp .addbtn{
		width: 100%;
		border-style: none;
		height: 42px;
		background: #fff;
		color: #75CBBE;
		border-radius: 21px;
		font-size: 18px;
	}
	.sbzg{
		width: 100%;
		margin: 0 auto 10px;
		/*padding: 8px 0;*/
		box-sizing: border-box;
		background: #fff;
		border-radius: 6px;
		text-align: center;
		height: 47px;
		line-height: 47px;
	}
	.sbzg>span{
		display: inline-block;
		width: 14.2%;
		text-align: center;
		padding:0 5px;
		box-sizing: border-box;
		height: 100%;
		position: relative;
		float: left;
	}
	.sbzgqh>span{
		display: inline-block;
		width: 12.5%;
		text-align: center;
		padding:0 5px;
		box-sizing: border-box;
		height: 100%;
	}
	.sbzg span>div{
		height: 100%;
	}
	.sbzg .right{
		height: 16px;
		width: 1px;
		background: rgba(232,231,231,1);
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -8px;
	}
	.sbzg>span:last-child .right{
		display: none;
	}
	.sbzg .bottom{
		position: absolute;
		bottom: 5px;
		left: 50%;
		width: 23px;
		height: 2px;
		margin-left: -11.5px;
		
	}
	.sbzg>span.active .bottom{
		background: #75cbbe;
	}
	.sbzg span:last-child{
		border-right: 0;
	}
	@keyframes mymove
	{
		from {border-bottom: 1px solid rgba(255,255,255,0);}
		to {border-bottom: 1px solid #75cbbe;}
	}
	.qiehuan{
		width: 120px;
	    margin: 10px auto 30px;
	    color: #fff;
	    font-size: 12px;
	    text-align: center;
	}
	.qiehuan i{
		font-size: 12px;
	}
	.hhhd{
		color: #fff;
	    text-align: center;
	    font-size: 17px;
	    padding: 32px 0 10px;
	    box-sizing: border-box;
	}
</style>
<body ontouchstart onclick="" style="cursor: pointer;">
	<div class="fanxtctop">
		<div class="row">
			<div class="col-xs-12">
				<i class="icon iconfont" onclick="window.history.go(-1)">&#xe65a;</i>
				<span class="tt">添加车牌</span>
			</div>
		</div>
	</div>
	<div class="addcp">
		<div class="hhhd">请输入车牌号</div>
		<div class="sbzg" id="carsoft" onclick="">
			<span class="active"><div></div><span class="right"></span><span class="bottom"></span></span><span><div></div><span class="right"></span><span class="bottom"></span></span><span><div></div><span class="right"></span><span class="bottom"></span></span><span><div></div><span class="right"></span><span class="bottom"></span></span><span><div></div><span class="right"></span><span class="bottom"></span></span><span><div></div><span class="right"></span><span class="bottom"></span></span><span><div></div><span class="right"></span><span class="bottom"></span></span>
		</div>
		<div class="qiehuan" id="qiehuan" onclick="qiehuan()">
			<i class="icon iconfont">&#xe62f;</i>&nbsp;&nbsp;切换新能源车牌
		</div>
		<input class="weui-input carsoftinput" style="display: none;" id="input" type="text"  placeholder="请输入正确的车牌号码" v-model="carnumer" maxlength="7" autocomplete="off">		
	</div>	
	<div class="addbtnp">
		<button class="addbtn">
			立即添加
		</button>
	</div>
	
	<div id="ttip" style="display: none;width: 100%;position: absolute;top: 50%;margin-top: -22px;text-align: center;">
		<div style="overflow: hidden;width: 134px;height: 44px;line-height: 44px;text-align: center;display: inline-block;border-radius: 6px;color: #fff;background: rgba(0,0,0,0.5);">车牌号有误</div>
	</div>

</body>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/bootstrap/bootstrap.js"></script>
<!--<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js?v=1.1"></script>-->
<!--md5 start-->
<script src="../../js/md5.min.js"></script>
<!--md5 end-->
<script src="../../js/layui/layui/layui.js"></script>
<script src="../../js/soft/layer.js"></script>
<script src="../../js/carsoft/carsoft.js"></script>
<script src="../../js/url.js"></script>
<script src="../../js/ajax.js"></script>
<script src="js/vipback.js"></script>

<script type="text/javascript">
var func = {}
//切换新能源车
function qiehuan(){
	if(!xinnengyuan){
		console.log('执行切换');		
		$('#carsoft').append('<span><div></div></span>');
		$('#carsoft').addClass('sbzgqh');
		console.log('切换新能源  '+$.trim($('#carsoft').text()));
		$('#input').val($.trim($('#carsoft').text()));
		$('.qiehuan').html('<i class="icon iconfont">&#xe62f;</i>&nbsp;&nbsp;切换普通车牌');
		xinnengyuan = true;
	}else{		
		$('#carsoft').children('span:last-child').remove();
		$('#carsoft').removeClass('sbzgqh');
		console.log('切换普通  '+$.trim($('#carsoft').text()));
		$('#input').val($.trim($('#carsoft').text()));
		$('.qiehuan').html('<i class="icon iconfont">&#xe62f;</i>&nbsp;&nbsp;切换新能源车牌');
		xinnengyuan = false;
	}
}
$(function(){
    //打开键盘
    openprovice(1);   
    
/*    $('body').on('click','#carsoft',function(){
    	alert('sh');
    	var val = $("#input").val();
		var sin = $(this).val();
		console.log(" sin "+sin);
		if(val.length<1){
			alert('sh1');
			openprovice(1);
		}else if(val=='WJ'){
			alert('sh2');
			openprovice(3);
		}else{
			alert('sh3');
			openprovice(2);
		}
		
		layer.open({
			type: 1,
			content: '<div id="pro"></div>',
			anim: 'up',
			shade :false,
			title:false,
			closeBtn:false,
			style: 'position:fixed; bottom:0; left:0; width: 100%; height: 172px; padding:0; border:none;'
		});
		
   })*/
    
    
    layui.use(['layer'], function(){});
    //点击立即添加
    var sfsxny = false;   
    $('body').on('click','.addbtn',function(){
    	//$('body').append('<div id="tip" style="position: absolute;padding: 12px 25px;top: 50%;left: 50%;margin-left: -62px;margin-top: -22px;border-radius: 6px;color: #fff;background: rgba(0,0,0,0.5);">签名验证失败</div>')
    	//$('#tip1').animate({height:"100px",width:'500px'});
    	
    	
    	
    	var carnn = $.trim($('#carsoft').text());
    	//var carnn = $.trim($("#input").val());
    	
    	if(!carnn||carnn==''){
    		/*$('.ttip>div').text('最多绑定三辆车');
        		$('.ttip').show();
        		setTimeout(function(){
        			$('.ttip').hide();
        		},1500);*/
    		layer.msg('车牌号不能为空', {
			    time: 1500 //2秒关闭(如果不配置,默认是3秒)
			}, function(){});
			return false;
    	}
		if(carnn.length==8){        	
        	if(carnn.substring(0,1)!='W'){
        		if(carnn.substring(2,3)=='D'||carnn.substring(2,3)=='F'||carnn.substring(2,3)=='0'||carnn.substring(2,3)=='1'||carnn.substring(2,3)=='2'||carnn.substring(2,3)=='3'||carnn.substring(2,3)=='4'||carnn.substring(2,3)=='5'||carnn.substring(2,3)=='6'||carnn.substring(2,3)=='7'||carnn.substring(2,3)=='8'||carnn.substring(2,3)=='9'){
        			if(carnn.substring(4,5)=='0'||carnn.substring(4,5)=='1'||carnn.substring(4,5)=='2'||carnn.substring(4,5)=='3'||carnn.substring(4,5)=='4'||carnn.substring(4,5)=='5'||carnn.substring(4,5)=='6'||carnn.substring(4,5)=='7'||carnn.substring(4,5)=='8'||carnn.substring(4,5)=='9'){
        				if(carnn.substring(5,6)=='0'||carnn.substring(5,6)=='1'||carnn.substring(5,6)=='2'||carnn.substring(5,6)=='3'||carnn.substring(5,6)=='4'||carnn.substring(5,6)=='5'||carnn.substring(5,6)=='6'||carnn.substring(5,6)=='7'||carnn.substring(5,6)=='8'||carnn.substring(5,6)=='9'){
            				if(carnn.substring(6,7)=='0'||carnn.substring(6,7)=='1'||carnn.substring(6,7)=='2'||carnn.substring(6,7)=='3'||carnn.substring(6,7)=='4'||carnn.substring(6,7)=='5'||carnn.substring(6,7)=='6'||carnn.substring(6,7)=='7'||carnn.substring(6,7)=='8'||carnn.substring(6,7)=='9'){
	            				if(carnn.substring(7,8)=='D'||carnn.substring(7,8)=='F'||carnn.substring(7,8)=='0'||carnn.substring(7,8)=='1'||carnn.substring(7,8)=='2'||carnn.substring(7,8)=='3'||carnn.substring(7,8)=='4'||carnn.substring(7,8)=='5'||carnn.substring(7,8)=='6'||carnn.substring(7,8)=='7'||carnn.substring(7,8)=='8'||carnn.substring(7,8)=='9'){
	            					sfsxny = true;
	            				}
	            			}
            			}
        			}
        		}
        	}
       }
    	var checkResult = jsajax.isVehicleNumber(carnn);
        if (!checkResult&&!sfsxny) {
        	layer.msg('车牌号有误', {
				    time: 1500 //2秒关闭(如果不配置,默认是3秒)
				}, function(){});
        	//setTimeout(function(){
        		/*$('.ttip>div').text('车牌号有误');
        		$('.ttip').show();
        		setTimeout(function(){
        			$('.ttip').hide();
        		},1500);*/
        		/*layer.msg('车牌号有误', {
				    time: 1500 //2秒关闭(如果不配置,默认是3秒)
				}, function(){});*/
        	//},200);   	
        	//$.alert("车牌号有误<br/> 正确格式如:普通车牌:陕K88888,新能源车牌:陕KD8888D");
            return false;
        }
		var data = [{carNumber:carnn}];
		editc(JSON.stringify(data),'00');
    })
});

function editc(carNumbers,optType){
		layui.use(['layer'], function(){});
		//mUrl.Caredit
		var salt = jsajax.salt(32);
		var token = mUrl.GetToken();
		var device = mUrl.getDevice();
		var sortd = [
			{keyname:'app_id',value:'0eca8f5373ca4866aec2f8e9d9367104'},
			{keyname:'deviceInfo',value:device},
			{keyname:'salt',value:salt},
			{keyname:'sign_type',value:'md5'},
			{keyname:'carNumbers',value:carNumbers},
			{keyname:'token',value:token},
			{keyname:'optType',value:optType},
		];
		console.log(JSON.stringify(sortd));
		var md5sign = jsajax.getsign(sortd);
		var jsondata = {
			app_id : "0eca8f5373ca4866aec2f8e9d9367104",
      		carNumbers : carNumbers,
   			deviceInfo : device,
   			optType : optType,
   			salt : salt,
   			sign : md5sign,
   			sign_type : "md5",
   			token : token
		};
		console.log(JSON.stringify(jsondata));
		jsajax.defaultReq(
			mUrl.Caredit,
			JSON.stringify(jsondata),
			function(data){
				console.log(JSON.stringify(data));
				if(data.code==0){
					window.location.href = document.referrer;
				}else if(data.code==-10005){
					layer.msg('最多绑定三辆车', {
					    time: 1500 //2秒关闭(如果不配置,默认是3秒)
					}, function(){});
				}else{	
					layer.msg(data.message, {
					    time: 1500 //2秒关闭(如果不配置,默认是3秒)
					}, function(){});
				}
			}
		);		 
	}
</script>
</body>
</html>