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

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

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

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

时间: 2024-10-09 03:33:11

shop--11.前端展示系统--店铺详情(后端)的相关文章

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

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

校园商铺-9前端展示系统-9店铺详情页的前端开发

1.前端 1.1 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>商店详情</title> <meta name="viewport" content

校园商铺-9前端展示系统-8店铺详情页的开发

1.controller层 package com.csj2018.o2o.web.frontend; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springf

shop--11.前端展示系统--首页展示(前端)

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</title> <meta name="viewport" content=&q

第八章 交互技术,8.3 2016双11前端突破(作者:天猫前端团队)

8.3 2016双11前端突破 前言 2016 年天猫前端相比去年有了非常多不同维度的突破,主要可以分为四大类大类: 稳定性.监控 极致的性能优化 业务创新 / 平台建设 技术创新 / 互动 1. 稳定性.监控 商品到每个用户浏览的每个环节都有监控,尤其在针对消费者体验上的 TES,让前端在消费者真实浏览的过程当中也能够有更进一步的分析在不同环境下消费者实际的体验.以及从服务器 Wormhole 渲染层进行了一系列的稳定性.监控. 1.1 Wormhole双11会场稳定性保障 Wormhole承

apache 编译安装与做nagios前端展示

apache编译安装篇 安装apache需安装以下的几个包,apr apr-util,pcre等,当然这几个包也可以使用由系统本身自带的包,但是这里我们编译安装这几个包. 2.下载安装apr, 把文件放到/usr/local/src目录下, tar -zxvf  apr-1.5.2.tar.gz cd  apr-1.5.2 ./configure --prefix=/usr/local/apr/ make make install 3.下载安装 apr-utils tar -zxvf apr-u

基于Spring Boot技术栈 博客系统企业级前后端实战 渐进式讲解+Thymeleaf+Elasticsearch+多种数据库

第1章 Spring Boot 简介讲解Spring Boot的项目背景,已经与其他技术框架(比如,Spring.SpringMVC.SpringCloud等)的关系.简单介绍下Spring Boot 整个生态系统1-1 _Spring Boot博客_课程导学1-2 -Spring Boot 是什么 第2章 开启 Spring Boot 的第一个 Web 项目通过 Spring Initializr 来快速初始化一个 Spring Boot 原型,方便学员来极速体验Spring Boot.本课程

前端监控系统

概述在开发项目的过程中,正式环境出现了浏览器crash,这种情况在开发过程中无法复现,是一个需要长期追踪的问题,因此项目中引入了前端监控系统. 资源加载出错的捕获方案<img src="image.gif" onerror="myFunction()"> document.getElementById("myImg").addEventListener("error", myFunction); function

MySQL存储日志并使用Loganalyzer作为前端展示

MySQL存储日志并使用Loganalyzer作为前端展示 为什么要使用日志 在生产环境中我们可能需要一个较为完整的日志系统来查看运行中主机服务的状态和所作出的操作,我们可以在较大型的网络架构中使用ELK来实现对日志的收集.检索.前端显示,但是中小型架构中使用rsyslog足以对所有服务器的日志进行收集和检索来达到实时分析数据流量的目的. 本文目标 使用rsyslog将两台主机的日志信息存储到MySQL数据库中,并且编译安装Loganalyzer对MySQL中的日志信息使用httpd+php在前