sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
	<meta name="referrer" content="always" />
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/vue.js"></script>
	<script src="js/vant-ui.js"></script>
	<script src="js/main.js"></script>
	<link rel="stylesheet" href="./mescroll/mescroll.min.css">
	<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
	<title>车主订单详情</title>
</head>
<style>
	.chukujilu {
		background-color: #fff !important;
	}

	.chukujilu .chukuTimer {
		background-color: #00a0ea !important;
		color: #fff !important;
	}
	.mescroll{
		position: relative;
		height: 73%;/*如设置bottom:50px,则需height:auto才能生效*/
	}

	/*车主订单详情*/

	.tireOrderDetails{
		background-color: #fff !important;
		font-size: .32rem;
	}
	.info-container{
		flex-wrap: wrap;
	}
	.info-cel{
		flex-grow: 0;
		padding: 0 .24rem;
		margin-bottom: .26rem;
	}
	.perc100{
		width: 100%;
	}
	.perc50{
		width: 50%;
	}
	.info-column{
		display: inline-block;
	}
	.info-line{
		width: 100%;
		background: #E0DDDD;
		border-bottom: 2px dashed #007FED;
		margin: .16rem 0 .36rem 0;
	}
	.info-mark{
		background: #01A1ED;
		border-radius: 0px 10px 10px 0px;
		padding: .04rem .24rem;
		color: #ffffff;
		margin: .24rem 0;
		margin-left: -0.24rem;
	}
	.info-label{
		color: #656363;
	}
</style>

<body>
	 <!-- v-cloak -->
	<div id="app" v-cloak>
		<div class="pageView tireOrderDetails col filterpage">
			<div class="mescroll-touch-y mescroll" id="mescroll">
				<div class=" info-container flex">
					<div class="info-cel flex perc100"><div class="info-mark">下单编号：<span>{{orderid}}</span></div></div>
					<div class="info-cel flex perc50">
						<div class="info-column info-label">联系人：</div>
						<div class="info-column">{{ownername}}</div>
					</div>
					<div class="info-cel flex perc50">
						<div class="info-column info-label">电话：</div>
						<div class="info-column">{{ownerphone}}</div>
					</div>
					<div class="info-cel flex">
						<div class="info-column info-label">下单时间：</div>
						<div class="info-column">{{createtime}}</div>
					</div>
					<div class="info-cel flex">
						<div class="info-column info-label">车型：</div>
						<div class="info-column">{{carInfo}}</div>
					</div>
					<div class="info-line"></div>
					<div class="info-cel flex perc50">
						<div class="info-column info-label">规格：</div>
						<div class="info-column">{{spec}}</div>
					</div>
					<div class="info-cel flex perc50">
						<div class="info-column info-label">花纹：</div>
						<div class="info-column">{{pattern}}</div>
					</div>
					<div class="info-cel flex perc50">
						<div class="info-column info-label">服务：</div>
						<div class="info-column">{{isfix | formatFix}}</div>
					</div>
					<div class="info-cel flex perc50">
						<div class="info-column info-label">数量：</div>
						<div class="info-column">{{itemnum}}</div>
					</div>
					<div class="info-cel flex">
						<div class="info-column info-label">合计：</div>
						<div class="info-column">￥<span>{{orderprice}}</span></div>
					</div>
					<div class="info-cel flex">
						<div class="info-column info-label">取货时间：</div>
						<div class="info-column">{{taketime}}</div>
					</div>
					<div class="info-cel flex">
						<div class="info-column info-label">备注：</div>
						<div class="info-column">{{taketime}}</div>
					</div>
				</div>
				<div style="margin: 16px;">
				 <van-button round block type="info" native-type="submit" v-if="orderstatus==2" @click="handleConfirm">确认</van-button>
			 </div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/api.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() {
		new Vue({
			el: '#app',
			data: {
				orderid: "",
				ownername: "",
				ownerphone: "",
				createtime: "",
				spec: "",
				pattern: "",
				isfix: 0,
				itemnum: 0,
				orderprice: 0,
				taketime: "",
				orderstatus: 0,
				remark: "",
				isProvider: true,
				isOpen: true,
				orderDetails:null,
				carInfo: ""
			},
			watch: {
				keyword: function(nw, od) {
					this.current = 1;
				}
			},
			methods: {
				handleInit: function(){
					var data = {
									"orderid": this.orderid,
									"url": "json",
									"type": "body"
							},
							_this = this,
							url = "getOrderInfo";
					this.$post(url, data, function(ret) {
						if(ret.code==0||ret.code=="0"){
							// alertJson(ret)
							_this.orderid= ret.data.data.orderid;
							_this.ownername= ret.data.data.ownername;
							_this.ownerphone= ret.data.data.ownerphone;
							_this.createtime= ret.data.data.createtime;
							_this.isfix= ret.data.data.isfix;
							_this.orderprice= ret.data.data.orderprice;
							_this.taketime= ret.data.data.taketime;
							_this.orderstatus= ret.data.data.orderstatus;
							_this.remark= ret.data.data.remark;

							if(_this.spec= ret.data.data.items[0]){
								_this.spec= ret.data.data.items[0].spec;
								_this.pattern= ret.data.data.items[0].pattern;
								_this.itemnum= ret.data.data.items[0].itemnum;
								_this.carInfo= (ret.data.data.items[0].carbrand?(ret.data.data.items[0].carbrand+"-"):'')
															+(ret.data.data.items[0].cartype?(ret.data.data.items[0].cartype+"-"):'')
															+(ret.data.data.items[0].carlevel?(ret.data.data.items[0].carlevel+"-"):'')
							}
							// console.log(_this.orderstatus)
							// 	console.log(ret.data.data.orderstatus)
							// console.log("加载成功")
						}else{
							api.toast({
							    msg: ret.msg,
							    duration: 2000,
							    location: 'center'
							});

						}
					})
				},
				handleConfirm: function(){
					var data = {
									"status": 0,
									"orderid": this.orderid,
									"url": "json",
									"type": "body"
							},
							_this = this,
							url = "changeWxCarOrderStatus";
					this.$post(url, data, function(ret) {

						if(ret.code==0||ret.code=="0"){
								// alertJson(ret)
								api.toast({
										msg: ret.msg,
										duration: 2000,
										location: 'center'
								});

								api.sendEvent({
								    name: 'refreshOrder',
								    extra: {}
								});
									api.closeWin({});

						}else{
							api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'center'
							});
						}
					})
				}
			},
			filters: {
				formatFix: function(params){
					switch (params) {
						case "0":
							return "无需安装"
							break;
						default:
							return "需要安装"
					}
				}
			},
			mounted: function() {
				this.orderid = api.pageParam.orderid;
				this.handleInit();
				// console.log(api.pageParam.orderid)
				// this.init();
			}
		})
}
</script>

</html>