order
/
order.html

<!DOCTYPE  html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<link type="text/css" rel="stylesheet" href="_assert/css/jPages.css" />
		<link type="text/css" rel="stylesheet" href="_assert/css/skins/aero.css" />
		<link rel="stylesheet" type="text/css" href="_assert/css/common.css" />
	</head>
	<body>
		<div class="header"><img src="_assert/img/header.png"/>
		</div>
		<div class="middle">
			<div class="orderLeft">
				<img src="_assert/img/left.png"/>
			</div>
			<div class="orderRight">
				<div class="title">
					<div class="name">
						我的订单
					</div>
					<div class="search">
						<input type="text" placeholder="输入订单号查询" />
						<img src="_assert/img/search.png" />
					</div>
				</div>
				<div class="tongji">
					<ul style="letter-spacing: 2px;">
						<li class="total">
							全部10
						</li>
						<li>
							已完成5
						</li>
						<li>
							进行中2
						</li>
						<li>
							未完成2
						</li>
						<li style="color: #666666;">
							待评价1
						</li>
					</ul>
				</div>
				<table cellpadding="0" cellspacing="0" style="table-layout: fixed;">
					<thead>
						<tr >
							<td class="first">编号</td>
							<td class="second">订单号</td>
							<td class="third">订单金额</td>
							<td class="four">下单时间</td>
							<td class="five">支付状态</td>
							<td class="six">类型</td>
							<td class="seven">订单状态</td>
							<td class="end">操作</td>
						</tr>
					</thead>
					<tbody id="movies">
						<tr class="first">
							<td class="first">1</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven wait">待处理</td>
							<td class="end"><a>评论</a></td>
						</tr>
						<tr class="detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu"><span class="title">任务时间</span> -- </td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">2</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven refuse">拒绝</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu"><span class="title">任务时间</span> 预计：3小时 | 完成：<span class="warning">00:23:15</span></td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">3</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven success">已完成</td>
							<td class="end"><a>评论</a></td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 超时：<span class="warning">00:23:15</span><a href="#" class="warning">[催单]</a><a href="#" class="warning">[投诉服务商]</a></td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">4</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end"><a>评论</a></td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu" ><span class="title">任务时间</span> -- </td>

							<td class="seven wait" >[重新支付]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">5</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td colspan="5" class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">6</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td colspan="5" class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">7</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end"><a>评论</a></td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td colspan="5" class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">8</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">9</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">10</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
						<tr class="border">
							<td class="first">11</td>
							<td class="second">20150102022458332</td>
							<td class="third">￥527 </td>
							<td class="four">2015-02-02 14:24:58</td>
							<td class="five">支付宝支付</td>
							<td class="six">打印 </td>
							<td class="seven run">进行中</td>
							<td class="end">--</td>
						</tr>
						<tr class="border detail">
							<td class="first"></td>
							<td colspan="5" class="second renwu" ><span class="title">任务时间</span> 预计：3小时 | 完成：<span>00:23:15</span></td>

							<td class="seven cancle" >[取消订单]</td>
							<td class="end"></td>
						</tr>
					</tbody>
				</table>
				<div class="holder"></div>
			</div>
			<div id="commentDialog" style="display: none;">
				<div>
					下面的星级打分是我们考核服务商对您本次服务的满意度！结束后会有一定的奖励回馈！
				</div>
				<div>
					<ul class="score">
						<li><img class="r" src="_assert/img/star.png" />
						</li>
						<li><img class="r" src="_assert/img/star.png" />
						</li>
						<li><img class="r" src="_assert/img/star.png" />
						</li>
						<li><img src="_assert/img/star-invert.png" />
						</li>
						<li><img src="_assert/img/star-invert.png" />
						</li>
					</ul>
				</div>
				<div><textarea style="height: 210px;width:100%;"></textarea></div>
				<div class="suggest">您可以在此留下您对本次服务的意见或建议！</div>
			</div>
		</div>

		<script type="text/javascript" src="_assert/js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="_assert/js/jPages.js"></script>
		<script type="text/javascript" src="_assert/js/artDialog.js"></script>
		<script type="text/javascript">
			$("div.holder").jPages({
				containerID : "movies",
				previous : "上一页",
				next : "下一页",
				first : "首页",
				last : "末页",
				perPage : 3,
				delay : 0,
				callback : function(page, item) {
					console.log(item.showing.length);
					$.each(item.showing,function(i,n){
			$(n).attr("style","display: block ;");
					console.log($(n).attr("style"));
			});
			}
			});
			$("table tbody tr td.end a").click(function() {
				art.dialog({
					id : "commentDialog",
					title : "评论订单",
					content : $("#commentDialog")[0],
					width : 772,
					height : 360,
					padding : 0,
					background : '#999999',
					okVal:"提交评论",
					ok : function() {

					},
					lock : true,

				});
			});
			$("ul.score li img").click(function(){
				var index=$(this).parent("li").index();
				$("ul.score li").each(function(i,dom){
					if(i<=index){
						$(dom).children().attr("src","_assert/img/star.png");
					}
					else{
						$(dom).children().attr("src","_assert/img/star-invert.png");
					}
				});
			});
		</script>
	</body>
</html>