码迷,mamicode.com
首页 > 其他好文 > 详细

shop--11.前端展示系统--店铺详情(后端)

时间:2018-08-05 21:25:54      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:white   set   查询条件   hasclass   ram   scale   ring   als   img   

大多与店铺列表展示页面相同

shopdetail.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="/o2o/frontend/myrecord" class="close-panel">消费记录</a>
            </p>
            <p>
                <a href="/o2o/frontend/mypoint" class="close-panel">我的积分</a>
            </p>
            <p>
                <a href="/o2o/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/common.js‘ charset="utf-8"></script>
</body>
</html>

 

 

shopdetail.js

 

$(function() {
    //无限滚动事件
    // 加载flag
    var loading = false;
    // 最多可加载的条目,超过此数目,禁止访问后台
    var maxItems = 20;
    // 每次加载添加多少条目
    var pageSize = 3;
    //获取商品列表的URL
    var listUrl = ‘/o2o/frontend/listproductsbyshop‘;
    //页码
    var pageNum = 1;
    //从地址栏URL里尝试获取shopId
    var shopId = getQueryString(‘shopId‘);
    var productCategoryId = ‘‘;
    var productName = ‘‘;
    //获取本店铺详细信息及商品类别信息列表的URL
    var searchDivUrl = ‘/o2o/frontend/listshopdetailpageinfo?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 = ‘/o2o/frontend/productdetail?productId=‘ + productId;
    });
 
    //把原来的input改成change 因为input响应的太快了 而 empty太慢
    //需要查询的店铺名字发生变化后,重置页码,清空原先的店铺列表,按照新的名字进行查询
    $(‘#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();
});

 

shop--11.前端展示系统--店铺详情(后端)

标签:white   set   查询条件   hasclass   ram   scale   ring   als   img   

原文地址:https://www.cnblogs.com/windbag7/p/9426919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!