txwx_mobile/teacher_classroom/js/app.js

$(function(){
	gobalData.token = $.cookie("token");
	gobalData.sm_id = $.cookie("sm_id");
	preLoadingInit();
	getTableListData(appInit);
	getClassifyData(headerClassifyInit);
	headerSearchInit();
})
function preLoadingInit(){
	var clientHeight=$(window).height();
	var loadingheight=clientHeight-100;
	var text='<div style="height:'+loadingheight+'px;">'
		+'<div class="col-sm-2">'
		+'<div class="sp sp-circle"></div>'
		+'<h5 class="preloading">努力加载中...</h5>'
		+'</div>'
		+'</div>';
	$("#root").html(text);
}

function errorLoadingInit(){
	var clientHeight=$(window).height();
	var loadingheight=clientHeight-100;
	var text='<div style="height:'+loadingheight+'px;">'
		+'<div style="text-align:center;padding-top:30px;color:#606266;font-size:14px;">'
		+'出错了，请下滑刷新页面'
		+'</div>'
		+'</div>';
	$("#root").html(text);
}

function appInit(data){
	var clientWidth=$(window).width();
	var imageWidth=clientWidth*0.5*0.9;
	var imageHeight=(imageWidth/16)*9;
	var text='';
    	var len=data.length;
    	for(var i=0;i<len;i++){
    		var item=data[i];
    		//console.log(item);
    		text+='<li id="courseItem_'+item.spec_id+'" class="mui-table-view-cell animated fadeIn">'
        	+'<div style="width:375px;">'
        	+'<div class="listImageWrapper">'
        	+'<img src="'+item.course_img+'" alt="" class="listImage"/>'
        	+'</div>'
        	+'<div class="listTitleWrapper">'
        	+'<div class="listTitle">'
        	+item.course_name
        	+'</div>'
        	+'<div class="teacherNameWrapper">'
        	+'<div class="teacherName">'
        	+item.teacher_name
        	+'</div>'
        	+'</div>'
        	+'<div class="teacherSchoolWrapper">'
        	+'<div class="teacherSchool">'
        	+item.teacher_organization
        	+'</div>'
        	+'</div>'
        	+'<div style="clear:both;"></div>'
        	+'<div class="courseClickWrapper">'
        	+'<div class="courseClick">浏览：'
        	+item.click
        	+'</div>'
        	+'</div>'
        	+'</div>'
        	+'<div style="clear:both;"></div>'
        	+'</div>'
    		+'</li>';
    		
    		
    		/*text+='<div style="width:50%;float:left;padding:5px 0px 5px 0px;background:#fff;">'
            +'<div id="courseItem_'+item.spec_id+'" '
            +'style="width:96%;margin:0 auto;">'
            +'<div style="width:100%;height:100px;border:solid #DCDFE6 1px;">'
            +'<img src="'+item.course_img+'" alt="" '
            +'style="width:100%;height:100px;"/>'
            +'</div>'
            +'</div>'
            +'</div>';*/
    	}
	$("#root").html(text);
	mui.init({
  		pullRefresh : {
	    container:refreshContainer,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
	    down : {
	      height:50,//可选,默认50.触发下拉刷新拖动距离,
	      auto: false,//可选,默认false.首次加载自动下拉刷新一次
	      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
	      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
	      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
	      callback :function(){
	      	gobalData.listPage=1;
	      	var _this=this;
	      	setTimeout(function(){
	      		$("#root").empty();
	      		preLoadingInit();
	      		getTableListData(appInit);
	      		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			},1500);
	      }
	    },
	    up : {
	      height:50,//可选.默认50.触发上拉加载拖动距离
	      auto:false,//可选,默认false.自动上拉加载一次
	      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
	      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	      callback :function(){
	      	console.log(gobalData.listPage,gobalData.totalListPage);
	      	//mui('#refreshContainer').pullRefresh().refresh(true);
	      	if(gobalData.listPage<gobalData.totalListPage){
				gobalData.listPage=Number(gobalData.listPage)+1;
				var _this=this;
				setTimeout(function(){
					_this.endPullupToRefresh(false);
					getTableListData(insertMoreData);
				},1500);
			}else{
				console.log("当前页:"+gobalData.listPage);
				var _this=this;
				setTimeout(function(){
					_this.endPullupToRefresh(true);
					//mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				},1500);
			}
			
	      } 
	    }
	  }
  	});
  	
  	/*mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
	  //获取id
	  var id = this.getAttribute("id");
	  //传值给详情页面，通知加载新数据
	  //mui.fire(detail,'getDetail',{id:id});
	  //打开新闻详情
	  mui.openWindow({
	    id:'detail',
	    url:'detail.html?id='+id
	  });
	})*/
	
	for(var j=0;j<len;j++){
    		var handleItem=data[j];
    		var target_id=handleItem.spec_id;
    		var _target="courseItem_"+target_id;
    		(function (_target,target_id){
    			$("#"+_target).on("tap",function(){
    				window.location.href='detail.html?id='+target_id;
    			});
    		})(_target,target_id);
    	}
}


function insertMoreData(data){
	var clientWidth=$(window).width();
	var imageWidth=clientWidth*0.5*0.9;
	var imageHeight=(imageWidth/16)*9;
	var text='';
    	var len=data.length;
    	for(var i=0;i<len;i++){
    		var item=data[i];
    		text+='<li id="courseItem_'+item.spec_id+'" class="mui-table-view-cell animated fadeIn">'
        	+'<div style="width:375px;">'
        	+'<div class="listImageWrapper">'
        	+'<img src="'+item.course_img+'" alt="" class="listImage"/>'
        	+'</div>'
        	+'<div class="listTitleWrapper">'
        	+'<div class="listTitle">'
        	+item.course_name
        	+'</div>'
        	+'<div class="teacherNameWrapper">'
        	+'<div class="teacherName">'
        	+item.teacher_name
        	+'</div>'
        	+'</div>'
        	+'<div class="teacherSchoolWrapper">'
        	+'<div class="teacherSchool">'
        	+item.teacher_organization
        	+'</div>'
        	+'</div>'
        	+'<div style="clear:both;"></div>'
        	+'<div class="courseClickWrapper">'
        	+'<div class="courseClick">浏览：'
        	+item.click
        	+'</div>'
        	+'</div>'
        	+'</div>'
        	+'<div style="clear:both;"></div>'
        	+'</div>'
    		+'</li>'
    		/*text+='<div style="width:50%;float:left;padding:5px 0px 5px 0px;background:#fff;">'
            +'<div id="courseItem_'+item.spec_id+'" '
            +'style="width:96%;margin:0 auto;">'
            +'<div style="width:100%;height:100px;border:solid #DCDFE6 1px;">'
            +'<img src="'+item.course_img+'" alt="" '
            +'style="width:100%;height:100px;"/>'
            +'</div>'
            +'</div>'
            +'</div>';*/
    	}
	$("#root").append(text);
	for(var j=0;j<len;j++){
    		var handleItem=data[j];
    		(function (handleItem){
    			var target_id=handleItem.spec_id;
    			var _target="courseItem_"+target_id;
    			$("#"+_target).on("tap",function(){
    				window.location.href='detail.html?id='+target_id;
    			});
    		})(handleItem);
    	}
}

/**分类 */
function headerClassifyInit(data){
	$("#headerClassify").on("tap",function(){
		$("#popularModel").hide();
        $("#cancelSearch").fadeOut();
        $("#root").show();
		$("#classifyContentModel").slideToggle();
	});
	
	$("#classifyContentModel").empty();
	var type_1_data=data.type1;
	gobalData.classifyType1=type_1_data;
	var type_1_text='';
	for(var i in type_1_data){
		var item1=type_1_data[i];
		type_1_text+='<div id="classify1_'+item1.id+'" class="headerClassifyContentItem" '
			+'onclick="handleClassify1Item(classify1_'+item1.id+')">'+item1.name+'</div>';
	}
	
	var type_2_data=data.type2;
	gobalData.classifyType2=type_2_data;
	var type_2_text='';
	for(var j in type_2_data){
		var item2=type_2_data[j];
		type_2_text+='<div id="classify2_'+item2.id+'" class="headerClassifyContentItem" '
			+'onclick="handleClassify1Item(classify2_'+item2.id+')">'+item2.name+'</div>';
	}
	
	var text='<div>'
		/**分类一 */
		+'<div style="padding-top:10px;padding-bottom:10px;">'
        +'<div class="headerClassifyContentTitle">分类一</div>'
        +'<div>'
        +type_1_text
        +'<div style="clear:both;"></div>'
        +'</div>'
        +'</div>'
        /**分类二 */
       +'<div style="padding-top:10px;padding-bottom:10px;">'
        +'<div class="headerClassifyContentTitle">分类二</div>'
        +'<div>'
        +type_2_text
        +'<div style="clear:both;"></div>'
        +'</div>'
        +'</div>'
        /**按钮 */
       	+'<div style="width:355px;margin:0 auto;padding-top:15px;padding-bottom:20px;text-align:center;">'
	    +'<button id="dealClasssifyBtn" type="button" class="mui-btn mui-btn-primary" '
	    +'style="width:120px;border:solid #409EFF 1px;border-radius:3px;color:#fff;background:#409EFF;">完成</button>'
	    +'</div>'
	    
		+'</div>';
	$("#classifyContentModel").append(text);
	$("#dealClasssifyBtn").on("click",function(){
        gobalData.listPage=1;
        gobalData.totalListPage=0;
        $("#root").empty();
        $("#classifyContentModel").slideUp();
        getTableListData(appInit);
        $("#root").fadeIn();
        $("#popularModel").hide();
        $("#cancelSearch").fadeOut();
    });
}

function handleClassify1Item(target){
        var _id=target.id;
        if(_id && _id!=''){
            var tag=_id.indexOf("_");
            if(tag>=0){
                idArr=_id.split("_");
                var active_type=idArr[0];
                var active_id=idArr[1];
                if(active_type=='classify1'){
                		var classifyData=gobalData.classifyType1;
	                for(var i in classifyData){
	                    var item=classifyData[i];
	                    var idItem=item.id;
	                    if(idItem==active_id){
	                        if(idItem==gobalData.selectedType1){
	                            gobalData.selectedType1="";
	                            $("#classify1_"+idItem).removeClass("activeSelected");
	                        }else{
	                            gobalData.selectedType1=idItem;
	                            $("#classify1_"+idItem).addClass("activeSelected");
	                        }
	                    }else{
	                        $("#classify1_"+idItem).removeClass("activeSelected");
	                    }
	                }
                }
                if(active_type=='classify2'){
                		var classifyData=gobalData.classifyType2;
	                for(var i in classifyData){
	                    var item=classifyData[i];
	                    var idItem=item.id;
	                    if(idItem==active_id){
	                        if(idItem==gobalData.selectedType2){
	                            gobalData.selectedType2="";
	                            $("#classify2_"+idItem).removeClass("activeSelected");
	                        }else{
	                            gobalData.selectedType2=idItem;
	                            $("#classify2_"+idItem).addClass("activeSelected");
	                        }
	                    }else{
	                        $("#classify2_"+idItem).removeClass("activeSelected");
	                    }
	                }
                }
                
            }
        }
        
    }


function headerSearchInit(){
	popularModelInit();
 	//搜索框获得焦点
    $("#searchInput").on("focus",function(){
        $("#root").hide();
        $("#popularModel").fadeIn();
        $("#cancelSearch").fadeIn();
    });
    $("#cancelSearch").on("tap",function(){
        $("#popularModel").hide();
        $("#root").fadeIn();
        $("#cancelSearch").hide();
    });
    
    //点击搜索
    $("#searchIcon").on("tap",function(){
        var searchInputVal=$("#searchInput").val();
        var _searchInputVal=searchInputVal.trim();
        gobalData.activePopularRecommend="";
        gobalData.activePopularSearch="";
        gobalData.activeSearchVal=_searchInputVal;
        $("#popularModel").hide();
        $("#root").fadeIn();
        $("#cancelSearch").hide();
        gobalData.listPage=1;
        gobalData.totalListPage=0;
        $("#root").empty();
       	getTableListData(appInit);
    });
}

function popularModelInit(){
    $("#popularModel").empty();
    var text='<div style="padding-bottom:20px;">'
        //热门推荐
        +'<div>'
        +'<div class="popularTitle">热门推荐</div>'
        +'<div id="popularRecommendModel" style="width:355px;margin:0 auto;">'
        +'</div>'
        +'</div>'
        //热门搜索
        +'<div>'
        +'<div class="popularTitle">热门搜索</div>'
        +'<div id="popularSearchModel" style="width:355px;margin:0 auto;">'
        +'</div>'
        +'</div>'

        +'</div>';
    $("#popularModel").append(text);
    getPopularRecommendData();
    getPopularSearchData();
    
}


/**获取热门标签数据 */
    function getPopularRecommendData(){
        $("#popularRecommendModel").empty();
        var totalURL=gobalData.link;
        var requestURL=totalURL.popular_recommend;
        $.ajax({
            url:requestURL,
            type:'POST',
            dataType:'json',
            data:{
                limit:10,
	            token:gobalData.token,
	            sm_id:gobalData.sm_id,
	            token:gobalData.token,
	            sm_id:gobalData.sm_id
            },
            success:function(res){
                if(res.code=="1"){
                    var _data=res.data;
                    var text='';
                    var num=0;
                    for(var i in _data){
                        var _item=_data[i];
                        var item=_item.trim();
                        if(item && item!=''){
                        		num++;
	                        text+='<div id="popularRecommendItem_'+num+'" class="popularItem" '
	                            +'onclick="handlePopularRecomend(popularRecommendItem_'+num+')">'
	                            +item
	                            +'</div>';
                        }
                        
                    }
                    text+='<div style="clear:both;"></div>';
                    $("#popularRecommendModel").append(text);
                }
            }
        });
    }
    
function getPopularSearchData(){
        $("#popularSearchModel").empty();
        var totalURL=gobalData.link;
        var requestURL=totalURL.popular_search;
        $.ajax({
            url:requestURL,
            type:'POST',
            dataType:'json',
            data:{
                limit:10,
	            token:gobalData.token,
	            sm_id:gobalData.sm_id
            },
            success:function(res){
                if(res.code=="1"){
                    var _data=res.data;
                    var text='';
                    var num=0;
                    for(var i in _data){
                        var _item=_data[i];
                        var itemKeyword=_item.keyword.trim();
                        if(itemKeyword && itemKeyword!=''){
                        		num++;
		                    text+='<div id="popularSearchItem_'+num+'" class="popularItem" '
		                        +'onclick="handlePopularSearch(popularSearchItem_'+num+')">'
		                        +itemKeyword
		                        +'</div>';
                        }
                    }
                    text+='<div style="clear:both;"></div>';
                    $("#popularSearchModel").append(text);
                }
            }
        });
    }


	function handlePopularRecomend(target){
        var _id=target.id;
        if(_id && _id!=''){
            var val=$("#"+_id).text();
            if(val && val!=''){
                gobalData.activePopularRecommend=val;
                gobalData.activePopularSearch="";
                gobalData.activeSearchVal="";
                $("#popularModel").hide();
                $("#root").fadeIn();
                $("#cancelSearch").fadeOut();
                gobalData.listPage=1;
                gobalData.totalListPage=0;
                gobalData.courseLoading = false;
                $("#root").empty();
                getTableListData(appInit);
            }
        }
    }
	
	function handlePopularSearch(target){
        var _id=target.id;
        if(_id && _id!=''){
            var val=$("#"+_id).text();
            if(val && val!=''){
                gobalData.activePopularRecommend="";
                gobalData.activePopularSearch=val;
                gobalData.activeSearchVal="";
                $("#popular").hide();
                $("#root").fadeIn();
                $("#cancelSearch").fadeOut();
                gobalData.listPage=1;
                gobalData.totalListPage=0;
                gobalData.courseLoading = false;
                $("#root").empty();
                getTableListData(appInit);
            }
        }
    }