zhengbingbing
/
XiXianDC_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
							<!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" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />

		<link rel="stylesheet" type="text/css" href="../css/Common.css" />
		<link rel="stylesheet" href="../css/layui.css" />
		</lin>
		<title>工单进度</title>
		<style>
			body {
				background-color: #efeff4!important;
			}
			
			.Content {
				padding-top: 5px;
			}
			
			.Content h5 {
				line-height: 15px;
				font-size: 14px;
			}
			
			.Content-title {
				color: #6eb4a1;
			}
			
			.size-16 {
				font-size: 16px;
			}
			
			@font-face {
  font-family: 'iconfont';  /* project id 280843 */
  src: url('//at.alicdn.com/t/font_280843_624s9zcacxt4vx6r.eot');
  src: url('//at.alicdn.com/t/font_280843_624s9zcacxt4vx6r.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_280843_624s9zcacxt4vx6r.woff') format('woff'),
  url('//at.alicdn.com/t/font_280843_624s9zcacxt4vx6r.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_280843_624s9zcacxt4vx6r.svg#iconfont') format('svg');
}
			
			.iconfont {
				font-family: "iconfont";
				font-size: 14px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
				/* padding-left:20px*/
			}
			
			.message-box li {
				padding: 5px;
			}
			
			.fr {
				float: right;
			}
			
			.layui-timeline {
				padding-top: 10px;
				padding-left: 25px;
				margin-bottom: 20px;
			}
			
			.layui-timeline-content h5 {
				line-height: 20px;
				font-size: 12px;
			}
			
			.layui-timeline-title {
				margin-bottom: 0;
			}
			
			.layui-timeline-content {
				padding-right: 5px;
			}
			
			.image-list {
				width: 100%;
				/* height: 85px; */
				background-size: cover;
				padding: 10px 10px;
				overflow: hidden;
			}
			
			.image-item {
				width: 65px;
				height: 65px;
				background-size: 100% 100%;
				display: inline-block;
				position: relative;
				border-radius: 5px;
				margin-bottom: 10px;
				/*border: 1px solid #ccc;*/
			}
			.img-box{
				float: left;
    width: 65px;
    text-align: center;
    line-height: 65px;
    margin: 0 10px 10px;
    /* width: 75px; */
    height: 67px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
			}
			.states{
				display: none;
			}
			.fr{
				float: right;
			}
			.success{
				color: #2AC845;
			}
			.finish{
				color: #CCCCCC;
			}
			/*自定义CSS*/
.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						工单编号：<span class="Work-id"></span>
						<span class="success fr states">待处理</span>
						<span class="finish fr states">已完结</span>
					</li>
					<li class="mui-table-view-cell Content">
						<span>投诉内容：</span>
						<h5 class="Work-content"></span>
					</li>
					<li class="mui-table-view-cell">
						<ul class="mui-table-view size-14 message-box">
							<li class="work-content">
								<span>
									<i class="iconfont">&#xe658;</i>
									投诉人:
								</span>
								<span id="F_CusName" class="fr"></span>
							</li>
							<li class="work-content">
								<span>
								<i class="iconfont">&#xe619;</i>
								投诉人电话:
								</span>
								<span id="F_CusPhone" class="fr">
								</span>
							</li>
							<li class="work-content">
								<span>
								<i class="iconfont">&#xe6a9;</i>
								提交时间:
								</span><span id="F_CreateTime" class="fr"></span>
							</li>
							<li class="work-content">
								<span>
								<i class="iconfont">&#xe617;</i>
								交办单位:
								</span><span id="Unit" class="fr"></span>
							</li>
							<li class="work-content">
								<span>
								<i class="iconfont">&#xe627;</i>
								信息分类:
								</span><span id="InfoType" class="fr"></span>
							</li>
						</ul>
					</li>
				</ul>
				<div id="image-list" class="row image-list">
					<div class=" space">
						
						
					</div>
				</div>
				<h3 class="mui-table-view-cell" style="font-size: 14px;">工单跟踪信息</h3>
				<ul class="layui-timeline">

					

				</ul>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/zepto.js"></script>
		<!--<script src="../js/mui.zoom.js"></script> 	-->	
		<script src="../js/mui.previewimage.js"></script>	
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../Script/Common/huayi.http.js"></script>
		<script>
			mui.init()
			var openid = helper.cookies.get("openid");
			var id = helper.request.queryString("id");
			mui.previewImage();
			console.log(id);
			if(id) {
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'WxLogin/GetWorkOrder',
					async: true,
					data: {
//						openid: openid,
openid:'oKOqcv31fh76rtNmJDjKc39oIsfA',
						workorderid: id
					},
					success: function(data) {
						var con = JSON.parse(data);
						var Str = con.data.data;
						var Item=con.data.item;						
						console.log(Item)
						if(Str[0].State==0){
							$(".success").show()
						}else{
								$(".finish").show()
						}
						var year=Str[0].CreateTime.substring(0, Str[0].CreateTime.indexOf(' ')); 
						$(".Work-id").text(Str[0].WorkOrderID);
						$(".Work-content").text(Str[0].Detail);
						$("#F_CusName").text(Str[0].Customer);
						$("#F_CusPhone").text(Str[0].CustomerTel);
						$("#F_CreateTime").text(year);
						$("#Unit").text(Str[0].Unit);
						$("#InfoType").text(Str[0].InfoType);
						//办理过程
						if(Item.length>0){
							$(Item).each(function(i, n){
								var Time=n.DealTime.substring(0, n.DealTime.indexOf(' '));;
								$('<li class="layui-timeline-item">'+
										'<i class="layui-icon layui-timeline-axis"></i>'+
									'<div class="layui-timeline-content layui-text">'+
									'<h5 class="layui-timeline-title">'+n.DealTime+'</h5>'+
										'<h5>操作人: <span>'+n.CreateUser+'</span></h5>'+
										'<h5>备注消息: <span>'+n.Detail+'</span></h5>'+
									'</div>'+
								 	'</li>').appendTo(".layui-timeline");
							})
						}
//						//图片展示
						var Files = Str[0].File;
						if(Files){
							var a ;
							var b;
							$(Files).each(function(i, n) {
								a=n.F_FileType.split("\/")[0];
								b=n.F_FileName.split(".")[1];
								console.log(a);
								if(a=='image'){
									$('<div class="img-box"><img src="' + n.F_FileUrl + '" alt="" class="image-item"  data-preview-group="1" /><span class="">'+b+'</span><div>').appendTo(".space");	
								}else{
									$('<div class="img-box "><span class="">'+b+'</span><div>').appendTo(".space");	
							}
								
							})
						}
					}
				});

			}
		</script>
	</body>

</html>