下载文档

首页
更新时间:2016-04-25

首页效果图:



一、主窗口

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

  1. <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">
  2. <div class="pos_re ub ub-f1">
  3. <div id="index" class="ub-f1 ub ub-ver ">
  4. <div class="ub-f1 ub-img5 icon1_act mar_b"></div>
  5. <div class="uinn-a13 ulev-4 tx-c act-col" style="color:#00C1F9">
  6. 淘现场
  7. </div>
  8. </div>
  9. </div>
  10. <div class="pos_re ub ub-f1">
  11. <div id="search" class="ub-f1 ub ub-ver">
  12. <div class="ub-f1 ub-img5 icon2 mar_b"></div>
  13. <div class="uinn-a13 ulev-4 ub ub-ac ub-pc " style="color:#7C7C7C">
  14. 查询
  15. </div>
  16. </div>
  17. </div>
  18. <div class="pos_re ub ub-f1">
  19. <div id="publish" class="ub-f1 ub ub-ver">
  20. <div class="ub-f1 ub-img5 icon3 mar_b"></div>
  21. <div class="uinn-a13 ulev-4 ub ub-ac ub-pc " style="color:#7C7C7C">
  22. 发布
  23. </div>
  24. </div>
  25. </div>
  26. <div class="pos_re ub ub-f1">
  27. <div id="cart" class="ub-f1 ub ub-ver ">
  28. <div class="ub-f1 ub-img5 icon4 mar_b"></div>
  29. <div class="uinn-a13 ulev-4 ub ub-ac ub-pc" style="color:#7C7C7C">
  30. 购物车
  31. </div>
  32. </div>
  33. </div>
  34. <div class="pos_re ub ub-f1">
  35. <div id="my" class="ub-f1 ub ub-ver ">
  36. <div class="ub-f1 ub-img5 icon5 mar_b"></div>
  37. <div class="uinn-a13 ulev-4 tx-c act-col" style="color:#7C7C7C">
  38. 我的
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>

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

  1. appcan.button("#search", "btn-act", function() {
  2. uexWindow.open("search","0","search.html","0","0","0","0","200");
  3. })
  4. appcan.button("#publish", "btn-act", function() {
  5. uexWindow.open("publish","0","publish.html","0","0","0","0","200");
  6. } else{
  7. appcan.window.open("login","login.html",16);
  8. }
  9. })
  10. appcan.button("#cart", "btn-act", function() {
  11. if(userId!=null){
  12. uexWindow.open("cart","0","cart.html","0","0","0","0","200");
  13. } else{
  14. appcan.window.open("login","login.html",16);
  15. }
  16. })
  17. appcan.button("#my", "btn-act", function() {
  18. if(userId!=null){
  19. uexWindow.open("my","0","my.html","0","0","0","0","200");
  20. } else{
  21. appcan.window.open("login","login.html",16);
  22. }
  23. })

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

  1. var presstime=0;
  2. uexWindow.setReportKey(0, 1);
  3. uexWindow.onKeyPressed = function(keyCode) {
  4. if (keyCode == 0) {
  5. if(presstime==0){
  6. uexWindow.toast("0", "5","再按一次返回键退出!", "3000");
  7. presstime=1;
  8. }else{
  9. presstime=1;
  10. uexWidgetOne.exit(0);
  11. }
  12. setTimeout(function() {
  13. presstime=0;
  14. }, 3000);
  15. }
  16. }


二、浮动窗口

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

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

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

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

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

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

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

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

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

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

  1. appcan.request.ajax({
  2. url : api+'/api/shoplive/home',
  3. type : 'GET',
  4. dataType : 'json',
  5. success : function(data) {
  6. if(data.status == 0){
  7. uexWindow.toast("0", "5", data.msg, "2000");
  8. }
  9. if (data.status == 1) {
  10. var len = data.data.ads.length;
  11. for (var i = 0; i < len; i++) {
  12. var url_img = data.data.ads[i].image;
  13. arr[i] ='"'+api+url_img+'"';
  14. urls[i]= data.data.ads[i].url;
  15. }
  16. showslider();
  17. var areas_len = data.data.areas.length;
  18. for(var j = 0; j < areas_len; j++){
  19. var html='';
  20. var area_id=data.data.areas[j]._id;
  21. html +="<div class='ub ub-pc a' id='"+area_id+"'>"+data.data.areas[j].name+"</div>";
  22. $("#table1").append(html);
  23. }
  24. var categories_len = data.data.categories.length;
  25. for(var k = 0; k < categories_len; k++){
  26. var html='';
  27. var categorie_id=data.data.categories[k]._id;
  28. html +="<div class='ub ub-pc b' id='"+categorie_id+"'>"+data.data.categories[k].name+"</div>";
  29. $("#table2").append(html);
  30. }
  31. appcan.locStorage.setVal("categories", data.data.categories);
  32. $(".a").click(function() {
  33. $("#table1").children().removeClass("uba-blue");
  34. $(this).addClass("uba-blue");
  35. if(areas_id!=this.id){
  36. areas_id=this.id;
  37. homeready();
  38. }
  39. });
  40. $(".b").click(function() {
  41. $("#one").attr("src", "image/GridView.png");
  42. $("#table2").children().removeClass("ubb-blue");
  43. $(this).addClass("ubb-blue");
  44. if(categories_id!=this.id){
  45. categories_id=this.id;
  46. homeready();
  47. }
  48. });
  49. $(".b1").click(function() {
  50. $("#one").attr("src", "image/GridView-active.png");
  51. });
  52. }
  53. },
  54. error : function(errMessage) {
  55. //alert("errMessage"+errMessage);
  56. uexWindow.toast("0", "5", "网络信号差", "2000");
  57. }
  58. });

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

  1. <div class="ub ub-ver" id="shoplive" style="background: #ffffff">
  2. </div>
  3. function homeready(){
  4. $("#shoplive").html(" ");
  5. isLoading = true;
  6. var today=new Date();
  7. timestamp=today.getTime();
  8. appcan.request.ajax({
  9. url :api+'/api/user/findCare',
  10. type : 'GET',
  11. dataType : 'json',
  12. data : {
  13. userId: userId
  14. },
  15. success : function(data) {
  16. if(data.status==1){
  17. concerns=data.data[0].seller;
  18. }
  19. },
  20. error : function(errMessage) {
  21. //alert("errMessage:"+JSON.stringify(errMessage));
  22. }
  23. });
  24. appcan.request.ajax({
  25. url : api+'/api/shoplive/getByAreaAndCategory?area='+areas_id+'&category='+categories_id+'&PageSize=5&timestamp='+timestamp,
  26. type : 'GET',
  27. dataType : 'json',
  28. success : function(data) {
  29. if(data.status == 0){
  30. uexWindow.toast("0", "5", data.msg, "2000");
  31. }
  32. if (data.status == 1) {
  33. var live_len = data.data.length;
  34. appcan.locStorage.setVal("live_len",live_len);
  35. var over=[];
  36. for(var i = 0; i < live_len; i++) {
  37. if(!data.data[i].items||data.data[i].items.length<3){
  38. }else{
  39. var items_len = data.data[i].items.length;
  40. var url_img1 = data.data[i].seller.avatar;
  41. var seller_url = api + url_img1;
  42. var url_img2;
  43. if(data.data[i].thumbs.length>0){
  44. url_img2 = data.data[i].thumbs[0];
  45. }else{
  46. url_img2 = data.data[i].images[0];
  47. }
  48. var shop_url = api + url_img2;
  49. var back=data.data[i].to_back_day;
  50. over[i]=data.data[i].deadline;
  51. var country=data.data[i].country;
  52. var locationInfo=data.data[i].locationInfo;
  53. var countryf=areaList[country].name;
  54. appcan.locStorage.setVal("over["+i+"]", over[i]);
  55. DownCount();
  56. var nickname = data.data[i].seller.nickname;
  57. var sellerId=data.data[i].seller._id;
  58. var seller_id = data.data[i]._id;
  59. var desc=data.data[i].desc;
  60. var count=items_len;
  61. if(count<4){
  62. var ulwidth=100;
  63. var per=30;
  64. var mper=2.5;
  65. }else{
  66. var ulwidth=count*33.3;
  67. var per=100/(count*1.11);
  68. var mper=2.5*4/(count+1);
  69. }
  70. var html = "";
  71. var ihtml="";
  72. html += '<div class="ub ub-f1 ub-ac hb">'
  73. +'<img src="'+seller_url+'" class="hbi"/>'
  74. +'<div class="ub ub-f1 ub-ver">'
  75. +'<div class="ub ulev-5" >'
  76. +nickname
  77. +'</div>'
  78. +'<div class="ub ulev-1" style="color:#808080">'
  79. +'<img src="image/flag/'+countryf+'.png" style="width:1.2em;height:.8em"/>&nbsp;'+country+'&nbsp;&nbsp;'
  80. +'<img src="image/plane.png" style="width:0.7em"/>&nbsp;'
  81. +back
  82. +'回国'
  83. +'</div>'
  84. +'</div>'
  85. +'<div class="ub user'+sellerId+'" id="user'+i+'">'
  86. +'</div>'
  87. +'</div>'
  88. + '<div class="ub ub-f1" style="padding:.7em 0;">'
  89. + '<div style="width:100%">'
  90. +'<img onclick="openscene('+"'"+seller_id+"'"+','+"'"+sellerId+"'"+');" src="'+shop_url+'" style="width:30%;height:width;float:left; margin-left:2.5%;margin-right:.7em"/>'
  91. +'<div class="ub ub-ver ub-f1" style="line-height:1.5em">'
  92. +'<div class="" onclick="openscene('+"'"+seller_id+"'"+','+"'"+sellerId+"'"+');">'
  93. +desc
  94. +'</div>'
  95. +'<div class="" style="color:#8A8A8A;font-size:.8em;">'
  96. +'<img src="image/Pin-Assistor.png" style="width:0.7em"/ >&nbsp;'+locationInfo+'&nbsp;&nbsp;'+count+'件商品'
  97. +'</div>'
  98. +'<div class="ub" id="time'+i+'" style="color:#323232;margin-top: .5em;font-size: .9em;display: none;line-height:1.5em">'
  99. +'</div>'
  100. +'</div>'
  101. +'</div>'
  102. +'</div>'
  103. +'<div class="ub ub-f1" style="width:100%;overflow-x: auto;overflow-y:hidden;">'
  104. +'<ul style="width:'+ulwidth+'%;" id="ul'+i+'">'
  105. +'</ul>'
  106. +'</div>'
  107. +'<div style="width:100%;height:.5em;background:#F2F2F2;"></div>';
  108. $("#shoplive").append(html);
  109. for (var j = 0; j < items_len; j++) {
  110. var url_img3;
  111. if(data.data[i].items[j].thumbs.length>0){
  112. url_img3 = data.data[i].items[j].thumbs[0];
  113. }else{
  114. url_img3 = data.data[i].items[j].images[0];
  115. }
  116. var items_url = api + url_img3;
  117. var price=data.data[i].items[j].price;
  118. var rate=data.data[i].items[j].rate;
  119. var img_id=data.data[i].items[j]._id;
  120. var lastprice=Math.ceil(price*rate*1.15);
  121. ihtml += '<li class="li" style="width:'+per+'%;margin-left: '+mper+'%;">'
  122. +'<div onclick="opendetail('+"'"+img_id+"'"+','+"'"+sellerId+"'"+');">'
  123. +' <img src="'+items_url+'" class="ub ub-f1 g_img" />'
  124. +'<div class="ub ub-ac ub-pc transparent">'
  125. +'¥'+lastprice
  126. +'</div>'
  127. +'</div>'
  128. +'</li>';
  129. }
  130. $("#ul"+i).append(ihtml);
  131. if(userId==null||concerns==null){
  132. var chtml="";
  133. chtml+='<div onclick="concern_s();" class="ub ub-ac ub-pc ulev-3 concern">'
  134. +'+关注'
  135. +'</div>';
  136. $(".user"+sellerId).html(chtml);
  137. }else{
  138. if(userId==sellerId){
  139. }else{
  140. var slen=concerns.length;
  141. if(slen==0){
  142. var chtml="";
  143. chtml+='<div onclick="concern_su('+"'"+sellerId+"'"+','+i+');" class="ub ub-ac ub-pc ulev-3 concern">'
  144. +'+关注'
  145. +'</div>';
  146. $(".user"+sellerId).html(chtml);
  147. }else{
  148. var concern;
  149. for(var k=0;k<slen;k++){
  150. if(concerns[k]._id==sellerId){
  151. concern=1;
  152. break;
  153. }else{
  154. concern=0;
  155. }
  156. }
  157. if(concern==1){
  158. var chtml="";
  159. chtml+='<div class="ub ub-ac ub-pc ulev-3 concern1" onclick="cancle('+"'"+sellerId+"'"+','+i+');" >'
  160. +'已关注'
  161. +'</div>';
  162. $(".user"+sellerId).html(chtml);
  163. }else{
  164. var chtml="";
  165. chtml+='<div onclick="concern_su('+"'"+sellerId+"'"+','+i+');" class="ub ub-ac ub-pc ulev-3 concern">'
  166. +'+关注'
  167. +'</div>';
  168. $(".user"+sellerId).html(chtml);
  169. }
  170. }
  171. }
  172. }
  173. }
  174. }
  175. if(live_len < 5){
  176. timestamp=0;
  177. isLoading = false;
  178. }else{
  179. var createTime=moment(data.data[4].createTime, 'YYYY-MM-DDTHH:mm:ss.sssZ');
  180. timestamp=(createTime.unix())*1000;
  181. isLoading = false;
  182. }
  183. }
  184. },
  185. error : function(errMessage) {
  186. //alert("errMessage"+errMessage);
  187. uexWindow.toast("0", "5", "网络信号差", "2000");
  188. }
  189. });
  190. }

4、倒计时代码

  1. function DownCount(){
  2. var today=new Date();
  3. now=parseInt(today.getTime()/1000);
  4. var live_len=appcan.locStorage.getVal("live_len");
  5. var over=[];
  6. for(var i=0;i<live_len;i++){
  7. over[i]=appcan.locStorage.getVal("over["+i+"]");
  8. var overtime=moment(over[i], 'YYYY-MM-DDTHH:mm:ss.sssZ');
  9. var deadline=overtime.unix();
  10. var minus=deadline-now;
  11. if(minus>0){
  12. $("#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>');
  13. timechange(minus,i);
  14. }else{
  15. $("#time"+i).html('<div style="color:#F1F1F1;background-color:#B0B5B6;padding:.3em .7em;border-radius: .3em;font-size: 1em; ">已经结束</div>');
  16. }
  17. }
  18. window.setTimeout("DownCount()",1000);
  19. }
  20. function timechange(minus,i){
  21. CSecond=minus%60;
  22. CMinute=parseInt(minus%3600/60);
  23. CHour=parseInt(minus/3600);
  24. if(CMinute<10)
  25. {
  26. CMinute="0"+CMinute;
  27. }
  28. if(CHour<10)
  29. {
  30. CHour="0"+CHour;
  31. }
  32. if(CSecond<10)
  33. {
  34. CSecond="0"+CSecond;
  35. }
  36. $("#hour"+i).html(CHour);
  37. $("#minute"+i).html(CMinute);
  38. $("#second"+i).html(CSecond);
  39. }