当前位置：首页 > 前端技术 > HTML >内容正文

HTML

shop--10.店铺详情（后台+前端类似于shoplist）

发布时间：2025/3/15 HTML 55 豆豆

生活随笔收集整理的这篇文章主要介绍了 shop--10.店铺详情（后台+前端类似于shoplist）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.获取店铺的详细信息和商品类别列表

/*** 获取店铺信息和该店铺下的商品类别列表* @param request* @return*/@RequestMapping(value = "/getshopdetailpageinfo", method= RequestMethod.GET)@ResponseBodyprivate Map<String, Object> getShopDetailPageInfo(HttpServletRequest request){Map<String, Object> modelMap = new HashMap<>();Long shopId = HttpServletRequestUtil.getLong( request, "shopId" );Shop shop = null;List<ProductCategory> productCategoryList = null;//获取店铺id为shopId的商品信息if(shopId != -1){//获取shopId的店铺信息shop = shopService.getShopByShopId( shopId );//获取该店铺下的商品列表productCategoryList = productCategoryService.getProductCategoryList( shopId );modelMap.put( "success", true );modelMap.put( "shop", shop );modelMap.put( "productCategoryList", productCategoryList );} else{modelMap.put( "success", false );modelMap.put( "errMsg", "empty shopId" );}return modelMap;}

2.根据查询条件，返回该店铺下的商品详细信息

/*** 根据查询条件，分页列出该店铺下的商品信息* @param request* @return*/@RequestMapping(value = "/prouctlistbyshop", method = RequestMethod.GET)@ResponseBodyprivate Map<String, Object> productListByShop(HttpServletRequest request){Map<String, Object> modelMap = new HashMap<>( );//获取页码int pageIndex = HttpServletRequestUtil.getInt( request, "pageIndex" );//获取每页的信息数量int pageSize = HttpServletRequestUtil.getInt( request, "pageSize" );//获取shopIdLong shopId = HttpServletRequestUtil.getLong( request, "shopId");//空值判断if(pageIndex > -1 && pageSize > -1 && shopId > -1){//获取productCategoryIdLong productCategoryId = HttpServletRequestUtil.getLong( request, "productCategoryId" );//获取productName 进行模糊查询String productName = HttpServletRequestUtil.getString( request, "productName" );Product productCondition = compactProuctCondition4Search(shopId, productCategoryId, productName);ProductExecution productExecution = productService.getProductList( productCondition, pageIndex, pageSize);modelMap.put( "success", true );modelMap.put( "productList", productExecution.getProductList() );modelMap.put( "count", productExecution.getCount() );} else{modelMap.put( "success", false );modelMap.put( "errMsg", "empty pageSize or pageIndex or shopId" );}return modelMap;}/*** 组合查询条件到productCondition，进行进一步的店铺下的相关商品信息查询* @param shopId* @param productCategoryId* @param productName* @return*/private Product compactProuctCondition4Search(Long shopId, Long productCategoryId, String productName) {Product productCondition = new Product();Shop shop = new Shop();shop.setShopId( shopId );productCondition.setShop( shop );//查询某个商品类别下的商品列表if(productCategoryId != -1){ProductCategory productCategory = new ProductCategory();productCategory.setProductCategoryId( productCategoryId );productCondition.setProductCategory( productCategory );}//进行productName的模糊查询if(productName != null){productCondition.setProductName(productName);}//只查询商品中status=1的上架的商品productCondition.setStatus( 1 );return productCondition;}

前端

shopdetail.html 类似于shoplist.html

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>商店详情</title><meta name="viewport" content="initial-scale=1, maximum-scale=1"><link rel="shortcut icon" href="/favicon.ico"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"><link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"><link rel="stylesheet" href="../resources/css/frontend/shoplist.css"> </head> <body>  <div class="page-group"><div class="page"><header class="bar bar-nav"><a class="button button-link button-nav pull-left" externalhref="index" data-transition="slide-out"><span class="icon icon-left"></span>返回</a><h1 class="title" id="shop-name">店铺详情</h1></header><nav class="bar bar-tab"><a class="tab-item external active" href="frontend/index" external><span class="icon icon-home"></span><span class="tab-label">首页</span></a><a class="tab-item external" href="#" id="me"><span class="icon icon-me"></span><span class="tab-label">个人</span></a></nav><div class="content infinite-scroll infinite-scroll-bottom" data-distance="100"><div class="shop-detail-dev"><div class="card"><div valign="bottom" class="card-header color-white no-border no-padding"><img class='card-cover' id="shop-cover-pic" src="" alt=""></div><div class="card-content"><div class="card-content-inner"><p class="color-gray"><span id="shop-uptate-time"></span></p><p id="shop-desc"></p></div></div><div class="card-footer"><span id="shop-addr"></span><span id="shop-phone"></span></div></div></div><div class="shopdetail-button-div" id="shopdetail-button-div"></div><div class="detail-search"><div class="searchbar"><a class="searchbar-cancel">取消</a><div class="search-input"><label class="icon icon-search" for="search"></label><input type="search" id='search' placeholder='输入关键字...'/></div></div></div><div class="list-div"></div><div class="infinite-scroll-preloader"><div class="preloader"></div></div></div></div><div class="panel-overlay"></div><div class="panel panel-right panel-reveal" id="panel-left-demo"><div class="content-block"><p><a href="/myo2o/frontend/myrecord" class="close-panel">消费记录</a></p><p><a href="/myo2o/frontend/mypoint" class="close-panel">我的积分</a></p><p><a href="/myo2o/frontend/pointrecord" class="close-panel">积分兑换记录</a></p></div></div> </div><script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> <script type='text/javascript' src='../resources/js/frontend/shopdetail.js' charset='utf-8'></script> <script type='text/javascript' src='../resources/js/common/commons.js' charset="utf-8"></script> </body> </html>

shopdetail.js

$(function() {//无限滚动事件// 加载flagvar loading = false;// 最多可加载的条目，超过此数目，禁止访问后台var maxItems = 20;// 每次加载添加多少条目var pageSize = 3;//获取商品列表的URLvar listUrl = '/frontend/prouctlistbyshop';//页码var pageNum = 1;//从地址栏URL里尝试获取shopIdvar shopId = getQueryString('shopId');var productCategoryId = '';var productName = '';//获取本店铺详细信息及商品类别信息列表的URLvar searchDivUrl = '/frontend/getshopdetailpageinfo?shopId=' + shopId;//渲染出店铺基本信息及商品类别列表以供搜索getSearchDivData();//预先加载10条店铺信息addItems(pageSize, pageNum);/*** 获取店铺详细信息以及商品类别信息列表*/function getSearchDivData(){//如果传入了parentId，则将parentId传入后台，用来获取parentId下的二级店铺列表var url = searchDivUrl;$.getJSON(url, function(data) {if (data.success) {//获取后台返回的店铺类别列表var shop = data.shop;$('#shop-cover-pic').attr('src', shop.shopImg);$('#shop-uptate-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);html += '<a href="#" class="button" data-category-id=""> 全部类别 </a>';//获取后台返回的店铺的商品类别列表var productCategoryList = data.productCategoryList;var html = '';//遍历商品类别列表，生成可以点击搜索相应商品类别下的商品的a标签productCategoryList.map(function(item, index) {html += '<a href="#" class="button" data-product-search-id='+ item.productCategoryId+ '>'+ item.productCategoryName+ '</a>';});//将拼接好的商品类别a标签绑定到相应的的html组件里$('#shopdetail-button-div').html(html);}});}/*** 获取分页展示的商品列表信息* @param pageSize* @param pageIndex*/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 += '' + '<div class="card" data-product-id='+ item.productId + '>'+ '<div class="card-header">' + item.productName+ '</div>' + '<div class="card-content">'+ '<div class="list-block media-list">' + '<ul>'+ '<li class="item-content">'+ '<div class="item-media">' + '<img src="'+ item.imgAddr + '" width="44">' + '</div>'+ '<div class="item-inner">'+ '<div class="item-subtitle">' + item.productDesc+ '</div>' + '</div>' + '</li>' + '</ul>'+ '</div>' + '</div>' + '<div class="card-footer">'+ '<p class="color-gray">'+ new Date(item.lastEditTime).Format("yyyy-MM-dd")+ '更新</p>' + '<span>点击查看</span>' + '</div>'+ '</div>';});//将卡片集合添加到目录html组件里$('.list-div').append(html);//获取目前为止已显示的卡片总数，包含之前已经加载的var total = $('.list-div .card').length;//若总数达到按照此查询条件列出来的总数一致时，则停止后台的加载if (total >= maxItems) {/* // 加载完毕，则注销无限加载事件，以防不必要的加载$.detachInfiniteScroll($('.infinite-scroll'));*/// 隐藏加载提示符$('.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) {//如果传递过来的是一个父类下的子类productCategoryId = e.target.dataset.productSearchId;if (productCategoryId) {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 producyId = e.currentTarget.dataset.productId;window.location.href = '/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-left-demo');});//初始化页面$.init(); });

转载于:https://www.cnblogs.com/SkyeAngel/p/9026965.html

总结

以上是生活随笔为你收集整理的shop--10.店铺详情（后台+前端类似于shoplist）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： vim安装时报错:Depends:vim
下一篇：前端知识复习（一）