master

分支 (1)

管理

管理

master

safetyHelmet
/
success.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<title>提交成功</title>
		<style type="text/css">
			body {
				background-color: #f3f7f9;
			}

			.content {
				width: 92%;
				height: 440px;
				margin: 30px auto;
				text-align: center;
				margin-top: 1.875rem;
				background: #FFFFFF;
				border-radius: 0.5rem;
			}

			.success {
				margin-top: 30px;
				width: 54px;
				height: 54px;
			}

			.tip {
				color: #111111;
				font-size: 18px;
				font-weight: bold;
				margin-top: 10px;
			}

			.line {
				width: 84%;
				height: 0.0625rem;
				margin: 30px auto;
				margin-top: 40px;
				background: #DDDDDD;
			}

			.cardNo {
				font-size: 16px;
				font-weight: bold;
				color: #111111;
				text-align: left;
				margin-left: 15px;
			}

			.address {
				text-align: left;
				font-size: 14px;
				color: #999999;
				width: 90%;
				margin: 0 15px;
				margin-top: 10px;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.history {
				display: flex;
				align-items: center;
				text-align: center;
			}

			.title {
				margin: 0 auto;
				padding-left: 40px;
				text-align: center;
				font-size: 16px;
				color: #999999;
			}

			.number {
				text-align: right;
				margin-right: 15px;
				font-size: 14px;
				color: #999999;
			}

			.line2 {
				width: 92%;
				height: 0.0625rem;
				margin: 30px auto;
				margin-top: 15px;
				background: #DDDDDD;
			}

			.list_box {
				width: 92%;
				margin: 30px auto;
				height: 260px;
				background: #FFFFFF;
				border-radius: 8px;
				position: relative;
			}

			.list_cardNo {
				padding-top: 0.9375rem;
				font-size: 16px;
				font-weight: bold;
				color: #111111;
				text-align: left;
				margin-left: 15px;
			}

			.text {
				text-align: left;
				font-size: 14px;
				color: #999999;
				width: 90%;
				margin: 0 15px;
				margin-top: 10px;

			}

			.img {
				text-align: left;
				margin: 10px 15px;
			}

			.photo {
				width: 70px;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img class="success" src="img/success.png">
			<div class="tip"> 提交成功 </div>
			<div class="line"></div>
			<div id="cardNo" class="cardNo">车牌号：</div>
			<div id="username" class="text">姓名：</div>
			<div id="phone" class="text">手机号：</div>
			<div id="address" class="text">违规地点：</div>
			<div id="time" class="text">提交时间：</div>
			<div class="img">
				<img id="photo" src="" class="photo" />
			</div>
		</div>

		<div class="history">
			<div class="title">历史违规记录</div>
			<div id="count" class="number">共0条</div>
		</div>

		<div class="line2"></div>
		<div id="list"></div>

	</body>

	<script src="js/jquery-3.5.1.min.js"></script>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<link rel="stylesheet" href="js/zoomify.min.css">
	<script src="js/zoomify.min.js"></script>
	<script>
		window.onload = function() {

			var ebike_number = window.getQueryVariable("ebike_number")
			var user_name = window.getQueryVariable("user_name")
			var user_mobile = window.getQueryVariable("user_mobile")
			var address = window.getQueryVariable("address")
			var ebike_pic = window.getQueryVariable("ebike_pic")
			var time = new Date().Format("yyyy-MM-dd hh:mm:ss");

			document.getElementById("cardNo").innerText = '车牌号：' + ebike_number
			document.getElementById("username").innerText = '姓名：' + user_name
			document.getElementById("phone").innerText = '手机号：' + user_mobile
			document.getElementById("address").innerText = '违规地点：' + address
			document.getElementById("time").innerText = '提交时间：' + time
			document.getElementById('photo').src = ebike_pic


			queryList(user_mobile)

		}

		// 查询
		function queryList(user_mobile) {

			$.ajax({
				type: 'POST',
				url: "https://mini.tangdoush.com/api/police/policeHistoryMessage",
				contentType: 'application/json',
				async: true,
				dataType: 'JSON',
				contentType: 'application/x-www-form-urlencoded;charset=utf-8',
				data: {
					user_mobile: user_mobile
				},
				success: function(res) {
					console.log(res)
					if (res.code == 1) {
						$("#count").html('共' + res.data.length + '条')
						var list = document.getElementById('list')
						var html = ''
						for (var i = 0; i < res.data.length; i++) {
							html += setDiv(res.data[i])
						}
						list.innerHTML = html
					}
				}
			});

		}

		function setDiv(item) {
			if (item.ebike_number) {
				var div =
					'<div id="list" class="list_box" ><div class="list_cardNo">车牌号：' +
					item.ebike_number +
					'</div><div class="text">姓名：' +
					item.user_name +
					'</div><div class="text">手机号：' +
					item.user_mobile +
					'</div><div class="text">违规地点：' +
					item.address +
					'</div><div class="text">提交时间：' +
					item.create_time +
					'</div><div class="img"><img id="photo" src=' + item.ebike_pic + ' class="photo" />' +
					'</div></div>'
				return div
			} else {
				var div =
					'<div id="list" class="list_box" ><div class="list_cardNo">车牌号：—— </div><div class="text">姓名：' +
					item.user_name +
					'</div><div class="text">手机号：' +
					item.user_mobile +
					'</div><div class="text">违规地点：' +
					item.address +
					'</div><div class="text">提交时间：' +
					item.create_time +
					'</div><div class="img"><img id="photo" src=' + item.ebike_pic + ' class="photo" />' +
					'</div></div>'
				return div
			}


		}

		Date.prototype.Format = function(fmt) { // author: meizz
			var o = {
				"M+": this.getMonth() + 1, // 月份
				"d+": this.getDate(), // 日
				"h+": this.getHours(), // 小时
				"m+": this.getMinutes(), // 分
				"s+": this.getSeconds(), // 秒
				"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
				"S": this.getMilliseconds() // 毫秒
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (
					("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}


		// 获取url参数
		function getQueryVariable(variable) {
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == variable) {
					return decodeURI(pair[1]);
				}
			}
			return (false);
		}

		// 图片预览
		$(function() {
			$('.photo').zoomify();
		});

		history.pushState(null, null, location.href); //禁止网页返回上一页
		window.addEventListener('popstate', function() {
			history.pushState(null, null, location.href);
		});

	</script>

</html>