當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/15 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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
下一篇： centos7 centos-home