SSM项目之商铺系统-前端展示系统之商铺详情页开发(十九)
当我们点击某个商铺就进入了店铺详情页。
我们先看看效果
我们发现和之前开发的店铺列表展示很相似。
那么也是由两个模块构成的
第一个：获取商品类别列表
第二个：获取商品列表
我们先来完成第一个商品类别列表
/*
* 店铺信息和该店铺下面的商品类别列表
* */
@RequestMapping(value = "/listshopdetailpageinfo" ,method=RequestMethod.GET)
@ResponseBody
private Map listShopDetailPageInfo(HttpServletRequest request){
Map modelMap=new HashMap();
long shopId= HttpServletRequestUtil.getLong(request,"shopId");//获取店铺信息和店铺下的商品类型所用的数据
List productCategoryList=null;//存储商品类别列表
Shop shop=null;//存储商铺详情信息
try{
if (shopId>-1){
//先求商铺的详情信息
shop=shopService.getByShopId(shopId);
modelMap.put("shop",shop);//存储商铺详情信息
//求商品类型列表
productCategoryList=productCategoryService.getProductCategoryList(shopId);
modelMap.put("productCategoryList",productCategoryList);
modelMap.put("success",true);
}
}catch (Exception e){
modelMap.put("success",false);
modelMap.put("errMsg",e.getMessage());
return modelMap;
}
return modelMap;
}
第一步：获取商铺id
第二步：当shopId不非法时，我们根据shopId查询商铺列表
第三步：存入map交给前端
view层和另一个模块一起实现最后说
接下来实现商品展示页面：
Controller
/*
* 通过查询条件分页获取商品信息
* */
@RequestMapping(value = "/listproductsbyshop" ,method=RequestMethod.GET)
@ResponseBody
private Map listProductsByShop(HttpServletRequest request){
Map modelMap=new HashMap();
//获取分页信息
int pageIndex=HttpServletRequestUtil.getInt(request,"pageIndex");
int pageSize=HttpServletRequestUtil.getInt(request,"pageSize");
Product productCondition;//存储查询条件用
ProductExecution productExecution=null;//存储查出来的商品信息
try{
if (pageIndex>-1&&pageSize>-1){//判断页码是否符合逻辑
//获取查询条件
long shopId= HttpServletRequestUtil.getLong(request,"shopId");//获取店铺ID
long productCategoryId=HttpServletRequestUtil.getLong(request,"productCategoryId");
String productName=HttpServletRequestUtil.getString(request,"productName");
productCondition=compactProductCondition4Search(shopId,productCategoryId,productName);//组合出通过条件查询的内容
productExecution=productService.queryProductList(productCondition,pageIndex,pageSize);
modelMap.put("productList",productExecution.getProductList());
modelMap.put("count",productExecution.getCount());
modelMap.put("success",true);
}else {
modelMap.put("success",false);
modelMap.put("errMsg","page not corrent");
return modelMap;
}
}catch (Exception e){
modelMap.put("success",false);
modelMap.put("errMsg",e.getMessage());
return modelMap;
}
return modelMap;
}
private Product compactProductCondition4Search(long shopId, long productCategoryId, String productName) throws UnsupportedEncodingException {
Product productCondition=new Product();
if (shopId>-1){
Shop shop=new Shop();
shop.setShopId(shopId);//设置shopid
productCondition.setShop(shop);
}
//判断productCategoryId如果这个参数有值，代表我们通过二级商铺类型查找店铺
if (productCategoryId>-1){
ProductCategory productCategory=new ProductCategory();
productCategory.setProductCategoryId(productCategoryId);
productCondition.setProductCategory(productCategory);
}
//判断productName是否有值
if (productName!=null){
productName= new String(productName.getBytes("ISO-8859-1"), "UTF-8");
productCondition.setProductName(productName);
}
// 查询状态为审核通过的商铺
productCondition.setEnableStatus(1);
return productCondition;
}
通过接受到的条件进行product的条件查询，返回列表，同时是分页查询，这些条件其实就是我们点击商品列表时或者输入商品名字传入的。
我们还要定义一个路由转发到新的html页面
view层：
商店详情
$(function() {
var loading = false;
// 分页允许返回的最大条数，超过此数则禁止访问后台
var maxItems = 20;
// 默认一页返回的商品数
var pageSize = 3;
// 列出商品列表的URL
var listUrl = '/storepro/frontend/listproductsbyshop';
// 默认的页码
var pageNum = 1;
// 从地址栏里获取ShopId
var shopId = getQueryString('shopId');
var productCategoryId = '';
var productName = '';
// 获取本店铺信息以及商品类别信息列表的URL
var searchDivUrl = '/storepro/frontend/listshopdetailpageinfo?shopId=' + shopId;
// 渲染出店铺基本信息以及商品类别列表以供搜索
getSearchDivData();
// 预先加载10条商品信息
addItems(pageSize, pageNum);
// 给兑换礼品的a标签赋值兑换礼品的URL，2.0使用
// $('#exchangelist').attr('href', '/storepro/frontend/awardlist?shopId=' +
// shopId);
// 获取本店铺信息以及商品类别信息列表
function getSearchDivData() {
var url = searchDivUrl;
$
.getJSON(
url,
function(data) {
if (data.success) {
var shop = data.shop;
$('#shop-cover-pic').attr('src', shop.shopImg);
$('#shop-update-time').html(
new Date(shop.lastEditTime)
.Format("yyyy-MM-dd"));
$('#shop-name').html(shop.shopName);
$('#shop-desc').html(shop.shopDesc);
$('#shop-addr').html(shop.shopAddr);
$('#shop-phone').html(shop.phone);
// 获取后台返回的该店铺的商品类别列表
var productCategoryList = data.productCategoryList;
var html = '';
// 遍历商品列表，生成可以点击搜索相应商品类别下的商品的a标签
productCategoryList
.map(function(item, index) {
html += ''
+ item.productCategoryName
+ '';
});
// 将商品类别a标签绑定到相应的HTML组件中
$('#shopdetail-button-div').html(html);
}
});
}
/**
* 获取分页展示的商品列表信息
*
* @param pageSize
* @param pageIndex
* @returns
*/
function addItems(pageSize, pageIndex) {
// 拼接出查询的URL，赋空值默认就去掉这个条件的限制，有值就代表按这个条件去查询
var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='
+ pageSize + '&productCategoryId=' + productCategoryId
+ '&productName=' + productName + '&shopId=' + shopId;
// 设定加载符，若还在后台取数据则不能再次访问后台，避免多次重复加载
loading = true;
// 访问后台获取相应查询条件下的商品列表
$.getJSON(url, function(data) {
if (data.success) {
// 获取当前查询条件下商品的总数
maxItems = data.count;
var html = '';
// 遍历商品列表，拼接出卡片集合
data.productList.map(function(item, index) {
html += '' + ''
+ '' + item.productName
+ '' + ''
+ '' + ''
+ '- '
+ '' + '
' + ''
+ ''
+ '' + item.productDesc
+ '' + '' + ' ' + '
'
+ '' + '' + ''
+ '';
});
// 将卡片集合添加到目标HTML组件里
$('.list-div').append(html);
// 获取目前为止已显示的卡片总数，包含之前已经加载的
var total = $('.list-div .card').length;
// 若总数达到跟按照此查询条件列出来的总数一致，则停止后台的加载
if (total >= maxItems) {
// 隐藏提示符
$('.infinite-scroll-preloader').hide();
} else {
$('.infinite-scroll-preloader').show();
}
// 否则页码加1，继续load出新的店铺
pageNum += 1;
// 加载结束，可以再次加载了
loading = false;
// 刷新页面，显示新加载的店铺
$.refreshScroller();
}
});
}
// 下滑屏幕自动进行分页搜索
$(document).on('infinite', '.infinite-scroll-bottom', function() {
if (loading)
return;
addItems(pageSize, pageNum);
});
// 选择新的商品类别之后，重置页码，清空原先的商品列表，按照新的类别去查询
$('#shopdetail-button-div').on(
'click',
'.button',
function(e) {
// 获取商品类别Id
productCategoryId = e.target.dataset.productSearchId;
if (productCategoryId) {
// 若之前已选定了别的category,则移除其选定效果，改成选定新的
if ($(e.target).hasClass('button-fill')) {
$(e.target).removeClass('button-fill');
productCategoryId = '';
} else {
$(e.target).addClass('button-fill').siblings()
.removeClass('button-fill');
}
$('.list-div').empty();
pageNum = 1;
addItems(pageSize, pageNum);
}
});
// 点击商品的卡片进入该商品的详情页
$('.list-div').on(
'click',
'.card',
function(e) {
var productId = e.currentTarget.dataset.productId;
window.location.href = '/storepro/frontend/productdetail?productId='
+ productId;
});
// 需要查询的商品名字发生变化后，重置页码，清空原先的商品列表，按照新的名字去查询
$('#search').on('change', function(e) {
productName = e.target.value;
$('.list-div').empty();
pageNum = 1;
addItems(pageSize, pageNum);
});
// 点击后打开右侧栏
$('#me').click(function() {
$.openPanel('#panel-right-demo');
});
$.init();
});
.detail-search {
height: 2.2rem;
padding-right: .5rem;
padding-left: .5rem;
background-color: #f7f7f8;
}
.infinite-scroll-preloader {
margin-top: -5px;
}
.shopdetail-button-div {
margin: 0 .3rem;
}
.shopdetail-button-div > .button {
width: 30%;
height: 1.5rem;
line-height: 1.5rem;
display: inline-block;
margin: 1%;
overflow: hidden;
}