首页

首页效果图:

首页 - 图1

一、主窗口

1、首次进入首页调到引导页,JS代码判断

  1. var welcome = appcan.locStorage.getVal('welcome');
  2. if (!welcome) {
  3. appcan.frame.open("page_0", "guide_pager.html");
  4. appcan.locStorage.setVal('welcome', '1');
  5. var today=new Date();
  6. timestamp=today.getTime();
  7. appcan.locStorage.setVal("timestamp",timestamp);
  8. return false;
  9. }else{
  10. $("#page_0").removeClass('uhide');
  11. }

2、头部UI

  1. <div id="header" class="uh ub bc-head-m">
  2. <div class="nav-btn" id="nav-left"></div>
  3. <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">淘.现场</h1>
  4. <div class="nav-btn" id="nav-right">
  5. <!--按钮开始-->
  6. <a class="button button-clear" onclick="opennews();">
  7. <img src="image/bubble-icon.png" alt="message" style="width: 1.2em;margin-top: .2em"/>
  8. <div class="ub ub-ac ub-pc uhide" style="color:#fff;width: 0.5em;height: 0.5em;line-height: 1em;border-radius: .5em;background-color: #FF0000;position: relative;top: -0.5em;left:-0.5em" id="MyMessage"></div>
  9. </a>
  10. <!--按钮结束-->
  11. </div>
  12. </div>

3、底部栏UI

<div id="footer" class="uf t-bla ub tab  b-gra2 c-gra2" style="border-top: 1px solid #C9C9C9;background-color: #FFFFFF;padding-top: 0.3em;height:2.5em">
<div class="pos_re ub ub-f1">                    
<div id="index" class="ub-f1 ub ub-ver ">
<div class="ub-f1 ub-img5 icon1_act mar_b"></div>
<div class="uinn-a13 ulev-4 tx-c act-col" style="color:#00C1F9">
淘现场
</div>
</div>
</div>
<div class="pos_re ub ub-f1">                   
<div id="search" class="ub-f1 ub ub-ver">
<div class="ub-f1 ub-img5 icon2 mar_b"></div>
<div class="uinn-a13 ulev-4 ub ub-ac ub-pc " style="color:#7C7C7C"> 
查询
</div>
</div>
</div>
<div class="pos_re ub ub-f1">                    
<div id="publish" class="ub-f1 ub ub-ver">
<div class="ub-f1 ub-img5 icon3 mar_b"></div>
<div class="uinn-a13 ulev-4 ub ub-ac ub-pc " style="color:#7C7C7C">
发布
</div>
</div>
</div>
<div class="pos_re ub ub-f1">                   
<div id="cart" class="ub-f1 ub ub-ver ">
<div class="ub-f1 ub-img5 icon4 mar_b"></div>
<div class="uinn-a13 ulev-4  ub ub-ac ub-pc" style="color:#7C7C7C">
购物车
</div>
</div>
</div>
<div class="pos_re ub ub-f1">                   
<div id="my" class="ub-f1 ub ub-ver ">
<div class="ub-f1 ub-img5 icon5 mar_b"></div>
<div class="uinn-a13 ulev-4 tx-c act-col" style="color:#7C7C7C">
我的
</div>
</div>
</div>
</div>
</div>

底部栏并没有采用tab,采用的是4个div横向显示,点击其中任何一个,显示出相对应的window,点击后三个window时判断用户是否登录,未登录调到登录页面,js代码如下:

appcan.button("#search", "btn-act", function() {
uexWindow.open("search","0","search.html","0","0","0","0","200");
})
appcan.button("#publish", "btn-act", function() {          
uexWindow.open("publish","0","publish.html","0","0","0","0","200");
} else{
appcan.window.open("login","login.html",16);
}
})
appcan.button("#cart", "btn-act", function() {
if(userId!=null){                
uexWindow.open("cart","0","cart.html","0","0","0","0","200");
} else{
appcan.window.open("login","login.html",16);
}
})
appcan.button("#my", "btn-act", function() {
if(userId!=null){                
uexWindow.open("my","0","my.html","0","0","0","0","200");
} else{
appcan.window.open("login","login.html",16);
}
})

4、拦截手机物理返回键,双击退出APP

var presstime=0;
uexWindow.setReportKey(0, 1);
uexWindow.onKeyPressed = function(keyCode) {
if (keyCode == 0) { 
if(presstime==0){
uexWindow.toast("0", "5","再按一次返回键退出!", "3000"); 
presstime=1;
}else{
presstime=1;
uexWidgetOne.exit(0);
}
setTimeout(function() {
presstime=0;
}, 3000); 
}
}
二、浮动窗口

1、头部轮播图,用的是uexScrollPicture插件,图片地址从后台获取,动态显示在页面上,代码如下:

<div class="slid" id="scrollpic"></div>
预留高度:
var w=screen.availWidth;
var h=parseInt(w/2.4);
$("#scrollpic").css("height",h+"px");

2.4是根据UI里轮播图的宽高比计算而来,打开轮播图代码如下:

function showslider(){
var w=screen.availWidth;
var h=parseInt(w/2.4);
uexScrollPicture.createNewScrollPicture('{"interval":"3000","anchor":["0","0"],"height":"'+h+'","width":"'+w+'","urls":['+arr+'],"viewId":"1"}');
uexScrollPicture.startAutoScroll('{"viewId":"1"}');       
}

轮播图的点击事件代码如下:

uexScrollPicture.onPicItemClick= function(data){
var count=JSON.parse(data).index;
appcan.locStorage.setVal("linkurl",urls[count]);
appcan.window.open("link","link.html",0);
}

这里实现的是点击不同的图片连接到不同的页面。

2、轮播图下面是种类及地域分类栏,全部由div组成,代码如下:

<div class="ub ub-ac tab1" id="table1" style="overflow-x: auto;width: 100%;" >
<div class="ub ub-ac ub-pc a uba-blue" id="" style="margin-left:1em;">全球</div>
</div>
<div class="ub ub-ac tab2" id="table2" style="overflow-x: auto;width: 100%;" >
<div class="ub ub-ac ub-pc b ubb-blue b1" id="" style="margin-left: 1em;">
<img src="image/GridView-active.png" style="width: 1em;margin-top: .5em" id="one"/>  
<div style="margin-left: .15em;">全部</div>     
</div>
</div>

分类数据及轮播图数据有后台接口提供,js代码如下所示:

appcan.request.ajax({
url : api+'/api/shoplive/home',
type : 'GET',
dataType : 'json',
success : function(data) {                          
if(data.status == 0){
uexWindow.toast("0", "5", data.msg, "2000");
}
if (data.status == 1) {  
var len = data.data.ads.length;                          
for (var i = 0; i < len; i++) {
var url_img = data.data.ads[i].image;
arr[i] ='"'+api+url_img+'"';     
urls[i]= data.data.ads[i].url;             
}
showslider();                         

var areas_len = data.data.areas.length;                        
for(var j = 0; j < areas_len; j++){
var html='';
var area_id=data.data.areas[j]._id;
html +="<div class='ub ub-pc a' id='"+area_id+"'>"+data.data.areas[j].name+"</div>";                             
$("#table1").append(html);
}
var categories_len = data.data.categories.length;                         
for(var k = 0; k < categories_len; k++){
var html='';
var categorie_id=data.data.categories[k]._id;
html +="<div class='ub ub-pc b' id='"+categorie_id+"'>"+data.data.categories[k].name+"</div>"; 
$("#table2").append(html);
}
appcan.locStorage.setVal("categories", data.data.categories);
$(".a").click(function() {
$("#table1").children().removeClass("uba-blue");
$(this).addClass("uba-blue");
if(areas_id!=this.id){
areas_id=this.id;                                      
homeready();
}
});
$(".b").click(function() {
$("#one").attr("src", "image/GridView.png");
$("#table2").children().removeClass("ubb-blue");
$(this).addClass("ubb-blue"); 
if(categories_id!=this.id){               
categories_id=this.id;  
homeready();                                
}            
});
$(".b1").click(function() {
$("#one").attr("src", "image/GridView-active.png");
});  
}  
},
error : function(errMessage) {
//alert("errMessage"+errMessage);  
uexWindow.toast("0", "5", "网络信号差", "2000");                 
}
});

3、最下面是淘现场信息展示,数据全部从后台获取,代码如下:

<div class="ub ub-ver" id="shoplive" style="background: #ffffff">                            
</div> 
function homeready(){
$("#shoplive").html(" ");
isLoading = true; 
var today=new Date();
timestamp=today.getTime();
appcan.request.ajax({
url :api+'/api/user/findCare',
type : 'GET',
dataType : 'json',
data : {
userId: userId
},
success : function(data) {
if(data.status==1){
concerns=data.data[0].seller;                                                                                                                          
}         
},
error : function(errMessage) {
//alert("errMessage:"+JSON.stringify(errMessage));                         
}
});
appcan.request.ajax({
url : api+'/api/shoplive/getByAreaAndCategory?area='+areas_id+'&category='+categories_id+'&PageSize=5&timestamp='+timestamp,
type : 'GET',
dataType : 'json',
success : function(data) {                          
if(data.status == 0){
uexWindow.toast("0", "5", data.msg, "2000");                            
}
if (data.status == 1) {
var live_len = data.data.length;
appcan.locStorage.setVal("live_len",live_len);
var over=[];                         
for(var i = 0; i < live_len; i++)   {
if(!data.data[i].items||data.data[i].items.length<3){      
}else{
var items_len = data.data[i].items.length;
var url_img1 = data.data[i].seller.avatar;
var seller_url = api + url_img1;
var url_img2; 
if(data.data[i].thumbs.length>0){                                                
url_img2 = data.data[i].thumbs[0];
}else{                                                
url_img2 = data.data[i].images[0];
}                              
var shop_url = api + url_img2; 
var back=data.data[i].to_back_day;
over[i]=data.data[i].deadline;
var country=data.data[i].country;                                            
var locationInfo=data.data[i].locationInfo;
var countryf=areaList[country].name;  
appcan.locStorage.setVal("over["+i+"]", over[i]);                               
DownCount();
var nickname = data.data[i].seller.nickname;
var sellerId=data.data[i].seller._id;
var seller_id = data.data[i]._id;
var desc=data.data[i].desc;
var count=items_len;
if(count<4){                                                
var ulwidth=100;
var per=30;
var mper=2.5;
}else{
var ulwidth=count*33.3; 
var per=100/(count*1.11);
var mper=2.5*4/(count+1);                                               
}
var html = "";     
var ihtml="";                           
html += '<div class="ub ub-f1 ub-ac hb">'
+'<img src="'+seller_url+'" class="hbi"/>'
+'<div class="ub ub-f1 ub-ver">'
+'<div class="ub ulev-5" >'
+nickname
+'</div>'
+'<div class="ub ulev-1" style="color:#808080">'
+'<img src="image/flag/'+countryf+'.png" style="width:1.2em;height:.8em"/>&nbsp;'+country+'&nbsp;&nbsp;' 
+'<img src="image/plane.png" style="width:0.7em"/>&nbsp;'
+back
+'回国'
+'</div>'
+'</div>'
+'<div class="ub user'+sellerId+'" id="user'+i+'">'                                    
+'</div>'
+'</div>'
+ '<div class="ub ub-f1" style="padding:.7em 0;">'
+ '<div style="width:100%">'
+'<img onclick="openscene('+"'"+seller_id+"'"+','+"'"+sellerId+"'"+');" src="'+shop_url+'" style="width:30%;height:width;float:left; margin-left:2.5%;margin-right:.7em"/>'
+'<div class="ub ub-ver ub-f1" style="line-height:1.5em">'
+'<div class="" onclick="openscene('+"'"+seller_id+"'"+','+"'"+sellerId+"'"+');">'
+desc
+'</div>'
+'<div class="" style="color:#8A8A8A;font-size:.8em;">'
+'<img src="image/Pin-Assistor.png" style="width:0.7em"/ >&nbsp;'+locationInfo+'&nbsp;&nbsp;'+count+'件商品'
+'</div>'
+'<div class="ub" id="time'+i+'" style="color:#323232;margin-top: .5em;font-size: .9em;display: none;line-height:1.5em">'
+'</div>'       
+'</div>'
+'</div>'
+'</div>'
+'<div class="ub ub-f1" style="width:100%;overflow-x: auto;overflow-y:hidden;">'
+'<ul style="width:'+ulwidth+'%;" id="ul'+i+'">'
+'</ul>'
+'</div>'                                            
+'<div style="width:100%;height:.5em;background:#F2F2F2;"></div>';  
$("#shoplive").append(html);    
for (var j = 0; j < items_len; j++) {
var url_img3; 
if(data.data[i].items[j].thumbs.length>0){                                                
url_img3 = data.data[i].items[j].thumbs[0];
}else{                                                
url_img3 = data.data[i].items[j].images[0];
} 
var items_url = api + url_img3; 
var price=data.data[i].items[j].price;
var rate=data.data[i].items[j].rate;
var img_id=data.data[i].items[j]._id;                                                       
var lastprice=Math.ceil(price*rate*1.15);                                                                         
ihtml += '<li class="li" style="width:'+per+'%;margin-left: '+mper+'%;">'
+'<div onclick="opendetail('+"'"+img_id+"'"+','+"'"+sellerId+"'"+');">'
+' <img src="'+items_url+'" class="ub ub-f1 g_img" />'
+'<div class="ub ub-ac ub-pc transparent">'
+'¥'+lastprice
+'</div>'
+'</div>'
+'</li>';                         
} 
$("#ul"+i).append(ihtml);                                                                                                  
if(userId==null||concerns==null){                     
var chtml="";
chtml+='<div onclick="concern_s();" class="ub ub-ac ub-pc ulev-3 concern">'
+'+关注'
+'</div>';                                       
$(".user"+sellerId).html(chtml);      
}else{ 
if(userId==sellerId){                                                
}else{
var slen=concerns.length;
if(slen==0){
var chtml="";
chtml+='<div onclick="concern_su('+"'"+sellerId+"'"+','+i+');" class="ub ub-ac ub-pc ulev-3 concern">'
+'+关注'
+'</div>';                                       
$(".user"+sellerId).html(chtml); 
}else{
var concern;
for(var k=0;k<slen;k++){
if(concerns[k]._id==sellerId){                                                     
concern=1;     
break;
}else{
concern=0;    
}
}                                                                             
if(concern==1){
var chtml="";
chtml+='<div class="ub ub-ac ub-pc ulev-3 concern1" onclick="cancle('+"'"+sellerId+"'"+','+i+');" >'
+'已关注'
+'</div>';                                       
$(".user"+sellerId).html(chtml);
}else{
var chtml="";
chtml+='<div onclick="concern_su('+"'"+sellerId+"'"+','+i+');" class="ub ub-ac ub-pc ulev-3 concern">'
+'+关注'
+'</div>';                                       
$(".user"+sellerId).html(chtml);
}
}
}
} 
}
}                        
if(live_len < 5){
timestamp=0;                       
isLoading = false;                          
}else{
var createTime=moment(data.data[4].createTime, 'YYYY-MM-DDTHH:mm:ss.sssZ');
timestamp=(createTime.unix())*1000;                     
isLoading = false;
}
}  
},
error : function(errMessage) {
//alert("errMessage"+errMessage);    
uexWindow.toast("0", "5", "网络信号差", "2000");               
}          
});
}

4、倒计时代码

function DownCount(){ 
var today=new Date();
now=parseInt(today.getTime()/1000);
var live_len=appcan.locStorage.getVal("live_len");
var over=[];
for(var i=0;i<live_len;i++){
over[i]=appcan.locStorage.getVal("over["+i+"]");
var overtime=moment(over[i], 'YYYY-MM-DDTHH:mm:ss.sssZ');
var deadline=overtime.unix();  
var minus=deadline-now;
if(minus>0){                    
$("#time"+i).html('<div style="color:#ADADAD">剩余</div><div class="ub ub-ac ub-pc time" id="hour'+i+'" style="margin-left: 0.5em"></div>:<div class="ub ub-ac ub-pc time" id="minute'+i+'"></div>:<div class="ub ub-ac ub-pc time" id="second'+i+'"></div>');  
timechange(minus,i);            
}else{
$("#time"+i).html('<div style="color:#F1F1F1;background-color:#B0B5B6;padding:.3em .7em;border-radius: .3em;font-size: 1em; ">已经结束</div>');
}
}
window.setTimeout("DownCount()",1000);
}        
function timechange(minus,i){
CSecond=minus%60;
CMinute=parseInt(minus%3600/60);
CHour=parseInt(minus/3600);
if(CMinute<10)
{
CMinute="0"+CMinute;
}
if(CHour<10)
{
CHour="0"+CHour;
}
if(CSecond<10)
{
CSecond="0"+CSecond;
}  
$("#hour"+i).html(CHour);
$("#minute"+i).html(CMinute);
$("#second"+i).html(CSecond); 
}