商铺图库

public/resource/js/pictureShow.js

+/**
+ * Created by xinyuan.du time at 2018/8/30.
+ * author : xinyuan.du
+ * time : 2018/08/30
+ * about : 商铺图库
+ */
+define (['doT', 'text!temp/picture_add_template_tpl.html', 'css!style/home.css','ckfinder','ckfinderStart','pagination','bootstrapJs', 'blow-up'], function (doT, template) {
+    picture = {
+        pageNo: 1, /*第几页*/
+        pageSize: 10, /*每页显示多少条*/
+        id : '',
+        house_id:'',
+        type:'',
+        valueCurrent:'',
+        ajaxObj:'',
+        stopstatus:true,
+        boxphoto:'',
+        lastPicture:false,//由于接口的调用次数由图片的数量而决定,所以只有最后一次接口会出现弹跳框
+        init: function () {
+            //初始化dot
+            $ ("body").append (template);
+            picture.event ();
+            picture.getYetai($('#yetai_type'),$('#p_type'),false)
+            picture.getList (1);
+        },
+        event: function () {
+            $("#search").click(function () {
+                picture.getList(1);
+            });
+
+			$(document).on('click','.is_show',function(e){
+				picture.getDataByParams(e.target.dataset.id);
+			});
+			$(document).on('click','.announcement-del',function(e){
+				picture.deletePictureById(e.target.dataset.id);
+				picture.getList(1);
+			});
+			
+			$('#modal-show').on('show.bs.modal',function(){
+            	picture.getYetai($('#yetai_id'),$('#leased'),true);
+            });
+			
+            $('#modal').on('show.bs.modal',function(){
+            	picture.getYetai($('#yetai_id'),$('#leased'),true);
+            });
+            
+            $('#modal').on('hide.bs.modal',function(){
+            	$('#yetai_id').empty();
+            });
+            
+            //业态选中与取消事件;
+            $(document).on('click','.yetai_checkbox',function(e){
+            	if ( $(this).hasClass("isCheck") ){			//取消选中
+            		$(this).css("background-color","#FFFFFF");
+            		$(this).removeClass("isCheck");
+            	} else {									//选中
+            		$(this).css("background-color","#FF9419");//    ffc000
+            		$(this).addClass("isCheck");
+            	}
+            });
+             
+             $('#reset').click(function(){
+             	document.getElementById("form_search").reset();
+             });
+             
+            //新增图片存储触发事件
+            $('#save').click(function(){
+            	var yetai_str = '' ;
+            	$('.yetai_checkbox').each(function(){
+            		if ( $(this).hasClass("isCheck") ){
+	            		yetai_str += $(this).html() +",";
+	            	}
+            	});
+            	var pictures = $('#modal').find('.img_area').find('.pictures');
+            	
+            	//有几张图片就保存几次
+            	$('#modal').find('.img_area').find('.pictures').each(function(i,event){
+            		if ( i == pictures.length-1 ){
+            			picture.lastPicture = true ; 
+            		}
+            		var fujianName = $(this).attr("id");
+            		console.log(yetai_str.substr(0,yetai_str.length-1));
+            		picture.savePicture(yetai_str.substr(0,yetai_str.length-1),fujianName);
+            	})
+            });
+            
+            //图片类型更换触发事件  当图片类型为人去图,隐藏业态,并且不保存业态;
+            $('#modal').find('select#leased').change(function(){
+            	if ( $('#modal').find('select#leased option:selected').val() == 2){
+            		$('.yetai-area').hide();
+            	} else if ( $('#modal').find('select#leased option:selected').val() == 1){
+            		$('.yetai-area').show();
+           		} else {
+           			$('.yetai-area').show();
+           		}
+            });
+            
+            //附件上传处理事件
+			$("#file_input").change(function() {
+				var _this = $(this),
+					_spFile = _this.data('spfile'),
+					_limitTop = _this.data('limittop'),
+					_fileNum = _this.parent().next().find('.delet-pic-btn').length; //根据删除按钮的个数，确定文件的个数
+
+				if(_limitTop && (_fileNum < _limitTop)) {
+					picture.uploadImg(_this);
+				} else {
+					alert('上传上限为  ' + _limitTop);
+					return false;
+				};
+			});
+			
+			//图片，附件上传删除键事件
+			$(document).on('click', '.delet-pic-btn', function(e) {
+				var _this = $(this);
+				e.preventDefault();
+				e.stopPropagation();
+				$(this).parent().parent().remove();
+				/*if(confirm('确定删除该图片吗？')) {
+					var _imgId = _this.parent().attr('data-imgid');
+					var file_id = $(this).parent('li').attr('id') - 0 ;
+					_this.parent().remove();
+					user.addDeleteNewsEvent(file_id);
+				};*/
+			});
+
+   		},
+   		
+		//获取列表
+        getList: function (pageNo) {
+            picture.pageNo   = pageNo;
+            var params    = {
+            	"AuthToken" : JSON.parse(decodeURIComponent(localStorage.getItem('pcUserInfo'))).AuthToken,
+            };
+            params.pageNo   = picture.pageNo;
+            params.pageSize = picture.pageSize;
+            params.img_type = $('#p_type option:selected').val() == -1 ? '' : $('#p_type option:selected').val();
+            if( params.img_type == 2 ){
+            	params.label =  '' ;
+            } else {
+            	params.label = $('#yetai_type option:selected').val() ==-1 ? '' : $('#yetai_type option:selected').html();
+            }
+            $.ajax ({
+                url: '/index/getImageDepotList',//获取列表
+                type: 'GET',
+                async: true,
+                data: params,
+                dataType: 'json',
+                success: function (data) {
+                    var temp = document.getElementById ('picture_add_template_tpl').innerHTML;
+                    var doTtmpl = doT.template (temp);
+                    $ ("#picture_list").html (doTtmpl (data.data.list));
+
+                    /*分页代码*/
+                    add_page(data.data.total,pageNo,picture.pageSize,picture.getList);
+                     $ ('.J_preview').preview ();
+                }
+            });
+        },
+        
+        //查看功能获取数据
+   		getDataByParams : function(id){
+   			$.ajax ({
+                url: '/index/getImageDepotById',//获取列表
+                type: 'GET',
+                async: true,
+                data: {'id' : id },
+                dataType: 'json',
+                success: function (data) {
+                	
+                	var img_type = '' ;
+                	var img_label = '' ;
+                	var image_show = "";
+                	
+                	image_show += '<image width="100px" height="80px" src="'+data.data.list.img_file_path + '/' + data.data.list.img_name +'"></image>';
+                	if (data.data.list.img_type == 0){
+                		img_type = "室外图";
+                	} else if (data.data.list.img_type == 1){
+                		img_type = "室内图";
+                	} else {
+                		$('#yetai_is_show').hide();
+                		img_type = "人群图";
+                	}
+                	
+                	$('#picture_type_show').text();
+                	$('#creat_time').text(data.data.list.create_time);
+                	$('#picture_type_show').text(img_type);
+                	$('#yetai_id_show').text(data.data.list.label);
+                	$('.img_area_show').empty();
+                	$('.img_area_show').append(image_show);
+                }
+            });
+   		},
+        
+        //获取业态
+        getYetai: function($yetai,$pt,isModal) {
+			$.ajax({
+				url: '/index/getImageTypeLabel',
+				type: 'GET',
+				async: true,
+				data: {
+					"AuthToken" : JSON.parse(decodeURIComponent(localStorage.getItem('pcUserInfo'))).AuthToken,
+					"pageSize": 10
+				},
+				dataType: 'json',
+				success: function(data) {
+					if(data.code == 200 && data.data != null) {
+						var str_yetai = '';
+						var img_type ='' ;
+						if ( isModal) {
+							$yetai.empty();
+							$pt.empty();
+							//加载业态标签
+							$.each(data.data.label_type, function(i, item) {
+								if(item!='全部'){
+								  	str_yetai +='<div class="col-xs-3" style="padding:0px;text-align:center;margin:8px 0px;">';
+								  	str_yetai +='		<div class="yetai_checkbox" id="'+i+'" style="width:80px;border:1px solid black ; background-color : #ffffff;" >'+item+'</div>';
+								  	str_yetai +='</div>';
+								} else {
+								str_yetai +='<div class="col-xs-3" style="padding:0px;text-align:center;margin:8px 0px;">';
+								  	str_yetai +='		<div class="yetai_checkbox" style="width:80px;border:1px solid black ; background-color : #ffffff;" >全部</div>';
+								  	str_yetai +='</div>';
+								}
+							});
+						} else {
+							
+							$.each(data.data.label_type, function(i, item) {
+								  	str_yetai +='<option value="'+i+'">';
+								  	str_yetai +=item;
+								  	str_yetai +='</option>';
+							});
+						}
+						
+						//加载图片类型下拉框
+						$.each(data.data.img_type, function(i, item) {
+							if(item){
+							  	img_type +='<option value="'+i+'">';
+							  	img_type += data.data.img_type[i];
+							  	img_type +='</option>';
+							} 
+						});
+						
+						$yetai.append(str_yetai);
+						$pt.append(img_type);
+					}
+				}
+			});
+		},
+		
+		 //执行数据保存的操作
+        savePicture : function(data_yetai,pictureName){
+        	var yetai = $('#modal').find('select#leased option:selected').val() == -1 ? '' : data_yetai;
+        	var params = {
+        		'img_type' : $('#modal').find('select#leased option:selected').val() , 
+        		'label' : yetai,
+        		'img_name' : pictureName
+        	};
+        	
+			$.ajax({
+				url: '/index/addImageDepot',
+				type: 'GET',
+				async: true,
+				data: params,
+				dataType: 'json',
+				success: function(data) {
+					if(data.code == 200 && data.data != null) {
+						if ( picture.lastPicture ){
+							alert("图片上传成功");
+							picture.lastPicture = false ;
+							window.location.href = '/index/pictureShow';
+						}
+					}
+					
+				}
+			});
+        	
+        },
+		
+		//删除表格的行(单行删除)
+		deletePictureById: function(id) {
+			$.ajax({
+				url: '/index/delImageDepot',
+				type: 'POST',
+				async: true,
+				data: { "id": id},
+				dataType: 'json',
+				success: function(data) {
+					if(data.code == 200) {
+						alert('删除成功');
+						$("#modal-delete").modal('hide');
+					} else {
+						$("#del_msg").html('<span style="color: red">删除失败!</span>');
+					}
+				}
+			});
+		},
+		
+		//图片删除事件
+   		addDeleteNewsEvent :function(id){
+			$.ajax({
+				url: '/index/delNewsFile',
+				type: 'POST',
+				async: true,
+				data: {'file_id' : id},
+				dataType: 'json',
+				success: function(data) {
+					if(data.code == 200) {
+						alert('文件删除成功');
+					}
+				}
+			});
+		},
+		
+		 //上传图片
+        uploadImg : function(_this){ 
+        	var formData = new FormData();
+				formData.append('type', 'shop_image_depot');
+				formData.append('image', _this[0].files[0]);
+			$.ajax({
+				type: 'post',
+				url: '/index/uploadImg',
+				data: formData,
+				dataType: 'json',
+				contentType: false,
+				cache: false,
+				processData: false,
+				beforeSend: function() {},
+				success: function(_data) {
+					if(_data.code == 200) {
+						var _url = _data.data.internet_img_name;
+						var tag = '' ;
+						tag += '<div class="col-xs-3 pictures" id='+_data.data.img_path+'>';
+						tag += '	<img src="/'+_url+'" class="" id="" width="90%">';
+						tag += '	<div style="text-align:center" id="'+_data.data.img_path+'"><a href="javascript:;" class="delet-pic-btn">删除</a></div>';
+						tag += '</div>';
+						$('.img_area').append(tag)								
+					} else {
+						alert(_data.msg);
+					};
+				},
+				error: function() {
+					alert('enter error');
+				},
+				complete: function(xhr, textStatus) {
+					if(textStatus === 'timeout') {
+						//处理超时的逻辑
+						alert('请求超时,请重试');
+					};
+				}
+			});
+        },
+        
+    };
+    return picture;
+});
\ No newline at end of file

public/resource/template/picture_add_template_tpl.html

+<script id="picture_add_template_tpl" type="text/template">
+    [% if(it != '') { %]
+    [% for(var item in it){ %]
+    <tr class="text-center">
+        <td>[%= it[item]['create_time'] %]</td>
+       <!-- <td>[%= it[item]['img_file_path'] %]</td>-->
+        <td>
+        	<img height="60px" width="100px" src='[%= it[item]['img_file_path'] %]' class="diagram-image J_preview"  data-bimg='[%= it[item]['img_file_path'] %]'>
+        </td>
+        [% if ( it[item]['img_type'] == 2  ){ %] 
+        	<td>人群图</td>
+        	<td>-</td>
+        [% } else if ( it[item]['img_type'] == 1 ) { %]
+       		<td>室内图</td>
+        	<td>[%= it[item]['label'] %] </td>
+        [% } else if ( it[item]['img_type'] == 0) { %]
+        	<td>室外图</td>
+        	<td>[%= it[item]['label'] %] </td>
+        [% }else { %]
+        	<td>-</td>
+        	<td>-</td>
+        [% } %]
+        <td>
+            <a class="btn1 btn-success is_show" data-toggle="modal" data-id='[%= it[item]["id"] %]' data-target="#modal-show">查看</a>
+			<a class="btn1 btn-danger announcement-del" href="#modal-delete"  data-toggle="modal" data-id='[%= it[item]["id"] %]'>删除</a>
+        </td>
+    </tr>
+    [% } %]
+    [% }else{ %]
+    <tr>
+        <td colspan="8" style="text-align:center;"> 暂无数据</td>
+    </tr>
+    [% } %]
+</script> 
\ No newline at end of file