Skip to content

T
tl_estate
Commit 8ded75ae authored by xinyuandu's avatar xinyuandu
Browse files
Options

修改

parent 729af618
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 110 deletions
application/index/view/picture/picture_show.html
View file @ 8ded75ae
{layout name="global/frame_tpl" /} {layout name="global/frame_tpl" /}
<input type="hidden" class="page-load" id="pictureShow" /> <input type="hidden" class="page-load" id="pictureShow" />
<style> <style>
.p-a-0 {
padding:0px;
}
.p-l-15 {
padding-left:15px !important;
}
.no-border{
border : none;
}
</style> </style>
<div id="page-content-wrapper"> <div id="page-content-wrapper">
<div class="container"> <div class="container">
...@@ -27,7 +35,7 @@ ...@@ -27,7 +35,7 @@
<tr> <tr>
<td colspan="10"> <td colspan="10">
<form id="form_search"> <form id="form_search">
<div class="col-xs-12 ld-Marheight" style="padding:0px"> <div class="col-xs-12 ld-Marheight p-a-0">
<select class="form-control btn2" id="shop_type"> <select class="form-control btn2" id="shop_type">
<option value="-1">业态标签</option> <option value="-1">业态标签</option>
<option value="0">商场美食</option> <option value="0">商场美食</option>
...@@ -39,7 +47,7 @@ ...@@ -39,7 +47,7 @@
<option value="1">室内图</option> <option value="1">室内图</option>
<option value="2">室外图</option> <option value="2">室外图</option>
</select> </select>
<span class="btn btn-info btn3 ld-Marheight" id="search">筛选</span> <span class="btn btn-info btn3 " id="search">筛选</span>
</div> </div>
</form> </form>
</td> </td>
...@@ -80,7 +88,7 @@ ...@@ -80,7 +88,7 @@
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
× ×
</button> </button>
<h4 class="modal-title"> 新增商铺图片 </h4> <h4 class="modal-title"> 新增图片(上限:10张) </h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="col-xs-12 picture-area p-a-0"> <div class="col-xs-12 picture-area p-a-0">
...@@ -90,9 +98,9 @@ ...@@ -90,9 +98,9 @@
<div class="col-xs-9 p-a-0"> <div class="col-xs-9 p-a-0">
<select class="form-control" id="leased"> <select class="form-control" id="leased">
<option value="-1">图片类型</option> <option value="-1">图片类型</option>
<option value="0">人群图</option> <!--<option value="0">人群图</option>
<option value="1">室内图</option> <option value="1">室内图</option>
<option value="2">室外图</option> <option value="2">室外图</option>-->
</select> </select>
</div> </div>
</div> </div>
...@@ -110,10 +118,10 @@ ...@@ -110,10 +118,10 @@
<label>图片:</label> <label>图片:</label>
</div> </div>
<div class="col-xs-9 p-a-0"> <div class="col-xs-9 p-a-0">
<div class="file-upload-area" style="padding-left:15px!important"> <div class="file-upload-area p-l-15">
<ul class="img-pre-ul" id="fujian_ul"></ul> <ul class="img-pre-ul" id="fujian_ul"></ul>
<div class="btn-area"> <div class="btn-area">
<input class="btn btn-default" type="file" id="file_input" class="" data-limittop="10" /> <!--修改上传文件的最大数字--> <input class="btn btn-default" type="file" id="file_input" data-limittop="10" /> <!--修改上传文件的最大数字-->
<button class="btn btn-default">选择图片</button> <button class="btn btn-default">选择图片</button>
</div> </div>
<div class="col-xs-12 img_area"> <div class="col-xs-12 img_area">
...@@ -123,10 +131,81 @@ ...@@ -123,10 +131,81 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer" style="border : none "> <div class="modal-footer no-border" >
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</div> <button type="button" class="btn btn-primary" id="save">保存</div>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal --> </div><!-- /.modal -->
</div> </div>
<div class="modal fade" id="modal-show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title"> 查看</h4>
</div>
<div class="modal-body">
<div class="col-xs-12 picture-area p-a-0">
<div class="col-xs-3 p-a-0">
<label>图片类型:</label>
</div>
<div class="col-xs-9 p-a-0">
<span id="picture_type_show"></span>
</div>
</div>
<div class="col-xs-12 yetai-area p-a-0">
<div class="col-xs-3 p-a-0">
<label>业态标签:</label>
</div>
<div class="col-xs-9 p-a-0" id="yetai_id_show">
</select>
</div>
</div>
<div class="col-xs-12 p-a-0">
<div class="col-xs-3">
<label>图片:</label>
</div>
<div class="col-xs-9 p-a-0">
<div class="file-upload-area p-l-15">
<!--<ul class="img-pre-ul" id="fujian_ul"></ul>
<div class="btn-area">
<input class="btn btn-default" type="file" id="file_input" class="" data-limittop="10" /> --> <!--修改上传文件的最大数字-->
<!--<button class="btn btn-default">选择图片</button>
</div>-->
<div class="col-xs-12 img_area">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer no-border" >
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"> 删除</h4>
</div>
<div class="modal-body">
<div class="modal-body" id="del_msg">确认删除吗？</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="confirm_delete">删除</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
public/resource/js/pictureShow.js
View file @ 8ded75ae
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
* time : 2018/08/30 * time : 2018/08/30
* about : 商铺图库 * about : 商铺图库
*/ */
define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','ckfinder','ckfinderStart','pagination','bootstrapJs'], function (doT, template) { define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','ckfinder','ckfinderStart','pagination','bootstrapJs'], function (doT, template) {
picture = { picture = {
pageNo: 1, /*第几页*/ pageNo: 1, /*第几页*/
...@@ -16,6 +15,7 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c ...@@ -16,6 +15,7 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
ajaxObj:'', ajaxObj:'',
stopstatus:true, stopstatus:true,
boxphoto:'', boxphoto:'',
lastPicture:false,//由于接口的调用次数由图片的数量而决定,所以只有最后一次接口会出现弹跳框
init: function () { init: function () {
//初始化dot //初始化dot
$ ("body").append (template); $ ("body").append (template);
...@@ -34,38 +34,56 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c ...@@ -34,38 +34,56 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
$('#add_picture').click(function(){ $('#add_picture').click(function(){
}); });
$(document).delegate("#confirm_delete", "click", function(e) {
e.preventDefault();
e.stopPropagation();
checkLogin();
picture.delBusiness();
});
$('#modal').on('show.bs.modal',function(){ $('#modal').on('show.bs.modal',function(){
picture.getYetai(); picture.getYetai();
}); });
$('#modal').on('hide.bs.modal',function(){ $('#modal').on('hide.bs.modal',function(){
$('#yetai_id').empty(); $('#yetai_id').empty();
}); });
//业态选中与取消事件;
$(document).on('click','.yetai_checkbox',function(e){ $(document).on('click','.yetai_checkbox',function(e){
if ( $(this).hasClass("isCheck") ){ if ( $(this).hasClass("isCheck") ){ //取消选中
$(this).css("background-color","#FFFFFF"); $(this).css("background-color","#FFFFFF");
$(this).removeClass("isCheck"); $(this).removeClass("isCheck");
} else { } else { //选中
$(this).css("background-color","royalblue"); $(this).css("background-color","#47FFFF");
$(this).addClass("isCheck"); $(this).addClass("isCheck");
} }
console.log($(this).html())
}); });
//新增图片存储触发事件
$('#save').click(function(){ $('#save').click(function(){
var aaa = '' ; var yetai_str = '' ;
$('.yetai_checkbox').each(function(){ $('.yetai_checkbox').each(function(){
if ( $(this).hasClass("isCheck") ){ if ( $(this).hasClass("isCheck") ){
aaa += $(this).html() +","; yetai_str += $(this).html() +",";
} }
}); });
console.log(aaa.substr(0,aaa.length-1)); var pictures = $('#modal').find('.img_area').find('.pictures');
picture.savePicture(aaa.substr(0,aaa.length-1));
//有几张图片就保存几次
$('#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(){ $('#modal').find('select#leased').change(function(){
if ( $('#modal').find('select#leased option:selected').val() == 0){ if ( $('#modal').find('select#leased option:selected').val() == 2){
$('.yetai-area').hide(); $('.yetai-area').hide();
} else if ( $('#modal').find('select#leased option:selected').val() == 1){ } else if ( $('#modal').find('select#leased option:selected').val() == 1){
$('.yetai-area').show(); $('.yetai-area').show();
...@@ -82,47 +100,7 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c ...@@ -82,47 +100,7 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
_fileNum = _this.parent().next().find('.delet-pic-btn').length; //根据删除按钮的个数，确定文件的个数 _fileNum = _this.parent().next().find('.delet-pic-btn').length; //根据删除按钮的个数，确定文件的个数
if(_limitTop && (_fileNum < _limitTop)) { if(_limitTop && (_fileNum < _limitTop)) {
var formData = new FormData(); picture.uploadImg(_this);
formData.append('type', 'business_school_file');
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;
/*_this.parent().next().prepend('<li class="pdf-pre-li"><a data-filename="{3}" class="pdf-pre-a" href="javascript:;" title="保存之后才可以点击下载">{2}</a><a href="javascript:;" class="delet-pic-btn">删除</a></li>'.stringFormatObj({
'0': _url,
'1': decodeURI(_url.slice(_url.lastIndexOf('/') + 1)),
'2': dealFileName(decodeURI(_url.slice(_url.lastIndexOf('/') + 1))),//dealFileName不要忘记
'3': _data.data.img_path
}));*/
var tag = '' ;
tag += '<div class="col-xs-3">';
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('请求超时,请重试');
};
}
});
} else { } else {
alert('上传上限为 ' + _limitTop); alert('上传上限为 ' + _limitTop);
return false; return false;
...@@ -145,31 +123,14 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c ...@@ -145,31 +123,14 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
}, },
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('文件删除成功');
}
}
});
},
getList: function (pageNo) { getList: function (pageNo) {
picture.pageNo = pageNo; picture.pageNo = pageNo;
var params = {}; var params = {};
params.pageNo = picture.pageNo; params.pageNo = picture.pageNo;
params.pageSize = picture.pageSize; params.pageSize = picture.pageSize;
params.type = $('#shop_type option:selected').val(); params.type = $('#shop_type option:selected').val();
params.yetai = $('#yt_type option:selected').val(); params.yetai = $('#yt_type option:selected').val();
$.ajax ({ $.ajax ({
url: '/index/bindPhoneList',//获取列表 url: '/index/bindPhoneList',//获取列表
type: 'GET', type: 'GET',
...@@ -186,67 +147,190 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c ...@@ -186,67 +147,190 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
$ ("#pagediv").pagination ({ $ ("#pagediv").pagination ({
length: data.data.total, length: data.data.total,
current: pageNo, current: pageNo,
every: phonelist.pageSize, every: picture.pageSize,
onClick: function (el) { onClick: function (el) {
phonelist.getList (el.num.current); picture.getList (el.num.current);
} }
}); });
} }
}); });
}, },
savePicture : function(data_yetai){
var yetai = $('#modal').find('select#leased option:selected').val() == 0 ? '' : data_yetai; //查看功能获取数据
getDataByParams : function(){
var params = {};
var url = '' ;
$.ajax ({
url: url,//获取列表
type: 'GET',
async: true,
data: params,
dataType: 'json',
success: function (data) {
$('#picture_type_show').text();
var str_yetai = '' ;
$.each(data.data.yetai, 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" 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>';
}
});
$('#yetai_id_show').append(tag);
}
});
},
//获取业态
getYetai: function() {
$.ajax({
url: '/api/getImageTypeLabel',
type: 'GET',
async: true,
data: {
"pageSize": 1000
},
dataType: 'json',
success: function(data) {
if(data.code == 200 && data.data != null) {
var str_yetai = '';
var img_type ='<option value="-1">图片类型</option>' ;
$('#yetai_id').empty();
$('#leased').empty();
//加载图片类型下拉框
$.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>';
}
});
//加载业态标签
$.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>';
}
});
$('#yetai_id').append(str_yetai);
$('#leased').append(img_type);
}
}
});
},
//执行数据保存的操作
savePicture : function(data_yetai,pictureName){
var yetai = $('#modal').find('select#leased option:selected').val() == -1 ? '' : data_yetai;
var params = { var params = {
'yetai' : yetai, 'img_type' : $('#modal').find('select#leased option:selected').val() ,
'type' : $('#modal').find('select#leased option:selected').val() 'label' : yetai,
'img_name' : pictureName
}; };
var _fujianObj = $('#img_area').find('div>a.delet-pic-btn'); //附件看的是删除按钮的个数
if ( _fujianObj.length > 0 ){ //判断附件存在,同时,附件可能存在0到5个
for ( var i= 0 ; i < _fujianObj.length ; i++ ){
var one_name = _fujianObj[i].getAttribute('data-filename'); //附件取得是data-filename
params['annex_file_name['+i+']'] = one_name;
}
}
$.ajax({ $.ajax({
url: '/api/filtrateCondition', url: '/api/addImageDepot',
type: 'GET', type: 'GET',
async: true, async: true,
data: params, data: params,
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
if(data.code == 200 && data.data != null) { if(data.code == 200 && data.data != null) {
alert("图片上传成功"); if ( picture.lastPicture ){
alert("图片上传成功");
picture.lastPicture = false ;
}
} }
} }
}); });
}, },
getYetai: function() { //删除表格的行(单行删除)
delBusiness: function() {
$.ajax({ $.ajax({
url: '/api/filtrateCondition', url: '/index/houseDel',
type: 'GET', type: 'POST',
async: true, async: true,
data: { data: {
"pageSize": 1000 "id": business.id
}, },
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
if(data.code == 200 && data.data != null) { if(data.code == 200) {
var str_yetai = ''; alert('删除成功');
$('#yetai_id').empty(); $("#modal-delete").modal('hide');
//业态筛选 } else {
$.each(data.data.yetai, function(i, item) { $("#del_msg").html('<span style="color: red">删除失败!</span>');
if(item!='全部'){ }
str_yetai +='<div class="col-xs-3" style="padding:0px;text-align:center;margin:8px 0px;"><div class="yetai_checkbox" style="width:80px;border:1px solid black ; background-color : #ffffff;" >'+item+'</div></div>'; }
} });
}); },
$('#yetai_id').append(str_yetai);
//图片删除事件
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; return picture;
}); });
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment