sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
							<!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: 100%;/*如设置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;
	}
	.perc50{
		width: 50%;
	}
	.perc100{
		width: 100%;
	}
	.info-column{
		display: inline-block;
		white-space: pre-wrap;
	}
	.info-line{
		width: 100%;
		border-bottom: 6px solid #F5F5F5;
		margin: .16rem 0 .36rem 0;
	}
	.info-status{

		display: flex;
		justify-content: flex-end;
	}
		.info-status span{
			background: #81CFF4;
			border-radius: 10px;
			padding: .04rem .08rem;
			color: #ffffff;
			margin: .24rem;
		}
		.redbg span{
			background: #F6563C;
		}
		.bluebg span{
			background: #2da4e6;
		}
		.greybg span{
			background: #cccccc;
		}
	.info-label{
		color: #656363;
		flex-grow: 0;
		flex-shrink: 0;
	}
</style>

<body>
	 <!-- v-cloak -->
	<div id="app" v-cloak>
		<div class="pageView tireOrderDetails col filterpage">
			<van-dropdown-menu active-color="#1989fa">
			  <van-dropdown-item v-model="dateSort" :options="option1" @change="handleChangeDateSort"></van-dropdown-item>
			  <van-dropdown-item v-model="status" :options="option2" @change="handleChangeStatueSort"></van-dropdown-item>
			</van-dropdown-menu>
			<div class="mescroll-touch-y mescroll" id="mescroll">
				<div class=" info-container flex" v-for="item in list" @click="goDetails(item)">
					<!-- <template> -->
						<div class="info-cel flex perc100">
							<div class="info-cel flex perc50" style="align-items: center;padding: 0;font-weight: 600;">
								<div class="info-column info-label">订单号：</div>
								<div class="info-column">{{item.orderid}}</div>
							</div>
							<div class="info-status perc50" :class="item.isDel==1?'greybg':item.orderstatus==0?'bluebg':item.orderstatus==1?'greybg':'redbg'"><span>{{item.isDel==1?'已删除':item.orderstatus==0?'已确认':item.orderstatus==1?'已拒绝':'未确认'}}</span></div>
						</div>
						<div class="info-cel flex perc50">
							<div class="info-column info-label">规格：</div>
							<div class="info-column">{{item.items[0]&&item.items[0].spec?item.items[0].spec:''}}</div>
						</div>
						<div class="info-cel flex perc50">
							<div class="info-column info-label">花纹：</div>
							<div class="info-column">{{item.items[0]&&item.items[0].pattern?item.items[0].pattern:''}}</div>
						</div>
						<div class="info-cel flex perc50">
							<div class="info-column info-label">服务类型：</div>
							<div class="info-column">{{item.isfix | formatFix}}</div>
						</div>
						<div class="info-cel flex perc50">
							<div class="info-column info-label">数量：</div>
							<div class="info-column">{{item.items[0]&&item.items[0].itemnum?item.items[0].itemnum:''}}</div>
						</div>
						<div class="info-cel flex">
							<div class="info-column info-label">联系电话：</div>
							<div class="info-column">{{item.ownerphone}}</div>
						</div>
						<div class="info-cel flex">
							<div class="info-column info-label">取货时间：</div>
							<div class="info-column">{{item.taketime}}</div>
						</div>
						<div class="info-line"></div>
					<!-- </template> -->
				</div>
				<div v-show="!list.length " style="text-align:center">
					<img src="./image/noData.png" style="margin:2rem auto" />
				</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: {
					list: [],
					describe: "265/65R17 112T SV12 BGSL HH",
					brand: "SAILUN",
					num:100,
					price: 695,
					isProvider: true,
					isOpen: true,
					dateSort: "",
					status: "",
					option1: [{
						text: "默认排序",
						value: ""
					},{
						text: "时间倒序",
						value: "0"
					},{
						text: "时间正序",
						value: "1"
					}],
					option2: [{
						text: "默认状态",
						value: ""
					},{
						text: "已确认状态",
						value: "0"
					},{
						text: "已拒绝状态",
						value: "1"
					},{
						text: "未确认状态",
						value: "2"
					}],
					current: 0,
					pagesize: 10,
					totalPages: 1, // 总页数
					storeId: "",
					frist: 1
			},
			watch: {
				keyword: function(nw, od) {
					this.current = 1;
				}
			},
			filters: {
				formatFix: function(params){
					switch (params) {
						case "0":
							return "无需安装"
							break;
						default:
							return "需要安装"
					}
				}
			},
			methods: {
				configs : function(){
					var _this = this;
					this.frist = 2;
					this.configDownAndPull("mescroll",function(mescroll){
							 _this.current = 1;
							 _this.handleInit(mescroll);
					},function(mescroll){
							 if(_this.current < _this.totalPages){
								 _this.current = _this.current + 1;
								 _this.handleInit(mescroll,1);
							 }else{
								 mescroll.endSuccess(_this.pagesize,false);
							 }
					})
				},
				handleInit: function(mescroll){
					var data = {
						"storeid":  this.storeId,
						"current": this.current,
						"size": this.pagesize,
						"dateSort":this.dateSort?this.dateSort:'0',
				    "status":this.status,
						"type" : "body",
						"url" : "json"
					};
					var url = "getAllUndealCarOrder",
						 _this = this;
					this.$post(url,data,function(ret){
						// alertJson(ret)
							if(ret.code == 0 || ret.code == '0'){
								_this.list =ret.data.data.records ? (_this.current == 1 ? ret.data.data.records : _this.list.concat(ret.data.data.records)) : [];
								if(_this.frist == 1){
									_this.$nextTick(function(){
										_this.configs();
									})
								}
								if(mescroll){
									mescroll.endSuccess(_this.pagesize,true);
								}
								_this.totalPages = ret.data.data.records ? ret.data.data.pages : 1;
							}
					})
				},
				handleChangeDateSort: function(){
					this.current = 1
					this.handleInit();
				},
				handleChangeStatueSort: function(){
					this.current = 1
					this.handleInit();
				},
				goDetails: function(item){
					this.goWin("tireOrderDetails_win","tireOrderDetails_win.html",{orderid: item.orderid})
				}
			},
			mounted: function() {
				this.storeId = $api.getStorage('userid')
				// console.log($api.getStorage('userid'));
				this.handleInit();
				var _this = this;
				this.addEvent("refreshOrder",function(){
						_this.handleInit();
				})
				// this.init();
			}
		})
}
</script>

</html>