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

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

/**
     * 获取店铺信息和该店铺下的商品类别列表
     * @param request
     * @return
     */
    @RequestMapping(value = "/getshopdetailpageinfo", method= RequestMethod.GET)
    @ResponseBody
    private 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)
    @ResponseBody
    private Map<String, Object> productListByShop(HttpServletRequest request){
        Map<String, Object> modelMap = new HashMap<>(  );
        //获取页码
        int pageIndex = HttpServletRequestUtil.getInt( request, "pageIndex" );
        //获取每页的信息数量
        int pageSize = HttpServletRequestUtil.getInt( request, "pageSize" );
        //获取shopId
        Long shopId = HttpServletRequestUtil.getLong( request, "shopId");

        //空值判断
        if(pageIndex > -1 && pageSize > -1 && shopId > -1){
            //获取productCategoryId
            Long 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>
<!-- page集合的容器,里面放多个平行的.page,其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page">
        <!-- 标题栏 -->
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" external
               href="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">
                <!--<a href="#" class="button">所有货物</a>
                <a href="#" class="button">吃的</a>
                <a href="#" class="button">喝的</a>-->
            </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 class="card">
                    <div class="card-header">传统火锅店</div>
                    <div class="card-content">
                        <div class="list-block media-list">
                            <ul>
                                <li class="item-content">
                                    <div class="item-media">
                                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-subtitle">标题</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-footer">
                        <span>2015/01/15</span>
                        <span>5 评论</span>
                    </div>
                </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>
            <!-- Click on link with "close-panel" class will close panel -->
        </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() {
    //无限滚动事件
    // 加载flag
    var loading = false;
    // 最多可加载的条目,超过此数目,禁止访问后台
    var maxItems = 20;
    // 每次加载添加多少条目
    var pageSize = 3;
    //获取商品列表的URL
    var listUrl = '/frontend/prouctlistbyshop';
    //页码
    var pageNum = 1;
    //从地址栏URL里尝试获取shopId
    var shopId = getQueryString('shopId');
    var productCategoryId = '';
    var productName = '';
    //获取本店铺详细信息及商品类别信息列表的URL
    var 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();
});

  

posted @ 2018-05-11 23:04  SkyeAngel  阅读(702)  评论(0编辑  收藏  举报