我的书签
添加书签
移除书签首页
首页效果图：
一、主窗口
1、首次进入首页调到引导页，JS代码判断
var welcome = appcan.locStorage.getVal('welcome');if (!welcome) {appcan.frame.open("page_0", "guide_pager.html");appcan.locStorage.setVal('welcome', '1');var today=new Date();timestamp=today.getTime();appcan.locStorage.setVal("timestamp",timestamp);return false;}else{$("#page_0").removeClass('uhide');}
2、头部UI
<div id="header" class="uh ub bc-head-m"><div class="nav-btn" id="nav-left"></div><h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">淘.现场</h1><div class="nav-btn" id="nav-right"><!--按钮开始--><a class="button button-clear" onclick="opennews();"><img src="image/bubble-icon.png" alt="message" style="width: 1.2em;margin-top: .2em"/><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></a><!--按钮结束--></div></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×tamp='+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"/> '+country+' '
+'<img src="image/plane.png" style="width:0.7em"/> '
+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"/ > '+locationInfo+' '+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);
}
