194 lines
8.3 KiB
JavaScript
194 lines
8.3 KiB
JavaScript
(function(){
|
||
X.pageLogic['screen'] = {
|
||
init : function(){
|
||
var width = window.innerWidth - 270;
|
||
$(".screen-box").css("width",width+"px");
|
||
|
||
// 显示隐藏添加条件按钮
|
||
$(".screen-right-box .img").click(function(){
|
||
if($(".screen-buttom-box").css('display') == 'block'){
|
||
$(".screen-buttom-box").hide();
|
||
$(".screen-left-qei").css('bottom','0px');
|
||
$(".screen-right-box .img").css('transform','rotate(180deg)');
|
||
}else {
|
||
$(".screen-buttom-box").show();
|
||
$(".screen-left-qei").css('bottom','24px');
|
||
$(".screen-right-box .img").css('transform','rotate(360deg)');
|
||
}
|
||
});
|
||
|
||
//清空按钮
|
||
$(".screen-right-box .qingkong").click(function(){
|
||
layer.closeAll();
|
||
});
|
||
|
||
$(".screen-left-box .screen-left-qei").click(function(){
|
||
if($(this).html() == "且"){
|
||
$(this).html("或");
|
||
}else {
|
||
$(this).html("且");
|
||
}
|
||
})
|
||
|
||
var dataid = 1;//给添加的数据一个id，方便后面好对应数据
|
||
//默认开始时有一个数据
|
||
var data = [];
|
||
|
||
// {
|
||
// 'dataid': 0,
|
||
// 'conditionone': '来源渠道' ,
|
||
// 'conditiononeid': '1' ,
|
||
// 'conditiontwo':'等于' ,
|
||
// 'conditiontwotime': true ,
|
||
// 'conditiontwotimestart':'0000000000',
|
||
// 'conditionthree':'' }
|
||
//初始一个数据
|
||
// X.laytpldata ("#screen-con-box-dot" ,data,".screen-con-box");
|
||
// X.laydropdown(rightboxid,arr,function(d){
|
||
// console.log(d);
|
||
// });
|
||
updatascreencon();
|
||
function updatascreencon(){
|
||
var index = dataid;
|
||
var Divcon = `<div class="screen-con-bg" id="screen-con-bg`+index+`">
|
||
<div class="left-type" id="left-type`+index+`" data-id="left-type`+index+`">
|
||
<img src="./static/img/zhanghu.png">
|
||
<span>来源渠道</span>
|
||
</div>
|
||
|
||
<div class="content-type">
|
||
<select class="screen-content-sel" data-id="screen-content-sel`+index+`" id="screen-content-sel`+index+`" name="interest" lay-filter="aihao">
|
||
<option>等于</option>
|
||
<option>不等于</option>
|
||
</select>
|
||
|
||
<div class="screen-content-time-box" id="screen-content-time-box`+index+`">
|
||
<img src="./static/img/rqi.png">
|
||
<input class="timechoice" id="time-box-timechoice`+index+`" data-id="time-box-timechoice`+index+`" value="2021-03-11 ~ 2021-04-09" readonly="readonly">
|
||
</div>
|
||
</div>
|
||
<div class="right-box" id="right-box`+index+`">
|
||
<input type="type" class="screen-right-txt" data-id="`+index+`" placeholder="输入条件">
|
||
</div>
|
||
<div class="screen-del" data-id="screen-del`+index+`"></div>
|
||
</div>`
|
||
$(".screen-con-box").append(Divcon);
|
||
var rightboxid = "#right-box"+index+" .screen-right-txt";
|
||
X.laydropdown(rightboxid,X.DATA.search.condition,function(d){
|
||
$(rightboxid).val(d.title);
|
||
});
|
||
// 添加数据
|
||
var arr = {
|
||
'dataid':dataid++,
|
||
'conditionone': '来源渠道' ,
|
||
'conditiononeid': '1' ,
|
||
'conditiontwo':'等于' ,
|
||
'conditiontwotime': true ,
|
||
'conditiontwotimestart':'0000000000',
|
||
'conditionthree':''
|
||
};
|
||
data.push(arr);
|
||
X.daterender("#time-box-timechoice"+index);
|
||
if(data.length > 1){
|
||
$(".screen-left-qei").show();
|
||
}
|
||
}
|
||
|
||
//条件添加按钮
|
||
$(".screen-buttom-box .screen-buttom").click(function(){
|
||
updatascreencon();
|
||
});
|
||
|
||
X.daterender("#time-box-timechoice1");
|
||
|
||
$(document).on("click",".screen-con-bg .left-type",function(){
|
||
var obj = $(this);
|
||
var offset = obj.offset();
|
||
//点击按钮，数据，向左偏移，向右偏移
|
||
X.querycriteriapop(X.DATA.search,'category',offset.left,offset.top+obj.height(),function(val){
|
||
var id = obj.attr("data-id");
|
||
$("#"+id+" "+"span").html(val.title); //修改筛选项一
|
||
var idarr = id.split('type');
|
||
var index = idarr[1]; //获取到点击的第几个
|
||
data[index]['conditionone'] = val.title; //修改数组里面title的值
|
||
data[index]['conditiononeid'] = val.id;
|
||
if(val.type == "time"){
|
||
$("#screen-content-time-box"+index).show();//显示时间选择
|
||
$("#screen-content-sel"+index).hide();//隐藏下拉框
|
||
$("#right-box"+index).hide();//隐藏文本框
|
||
data[index]['conditiontwotimestart'] = $("#time-box-timechoice"+index).val();
|
||
}else {
|
||
$("#screen-content-time-box"+index).hide();//隐藏时间选择
|
||
$("#screen-content-sel"+index).show();//显示下拉框
|
||
var txtval = $("#screen-content-sel"+index).val();
|
||
if(txtval == 4 || txtval == 5 ){
|
||
$("#right-box"+index).hide();//隐藏文本框
|
||
}else {
|
||
$("#right-box"+index).show();//隐藏文本框
|
||
}
|
||
}
|
||
// console.log(data);
|
||
});
|
||
});
|
||
|
||
//下拉选项触发事件
|
||
$(".screen-content-sel").change(function(){
|
||
var val = $(this).val();
|
||
var dataid = $(this).attr("data-id");
|
||
var arr = dataid.split('sel');
|
||
var index = arr[1];
|
||
data[index]['conditiontwo'] = val;
|
||
// console.log(data);
|
||
});
|
||
|
||
//时间选择框数字发生改变
|
||
$('.screen-content-time-box .timechoice').bind('input propertychange', function() {
|
||
var txt = $(this).val()
|
||
var dataid = $(this).attr("data-id");
|
||
var arr = dataid.split('timechoice');
|
||
var index = arr[1];
|
||
data[index]['conditiontwotimestart'] = txt;
|
||
// console.log(data);
|
||
})
|
||
|
||
//文本框条件输入触发事件
|
||
$('.screen-right-txt').bind('input propertychange', function() {
|
||
var txt = $(this).val();
|
||
var index = $(this).attr("data-id");
|
||
data[index]['conditionthree'] = txt;
|
||
console.log(data);
|
||
})
|
||
|
||
//删除按钮
|
||
$(document).on("click",".screen-con-bg .screen-del",function(){
|
||
if(data.length > 1){
|
||
var dataid = $(this).attr('data-id');
|
||
var arr = dataid.split('del');
|
||
var index = arr[1];
|
||
for(let i in data){
|
||
if(index == data[i]['dataid']){
|
||
data.splice(i, 1);
|
||
$("#screen-con-bg"+index).remove();
|
||
}
|
||
}
|
||
if(data.length == 1){
|
||
$(".screen-left-box .screen-left-qei").hide();
|
||
}
|
||
}else {
|
||
layer.closeAll();
|
||
}
|
||
|
||
})
|
||
|
||
// 计算按钮
|
||
$(".screen-right-box .jisuan").click(function(){
|
||
console.log(data);
|
||
// 刷新看板里的数据暂时没有
|
||
|
||
|
||
})
|
||
|
||
}
|
||
};
|
||
})();
|