查询页

查询效果图：

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

function show(){
appcan.request.ajax({
url : api+'/api/brandAndCategory/get',
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.categories.length; 
var lenbrands=data.data.brands.length; 
var html1='';
var html2='';                         
for(var j=0;j<12;j++){
var brands_id=data.data.brands[j]._id;
var brands_name=data.data.brands[j].name;
var brands_img=api+data.data.brands[j].brandImage;
$("#brands").removeClass('uhide');
$("#categories").removeClass('uhide');
html2+='<li style="width:25%;display: inline-block;padding-top:0.5em" onclick="searchbrand(\\'' + brands_id + '\\', \\'' + brands_name + '\\', \\'' + brands_img + '\\')">'
+'<div class="ub ub-ver">'
+' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
+'<img src="'+brands_img+'" style="width:3.3em"/ >'
+'<div class="" style="margin-top:-1.5em">'+brands_name
+'</div>'                                    
+'</div>'
+' </div>'
+ '</li>'
$('#goodList').html(html2);
}
for(var i=0;i<len;i++){
var good_id= data.data.categories[i]._id;
var good_name=data.data.categories[i].name;
console.log(data);
var categories_img=api+data.data.categories[i].categoryImage;
html1+='<li style="width:20%;display: inline-block;padding:0.5em 0" onclick="searchCategories(\\'' + good_id + '\\')">'
+'<div class="ub ub-ver">'
+' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
+'<div class="" style="margin-top:-1.5em">'+good_name
+'</div>'                                    
+'</div>'
+' </div>'
+ '</li>'
$('#categoriesList').html(html1);
}                    
var html2='<li style="width:19%;display: inline-block;padding:0.5em 0" onclick="show()">'
+'<div class="ub ub-ver">'
+' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
+'<div class="" style="margin-top:-1.5em">全部'
+'</div>'                                    
+'</div>'
+' </div>'
+ '</li>'
$('#categoriesList').prepend(html2);
}
},
error : function(errMessage) {
//alert("errMessage"+errMessage);                 
}
});            
}

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

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

function searchCategories(id){
appcan.request.ajax({
url : api+'/api/brand/getBrandsByCategoryid?cid='+id,
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.rows.length; 
var html=''; 
$("#goodList").html(" ");                    
for(var j=0;j<12;j++){
var brands_id=data.rows[j].brand._id;
var brands_name=data.rows[j].brand.name;
var brands_img=api+data.rows[j].brand.brandImage;
$("#brands").removeClass('uhide');
html+='<li style="width:25%;display: inline-block;padding-top:0.5em" onclick="searchbrand(\\'' + brands_id + '\\', \\'' + brands_name + '\\', \\'' + brands_img + '\\')">'
+'<div class="ub ub-ver">'
+' <div class="ub ub-f1 ub-ver ub-pc ub-ac">'
+'<img src="'+brands_img+'" style="width:3.3em"/ >'
+'<div class="" style="margin-top:-1.5em">'+brands_name
+'</div>'                                    
+'</div>'
+' </div>'
+ '</li>'
$('#goodList').html(html);
}
}
},
error : function(errMessage) {
//alert("errMessage"+errMessage);                 
}
});   
}

还需要帮助吗? 联系我们

最新更新 8th Jul 2021