查询页

查询效果图：

查询页 - 图1

1、这里使用appcan.request.ajax发出请求，查询主要在后台操作。调用后台接口获取种类列表内容以及全部种类的热门品牌，代码如下：

  1. function show(){
  2. appcan.request.ajax({
  3. url : api+'/api/brandAndCategory/get',
  4. type : 'GET',
  5. dataType : 'json',
  6. success : function(data) {                          
  7. if(data.status == 0){
  8. uexWindow.toast("0", "5", data.msg, "2000");
  9. }
  10. if (data.status == 1) { 
  11. var len=data.data.categories.length; 
  12. var lenbrands=data.data.brands.length; 
  13. var html1='';
  14. var html2='';                         
  15. for(var j=0;j<12;j++){
  16. var brands_id=data.data.brands[j]._id;
  17. var brands_name=data.data.brands[j].name;
  18. var brands_img=api+data.data.brands[j].brandImage;
  19. $("#brands").removeClass('uhide');
  20. $("#categories").removeClass('uhide');
  21. html2+='<li style="width:25%;display: inline-block;padding-top:0.5em" onclick="searchbrand(\\'' + brands_id + '\\', \\'' + brands_name + '\\', \\'' + brands_img + '\\')">'
  22. +'<div class="ub ub-ver">'
  23. +' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
  24. +'<img src="'+brands_img+'" style="width:3.3em"/ >'
  25. +'<div class="" style="margin-top:-1.5em">'+brands_name
  26. +'</div>'                                    
  27. +'</div>'
  28. +' </div>'
  29. + '</li>'
  30. $('#goodList').html(html2);
  31. }
  32. for(var i=0;i<len;i++){
  33. var good_id= data.data.categories[i]._id;
  34. var good_name=data.data.categories[i].name;
  35. console.log(data);
  36. var categories_img=api+data.data.categories[i].categoryImage;
  37. html1+='<li style="width:20%;display: inline-block;padding:0.5em 0" onclick="searchCategories(\\'' + good_id + '\\')">'
  38. +'<div class="ub ub-ver">'
  39. +' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
  40. +'<div class="" style="margin-top:-1.5em">'+good_name
  41. +'</div>'                                    
  42. +'</div>'
  43. +' </div>'
  44. + '</li>'
  45. $('#categoriesList').html(html1);
  46. }                    
  47. var html2='<li style="width:19%;display: inline-block;padding:0.5em 0" onclick="show()">'
  48. +'<div class="ub ub-ver">'
  49. +' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
  50. +'<div class="" style="margin-top:-1.5em">全部'
  51. +'</div>'                                    
  52. +'</div>'
  53. +' </div>'
  54. + '</li>'
  55. $('#categoriesList').prepend(html2);
  56. }
  57. },
  58. error : function(errMessage) {
  59. //alert("errMessage"+errMessage);                 
  60. }
  61. });            
  62. }

点击品牌跳到相应品牌查询页，点击更多跳转到品牌列表页。

2、点击上面的种类列表，根据不同种类显示该种类热门商品，代码如下：

  1. function searchCategories(id){
  2. appcan.request.ajax({
  3. url : api+'/api/brand/getBrandsByCategoryid?cid='+id,
  4. type : 'GET',
  5. dataType : 'json',
  6. success : function(data) {                          
  7. if(data.status == 0){
  8. uexWindow.toast("0", "5", data.msg, "2000");
  9. }
  10. if (data.status == 1) { 
  11. var len=data.rows.length; 
  12. var html=''; 
  13. $("#goodList").html(" ");                    
  14. for(var j=0;j<12;j++){
  15. var brands_id=data.rows[j].brand._id;
  16. var brands_name=data.rows[j].brand.name;
  17. var brands_img=api+data.rows[j].brand.brandImage;
  18. $("#brands").removeClass('uhide');
  19. html+='<li style="width:25%;display: inline-block;padding-top:0.5em" onclick="searchbrand(\\'' + brands_id + '\\', \\'' + brands_name + '\\', \\'' + brands_img + '\\')">'
  20. +'<div class="ub ub-ver">'
  21. +' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
  22. +'<img src="'+brands_img+'" style="width:3.3em"/ >'
  23. +'<div class="" style="margin-top:-1.5em">'+brands_name
  24. +'</div>'                                    
  25. +'</div>'
  26. +' </div>'
  27. + '</li>'
  28. $('#goodList').html(html);
  29. }
  30. }
  31. },
  32. error : function(errMessage) {
  33. //alert("errMessage"+errMessage);                 
  34. }
  35. });   
  36. }