sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!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/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.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-avatar {
				width: 4rem;
				height: 3rem;
			}
			.aui-card-list-user-name {
				overflow: hidden;
				text-overflow: ellipsis;
				-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: #f00;
			}
			.aui-top .aui-state, .aui-top .aui-time {
				font-size: 0.6rem;
			}
			#user-info {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
			}
			.top {
				padding-bottom: 1rem;
			}
			.aui-bottom {
				border-top: 1px solid #ddd;
				border-bottom: 0px solid #fff;
				text-align: right;
			}
			.aui-float-right {
				float: right;
				margin-top: 10px;
			}
			.aui-card-list-user-name {
				width: 96%;
			}
			#tab {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 2;
			}
			.aui-state-success {
				color: #8ec31f !important;
			}
			.aui-card-list {
				margin-bottom: 0px;
			}
			[v-cloak] {
				display: none
			}
			.zmq-text-status-hd {
				color: #F01414 !important;
				padding: 1px 3px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<section class="aui-content top" v-cloak>
				<div class="aui-card-list aui-border-t aui-border-b zmq-width-90 zmq-margin-top-10 zmq-radius-10" v-for="(item,index) in orderList" v-on:click="lookOrderInfo(item.id)">
					<div class="aui-top">
						<span class="aui-time zmq-text-msg" style="padding-left : 1rem;"><img class="zmq-orderCode-img" style="position: absolute;margin-left: -1rem" src="../../image/drawable-xhdpi/orderCode.png" />订单号：{{item.orderNum}}</span>
						<span class="aui-state zmq-btn-border zmq-text-msg zmq-padding-status" class="">{{stateArr[(item.status+1)].name}}</span>
						<!--<span class="aui-state zmq-btn-border-success zmq-text-success zmq-padding-status" v-show="item.title == '2'">{{stateArr[item.title]}}</span>
						<span class="aui-state zmq-btn-border-danger zmq-text-danger zmq-padding-status" v-show="item.title == '3'" class="" style="color: #999">{{stateArr[item.title]}}</span>-->
					</div>
					<div class="aui-card-list-header aui-card-list-user">
						<i class="aui-iconfont aui-icon-right aui-font-size-12 aui-float-right zmq-position-absolute"></i>
						<div class="aui-card-list-user-name zmq-flex">
							<div class="aui-font-size-14">
								轮胎总数 {{item.amount}} 条<em v-show="item.activityId != null" class="zmq-text-status-hd">(活动)</em>
							</div>
							<!--<div class="aui-font-size-14 zmq-text-msg">
							{{item.agentName}}
							</div>-->
						</div>
						<!--<div class="aui-card-list-user-name zmq-flex">
							<div class="aui-font-size-14 zmq-text-msg">
								{{item.agentName}}
							</div>
						</div>-->
						<div class="aui-card-list-user-name zmq-flex">
							<div class="aui-font-size-14 zmq-text-explain">
								下单时间：{{item.createTime}}
							</div>
							<div class="aui-font-size-14">
								共 <span class="zmq-text-msg">{{item.amount}}</span> 件商品
							</div>
						</div>
					</div>
				</div>
			</section>
			<img v-show="hasData == false" src="../../image/nodata.png" />
			<div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
				已无更多数据
			</div>
		</div>
	</body>
	<!--<script type="text/javascript" src="../../script/aui-tab.js" ></script>-->
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/aui-scroll.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">
		var vm = "";
		apiready = function() {
			var type = api.pageParam.type;
			vm = new Vue({
				el : '#app',
				data : {
					type : type,
					// 获取订单列表
					getOrderListUrl : 'getOrderListUrl',
					//  agentId 写死的经销商id
					retariler_id : '',
					//  订单列表
					orderList : [],
					allList : [], //  展示的全部的列表
					//  分页展示
					stateArr : [{
						name : "全部订单",
						id : '',
					}, {
						name : "待接单",
						id : 0
					}, {
						name : "已接单",
						id : 1
					}, {
						name : "已驳回",
						id : 2
					}],
					//  是否有数据
					hasData : false,
					//  顶部导航栏点击且换
					chooseIndex : 0,
					//  分页展示
					upLock : true,
					current : 1,
					total : 1,
					//  订单状态
					orderStatus : '',
				},
				filters : {
					statusToStr : function(status) {
						var str = "";
						switch (status) {
							case '0':
								str = "待经销商接单";
								break;
							case '1':
								str = "经销商已接单";
								break;
							default :
								break;
						}
						return str
					}
				},
				methods : {
					lookOrderInfo : function(id) {
						var param = {
							orderid : id
						}
						this.goWin("orderInfo_win", "./orderInfo_win.html", param);
					},
					init : function() {
						this.retariler_id = $api.getStorage("retailerid");
						this.getOrderList();
						var _this = this;
						// 下拉刷新
						this.configHeaderRefush(function() {
							_this.downData = 'down';
							_this.current = 1;
							_this.getOrderList();
						});
						// 上拉分页展示
						this.configBottomRefush(function(status) {
							if (_this.hasData == true) {
								//  开启上拉加载
								if (_this.total > _this.current) {
									_this.downData = 'up';
									_this.current = _this.current + 1;
									_this.getOrderList();
								} else {
									//  上啦没有数据了
									_this.upLock = false;
								}
							}
						})
					},
					//  获取订单列表
					getOrderList : function() {
						var data = {
							retailerId : this.retariler_id,
							current : this.current,
							status : this.orderStatus,
						}, url = this.getOrderListUrl, _this = this;
						this.$post(url, data, function(ret) {
							if (ret.code == 0) {
								_this.total = ret.page.pages;
								if (_this.downData == 'up') {
									_this.orderList = _this.orderList.concat(ret.page.records);
									_this.allList = _this.allList.concat(ret.page.records);
								} else {
									_this.orderList = ret.page.records;
									_this.allList = ret.page.records;
									if (_this.allList.length > 0) {
										_this.hasData = true;
									} else {
										_this.hasData = false;
									}
								}
							}
						})
					},
					//  顶部导航栏切换展示
					chooseStatus : function(index) {
						this.chooseIndex = index;
						var newList = new Array();
						this.downData = 'down';
						this.upLock = true;
						this.orderStatus = this.stateArr[index].id;
						//						if (index == 0) {
						this.getOrderList();
						//						} else {
						//							this.allList.map(function(i, d) {
						//								if (i.status == (index - 1)) {
						//									newList.push(i);
						//								}
						//							})
						//							this.orderList = newList;
						//						}
					}
				},
				mounted : function() {
					this.init();
				}
			})
		}
		function chooseIndex(index) {
			vm.chooseStatus(index);
		}

		//		var tab = new auiTab({
		//			element : document.getElementById("tab"),
		//		}, function(ret) {
		//			console.log(ret)
		//		});
	</script>
</html>