shop--11.前端展示系统--店铺列表（前端）

利用SUI Mobile的模板来进行拼装

http://m.sui.taobao.org/components/#searchbar

搜索栏、栅栏和按钮组合

卡片

无限滚动

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">商店列表</h1>
        </header>
 
        <!--搜索栏-->
        <div class="bar bar-header-secondary">
            <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>
 
        <!-- 工具栏 -->
        <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="shoplist-button-div" id="shoplist-search-div">
                <!--<a href="#" class="button">所有货物</a>
                <a href="#" class="button">吃的</a>
                <a href="#" class="button">喝的</a>-->
            </div>
            <!--区域列表展示区 一个select控件-->
            <div class="select-wrap">
                <select class="select" id="area-search"></select>
            </div>
            <!--店铺列表在此添加  卡片-->
            <div class="list-div shop-list">
                <!--<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/shoplist.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/common/common.js' charset="utf-8"></script>
</body>
</html>

shoplist.css

.infinite-scroll-preloader {
    margin-top: -5px;
}
.shoplist-button-div {
    margin: 0 .3rem;
}
.shoplist-button-div > .button {
    width: 30%;
    height: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    margin: 1%;
    overflow: hidden;
}
.select-wrap {
    margin: 0 .5rem;
}
.select {
    border: 1px solid #0894ec;
    color: #0894ec;
    background-color: #efeff4;
    width: 100%;
    height: 1.5rem;
    font-size: .7rem;
}

shoplist.js

$(function() {
    //无限滚动事件
    // 加载flag
    var loading = false;
    // 最多可加载的条目，超过此数目，禁止访问后台
    var maxItems = 999;
    // 每次加载添加多少条目
    var pageSize = 10;
    //获取店铺列表的URL
    var listUrl = '/o2o/frontend/listshops';
    //获取店铺类别列表以及区域列表的URL
    var searchDivUrl = '/o2o/frontend/listshopspageinfo';
    //页码
    var pageNum = 1;
    //从地址栏URL里尝试获取parent shop category Id
    var parentId = getQueryString('parentId');
    var areaId = '';
    var shopCategoryId = '';
    var shopName = '';
    //渲染出店铺类别列表以及区域列表以供搜索
    getSearchDivData();
    //预先加载10条店铺信息
    addItems(pageSize, pageNum);
 
    /**
     * 获取店铺类别列表以及区域列表
     */
    function getSearchDivData(){
        //如果传入了parentId，则将parentId传入后台，用来获取parentId下的二级店铺列表
        var url = searchDivUrl + '?' + 'parentId=' + parentId;
        $.getJSON(url, function(data) {
            if (data.success) {
                //获取后台返回的店铺类别列表
                var shopCategoryList = data.shopCategoryList;
                var html = '';
                html += '<a href="#" class="button" data-category-id=""> 全部类别  </a>';
                //遍历店铺类别列表，拼接处 a 标签集
                shopCategoryList.map(function(item, index) {
                    html += '<a href="#" class="button" data-category-id='
                        + item.shopCategoryId
                        + '>'
                        + item.shopCategoryName
                        + '</a>';
                });
                //将拼接好的类别标签嵌入前提的html组件里
                $('#shoplist-search-div').html(html);
                var selectOptions = '<option value="">全部街道</option>';
                //获取后台返回的区域列表
                var areaList = data.areaList;
                //遍历区域列表，拼接处option标签集
                areaList.map(function(item, index) {
                    selectOptions += '<option value="'
                        + item.areaId + '">'
                        + item.areaName + '</option>';
                });
                //将标签集添加到area列表里
                $('#area-search').html(selectOptions);
            }
        });
    }
 
 
    /**
     * 获取分页展示的店铺列表信息
     * @param pageSize
     * @param pageIndex
     */
    function addItems(pageSize, pageIndex) {
        //拼接出查询的URL，为空就默认去掉这个条件的限制，有值就代表按这个条件去查询
        var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='
            + pageSize + '&parentId=' + parentId + '&areaId=' + areaId
            + '&shopCategoryId=' + shopCategoryId + '&shopName=' + shopName;
        //设定加载符，若还在后台取数据则不能再次访问后台，避免多次重复加载
        loading = true;
        //访问后台获取相应查询条件下的店铺列表
        $.getJSON(url, function(data) {
            if (data.success) {
                //获取当前查询条件下的店铺总数
                maxItems = data.count;
                var html = '';
                //遍历店铺列表，拼接处卡片集合
                data.shopList.map(function(item, index) {
                    html += '' + '<div class="card" data-shop-id="'
                        + item.shopId + '">' + '<div class="card-header">'
                        + item.shopName + '</div>'
                        + '<div class="card-content">'
                        + '<div class="list-block media-list">' + '<ul>'
                        + '<li class="item-content">'
                        + '<div class="item-media">' + '<img src="'
                        + item.shopImg + '" width="44">' + '</div>'
                        + '<div class="item-inner">'
                        + '<div class="item-subtitle">' + item.shopDesc
                        + '</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').remove();
                }
                //否则页码+1，继续load新的店铺
                pageNum += 1;
                //加载结束，可以再次加载
                loading = false;
                //刷新页面，显示新加载的店铺
                $.refreshScroller();
            }
        });
    }
 
    //下滑屏幕自动进行分页搜索
    $(document).on('infinite', '.infinite-scroll-bottom', function() {
        if (loading)
            return;
        addItems(pageSize, pageNum);
    });
 
 
    //点击店铺的卡片进入该店铺的详情页
    $('.shop-list').on('click', '.card', function(e) {
        var shopId = e.currentTarget.dataset.shopId;
        window.location.href = '/o2o/frontend/shopdetail?shopId=' + shopId;
    });
 
    //选择新的店铺类别之后，重置页码，清空原先的店铺列表，按照新的类别去查询
    $('#shoplist-search-div').on(
        'click',
        '.button',
        function(e) {
            //如果传递过来的是一个父类下的子类
            if (parentId) {
                shopCategoryId = e.target.dataset.categoryId;
                //若之前已选定了别的category，则移除其选定效果，改成选定新的
                if ($(e.target).hasClass('button-fill')) {
                    $(e.target).removeClass('button-fill');
                    shopCategoryId = '';
                } else {
                    $(e.target).addClass('button-fill').siblings()
                        .removeClass('button-fill');
                }
                //由于查询条件改变，清空店铺列表再进行查询
                $('.list-div').empty();
                //重置页码
                pageNum = 1;
                addItems(pageSize, pageNum);
            } else {
                // 如果传递过来的父类为空，则按照父类查询
                parentId = e.target.dataset.categoryId;
                if ($(e.target).hasClass('button-fill')) {
                    $(e.target).removeClass('button-fill');
                    parentId = '';
                } else {
                    $(e.target).addClass('button-fill').siblings()
                        .removeClass('button-fill');
                }
                //由于查询条件改变，清空店铺列表再进行查询
                $('.list-div').empty();
                //重置页码
                pageNum = 1;
                addItems(pageSize, pageNum);
                parentId = '';
            }
        });
 
    //需要查询的店铺名字发生变化后，重置页码，清空原先的店铺列表，按照新的名字进行查询
    $('#search').on('input', function(e) {
        shopName = e.target.value;
        $('.list-div').empty();
        pageNum = 1;
        addItems(pageSize, pageNum);
    });
 
    //需要查询的区域信息发生变化后，重置页码，清空原先的店铺列表，按照新的名字进行查询
    $('#area-search').on('change', function() {
        areaId = $('#area-search').val();
        $('.list-div').empty();
        pageNum = 1;
        addItems(pageSize, pageNum);
    });
 
    //点击后打开右侧栏
    $('#me').click(function() {
        $.openPanel('#panel-left-demo');
    });
 
    //初始化页面
    $.init();
});

shop--11.前端展示系统--店铺列表（前端）

猜你喜欢