sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>订单详情</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
		<meta content="yes" name="apple-mobile-web-app-capable"/>
		<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
		<meta content="telephone=no" name="format-detection"/>
		<link href="../../css/aui.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/html.css" rel="stylesheet" type="text/css"/>
		<style>
			.aui-list .aui-list-item {
				border: 0px !important;
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list.aui-list-in .aui-list-item {
					background-image: none !important;
				}
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list.aui-list-in .aui-list-item {
					background-image: none !important;
				}
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list {
					background-image: none !important;
				}
			}
			.aui-list .aui-list-item, .aui-list .aui-list-item-inner {
				min-height: 1.7rem !important;
			}
			.aui-list-item-right1 {
				color: #067974 !important;
				border: 1px solid #067974;
				padding: 1px 3px;
				border-radius: 5px;
			}
			.zmq-info-left {
				width: 30%;
				display: flex;
				display: -webkit-flex;
			}
			.zmq-info-left img {
				width: 3.5rem;
				height: 3.5rem;
				margin: auto;
			}
			.zmq-info-right {
				width: 68%;
			}
			.zmq-item:not(:first-of-type) {
			margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<section class="aui-flexView" id="app" v-cloak>
			<div class="aui-card-list">
				<div class="aui-card-list-content">
					<ul class="aui-list aui-media-list">
						<li class="aui-list-item aui-list-item-middle">
							<div class="aui-media-list-item-inner">
								<div class="aui-list-item-inner">
									<div class="aui-list-item-text">
										<div class="aui-list-item-title aui-font-size-14 zmq-text-normal">
											下单时间：{{orderInfo.createTime}}
										</div>
										<div class="aui-list-item-right zmq-btn-img zmq-radius-10 zmq-padding-status zmq-text-white">
											{{orderStatus[orderInfo.status]}}
										</div>
									</div>
									<div class="aui-list-item-text zmq-text-msg">
										{{orderInfo.agentName}}
									</div>
									<div class="aui-list-item-text zmq-text-explain zmq-flex-start zmq-margin-vertical-2">
										<img src="../../image/drawable-xhdpi/11.png" class="zmq-icon-inline"/>{{orderInfo.agentName}}
									</div>
									<!--<div class="aui-list-item-text zmq-text-explain zmq-flex-start zmq-margin-vertical-2">
									<img src="../../image/drawable-xhdpi/map.png" class="zmq-icon-inline"/>金宇经销商
									</div>
									<div class="aui-list-item-text zmq-text-explain zmq-flex-start zmq-margin-vertical-2">
									<img src="../../image/drawable-xhdpi/phone.png" class="zmq-icon-inline"/>0182-0003992
									</div>-->
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="zmq-width-90">
				<div class="aui-content aui-margin-b-15">
					<ul class="aui-list aui-list-in zmq-radius-10 zmq-border-none">
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-title zmq-text-font-07">
									订单号
								</div>
								<div class="aui-list-item-right zmq-text-font-07">
									{{orderInfo.orderNum}}
								</div>
							</div>
						</li>
						<!--<li class="aui-list-item">
						<div class="aui-list-item-inner">
						<div class="aui-list-item-title zmq-text-font-07">
						退回单数
						</div>
						<div class="aui-list-item-right zmq-text-msg zmq-text-font-07">
						2
						</div>
						</div>
						</li>-->
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-title zmq-text-font-07">
									商品总数
								</div>
								<div class="aui-list-item-right zmq-text-msg zmq-text-font-07">
									{{orderInfo.amount}}
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="zmq-width-90">
				<div class="aui-content aui-margin-b-15">
					<ul class="aui-list aui-list-in zmq-radius-5 zmq-border-none zmq-flex zmq-item" v-for="(i,d) in orderInfo.bizOrderInfoDtoList" style="padding: 5px 0px;">
						<div class="zmq-info-left">
							<img v-lazy ="i.materialDto.simpleImgPath">
						</div>
						<div class="zmq-info-right">
							<li class="aui-list-item" style="padding : 0px">
								<div class="aui-list-item-inner">
									<div class="aui-list-item-title zmq-text-font-07" style="width: 80%">
										{{i.materialDto.materialName}}
									</div>
									<div class="aui-list-item-right zmq-text-font-08 zmq-text-msg" style="width: 40%;text-align: right">
										x{{i.amount}}
									</div>
								</div>
							</li>
							<li class="aui-list-item" style="padding-bottom : 0.5rem">
								<div class="zmq-flex zmq-width-100 zmq-margin-top-10">
									<div class="zmq-flex-1 zmq-textAlign-center zmq-text-explain">
										<span class="aui-list-item-right1">{{i.materialDto.brand}}</span>
									</div>
									<div class="zmq-flex-1 zmq-textAlign-center zmq-text-explain">
										<span class="aui-list-item-right1">{{i.materialDto.pattern}}</span>
									</div>
								</div>
							</li>
						</div>
						<!--<li class="aui-list-item">
						<div class="zmq-flex zmq-width-100">
						<div class="zmq-flex-1 zmq-textAlign-center">
						<div class="zmq-text-white zmq-bg-noraml zmq-inline zmq-text-font-05 zmq-padding-status">
						已接单：5
						</div>
						</div>
						<div class="zmq-flex-1 zmq-textAlign-center">
						<div class="zmq-text-white zmq-bg-danger zmq-inline zmq-text-font-05 zmq-padding-status">
						已退单：5
						</div>
						</div>
						</div>
						</li>
						-->
					</ul>
				</div>
				<!--<div class="aui-content aui-margin-b-15">
				<ul class="aui-list aui-list-in zmq-radius-5 zmq-border-none">
				<li class="aui-list-item">
				<div class="aui-list-item-inner">
				<div class="aui-list-item-title zmq-text-font-07">
				金鱼轮胎 12R2010C112
				</div>
				<div class="aui-list-item-right zmq-text-font-09 zmq-text-msg">
				x5
				</div>
				</div>
				</li>
				<li class="aui-list-item">
				<div class="zmq-flex zmq-width-100 zmq-margin-top-10">
				<div class="zmq-flex-1 zmq-textAlign-center zmq-text-explain">
				金宇轮胎12R225
				</div>
				<div class="zmq-flex-1 zmq-textAlign-center zmq-text-explain">
				JT538 库存充足
				</div>
				</div>
				</li>
				<li class="aui-list-item">
				<div class="zmq-flex zmq-width-100">
				<div class="zmq-flex-1 zmq-textAlign-center">
				<div class="zmq-text-white zmq-bg-noraml zmq-inline zmq-text-font-05 zmq-padding-status">
				已接单：5
				</div>
				</div>
				<div class="zmq-flex-1 zmq-textAlign-center">
				<div class="zmq-text-white zmq-bg-danger zmq-inline zmq-text-font-05 zmq-padding-status">
				已退单：5
				</div>
				</div>
				</div>
				</li>
				</ul>
				</div>-->
			</div>
			<!--<section class="aui-scrollView">
			<div class="aui-pay-change">
			<div class="aui-flex">
			<div class="aui-flex-box">
			<h3>已接单</h3>
			<p v-show="orderInfo.takeTime == null">
			下单时间：2019-09-09 10：30
			</p>
			<p v-show="orderInfo.takeTime != null">
			接单时间：2019-09-09 10：30
			</p>
			</div>
			<div class="aui-pay-zfb">
			<img src="../../images/11.png" alt="">
			</div>
			</div>
			</div>
			<div class="aui-flex">
			<div class="aui-flex-box">
			<h3> 金宇经销商 <em>86-18519238945</em></h3>
			<p>
			青岛市崂山区文玲路
			</p>
			</div>
			</div>
			<div class="divHeight"></div>
			<div class="aui-cp-edu b-line">
			<div class="aui-san-sml"></div>
			<div class="aui-flex aui-flex-ed">
			<div class="aui-flex-box">
			订单号 <em>223123123123</em>
			</div>
			</div>
			<div class="aui-flex aui-flex-ed">
			<div class="aui-flex-box" style="color:#333; font-size:15px;">
			退回商品数<em style="color:#333">3</em>
			</div>
			</div>
			<div class="aui-flex aui-flex-ed">
			<div class="aui-flex-box" style="color:#333; font-size:15px;">
			被接单数<em style="color:#333">5</em>
			</div>
			</div>
			</div>
			<div class="aui-commodity-bg" v-for="(store,storeIndex) in orderInfos">
			<div class="aui-flex">
			<div class="aui-flex-box">
			<h4>金宇轮胎 12R22517C</h4>
			<p>
			金宇轮胎 12R225
			</p>
			<p style="margin-top: -5px">
			JT538 库存充足
			</p>
			</div>
			<div>
			<h5 style="text-align: right;margin-bottom: 10px">X5</h5>
			<h5 class="changeNum">已接单5</h5>
			<h5 v-show="store.o == 5" class="changeNum t">已退单5</h5>
			</div>
			</div>
			</div>
			<div class="divHeight b-line"></div>
			</section>-->
			<footer class="aui-footer zmq-footer-fixed" v-show="orderInfo.status == 0">
				<div class="zmq-width-90 aui-footer-text-info zmq-textAlign-center zmq-padding-btn ">
					<a href="javascript:;" class="aui-payment zmq-bg-danger zmq-text-white zmq-btn-circle" style="border: 0px solid#fff" v-on:click="saveOrder(2,'驳回')">驳回订单</a>
					<a href="javascript:;" class="aui-payment zmq-text-white zmq-btn-img zmq-btn-circle" style="border: 0px solid#fff" v-on:click="saveOrder(1,'接单')">我要接单</a>
				</div>
			</footer>
		</section>
	</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" src="../../script/vue-lazyload.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var orderid = api.pageParam.orderid;
			new Vue({
				el : '#app',
				data : {
					orderid : orderid,
					// 接单url
					saveUrl : 'orderReviceUrl',
					// 接单状态
					saveStatus : 1,
					// 获取订单详情
					getOrderInfoUrl : 'getOrderInfo',
					// 订单详情
					orderInfo : '',
					orderInfos : [],
					//  订单状态
					orderStatus : ["待接单", "已接单", "已驳回"],
				},
				filters : {
					statusToStr : function(status) {
						var str = "";
						switch (status) {
							case 0:
								str = "待接单";
								break;
							case 1:
								str = "已接单";
								break;
							default :
								break;
						}
						return str
					}
				},
				methods : {
					init : function() {
						this.getInfo();
					},
					//  获取订单详情
					getInfo : function() {
						var _this = this;
						this.$post(this.getOrderInfoUrl, "", function(ret) {
							if (ret.code == 0) {
								_this.orderInfo = ret.bizOrderDto;
							}
						}, this.orderid);
					},
					//  接单
					saveOrder : function(stauts, n) {
						var data = {
							id : this.orderid,
							status : stauts,
							url : 'json',
							type : 'body',
						}, url = this.saveUrl, _this = this;
						this.showModal("温馨提示", "是否确认" + n, ["确认", "取消"], function(index) {
							if (index == 1) {
								_this.$post(url, data, function(ret) {
									if (ret.code == 0) {
										_this.showToast(n + "成功");
										setTimeout(function() {
											_this.getInfo();
										}, 300);
									}
								})
							}
						})
					}
				},
				mounted : function() {
					Vue.use(VueLazyload, {
						preLoad : 1.3,
						error : '../../image/noimg.png',
						loading : '../../image/load.gif',
						attempt : 1,
					});
					this.init();
				}
			})
		}
	</script>
</html>