知识库图片预览，微信反馈页面上传图片，图片预览

CallCenterWeb.UI/callScreen/call.js

@@ -8,6 +8,7 @@ var TrunkNumber = helper.request.queryString("TrunkNumber");
 var CallID = helper.request.queryString("CallID");
 var KHid;
 var UserCode;
+var otext="";
 var timestamp = Date.parse(new Date());
 //通话中执行变化
 var timer, n = 0;
@@ -434,6 +435,8 @@ function headFormSave() {
 $(".searIcon").click(function() {
 
 	debugger
+	otext=$(".search").val();
+	
 	loadZSK();
 });
 
@@ -469,7 +472,7 @@ $(".searIcon").click(function() {
 //获取知识库
 function loadZSK() {
 	$.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetZSKList', {
-		"keywords": $(".search").val(),
+		"keywords":otext,
 		"token": $.cookie("token")
 	}, function(result) {
 		if(result.state.toLowerCase() == "success") {
@@ -481,71 +484,41 @@ function loadZSK() {
 				//var after_w = n.F_Content.replace(key_w, '<span style="color:red;">' + key_w + '</span>');
 				var after_u = n.F_Title.replace(key_w, '<span style="color:red;">' + key_w + '</span>');
 				html = '<li>' +
-					'   <div class="zhishi-title clearfix">' +
+					'   <div class="zhishi-title clearfix" numTab="'+i+'" index="'+n.F_RepositoryId+'">' +
 					'	    <a href="javascript:void(0);" >' + after_u + '</a>' +
 					'	    <em >' + n.F_CreateOn + '</em>' +
 					'   </div>' +
 					'   <div class="explancon">' +n.F_Content +
-					'   <div id="fileListUp">';
-				var proimglist = result.data.rows[i].FileUrl;
-				if(proimglist && proimglist.length > 0) {
-					$(proimglist).each(function(j, k) {
-						//alert(k.F_FileName);
-						var fileType = k.F_FileType.split("\/")[0];
-						if(fileType === 'image') {
-							html += '<div class="img-box">' +
-								'<span class="img_mask"><span onclick=downloadFile("' + k.F_FileUrl + '","' + k.F_FileName + '","' + k.F_FileType +
-								'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +
-								'<img layer-src="' + k.F_FileUrl + '" src="' + k.F_FileUrl + '" alt="' + k.F_FileName +
-								'" class="image-item" /></div>';
-						} 
-					});
-					layer.photos({
-						photos: '#fileListUp',
-						anim: 5, 
-						title: '查看图片',
-						move: '.layui-layer-title',
-						shadeClose: false,
-						closeBtn: 1,
-						area: ['80%', '90%'],
-						tab: function(pic, layero) {
-							$('.layui-layer-content').on("mousewheel", function(e, d) {
-								
-								helper.methods.zoomImg($('#layui-layer-photos').find('img[alt="' + pic.alt + '"]'), d);
-								$('#layui-layer-photos').find('img[alt="' + pic.alt + '"]').dragging({
-									move: "both", //拖动方向，x y both
-									randomPosition: false //初始位置是否随机
-								});
-								return false;
-								
-							});
-							helper.methods.initLayerPhotos('#layui-layer-photos', pic, layero);
-						},
-					});
-				}
-				html +='</div></div>' +
+					'   <div id="fileListUp"></div></div>' +
 						'</li>';
 				$(html).appendTo($(".ldcr-bottom .detail-con ul")).find(".zhishi-title").click(function(event) {
-					event.stopPropagation();
-					if($(this).hasClass("active")) {
-						$(this).removeClass("active")
-					} else {
-						$(".zhishi-title").removeClass("active");
-						$(this).addClass("active");
-					}
+					var changeGetid=$(this).attr("index");
+					var numTab=$(this).attr("numTab");
+					var otext = $(".search").val();
+					alert(otext);
+					layer.open({
+						type: 2,
+						title: '查看知识库',
+						shadeClose: true, //是否开启点击遮罩关闭
+						shade: 0.4, //遮罩
+						maxmin: true, //开启最大化最小化按钮
+						id: 'LAY_layuipro', //防止重复弹出
+						moveType: 1, //拖拽类型 默认的拖拽风格正如你所见到的，会有个过度的透明框。但是如果你不喜欢，你可以设定moveType: 1切换到传统的拖拽模式
+						moveOut: true, //拖拽到窗口外
+						//resize: true,//是否允许拉伸
+						area: ['70%', '90%'],
+						content: '../zhiShiKu/template/seeDetail.html?changeGetid=' + changeGetid+'&otext='+otext,
+					});
 				})
-			var otext = $(".search").val();
-			$('.explancon').GL({
-				ocolor: 'red', //设置关键词高亮颜色
-				oshuru: otext //设置要显示的关键词
-			});
+				
+				
 				
 			})
 			
+			
 		}
 	})
 }
-
 //加载 历史记录或历史工单
 function loadOldOrComplain(tabIndex) {
 	$(".complain").hide();

CallCenterWeb.UI/js/WorkOrder/WorkOrder.js

@@ -1223,8 +1223,8 @@ function getWorkOrderDe() {
 				if (proimglist && proimglist.length > 0) {
 					$(proimglist).each(function(i, n) {
 						var fileType = n.F_FileType;
-						if (fileType === '.jpg'||fileType === '.png') {
-							debugger
+						var fileType1 = n.F_FileType.split("\/")[0];
+						if (fileType === '.jpg'||fileType === '.png'||fileType1==='image') {
 							$('<div class="img-box">' +
 								'<span class="img_mask"><span onclick=downloadFile("'+ n.F_FileUrl + '","' + n.F_FileName + '","' + n.F_FileType +
 								'") title="点击下载"><i class="fa fa-download" aria-hidden="true"></i></span></span>' +

CallCenterWeb.UI/zhiShiKu/template/seeDetail.html

@@ -17,15 +17,15 @@
 			<tbody>
 				<tr>
 					<th>标题：</th>
-					<td colspan="3" class="addTitle"></td>
+					<td colspan="3" class="addTitle explancon"></td>
 				</tr>
 				<tr>
 					<th>关键字：</th>
-					<td colspan="3" class="addKey"></td>
+					<td colspan="3" class="addKey explancon"></td>
 				</tr>
 				<tr>
 					<th>内容：</th>
-					<td colspan="3" class="addCon"></td>
+					<td colspan="3" class="addCon explancon"></td>
 				</tr>
 				<tr>
 					<th>附件：</th>
@@ -43,18 +43,17 @@
 	<script>
 		var token = $.cookie("token");
 		var changeGetid = helper.request.queryString("changeGetid");
-
+		var otext = helper.request.queryString("otext");
 		$(function() {
 			if (changeGetid) {
 				getChangeBox();
 			}
 		});
-
 		function getChangeBox() {
 			$.ajax({
 				type: "post",
 				url: huayi.config.callcenter_url + "Knowledge/GetInfo",
-				async: true,
+				async: false,
 				dataType: 'json',
 				data: {
 					infoid: changeGetid,
@@ -63,6 +62,7 @@
 				success: function(data) {
 					var con = data.data;
 					if (con) {
+						debugger
 						$('.addTitle').html(con.F_Title);
 						$('.addKey').html(con.F_KeyWords);
 						$('.addCon').html(helper.filter.content(con.F_Content));
@@ -112,6 +112,11 @@
 									helper.methods.initLayerPhotos('#layui-layer-photos', pic, layero);
 								},
 							});
+							$('.explancon').GL({
+								
+								ocolor: 'red', //设置关键词高亮颜色
+								oshuru: otext //设置要显示的关键词
+							});
 						}
 					}
 				}
@@ -145,6 +150,35 @@
 				area: ['90%', '90%'], //宽高
 			});
 		}
+		(function($) {
+			$.fn.GL = function(options) {
+				var dataop = {
+					ocolor: 'red',
+					oshuru: '',
+				};
+				var chuancan = $.extend(dataop, options);
+				$(this).each(function() {
+					var _this = $(this)
+					_this.find($(".glnow")).each(function() {
+						$(this).css({
+							color: ""
+						});
+					});
+				});
+				if(chuancan.oshuru == '') {
+					return false;
+		
+				} else {
+					var regExp = new RegExp("(" + chuancan.oshuru.replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
+					$(this).each(function() {
+						var _this1 = $(this)
+						var html = _this1.html();
+						var newHtml = html.replace(regExp, '<span class="glnow" style="color:' + chuancan.ocolor + '">' + chuancan.oshuru + '</span>');
+						_this1.html(newHtml);
+					});
+				}
+			}
+		})(jQuery);
 	</script>
 
 </html>

WeChat/client-side/Visitors.html

@@ -160,6 +160,11 @@
 					
 				</li>-->
 			</ul>
+			
+			<!--图片展示-->
+            <div class="mui-table-view">
+                <div id='image-list' class="row image-list"></div>
+            </div>
 			<ul class="mui-table-view mui-grid-view">
 				<h4 class="mui-ellipsis size-16 mui_btn1_tit">操作按钮：</h4>
 				<div class="type1">
@@ -447,6 +452,8 @@
 		<script src="../js/mui.picker.js"></script>
 		<script src="../js/mui.poppicker.js"></script>
 		<script src="js/city.data-3.js"></script>
+		<script src="../js/mui.zoom.js"></script>
+    	<script src="../js/mui.previewimage.js"></script>
 		<script>
 			var id = helper.request.queryString("id");
 			var itype = helper.request.queryString("itype");
@@ -458,6 +465,7 @@
 			var openid = helper.cookies.get("openid");
 			var UserType = helper.cookies.get("usertype");
 //			var openid = "oXF5e1mWpX5DajW5_yjNLPKb8ThE";
+			mui.previewImage();
 			if(isReply == 0){
 				$('.btn_reply').show();
 			}
@@ -588,7 +596,19 @@
 							$("#Work_workOrderID").text(result.F_DealReasons); //未处理原因
 							$("#Work_workOrderID").text(result.F_IsVisit); //是否回访
 							$("#Work_detail").text("问题描述：" + result.F_Description); //描述详情
-							
+							//图片展示
+		                    if (data.FileUrl) {
+		                        $(data.FileUrl).each(function (i, n) {
+		                            if (n.F_FileType == '.jpg' || n.F_FileType == '.png') {
+		                            	debugger
+		                                $('<div class="img-box"><img src="' + n.F_FileUrl + '" alt="" class="image-item" data-preview-src="" data-preview-group="1" /><div>').appendTo("#image-list");
+		                                $(".image-list").show();
+		                            }
+//		                            else{
+//		                            	$('<div class="img-box"><a href="' + n.F_FileUrl + '" download="' + n.F_FileUrl + '"></a><div>').appendTo("#image-list");
+//		                            }
+		                        })
+		                    }
 				
 						}
 					},

WeChat/client-side/details_1.html

@@ -148,6 +148,13 @@
 					<p id="Work_detail"></p>
 				</li>
 			</ul>
+			
+			
+			<!--图片展示-->
+            <div class="mui-table-view">
+                <div id='image-list' class="row image-list"></div>
+            </div>
+            
 			<ul class="mui-table-view mui-grid-view type3">
 				<h4 class="mui-ellipsis size-16 mui_btn1_tit">操作按钮：</h4>
 				<!--待处理-->
@@ -205,11 +212,14 @@
 		<script src="../js/mui.picker.js"></script>
 		<script src="../js/mui.poppicker.js"></script>
 		<script src="js/city.data-3.js"></script>
+		<script src="../js/mui.zoom.js"></script>
+    	<script src="../js/mui.previewimage.js"></script>
 		<script>
 			var id = helper.request.queryString("id");
 			var itype = helper.request.queryString("itype");
 			var openid = helper.cookies.get("openid");
 			var usertype = helper.cookies.get("usertype");
+			mui.previewImage();
 //			var openid = "oXF5e1mWpX5DajW5_yjNLPKb8ThE";
 			if (usertype==-1) {
 				$(".type3").show();
@@ -310,7 +320,19 @@
 							$("#Work_workOrderID").text(result.F_IsVisit); //是否回访
 							$("#Work_detail").text("问题描述：" + result.F_Description); //描述详情
 							
-				
+							//图片展示
+		                    if (data.FileUrl) {
+		                        $(data.FileUrl).each(function (i, n) {
+		                            if (n.F_FileType == '.jpg' || n.F_FileType == '.png') {
+		                            	debugger
+		                                $('<div class="img-box"><img src="' + n.F_FileUrl + '" alt="" class="image-item" data-preview-src="" data-preview-group="1" /><div>').appendTo("#image-list");
+		                                $(".image-list").show();
+		                            }
+//		                            else{
+//		                            	$('<div class="img-box"><a href="' + n.F_FileUrl + '" download="' + n.F_FileUrl + '"></a><div>').appendTo("#image-list");
+//		                            }
+		                        })
+		                    }
 						}
 					},
 					error: function(xhr, type, errorThrown) {

WeChat/client-side/establish.html

@@ -10,6 +10,7 @@
 		<link href="../css/mui.min.css" rel="stylesheet" />
 		<link href="../css/mui.picker.css" rel="stylesheet" />
 		<link href="../css/mui.poppicker.css" rel="stylesheet" />
+		<link href="../css/feedback-page.css" rel="stylesheet" />
 		<link href="../css/iconfont.css"  rel="stylesheet"/>
 		<link href="css/AddWorkolder.css"  rel="stylesheet"/>
 		<style type="text/css">
@@ -91,6 +92,15 @@
 					</div>
 				</li>
 			</ul>
+			<div class="feedback">
+	            <p>添加图片(选填,提供问题截图,单张20M以下,最多上传5张)</p>
+	            <div id='image-list' class="row image-list"></div>
+	        </div>
+	
+	        <p class="action">
+	            <i class="iconfont icon-gantanhao" style="margin-right: 5px;font-size: 20px;vertical-align: middle;"></i>
+	            <span style="color: #f81737;">如事件内容地址填写不详细，将影响到你事件办理，请填写详细</span>
+	        </p>
 			<div style="width: 100%; height: 50px;"></div>
 			<div class="submit-btn">
 				<button type="button" data-loading-text="提交中" class="mui-btn mui-btn-primary mui-btn-block block_button submit" id="submit">提交工单</button>
@@ -103,6 +113,7 @@
 		<script src="../js/jquery.min.js"></script>
 		<script src="../Script/Common/huayi.config.js"></script>
 		<script src="../Script/Common/huayi.http.js"></script>
+		<script src="../js/feedback-page.js"></script>
 		<script src="js/establish.js"></script>
 	</body>
 

WeChat/client-side/js/establish.js

@@ -64,6 +64,18 @@ $('.zhipp').find('input[type="radio"]').on('change', function() {
 //		var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
 		var myreg11 = /^(([0\+]\d{2,3}-)?((0\d{2,3}))?(-)?)?(\d{7,8})(-(\d{3,}))?$/;
 		var str = $("#order_tel").val();
+		var str_ary = '';
+	    $(".image-box").each(function (i, n) {
+	        var a = $(n).attr("indexs");
+	        if (a) {
+	            if (str_ary) {
+	                str_ary = str_ary + ',' + a;
+	            }
+	            else {
+	                str_ary = a;
+	            }
+	        }
+	    })
 		if($('#order_name').val() == '') {
 			mui.alert('请输入客户姓名！') //请输入工单类型
 		} else if($('#order_reception').val() == '') {
@@ -83,7 +95,9 @@ $('.zhipp').find('input[type="radio"]').on('change', function() {
                     F_Canal:$('#manager').attr('data-index'),
 					F_IncidentDetailed: $("#order_tower").val(), //详细地址
 					F_Description: $("#order_reception").val(), //问题描述
-					F_WxOpenId: openid, //微信openid,				
+					
+					F_WxOpenId: openid, //微信openid,	
+					F_Files:str_ary
 				},
 				success: function(data) {
 					if(data.state == "success") {

WeChat/fisrt_comprehensive/VisitorsCreate.html

@@ -85,6 +85,12 @@
 				</li>
 				
 			</ul>
+			
+			<!--图片展示-->
+            <div class="mui-table-view">
+                <div id='image-list' class="row image-list"></div>
+            </div>
+            
 			<ul class="mui-table-view mui-grid-view">
 				<h4 class="mui-ellipsis size-16 mui_btn1_tit">操作按钮：</h4>
 				<div class="type1">
@@ -237,8 +243,6 @@
 		
 		
 		
-		
-		
 		<script src="../js/jquery.min.js"></script>
 		<script src="js/details.js"></script>
 		<script src="../Script/Common/huayi.config.js"></script>
@@ -247,6 +251,8 @@
 		<script src="../js/mui.picker.js"></script>
 		<script src="../js/mui.poppicker.js"></script>
 		<script src="js/city.data-3.js"></script>
+		<script src="../js/mui.zoom.js"></script>
+    	<script src="../js/mui.previewimage.js"></script>
 		<script>
 			var id = helper.request.queryString("id");
 			var itype = helper.request.queryString("itype");
@@ -257,7 +263,7 @@
 			var isReply = helper.request.queryString("IsReply"); // 是否已回复 0 未回复 1已回复
 			var openid = helper.cookies.get("openid");
 			var UserType = helper.cookies.get("usertype");
-//			var openid = "oXF5e1mWpX5DajW5_yjNLPKb8ThE";
+			mui.previewImage();
 			if(isReply == 0){
 				$('.btn_reply').show();
 			}
@@ -452,8 +458,19 @@
 							$("#Work_workOrderID").text(result.F_DealReasons); //未处理原因
 							$("#Work_workOrderID").text(result.F_IsVisit); //是否回访
 							$("#Work_detail").text("问题描述：" + result.F_Description); //描述详情
-							
-				
+							//图片展示
+		                    if (data.FileUrl) {
+		                        $(data.FileUrl).each(function (i, n) {
+		                            if (n.F_FileType == '.jpg' || n.F_FileType == '.png') {
+		                            	debugger
+		                                $('<div class="img-box"><img src="' + n.F_FileUrl + '" alt="" class="image-item" data-preview-src="" data-preview-group="1" /><div>').appendTo("#image-list");
+		                                $(".image-list").show();
+		                            }
+//		                            else{
+//		                            	$('<div class="img-box"><a href="' + n.F_FileUrl + '" download="' + n.F_FileUrl + '"></a><div>').appendTo("#image-list");
+//		                            }
+		                        })
+		                    }
 						}
 					},
 					error: function(xhr, type, errorThrown) {

WeChat/fisrt_comprehensive/css/details.css

@@ -730,7 +730,195 @@ a {
 }
 
 
+/*图片*/
 
+.img-box {
+	float: left;
+	width: 20%;
+	height: 60px;
+	margin: 2%;
+	text-align: center;
+}
+
+.img-box img {
+	width: 100%;
+	height: 100%;
+}
+
+.image-list {
+	/*display: none;*/
+	overflow: hidden;
+}
+
+.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;
+	}
+}
 
 
 

WeChat/fisrt_comprehensive/tourist.html

@@ -51,7 +51,6 @@
 	<body>
 		
 		<div class="mui-content">
-			
 			<div class="mui-card cardfixe" >
 				<div class="mui-card-content itemtit">