lihai
/
ZZDianXin_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>工单详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/inits.css" />
		<style>
			.order_state {
				padding: 2px 9px;
				background: #FD7C78;
				border: 0;
			}
			
			.order_icon {
				color: #FD7C78;
				vertical-align: baseline;
			}
			
			.order_title {
				color: #5FBEDA;
				line-height: 20px;
   				 margin-bottom: 7px;
			}
			.order_content{
				    line-height: 20px;
			}
			
			.head_pic {
				display: inline-block;
				width: 16px;
				height: 16px;
				vertical-align: middle;
				margin-right: 5px;
			}
			
			.icon_right {
				margin-right: 3px;
			}
			
			.gdgz {
				font-weight: normal;
				margin-top: 10px;
			}
			.layui-text h3 {
			    font-size: 15px;
			}
			.detail_list div{
				margin-top: 5px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<i class="iconfont icon-iconfont02 order_icon"></i><span class="workOrder"></span>
					<button type="button" class="order_state mui-btn mui-btn-primary">
							<!--待解决-->
						</button>
				</li>
				<li class="mui-table-view-cell">
					<h5 class="order_title"></h5>
					<p class='order_content'></p>
				</li>
				<li class="mui-table-view-cell detail_list">
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-dizhi icon_right"></i>事件地址：</p>
						<p class="mui-pull-right address"></p>
					</div>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="mui-icon mui-icon-person icon_right" style="font-size: 20px;"></i><!--<img class="head_pic" src="../img/shuijiao.jpg" alt="" />-->联系人：</p>
						<p class="mui-pull-right people"></p>
					</div>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-dianhua icon_right"></i>联系电话：</p>
						<p class="mui-pull-right phone"></p>
					</div>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-quanbu icon_right"></i>工单类型：</p>
						<p class="mui-pull-right order_type"></p>
					</div>
					<div class="clearFix">
						<p class="mui-pull-left"><i class="iconfont icon-daichuli icon_right"></i>提交时间：</p>
						<p class="mui-pull-right order_time"></p>
					</div>
					<h4 class="gdgz">工单跟踪信息</h4>
				</li>
				<li class="mui-table-view-cell">
					<ul class="layui-timeline time_line">
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">2017-08-20 12:00:00 大傻子 完成此工单</h3>
								<p>操作人：大傻子</p>
								<p>操作人电话：123456789120</p>
								<p>备注信息：备注不要太多 麻烦 懂的么</p>
								
							</div>
						</li>
						<!--<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">2017-08-20 12:00:00 大傻子 完成此工单</h3>
								<p>操作人：大傻子</p>
								<p>操作人电话：123456789120</p>
								<p>备注信息：备注不要太多 麻烦 懂的么</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">2017-08-20 12:00:00 大傻子 完成此工单</h3>
								<p>操作人：大傻子</p>
								<p>操作人电话：123456789120</p>
								<p>备注信息：备注不要太多 麻烦 懂的么</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">2017-08-20 12:00:00 大傻子 完成此工单</h3>
								<p>操作人：大傻子</p>
								<p>操作人电话：123456789120</p>
								<p>备注信息：备注不要太多 麻烦 懂的么</p>
							</div>
						</li>
						 <li class="layui-timeline-item">
						    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						    <div class="layui-timeline-content layui-text">
						      <div class="layui-timeline-title">过去</div>
						    </div>
						   </li>-->
					</ul>

				</li>
			</ul>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../layui/lay/modules/layer.js"></script>
		<script src="../js/zepto.js"></script>
        <script src="../Script/Common/huayi.config.js"></script>
        <script src="../Script/Common/huayi.http.js"></script>
		<script type="text/javascript">
			mui.init()
			var openid = helper.cookies.get("openid");
			var id=helper.request.queryString("id");
			console.log(id);
			$.ajax({
				type:"get",
				url:huayi.config.callcenter_url + 'WxLogin/GetWorkOrder',
				async:true,
				data:{
					openid:openid,
					workorderid:id
				},
				success:function(data){
					var con=JSON.parse(data);
					var conDetail=con.data.data[0];
					console.log(conDetail)
					if(con.state.toLowerCase()=='success'){
						$('.workOrder').html('工单编号：'+conDetail.F_WorkOrderId+'');
						if(conDetail.F_WorkState==0){
							$('.order_state').html('等待处理');
						}else if(conDetail.F_WorkState==9){
							$('.order_state').html('已处理');
						}else{
							$('.order_state').html('正在处理');
						}
						$('.order_title').html(''+conDetail.TypeName1+'标题：'+conDetail.F_ComTitle+'');
						$('.order_content').html(''+conDetail.TypeName1+'内容：'+conDetail.F_ComContent+'');
						$('.address').html(conDetail.AreaName+conDetail.F_SourceAddress);
						$('.people').html(conDetail.F_CusName);
						$('.phone').html(conDetail.F_CusPhone);
						$('.order_type').html(conDetail.TypeName1);
						$('.order_time').html(conDetail.F_CreateTime);
					}
					
					var time_line=con.data.item;
					$(time_line).each(function(i,n){
						$('<li class="layui-timeline-item">'+
							'<i class="layui-icon layui-timeline-axis">&#xe63f;</i>'+
							'<div class="layui-timeline-content layui-text">'+
								'<h3 class="layui-timeline-title">'+ n.F_CreateTime +'</h3>'+
								'<p>'+n.F_Message+'</p>'+
//								'<p>操作人电话：123456789120</p>'+
//								'<p>备注信息：备注不要太多 麻烦 懂的么</p>'+
							'</div>'+
						'</li>').appendTo('.time_line')
					})
					
				}
			});
		</script>
	</body>

</html>