<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>我的订单明细</title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/OA-style.css" rel="stylesheet" />
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav" id="login">
			<a href="" class="mui-action-back back mui-pull-left"><img src="../../../images/back.png"></a>
			<h1 class="mui-title" id="title">我的订单明细</h1>
		</header>
		<div class="mui-content" >
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: 50px;">
			<div v-for="item in items">
			<div class="mui-card">    
				<ul class="mui-table-view"  v-if="item.orderfood==1">
					<div  style="border-bottom: solid gainsboro;">					
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#"><b>类型:早餐</b><span style="float: right;margin-right: 20px;">{{item.foodnum}}份</span></a>
						<div class="mui-collapse-content">
							<p>具体菜品:{{item.foodname}}</p>
							<p>每份价格:{{item.foodmoney}}元</p>
							<p>下单日期:{{item.date}}</p>
						</div>
					</li>
					</div>
				</ul>		
				
				<ul class="mui-table-view"  v-else-if="item.orderfood==2">
					<div  style="border-bottom: solid gainsboro;">					
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#"><b>类型:午餐</b><span style="float: right;margin-right: 20px;">{{item.foodnum}}份</span></a>
						<div class="mui-collapse-content">
							<p>具体菜品:{{item.foodname}}</p>
							<p>每份价格:{{item.foodmoney}}元</p>
							<p>下单日期:{{item.date}}</p>
						</div>
					</li>
					</div>
				</ul>
				
				<ul class="mui-table-view" v-else-if="item.orderfood==3">
					<div  style="border-bottom: solid gainsboro;">					
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#"><b>类型:晚餐</b><span style="float: right;margin-right: 20px;">{{item.foodnum}}份</span></a>
						<div class="mui-collapse-content">
							<p>具体菜品:{{item.foodname}}</p>
							<p>每份价格:{{item.foodmoney}}元</p>
							<p>下单日期:{{item.date}}</p>
						</div>
					</li>
					</div>
				</ul>
				
				<ul class="mui-table-view"  v-else>
					<div  style="border-bottom: solid gainsboro;">					
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#"><b>类型:{{item.foodname}}</b><span style="float: right;margin-right: 20px;">{{item.foodnum}}份</span></a>
						<div class="mui-collapse-content">
							<p>具体菜品:{{item.foodname}}</p>
							<p>每份价格:{{item.foodmoney}}元</p>
							<p>下单日期:{{item.date}}</p>
						</div>
					</li>
					</div>
				</ul>
				</div>
			</div>
		</div>  
		

		<script type="text/javascript" src="../../../js/jquery-1.11.2.min.js"></script>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/config.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/dj/article/list.js"></script>
		<script src="../../../js/vue.min.js"></script>

		<script>					
			mui.init();
			var orderid="";		

			var vmA = new Vue({
				el: '#pullrefresh',
				data: {
					items: [] //列表信息流数据
				}
			});
			
			
			mui.plusReady(function() {
				
				var self = plus.webview.currentWebview();
				orderid = self.orderid;
				addData(orderid)
			});

			function addData(orderid) {
				var url = API.API_URL();
				var serviceId = "oa_2018V001PHONE_orderDetailxq";
				var state = app.getState(); //获取登陆信息
				var universalid=state.user.useId;
				/*var staffId = state.user.useId;
				var unitId = state.user.unitId;
				var notice_title = "";*/
				var obj = {
					/*unitId: unitId,
					userId: staffId,
					notice_title: notice_title,*/
					universalid:universalid,
					orderid: orderid
				};
				app.ajax(serviceId,obj, function(data) {
					//服务器返回响应
					console.log(JSON.stringify(data))
					var result = data.returnParams;
					
					var list = data.list;

					console.log(list.length);
					if(list.length > 0) {
						vmA.items = vmA.items.concat(list);
					}
				});
			}

			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			
//			function convert(items) {
//				var newItems = [];
//				items.forEach(function(item) {
//					if(item.type==1){
//							type="获得补贴";
//						}
//					if(item.type==2){
//							type="消费";
//						}
//					if(item.type==3){
//							type="扣除补贴";
//						}
//					newItems.push({
//						universalid: item.universalid,
//						name: item.name,
//						//修改类型
//						type:type,
//						either: item.either == 1? "收入":"支出",//收入或支出
//						money: item.money,//金额
//						date: item.date,
//						allowance: item.allowance,
//						moneys: item.moneys,//普通余额
//						/*content: item.noticecontent == null ? "" : item.noticecontent.substr(0, 70),
//						name : item.name,
//						isread: item.if_read,*/
//						
//					});
//					
//				});
//				return newItems;
//			}

				 

		</script>

	</body>

</html>