buying/WebContent/static/tv/js/tv.js

var pageSize=3;
var flag=false;
/**
 *初始化、添加监听 
 */
 
$(document).ready(function(){
	document.onkeydown = function(event) {
		var evt = event ? event : (window.event ? window.event : null);
		return jumpPage(Event.mapping(evt));
	};
	document.onirkeypress = function(event) {
		var evt = event ? event : (window.event ? window.event : null);
		return jumpPage(Event.mapping(evt));
	};
	document.onsystemevent = function(event) {	
		var evt = event ? event : (window.event ? window.event : null);
		return jumpPage(Event.mapping(evt));
	};
	getMerchant();
});
function getMerchant(){
	mobile.ajaxPost(base+'/merchant/getAll',{},function(json){
		if(json.data&&json.data.length>0){
			var html=[];
			$.each(json.data,function(id,item){
				if(id==0){
					html.push('<div class="col-xs-4" data-id="'+item.id+'">');
				}else{
					html.push('<div class="col-xs-4" data-id="'+item.id+'">');
				}
				html.push('<div class="mui-card">');
				html.push('<div class="mui-card-header">');
				html.push('<img class="merchant-lazy" data-original="'+imgUrl+item.merchant_img1+'" style="width:100%;min-height:100%;">')
				html.push('</div>');
				html.push('<div class="mui-card-content">');
				html.push('<p class="product-name mui-ellipsis-2">'+item.merchant_name+'</p>');
				html.push('<p class="product-price items mt10">');
				html.push('<em class="item">'+item.visit_num+'<span class="fs24">人关注</span></em>');
				html.push('<span class="mui-btn mui-btn-primary">'+item.merchant_category_name+'</span>');
				html.push('</p>');
				html.push('</div>');
				html.push('</div>');
				html.push('</div>');
			});
			$("#tab0").html(html.join(""));
			$("img.merchant-lazy").lazyload({
				threshold : 400,
				effect: "fadeIn",
				placeholder: base+'/static/mobile/image/500.gif',
				skip_invisible : true
			});
			getProduct();
		}
	});
}

function getProduct(){
	mobile.ajaxPost(base+'/product/getAll',{},function(json){
		if(json.data&&json.data.length>0){
			var html=[];
			$.each(json.data,function(id,item){
				if(id==0){
					html.push('<div class="col-xs-4" data-id="'+item.id+'">');
				}else{
					html.push('<div class="col-xs-4" data-id="'+item.id+'">');
				}
				html.push('<div class="mui-card">');
				html.push('<div class="mui-card-header">');
				html.push('<img class="product-lazy" data-original="'+imgUrl+item.product_img_1+'" style="width:100%;min-height:100%;">')
				html.push('</div>');
				html.push('<div class="mui-card-content">');
				html.push('<p class="product-name mui-ellipsis-2">'+item.product_name+'</p>');
				html.push('<p class="product-price items mt10">');
				html.push('<em class="item"><b>¥</b>'+item.product_price+'<span class="del-line color3 ml5 fs18">'+item.product_old_price+'元</span></em>');
				if(item.time_status==0){
					html.push('<span class="mui-btn mui-btn-primary">马上抢</span>');
				}else if(item.time_status==1){
					html.push('<span class="mui-btn mui-btn-grey">已结束</span>');
				}else if(item.time_status==2){
					html.push('<span class="mui-btn mui-btn-grey">已抢完</span>');
				}else if(item.time_status==3){
					html.push('<span class="mui-btn mui-btn-grey">已过期</span>');
				}
				html.push('</p>');
				html.push('</div>');
				html.push('</div>');
				html.push('</div>');
			});
			$("#tab1").html(html.join(""));
			if(sessionStorage.getItem("tvindex")){
				var tabindex = sessionStorage.getItem("tabindex")
				$(".tab-item.active").removeClass("active");
				$(".tab .tab-item").eq(tabindex).addClass("active");
				$("#tab"+tabindex).siblings(".row").hide();
				$("#tab"+tabindex).show();
				
				var i = parseInt(sessionStorage.getItem("tvindex"));
				var page = parseInt(i/pageSize)+1;
				$("#tab"+tabindex+" .col-xs-4.active").removeClass("active");
				$("#tab"+tabindex+" .col-xs-4").eq(i).addClass("active");
				$("#tab"+tabindex).css("top",-(page-1)*356+10);
				showImg(page);
				flag=true;
			}
			$("img.product-lazy").lazyload({
				threshold : 400,
				effect: "fadeIn",
				placeholder: base+'/static/mobile/image/500.gif',
				skip_invisible : true
			});
		}
	});
}
function jumpPage(event) {   
    if (event.code==37 || event.code=="KEY_LEFT")//左   
        fun_left();   
    if (event.code==38 || event.code=="KEY_UP")//上   
        fun_up();  
    if (event.code==39 || event.code=="KEY_RIGHT" )//右   
        fun_right();   
    if (event.code==40 || event.code=="KEY_DOWN" )//下   
        fun_down();  
    if (event.code==13 || event.code=="KEY_SELECT")//enter   
        fun_enter();
	if (event.code==640 || event.code=="KEY_BACK")//enter
    	fun_back();
}  
function fun_left(){
	var tabindex=$(".tab-item.active").index();
	if(flag){
		if($("#tab"+tabindex+" .col-xs-4.active").index()==0){
			$("#tab"+tabindex+" .col-xs-4.active").removeClass("active");
			flag=false;
		}
		var i = $("#tab"+tabindex+" .col-xs-4.active").index()-1;
		var page = parseInt(i/pageSize)+1;
		$("#tab"+tabindex+" .col-xs-4.active").removeClass("active");
		$("#tab"+tabindex+" .col-xs-4").eq(i).addClass("active");
		$("#tab"+tabindex).css("top",-(page-1)*356+10);
	}
}  
function fun_right(){
	var tabindex=$(".tab-item.active").index();
	if(flag){
		if($("#tab"+tabindex+" .col-xs-4.active").index()==$("#tab"+tabindex+" .col-xs-4").length-1){
			return;
		}
		var i = $("#tab"+tabindex+" .col-xs-4.active").index()+1;
		var page = parseInt(i/pageSize)+1;
		$("#tab"+tabindex+" .col-xs-4.active").removeClass("active");
		$("#tab"+tabindex+" .col-xs-4").eq(i).addClass("active");
		$("#tab"+tabindex).css("top",-(page-1)*356+10);
		showImg(page);
	}else{
		if($("#tab"+tabindex+" .col-xs-4").length>0){
			flag=true;
			$("#tab"+tabindex+" .col-xs-4").eq(0).addClass("active");
		}
	}
}  
function fun_up(){
	var tabindex=$(".tab-item.active").index();
	if(flag){
		if(parseInt($("#tab"+tabindex+" .col-xs-4.active").index()/pageSize)==0){
			return;
		}
		var i = $("#tab"+tabindex+" .col-xs-4.active").index()-3;
		var page = parseInt(i/pageSize)+1;
		$("#tab"+tabindex+" .col-xs-4.active").removeClass("active");
		$("#tab"+tabindex+" .col-xs-4").eq(i).addClass("active");
		$("#tab"+tabindex).css("top",-(page-1)*356+10);
	}else{
		var index = tabindex-1;
		if(tabindex!=0){
			$(".tab-item.active").removeClass("active");
			$(".tab .tab-item").eq(index).addClass("active");
			$("#tab"+index).siblings(".row").hide();
			$("#tab"+index).show();
		}
	}
}  
function fun_down(){
	var tabindex=$(".tab-item.active").index();
	if(flag){
		var totalPage = parseInt(($("#tab"+tabindex+" .col-xs-4").length-1)/pageSize)+1;
		if(parseInt($("#tab"+tabindex+" .col-xs-4.active").index()/pageSize)+1==totalPage){
			return;
		}
		var i = $("#tab"+tabindex+" .col-xs-4.active").index()+pageSize;
		var page = parseInt(i/pageSize)+1;
		$("#tab"+tabindex+" .col-xs-4.active").removeClass("active");
		if(i>$("#tab"+tabindex+" .col-xs-4").length){
			$("#tab"+tabindex+" .col-xs-4").eq($("#tab"+tabindex+" .col-xs-4").length-1).addClass("active");
		}else{
			$("#tab"+tabindex+" .col-xs-4").eq(i).addClass("active");
		}
		$("#tab"+tabindex).css("top",-(page-1)*356+10);
		showImg(page);
	}else{
		var index = tabindex+1;
		if(index!=$(".tab .tab-item").length){
			$(".tab-item.active").removeClass("active");
			$(".tab .tab-item").eq(index).addClass("active");
			$("#tab"+index).siblings(".row").hide();
			$("#tab"+index).show();
			showImg(1);
		}
	}
}  

function fun_enter(){ 
	if($(".col-xs-4.active").index()!=-1){
		var tabindex=$(".tab-item.active").index();
		sessionStorage.setItem("tvindex",$(".col-xs-4.active").index());
		sessionStorage.setItem("tabindex",tabindex);
		if(tabindex==0){
			location.href=base+"/tv/merchantView.jsp?id="+$("#tab"+tabindex+" .col-xs-4.active").attr("data-id"); 
		}else{
			location.href=base+"/tv/productView.jsp?id="+$("#tab"+tabindex+" .col-xs-4.active").attr("data-id"); 
		}
		
	}
}

function fun_back(){
	history.back();
} 


function showImg(page){
	var tabindex=$(".tab-item.active").index();
	if(tabindex==0){
		for(var i=0;i<pageSize;i++){
			var img = $("#tab0 .col-xs-4").eq(pageSize*page+i).find(".merchant-lazy");
			if($(img).attr("src")&&$(img).attr("src").indexOf("500.gif")!=-1){
				$(img).attr("src",$(img).attr("data-original"));
				$(img).css("display","inline");
			}
		}
	}else{
		for(var i=0;i<pageSize;i++){
			var img = $("#tab1 .col-xs-4").eq(pageSize*page+i).find(".product-lazy");
			if($(img).attr("src")&&$(img).attr("src").indexOf("500.gif")!=-1){
				$(img).attr("src",$(img).attr("data-original"));
				$(img).css("display","inline");
			}
			var img = $("#tab1 .col-xs-4").eq(pageSize*(page-1)+i).find(".product-lazy");
			if($(img).attr("src")&&$(img).attr("src").indexOf("500.gif")!=-1){
				$(img).attr("src",$(img).attr("data-original"));
				$(img).css("display","inline");
			}
		}
	}
}