master

分支 (1)

管理

管理

master

jilin__hzs
/
freeway_tolls.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>高速通行费</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/freeway_tolls_css.css" />
		<style type="text/css">
			/*---遮罩层---*/

			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
			}

			.mask {
				position: fixed;
				height: 100%;
				width: 100%;
				z-index: 100;
			}

			html,
			body {
				height: 100%;
			}
			/*车型判断*/

			.ycbox {
				display: none;
				position: fixed;
				top: 100px;
				left: 50%;
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				transform: translateX(-50%);
				max-width: 630px;
				min-width: 320px;
				height: 100%;
				z-index: 10000;
			}

			.ycbox img {
				width: 100%;
				height: 60%;
			}

			#prm_weight {
				width: 60%;
				height: 31px;
				padding-left: 0.5em;
			}

			.highwayTollsbm table select {
				width: 60%;
				padding-left: 0.5em;
				height: 30px;
				line-height: 29px;
				font-family: "微软雅黑"
			}

			.highwayTollsbm .gstxfcx {
				width: 100px;
				height: 40px;
				color: #FFFFFF;
				font-size: 16px;
				border: none;
				border-radius: 8px;
				FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#0070B4, endColorStr=#32C7F2);
				/*IE*/
				background: -moz-linear-gradient(top, #0070B4, #32C7F2);
				/*火狐*/
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0070B4), to(#32C7F2));
				/*谷歌*/
				background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #0070B4), color-stop(1, #32C7F2));
				/* Safari & Chrome*/
				filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0070B4', endColorstr='#32C7F2');
				/*IE6 & IE7*/
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0070B4', endColorstr='#32C7F2')";
				/* IE8 */
			}

			.publicModal {
				display: none;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: #333;
				opacity: 0.5;
				z-index: 9999;
			}
			/*下拉框*/

			.specialTd {
				height: 70px;
				line-height: 45px;
				margin-left: 20px;
			}

			.specialTd p {
				padding-left: 20px;
				width: 25%;
				height: 70%;
				float: left;
				font-size: 1.35em;
				color: #761C19;
			}

			.specialTd div {
				color: #666666;
				padding-left: 1em;
				font-size: 1.3em;
				border-radius: 8px;
				border: 1px solid #DEDEDE;
				width: 60%;
				height: 65%;
				float: left;
			}
			/*如何判断车型*/

			#btntcc {
				display: block;
				text-decoration: underline;
				color: #761C19;
				margin-top: 50px;
				font-size: 1.1em;
				width: 200px;
				text-align: left;
			}
			/*如何判断车型 关闭按钮*/

			.offBtnA {
				font-size: 3em;
				position: fixed;
				top: -10px;
				right: 10px;
			}

			#offLineDiv {
				height: 45px;
				background-color: #FFFFFF;
			}

			.fontC_Type {
				color: #761C19;
				font-size: 1.3em;
				/*border: 1px solid #666666;*/
				display: block;
				height: 40px;
				margin-top: 10px;
			}

			.close-select {
				color: #FFFFFF !important;
			}

			.toolbar-inner {
				FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#0070B4, endColorStr=#32C7F2);
				/*IE*/
				background: -moz-linear-gradient(top, #0070B4, #32C7F2);
				/*火狐*/
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0070B4), to(#32C7F2));
				/*谷歌*/
				background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #0070B4), color-stop(1, #32C7F2));
				/* Safari & Chrome*/
				filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0070B4', endColorstr='#32C7F2');
				/*IE6 & IE7*/
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0070B4', endColorstr='#32C7F2')";
				/* IE8 */
			}

			.title {
				color: #FFFFFF !important;
			}

		</style>

	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<!--车型参考-->
		<div class="ycbox">
			<a class="iconfont offBtnA" id="offBtnA">&#xe706;</a>
			<div id="offLineDiv">

			</div>
			<img src="img/freeway/CarTypeFunction.png" />
		</div>
		<!--高速通行费查询结果-->
		<div class="highwayCxResult">
			<table border="1" cellspacing="0">
				<tr>
					<td>序号</td>
					<td>通行费(元)</td>
					<td>运距(千米)</td>
					<td>限重</td>
					<td>超限率</td>
				</tr>
				<tr id="resultValue">
					<td>1</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
			<button id="guanbiBtn" class="highwayCxResult_close">关&nbsp;闭</button>
		</div>
		<!--警告信息框-->
		<!--<div class="alert alert-warning w warningInfo">请输入轴重</div>-->
		<!-- 模态框（Modal） -->
		<div class="publicModal cxModal"></div>
		<div id="freewayTolls_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a href="javascript:history.go(-1)" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">计算通行费</p>
				</div>
			</div>

			<div class="highwayTolls publicRadius">
				<div class="highwayTollsbm">
					<div class="specialTd mt30">
						<p>入口</p>
						<div id="entrance" data-code="">请选择线路</div>
					</div>

					<div class="specialTd mt10">
						<p>出口</p>
						<div id="export" data-code="">请选择线路</div>
					</div>
					<table class="mt10">
						<tbody>
							<tr>
								<td>
									<span class="fontC_Type">车型</span>
									<select type="text" id="prm_cartype">
										<option value="1" selected="selected">车型1</option>
										<option value="2">车型2</option>
										<option value="3">车型3</option>
										<option value="4">车型4</option>
										<option value="5">车型5</option>
									</select>
								</td>

								<td>
									<span class="fontC_Type">类型</span>
									<select type="text" id="prm_type" onchange="changetype()">
										<option value="0" selected="selected">客车</option>
										<option value="1">普通货车</option>
										<option value="2">绿色通道</option>
										<option value="3">1*20英尺标准箱</option>
										<option value="4">2*20英尺标准箱</option>
										<option value="5">1*40英尺标准箱</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>
									<span class="fontC_Type">轴数</span>
									<select type="text" id="prm_zs" name="prm_zs" disabled>
									</select>
								</td>
								<td>
									<span class="fontC_Type">轴重</span>
									<input onpaste="return false;" placeholder="输入数字" type="text" maxlength="3" onkeyup="zhouzhongKeyup(this)" onafterupdate="zhouzhongZT(this)" min="1" id="prm_weight" name="prm_weight" disabled>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<div style=" margin:0 auto; text-align:center; width:150px;">
										<a href="javascript:;" id="btntcc">帮助： 如何判断车型？</a>
										<input type="button" class="gstxfcx mt10" value="查  询" onclick="queryToll();">
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var h = document.documentElement.clientHeight;
			$(function() {
				$("#freewayTolls_main").height(h);
				getCharge();
			});

			function zhouzhongKeyup(t) {
				t.value = t.value.replace(/\D/g, '');
			};

			function zhouzhongZT(tt) {
				tt.value = tt.value.replace(/\D/g, '');
			}

			//改变类型轴数轴重只读
			function changetype() {
				//				console.log($("#prm_type").val());
				if($("#prm_type").val() != 0) {
					$("#prm_zs").html("");
					$("#prm_zs").append(
						"<option  value='2' selected='selecte'>2</option>" +
						"<option  value='3'>3</option>" +
						"<option  value='4'>4</option>" +
						"<option  value='5'>5</option>" +
						"<option  value='6'>6</option>"
					);
					$("#prm_zs").removeAttr("disabled");
					$("#prm_weight").removeAttr("disabled");
				} else {
					$("#prm_weight").val("")
					$("#prm_zs").html("");
					$("#prm_zs").attr("disabled", true);
					$("#prm_weight").attr("disabled", true);
					$("#prm_zs option").hide();
				}
			}
			//获取收费站所有名称
			function getCharge() {
				var freewayJson; //设置下拉框的items为全局变量

				$.ajax({
					type: 'post',
					url: Url,
					async: false,
					cache: false,
					data: {
						type: "toll_station_info",
					},
					jsonp: "callbackparam",
					//服务端用于接收callback调用的function名的参数
					jsonpCallback: "data",
					dataType: 'jsonp',
					success: function(data) {
						var d = data.DATA;
						var m = data.MDATA;
						if(isEncrypt(d, m)) {
							d = eval(d);
							var allStr = "";
							for(var i = 0; i < d.length; i++) {
								allStr += ',{"title"' + ':' + '"' + d[i].stationName + '"' + ',"value"' + ':' + '"' + d[i].stationCode + '"}';
							};
							allStr = allStr.substr(1);
							freewayJson = JSON.parse('[' + allStr + ']');
							//选择起点的线路与站名
							$("#entrance").select({
								title: "请选择高速入口",
								items: freewayJson,
								onChange: function(d) {
									$("#entrance").html(d.titles);
									$("#entrance").attr("data-code", d.values);
								},
								onOpen: function() {
									//弹窗打开时 显示遮罩层
									$("#opacityDiv").show();
								},
								onClose: function() {
									//弹窗关闭时 隐藏遮罩层
									$("#opacityDiv").hide();
								}
							});
							$("#export").select({
								title: "请选择高速出口",
								items: freewayJson,
								onChange: function(d) {
									$("#export").html(d.titles);
									$("#export").html(d.titles);
									$("#export").attr("data-code", d.values);
								},
								onOpen: function() {
									//弹窗打开时 显示遮罩层
									$("#opacityDiv").show();
								},
								onClose: function() {
									//弹窗关闭时 隐藏遮罩层
									$("#opacityDiv").hide();
								}
							});
						}

					},
					error: function() {
						$.alert("请检查您输入的信息是否有误", "提示");
					}
				});
			}

			$("#guanbiBtn").click(function() {
				closeTable();
			})

			//隐藏判断车型表格或者通行费
			function closeTable() {
				$(".cxModal").hide();
				$(".ycbox").hide();
				$(".highwayCxResult").hide();
				$("body").removeClass("modal-open");
			}

			//    查询通行费用
			function queryToll() {
				if($("#entrance").html().indexOf("请选择线路") > -1 || $("#export").html().indexOf("请选择线路") > -1) {
					$.alert("请选择出入口", "提示");
				} else if($("#entrance").html() == $("#export").html()) {
					$.alert("出入口不能一致", "提示");
				} else {
					var a = $("#entrance").attr("data-code"); //收费站入口
					var b = $("#export").attr("data-code"); //收费站出口
					var c = $("#prm_cartype").val(); //车型
					var d = $("#prm_type").val(); //类型
					var e = $("#prm_zs").val(); //轴数
					var f = $("#prm_weight").val(); //轴重
					if(d == 0) {
						e = "";
						f = "";
					} else if(f == "") {
						//					$(".warningInfo").stop().show(300).delay(800).hide(300);
						$.alert("请输入轴重！", "提示");
						return false;
					}
					$.ajax({
						type: 'post',
						url: Url,
						async: false,
						cache: false,
						data: {
							//				type = high_road_toll //高速通行费查询
							//ENTRANCECODE = 收费站入口编号
							//EXITCODE = 收费站出口编号
							//MODELS = 车型
							//CARTYPE = 类型
							//AXISNUM = 轴数
							//AXISWEIGHT = 轴重
							type: "high_road_toll",
							ENTRANCECODE: a,
							EXITCODE: b,
							MODELS: c,
							CARTYPE: d,
							//            类型如果是客车不发送
							AXISNUM: e,
							AXISWEIGHT: f
						},
						dataType: "jsonp", //数据类型为jsonp
						jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
						jsonpCallback: "jsonpCallback1",
						success: function(data) {
							if(data.CODE == 1) {
								//							console.log(data);
								var d = data.DATA;
								var m = data.MDATA;
								if(isEncrypt(d, m)) {
									d = eval(d)[0];
									console.log(d);
									if(d) {
										d.prm_fee = d.prm_fee == null ? 0 : d.prm_fee;
										d.prm_distance = d.prm_distance == null ? 0 : d.prm_distance;
										d.prm_limit = d.prm_limit == null ? 0 : d.prm_limit;
										d.prm_outrate = d.prm_outrate == null ? 0 : d.prm_outrate;
										$("#resultValue td:eq(1)").html(d.prm_fee);
										if(d.prm_distance == 0) {
											$("#resultValue td:eq(2)").html("暂无");
										} else {
											$("#resultValue td:eq(2)").html(d.prm_distance);
										}
										if(d.prm_limit == 0) {
											$("#resultValue td:eq(3)").html("暂无");
										} else {
											$("#resultValue td:eq(3)").html(d.prm_limit);
										}
										if(d.prm_outrate == 0) {
											$("#resultValue td:eq(4)").html("暂无");
										} else {
											$("#resultValue td:eq(4)").html(d.prm_outrate);
										}
										$(".cxModal").show();
										$(".highwayCxResult").show();
										$("body").addClass("modal-open");
									}
								} else {
									errMD();
								}
							} else {
								$.alert("连接服务器超时，请稍候再试", "提示");
							}

						}
					});
				}

			} //    点击如何判断车型弹出表格
			$("#btntcc").click(function() {
				$(".cxModal").show();
				$(".ycbox").show();
				$("body").addClass("modal-open");
			})
			//  关闭按钮隐藏表格
			$("#offBtnA").click(function() {
				closeTable();
			})
			//隐藏判断车型表格或者通行费
			function closeTable() {
				$(".cxModal").hide();
				$(".ycbox").hide();
				$(".highwayCxResult").hide();
				$("body").removeClass("modal-open");
			}
		</script>

	</body>

</html>