Commit 8e946569 authored by xinyuandu's avatar xinyuandu

商铺图库

parent 726b76c2
/**
* 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
<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
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