sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/html.css" />
		<style type="text/css">
			.text-white {
				color: #ffffff !important;
			}
			.aui-grid [class*=aui-col-] {
				padding: 0.75rem 0;
			}
			.aui-order-number {
				padding: 0.75rem;
			}
			.aui-card-list-user-name {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
			.aui-card-list-user-info {
				text-align: right;
				color: #f00;
				margin-top: 10px;
			}
			.aui-top {
				padding: 7px 2px;
				border-bottom: 1px solid #ddd;
				width: 96%;
				margin-left: 2%;
			}
			.aui-state {
				float: right;
			}
			.aui-top .aui-state {
				color: #1da02b;
			}
			.aui-top .aui-state, .aui-top .aui-time {
				font-size: 0.6rem;
			}
			#user-info {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 2;
			}
			.aui-app-flex-text {
				display: flex;
				display: -webkit-flex;
			}
			.aui-app-flex-text div p {
				font-size: .6rem;
				padding: 3px;
			}
			.aui-app-flex-text div {
				text-align: center;
				color: #fff !important;
				padding: 4px 0;
			}
			.aui-app-flex-text div:last-of-type {
				border-right: 0px dotted #ddd;
			}
			.aui-list .aui-list-item {
				border: 0px !important;
			}
			.aui-list .aui-list-item-inner {
				padding-right: 0px;
			}
			.zmq-img-store {
				width: 2rem !important;
				height: 2rem !important;
			}
			.aui-list-item-label-icon {
				width: 2.2rem !important;
				height: 2.2rem !important;
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list.aui-list-noborder, .aui-list.aui-list-noborder .aui-list-item:last-child {
					background-image: url(../../image/drawable-xhdpi/kehuinfo.png);
					background-size: 100% 100%;
				}
			}
		</style>
	</head>
	<body>
		<div id="app" style="padding-top: 1rem" v-cloak>
			<!-- 顶部 -->
			<div class="aui-list-noborder zmq-bg-info zmq-width-90 zmq-padding-vertical-10 zmq-info-header"></div>
			<div class="zmq-position-absolute zmq-width-100" style="left: 0">
				<div class="zmq-position-absolute zmq-width-100 zmq-text-font-09 zmq-user-name zmq-text-white">
					<div class="zmq-wuliu-status">
						<img src="../../image/drawable-xhdpi/mx.png" />
						{{storeInfo.customer_address}}
					</div>
					<div class="zmq-wuliu-msg">
						车牌号： {{storeInfo.number_plate}}
					</div>
					<div class="zmq-wuliu-msg">
						订单标识：{{storeInfo.loading_list_number}}
					</div>
					<!--<div class="zmq-wuliu-msg">
					物流公司： 宝供物流企业集团有限公司
					</div>-->
				</div>
			</div>
			<!--<div class="aui-app-flex-text zmq-user-infoBlock zmq-width-100 zmq-box-normal zmq-margin-top-10" >
			</div>-->
			<!-- 信息 -->
			<div class="aui-content aui-margin-b-15 zmq-width-90 zmq-margin-top-10 zmq-radius-5">
				<ul class="aui-list aui-form-list zmq-border-none">
					<li class="aui-list-item zmq-border-none" style="padding : 0;">
						<div class="aui-list-item-inner zmq-title" style="padding-left : 0.75rem">
							详情物流信息
						</div>
					</li>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label zmq-text-font-07 zmq-text-explain">
								派车时间：
							</div>
							<div class="aui-list-item-input">
								<div class="zmq-text-value zmq-text-font-07">
									{{storeInfo.apply_time | nTt}}
								</div>
							</div>
						</div>
					</li>
			       <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
					<li class="aui-list-item zmq-border-none">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label zmq-text-font-07 zmq-text-explain">
								车辆离场时间：
							</div>
							<div class="aui-list-item-input">
								<div class="zmq-text-value zmq-text-font-07">
									{{storeInfo.act_leave_time | nTt}}
								</div>
							</div>
						</div>
					</li>
					 <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
					<li class="aui-list-item zmq-border-none">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label zmq-text-font-07 zmq-text-explain">
								预计到场时间：
							</div>
							<div class="aui-list-item-input">
								<div class="zmq-text-value zmq-text-font-07">
									{{storeInfo.pre_arrival_time | nTt}}
								</div>
							</div>
						</div>
					</li>
					<div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label zmq-text-font-07 zmq-text-explain">
								送达时间：
							</div>
							<div class="aui-list-item-input">
								<div class="zmq-text-value zmq-text-font-07">
									{{storeInfo.send_time | nTt}}
								</div>
							</div>
						</div>
					</li>
					<div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
				</ul>
			</div>
			<!-- 车辆信息 -->
			<div class="aui-content aui-margin-b-15 zmq-width-90 zmq-margin-top-10 zmq-radius-5" v-show="hasCarInfo == true">
				<ul class="aui-list aui-form-list zmq-border-none" v-for="(b,i) in carList">
					<li class="aui-list-item zmq-border-none" style="padding : 0;">
						<div class="aui-list-item-inner zmq-title" style="padding-left : 0.75rem">
							车辆信息
						</div>
					</li>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label zmq-text-font-07 zmq-text-explain">
								车辆所在地：
							</div>
							<div class="aui-list-item-input">
								<div class="zmq-text-value zmq-text-font-07">
									{{b.now_position}}
								</div>
							</div>
						</div>
					</li>
					<div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label zmq-text-font-07 zmq-text-explain">
								创建人：
							</div>
							<div class="aui-list-item-input">
								<div class="zmq-text-value zmq-text-font-07">
									{{b.create_by}}
								</div>
							</div>
						</div>
					</li>
					<div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/httpRequest.js"></script>
	<script type="text/javascript" src="../../script/vue_plugins.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var id = api.pageParam.id;
			var item = api.pageParam.info;
			new Vue({
				el : '#app',
				data : {
					carId : id,
					list : [],
					storeInfo : {},
					//  获取物流信息
					getCarInfoUrl : 'getCarInfoUrl',
					//  是不是有车辆信息
					hasCarInfo : false,
					carList : [],
				},
				filters : {
					nTt : function(val) {
					    if(typeof val == 'undefined'){
					       return "";
					    }
						var myDate = new Date(val);
						//获取系统当前时间
						var YY = myDate.getFullYear();
						// 获取年月日
						var MM = myDate.getMonth() > 8 ? (myDate.getMonth() + 1) : ('0' + (myDate.getMonth() + 1));
						var DD = myDate.getDate() > 9 ? myDate.getDate() : '0' + myDate.getDate();
						var T = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours();
						var M = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes();
						var S = myDate.getSeconds() > 9 ? myDate.getSeconds() : '0' + myDate.getSeconds();
						return YY + ' - ' + MM + ' - ' + DD + ' ' + T + ':' + M + ':' + S;
					}
				},
				methods : {
					init : function() {
						var _this = this;
						_this.storeInfo = JSON.parse(item);
						_this.getCarInfo();
						this.addEvent("openFrameGroup", function() {
							_this.getUserInfo(function(ret) {
								_this.storeInfo = ret.agentDto;
							})
						})
						this.configHeaderRefush(function() {
							_this.getCarInfo();
						})
					},
					// 获取物流信息
					getCarInfo : function() {
						var data = {
							carId : this.carId
						}, url = this.getCarInfoUrl, _this = this;
						this.$post(url, data, function(ret) {
							if (ret.code == 0) {
								if (ret.data.list.length == 0) {
									hasCarInfo = false;
								} else {
									_this.carList = ret.data.list;
									hasCarInfo = true;
								}
							}
						})
					},
					lookList : function() {
						api.openWin({
							name : 'record_win',
							url : 'record_win.html'
						});
					}
				},
				mounted : function() {
					this.init();
				}
			})
		}
		function goWin(winName, page) {
			api.openWin({
				name : winName,
				url : './order/' + winName + '.html',
				pageParam : page
			});
		}

		var lookList = function() {
			api.openWin({
				name : 'record_win',
				url : 'record_win.html'
			});
		}
	</script>
</html>