shop--10.店铺列表(前端)

利用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="/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/shoplist.js‘ charset=‘utf-8‘></script>
<script type=‘text/javascript‘ src=‘../resources/js/common/commons.js‘ charset="utf-8"></script>
</body>
</html>

  

shoplist.js

$(function() {
    //无限滚动事件
    // 加载flag
    var loading = false;
    // 最多可加载的条目,超过此数目,禁止访问后台
    var maxItems = 999;
    // 每次加载添加多少条目
    var pageSize = 10;
    //获取店铺列表的URL
    var listUrl = ‘/frontend/listshop‘;
    //获取店铺类别列表以及区域列表的URL
    var searchDivUrl = ‘/frontend/listshoppageinfo‘;
    //页码
    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 = ‘/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();
});

  

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;
}

  

commons.js

function changeVerifyCode(img){
    img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}

/**
 * 获取前端url中的name的id值
 * @param name
 * @returns {*}
 */
function getQueryString(name){
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r != null){
        return decodeURIComponent(r[2]);
    }
    return ‘‘;
}

Date.prototype.Format = function(fmt) {
    var o = {
        "M+" : this.getMonth() + 1, // 月份
        "d+" : this.getDate(), // 日
        "h+" : this.getHours(), // 小时
        "m+" : this.getMinutes(), // 分
        "s+" : this.getSeconds(), // 秒
        "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
        "S" : this.getMilliseconds()
        // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
            .substr(4 - RegExp.$1.length));
    for ( var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

  

原文地址:https://www.cnblogs.com/SkyeAngel/p/9026942.html

时间: 2024-11-09 16:30:23

shop--10.店铺列表(前端)的相关文章

shop--11.前端展示系统--店铺列表(后端)

按照页面原型设计 点击全部商店后加载一级商铺列表,加载对应的数据 点击特定的一级商铺列表,加载对应商铺列表下的数据 区域显示全部区域 店铺列表页面需要支持分页功能,使用无极滚动的样式 店铺列表页面需要支持多条件排列组合查询店铺信息 <select id="queryShopList" resultMap="shopMap"> SELECT s.shop_id, s.shop_name, s.shop_desc, s.shop_addr, s.phone,

shop--8.店铺列表展示--Dao层

实现商铺管理 实现商店列表 实现分页查询店铺,通过条件组合,来筛选出条件范围内的店铺列表 分页查询中使用LIMIT 第一个参数指定第一个返回记录行的偏移量,第二个参数指定返回记录行的最大数目 1 /** 2 * 分页查询店铺,可输入的条件有:店铺名(模糊),店铺状态,店铺类别,区域id,owner 3 * @param shopCondition 4 * @param rowIndex 从第几行开始取数据 5 * @param pageSize 表示返回多少行数据 6 * @param 标签的作

shop--8.店铺列表展示--Service层

在service层中, 有一个问题,就是: dao层中的分页查询传参,传入的是rowIndex(从第几行开始查询), pageSize(查询多少条记录) 而在service层中分页查询传的是pageIndex(第几页),pageSize 所以在第一个参数要有一个转换才可以 所以编写一个工具类,将pageIndex转为rowIndex PageCalculator 1 /** 2 * 将pageIndex(第几页)转换为查询结果中的第几行rowIndex 3 * 如果pageIndex是1 pag

校园商铺-6店铺编辑列表和列表功能-6店铺列表展示之Service层的实现

1. Service层 为什么返回shopExecution? 原因:需要将这个shopList还有它的count整合在一起返回.而shopExecution正好满足了我们的条件. package com.csj2018.o2o.service; import java.io.InputStream; import com.csj2018.o2o.entity.Shop; import com.csj2018.o2o.exceptions.ShopOperationException; impo

10个Web前端值得收藏的背景全屏效果展示(附源码)(上)

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.特别是在移动端大显身手.这篇文章挑选了10个绚丽的背景全景展示效果,希望对你有所帮助. 1.  JS图片背景全屏代码实现物理效果 玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标滑轮放大或者缩小,有不同的效果,赶紧来体验一下. 源码下载  /  在线演示 2.  CSS3学习 - 网站背景拉伸平铺jQuery插件 这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本

90网论坛推荐10大H5前端框架,建议好好学习一下

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一 下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了. 原本写这篇文章想围绕着 CSS 框架来的,但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架,并且自己靠着一点 JS 功 底,就想专门针对 CSS,所以最后来个大锅乱炖都大致聊聊.下面的框架也没有什么先

10分钟学会前端调试利器——FireBug

概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前端开发需要的全部功能.官方网站:www.getfirebug.com 如何获取Firebug? 因为它是Firefox浏览器的一个扩展插件,所以首先需要下载Firefox浏览器.读者可以访问www.mozilla.com下载并安装Firefox浏览器.安装完成后用它访问https://addons.

10大H5前端框架,让你开发不愁

作为一名在前端死缠烂打6年并且懒到不行的攻城狮,这几年阅过很多从知名到很知名的前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖,凑够字数也就全剧终了.下面的框架也没有什么先后顺序之分,我想到啥就写啥啦( 作为前端,我一向都这么的任性 ^_^ ). Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道

(转)10大H5前端框架

http://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了. 原本写这篇文章想围绕着 CSS 框架来的,但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架,并且自己靠