Skip to content

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

修改

parent 729af618
Show whitespace changes
Inline Side-by-side
Showing with 268 additions and 104 deletions
application/index/view/picture/picture_show.html
View file @ 8ded75ae
{layout name="global/frame_tpl" /}
<input type="hidden" class="page-load" id="pictureShow" />
<style>
.p-a-0 {
padding:0px;
}
.p-l-15 {
padding-left:15px !important;
}
.no-border{
border : none;
}
</style>
<div id="page-content-wrapper">
<div class="container">
......@@ -27,7 +35,7 @@
<tr>
<td colspan="10">
<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">
<option value="-1">业态标签</option>
<option value="0">商场美食</option>
......@@ -39,7 +47,7 @@
<option value="1">室内图</option>
<option value="2">室外图</option>
</select>
<span class="btn btn-info btn3 ld-Marheight" id="search">筛选</span>
<span class="btn btn-info btn3 " id="search">筛选</span>
</div>
</form>
</td>
......@@ -80,7 +88,7 @@
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title"> 新增商铺图片 </h4>
<h4 class="modal-title"> 新增图片(上限:10张) </h4>
</div>
<div class="modal-body">
<div class="col-xs-12 picture-area p-a-0">
......@@ -90,9 +98,9 @@
<div class="col-xs-9 p-a-0">
<select class="form-control" id="leased">
<option value="-1">图片类型</option>
<option value="0">人群图</option>
<!--<option value="0">人群图</option>
<option value="1">室内图</option>
<option value="2">室外图</option>
<option value="2">室外图</option>-->
</select>
</div>
</div>
......@@ -110,10 +118,10 @@
<label>图片:</label>
</div>
<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>
<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>
</div>
<div class="col-xs-12 img_area">
......@@ -123,10 +131,81 @@
</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-primary" id="save">保存</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</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 @@
* time : 2018/08/30
* about : 商铺图库
*/
define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','ckfinder','ckfinderStart','pagination','bootstrapJs'], function (doT, template) {
picture = {
pageNo: 1, /*第几页*/
......@@ -16,6 +15,7 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
ajaxObj:'',
stopstatus:true,
boxphoto:'',
lastPicture:false,//由于接口的调用次数由图片的数量而决定,所以只有最后一次接口会出现弹跳框
init: function () {
//初始化dot
$ ("body").append (template);
......@@ -34,38 +34,56 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
$('#add_picture').click(function(){
});
$('#modal').on('show.bs.modal',function(){
$(document).delegate("#confirm_delete", "click", function(e) {
e.preventDefault();
e.stopPropagation();
checkLogin();
picture.delBusiness();
});
$('#modal').on('show.bs.modal',function(){
picture.getYetai();
});
$('#modal').on('hide.bs.modal',function(){
$('#yetai_id').empty();
});
//业态选中与取消事件;
$(document).on('click','.yetai_checkbox',function(e){
if ( $(this).hasClass("isCheck") ){
if ( $(this).hasClass("isCheck") ){ //取消选中
$(this).css("background-color","#FFFFFF");
$(this).removeClass("isCheck");
} else {
$(this).css("background-color","royalblue");
} else { //选中
$(this).css("background-color","#47FFFF");
$(this).addClass("isCheck");
}
console.log($(this).html())
});
//新增图片存储触发事件
$('#save').click(function(){
var aaa = '' ;
var yetai_str = '' ;
$('.yetai_checkbox').each(function(){
if ( $(this).hasClass("isCheck") ){
aaa += $(this).html() +",";
yetai_str += $(this).html() +",";
}
});
console.log(aaa.substr(0,aaa.length-1));
picture.savePicture(aaa.substr(0,aaa.length-1));
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() == 0){
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();
......@@ -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; //根据删除按钮的个数，确定文件的个数
if(_limitTop && (_fileNum < _limitTop)) {
var formData = new FormData();
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('请求超时,请重试');
};
}
});
picture.uploadImg(_this);
} else {
alert('上传上限为 ' + _limitTop);
return false;
......@@ -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) {
picture.pageNo = pageNo;
var params = {};
params.pageNo = picture.pageNo;
params.pageSize = picture.pageSize;
params.type = $('#shop_type option:selected').val();
params.yetai = $('#yt_type option:selected').val();
$.ajax ({
url: '/index/bindPhoneList',//获取列表
type: 'GET',
......@@ -186,46 +147,48 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
$ ("#pagediv").pagination ({
length: data.data.total,
current: pageNo,
every: phonelist.pageSize,
every: picture.pageSize,
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;
var params = {
'yetai' : yetai,
'type' : $('#modal').find('select#leased option:selected').val()
};
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({
url: '/api/filtrateCondition',
//查看功能获取数据
getDataByParams : function(){
var params = {};
var url = '' ;
$.ajax ({
url: url,//获取列表
type: 'GET',
async: true,
data: params,
dataType: 'json',
success: function(data) {
if(data.code == 200 && data.data != null) {
alert("图片上传成功");
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/filtrateCondition',
url: '/api/getImageTypeLabel',
type: 'GET',
async: true,
data: {
......@@ -235,18 +198,139 @@ define (['doT', 'text!temp/phonelist_template_tpl.html', 'css!style/home.css','c
success: function(data) {
if(data.code == 200 && data.data != null) {
var str_yetai = '';
var img_type ='<option value="-1">图片类型</option>' ;
$('#yetai_id').empty();
//业态筛选
$.each(data.data.yetai, function(i, item) {
$('#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;"><div class="yetai_checkbox" style="width:80px;border:1px solid black ; background-color : #ffffff;" >'+item+'</div></div>';
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 = {
'img_type' : $('#modal').find('select#leased option:selected').val() ,
'label' : yetai,
'img_name' : pictureName
};
$.ajax({
url: '/api/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 ;
}
}
}
});
},
//删除表格的行(单行删除)
delBusiness: function() {
$.ajax({
url: '/index/houseDel',
type: 'POST',
async: true,
data: {
"id": business.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
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