商铺项目（店铺列表开发）
先做后端：
package com.ouyan.o2o.dao; import static org.junit.Assert.assertEquals; import java.util.Date; import java.util.List; import org.junit.Ignore; import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired; import com.ouyan.o2o.BaseTest; import com.ouyan.o2o.entity.Area; import com.ouyan.o2o.entity.PersonInfo; import com.ouyan.o2o.entity.Shop; import com.ouyan.o2o.entity.ShopCategory; public class ShopDaoTest extends BaseTest { @Autowired private ShopDao shopDao; @Test public void testQueryShopListAndCount(){ Shop shopCondition = new Shop(); PersonInfo owner = new PersonInfo(); owner.setUserId(1L); shopCondition.setOwner(owner); List<Shop> shopList = shopDao.queryShopList(shopCondition, 0, 5); System.out.println(shopList.size()); int i = shopDao.queryShopCount(shopCondition); System.out.println(i); } @Test @Ignore public void testQueryByshopId() { Shop shop = shopDao.queryByShopId(62L); System.out.println(shop.getShopId()); System.out.println(shop.getShopName()); } @Test @Ignore public void testInsertShop() { Shop shop = new Shop(); PersonInfo owner = new PersonInfo(); Area area = new Area(); ShopCategory shopCategory = new ShopCategory(); owner.setUserId(1L); area.setAreaId(2); shopCategory.setShopCategoryId(33L); shop.setOwner(owner); shop.setArea(area); shop.setShopCategory(shopCategory); shop.setShopName("测试的店铺"); shop.setShopDesc("test"); shop.setShopAddr("test"); shop.setPhone("test"); shop.setShopImg("test"); shop.setCreateTime(new Date()); shop.setEnableStatus(1); shop.setAdvice("审核中"); int effectedNum = shopDao.insertShop(shop); assertEquals(1, effectedNum); } @Test @Ignore public void testUpdateShop() { Shop shop = new Shop(); shop.setShopId(30L); shop.setShopDesc("测试描述"); shop.setShopAddr("测试地址"); shop.setLastEditTime(new Date()); int effectedNum = shopDao.updateShop(shop); assertEquals(1, effectedNum); } }
package com.ouyan.o2o.service.impl; import java.io.IOException; import java.util.Date; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import com.ouyan.o2o.dao.ShopDao; import com.ouyan.o2o.dto.ImageHolder; import com.ouyan.o2o.dto.ShopExecution; import com.ouyan.o2o.entity.Shop; import com.ouyan.o2o.enums.ShopStateEnum; import com.ouyan.o2o.exceptions.ShopOperationException; import com.ouyan.o2o.service.ShopService; import com.ouyan.o2o.util.ImageUtil; import com.ouyan.o2o.util.PageCalculator; import com.ouyan.o2o.util.PathUtil; @Service public class ShopServiceImpl implements ShopService{ @Autowired private ShopDao shopDao; @Override @Transactional public ShopExecution addShop(Shop shop, ImageHolder thumbnail) { //空值判断 if(shop==null){ return new ShopExecution(ShopStateEnum.NULL_SHOP_INFO); } try { //给店铺信息赋值初始值 shop.setEnableStatus(0); shop.setCreateTime(new Date()); shop.setLastEditTime(new Date()); //添加店铺信息 int effectedNum = shopDao.insertShop(shop); if(effectedNum<=0){ throw new ShopOperationException("店铺创建失败"); }else{ if(thumbnail.getImage()!=null){ //存储图片 try { addShopImg(shop,thumbnail); } catch (Exception e) { throw new ShopOperationException("addShopImg error:"+e.getMessage()); } effectedNum = shopDao.updateShop(shop); if(effectedNum<=0){ throw new ShopOperationException("更新图片地址失败"); } } } } catch (Exception e) { throw new ShopOperationException("addShop error: "+ e.getMessage()); } return new ShopExecution(ShopStateEnum.CHECK,shop); } private void addShopImg(Shop shop, ImageHolder thumnail) throws ShopOperationException, IOException { //获取shop图片的相对路径 String dest = PathUtil.getShopImagePath(shop.getShopId()); String shopImgAddr = ImageUtil.generateThumbnail(thumnail,dest); shop.setShopImg(shopImgAddr); } @Override public Shop getByShopId(long shopId) { return shopDao.queryByShopId(shopId); } @Override public ShopExecution modifyShop(Shop shop,ImageHolder thumbnail) throws ShopOperationException { if(shop==null||shop.getShopId()==null){ return new ShopExecution(ShopStateEnum.NULL_SHOP_INFO); }else{ //判断是否需要处理图片 try{ if(thumbnail.getImage()!=null&&thumbnail.getImageName()!=null&&!"".equals(thumbnail.getImageName())){ Shop tempShop = shopDao.queryByShopId(shop.getShopId()); if(tempShop.getShopImg()!=null){ ImageUtil.deleteFileOrPath(tempShop.getShopImg()); } try { addShopImg(shop,thumbnail); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } //更新店铺信息 shop.setLastEditTime(new Date()); int effectedNum = shopDao.updateShop(shop); if(effectedNum<=0){ return new ShopExecution(ShopStateEnum.INNER_ERROR); }else{ shop=shopDao.queryByShopId(shop.getShopId()); return new ShopExecution(ShopStateEnum.SUCCESS,shop); }}catch(Exception e){ throw new ShopOperationException("modifyShop error: "+e.getMessage()); } } } @Override public ShopExecution getShopList(Shop shopCondition, int pageIndex, int pageSize) { int rowIndex = PageCalculator.calculateRowIndex(pageIndex,pageSize); List<Shop> shopList = shopDao.queryShopList(shopCondition, rowIndex, pageSize); int count = shopDao.queryShopCount(shopCondition); ShopExecution se = new ShopExecution(); if(shopList!=null){ se.setShopList(shopList); se.setCount(count); }else{ se.setState(ShopStateEnum.INNER_ERROR.getState()); } return se; } }
package com.ouyan.o2o.dao; import java.util.List; import org.apache.ibatis.annotations.Param; import com.ouyan.o2o.entity.Shop; public interface ShopDao { /** * 分页查询店铺，可输入的条件有：店铺名（模糊），店铺状态，店铺类别，区域ID，owner * @param shopCondition * @param rowIndex从第几行开始取数据 * @param pageSize返回的条数 * @return */ List<Shop> queryShopList(@Param("shopCondition") Shop shopCondition,@Param("rowIndex") int rowIndex,@Param("pageSize") int pageSize); /** * 返回queryShopList总数 * @param shopCondition * @return */ int queryShopCount(@Param("shopCondition") Shop shopCondition); /** * 通过shopId查询店鋪 */ Shop queryByShopId(Long shopId); /** * 新增店铺 */ int insertShop(Shop shop); /** * 更新店铺信息 */ int updateShop(Shop shop); }
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.ouyan.o2o.dao.ShopDao"> <resultMap id="shopMap" type="com.ouyan.o2o.entity.Shop"> <id column="shop_id" property="shopId" /> <result column="shop_name" property="shopName" /> <result column="shop_desc" property="shopDesc" /> <result column="shop_addr" property="shopAddr" /> <result column="phone" property="phone" /> <result column="shop_img" property="shopImg" /> <result column="priority" property="priority" /> <result column="create_time" property="createTime" /> <result column="last_edit_time" property="lastEditTime" /> <result column="enable_status" property="enableStatus" /> <result column="advice" property="advice" /> <association property="area" column="area_id" javaType="com.ouyan.o2o.entity.Area"> <id column="area_id" property="areaId" /> <result column="area_name" property="areaName" /> </association> <association property="shopCategory" column="shop_category_id" javaType="com.ouyan.o2o.entity.ShopCategory"> <id column="shop_category_id" property="shopCategoryId" /> <result column="shop_category_name" property="shopCategoryName" /> </association> <association property="owner" column="user_id" javaType="com.ouyan.o2o.entity.PersonInfo"> <id column="user_id" property="userId" /> <result column="name" property="name" /> </association> </resultMap> <select id="queryShopList" resultMap="shopMap"> SELECT s.shop_id, s.shop_name, s.shop_desc, s.shop_addr, s.phone, s.shop_img, s.priority, s.create_time, s.last_edit_time, s.enable_status, s.advice, a.area_id, a.area_name, sc.shop_category_id, sc.shop_category_name FROM tb_shop s, tb_area a, tb_shop_category sc <where> <if test="shopCondition.shopCategory!=null and shopCondition.shopCategory.shopCategoryId !=null"> and s.shop_category_id=#{shopCondition.shopCategory.shopCategoryId} </if> <if test="shopCondition.area!=null and shopCondition.area.areaId !=null"> and s.area_id=#{shopCondition.area.areaId} </if> <if test="shopCondition.shopName!=null"> and s.shop_name like '%${shopCondition.shopName}%' </if> <if test="shopCondition.enableStatus!=null"> and s.enable_Status=#{shopCondition.enableStatus} </if> <if test="shopCondition.owner!=null and shopCondition.owner.userId !=null"> and s.owner_id=#{shopCondition.owner.userId} </if> AND a.area_id=a.area_id AND s.shop_category_id=sc.shop_category_id </where> ORDER BY s.priority desc LIMIT #{rowIndex},#{pageSize} </select> <select id="queryShopCount" resultType="int"> select count(1) from tb_shop s, tb_area a, tb_shop_category sc <where> <if test="shopCondition.shopCategory!=null and shopCondition.shopCategory.shopCategoryId !=null"> and s.shop_category_id=#{shopCondition.shopCategory.shopCategoryId} </if> <if test="shopCondition.area!=null and shopCondition.area.areaId !=null"> and s.area_id=#{shopCondition.area.areaId} </if> <if test="shopCondition.shopName!=null"> and s.shop_name like '%${shopCondition.shopName}%' </if> <if test="shopCondition.enableStatus!=null"> and s.enable_Status=#{shopCondition.enableStatus} </if> <if test="shopCondition.owner!=null and shopCondition.owner.userId !=null"> and s.owner_id=#{shopCondition.owner.userId} </if> AND a.area_id=a.area_id AND s.shop_category_id=sc.shop_category_id </where> </select> <select id="queryByShopId" resultMap="shopMap" parameterType="Long"> <!-- 具体的sql --> SELECT s.shop_id, s.shop_name, s.shop_desc, s.shop_addr, s.phone, s.shop_img, s.priority, s.create_time, s.last_edit_time, s.enable_status, s.advice, a.area_id, a.area_name, sc.shop_category_id, sc.shop_category_name FROM tb_shop s, tb_area a, tb_shop_category sc WHERE s.area_id=a.area_id and s.shop_category_id=sc.shop_category_id and shop_id = #{shopId} </select> <insert id="insertShop" useGeneratedKeys="true" keyColumn="shop_id" keyProperty="shopId"> insert into tb_shop(owner_id,area_id,shop_category_id,shop_name,shop_desc,shop_addr,phone,shop_img,priority,create_time,last_edit_time,enable_status,advice) values(#{owner.userId},#{area.areaId},#{shopCategory.shopCategoryId},#{shopName},#{shopDesc},#{shopAddr},#{phone},#{shopImg},#{priority},#{createTime},#{lastEditTime},#{enableStatus},#{advice}) </insert> <update id="updateShop" parameterType="com.ouyan.o2o.entity.Shop"> update tb_shop <set> <if test="shopName != null">shop_name=#{shopName},</if> <if test="shopDesc != null">shop_desc=#{shopDesc},</if> <if test="shopAddr != null">shop_addr=#{shopAddr},</if> <if test="phone != null">phone=#{phone},</if> <if test="shopImg != null">shop_img=#{shopImg},</if> <if test="priority != null">priority=#{priority},</if> <if test="lastEditTime != null">last_edit_time=#{lastEditTime},</if> <if test="enableStatus != null">enable_status=#{enableStatus},</if> <if test="advice != null">advice=#{advice},</if> <if test="area != null">area_id=#{area.areaId},</if> <if test="shopCategory != null">shop_category_id=#{shopCategory.shopCategoryId}</if> </set> where shop_id=#{shopId} </update> </mapper>
package com.ouyan.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.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.ouyan.o2o.dto.ShopExecution; import com.ouyan.o2o.entity.Area; import com.ouyan.o2o.entity.Shop; import com.ouyan.o2o.entity.ShopCategory; import com.ouyan.o2o.service.AreaService; import com.ouyan.o2o.service.ShopCategoryService; import com.ouyan.o2o.service.ShopService; import com.ouyan.o2o.util.HttpServletRequestUtil; @Controller @RequestMapping("/frontend") public class ShopListController { @Autowired private AreaService areaService; @Autowired private ShopCategoryService shopCategoryService; @Autowired private ShopService shopService; /** * 返回商品列表页里的ShopCategory列表(二级或者一级)，以及区域信息列表 * * @param request * @return */ @RequestMapping(value = "/listshopspageinfo", method = RequestMethod.GET) @ResponseBody private Map<String, Object> listShopsPageInfo(HttpServletRequest request) { Map<String, Object> modelMap = new HashMap<String, Object>(); // 试着从前端请求中获取parentId long parentId = HttpServletRequestUtil.getLong(request, "parentId"); List<ShopCategory> shopCategoryList = null; if (parentId != -1) { // 如果parentId存在，则取出该一级ShopCategory下的二级ShopCategory列表 try { ShopCategory shopCategoryCondition = new ShopCategory(); ShopCategory parent = new ShopCategory(); parent.setShopCategoryId(parentId); shopCategoryCondition.setParent(parent); shopCategoryList = shopCategoryService.getShopCategoryList(shopCategoryCondition); } catch (Exception e) { modelMap.put("success", false); modelMap.put("errMsg", e.getMessage()); } } else { try { // 如果parentId不存在，则取出所有一级ShopCategory(用户在首页选择的是全部商店列表) shopCategoryList = shopCategoryService.getShopCategoryList(null); } catch (Exception e) { modelMap.put("success", false); modelMap.put("errMsg", e.getMessage()); } } modelMap.put("shopCategoryList", shopCategoryList); List<Area> areaList = null; try { // 获取区域列表信息 areaList = areaService.getAreaList(); modelMap.put("areaList", areaList); modelMap.put("success", true); return modelMap; } catch (Exception e) { modelMap.put("success", false); modelMap.put("errMsg", e.getMessage()); } return modelMap; } /** * 获取指定查询条件下的店铺列表 * * @param request * @return */ @RequestMapping(value = "/listshops", method = RequestMethod.GET) @ResponseBody private Map<String, Object> listShops(HttpServletRequest request) { Map<String, Object> modelMap = new HashMap<String, Object>(); // 获取页码 int pageIndex = HttpServletRequestUtil.getInt(request, "pageIndex"); // 获取一页需要显示的数据条数 int pageSize = HttpServletRequestUtil.getInt(request, "pageSize"); // 非空判断 if ((pageIndex > -1) && (pageSize > -1)) { // 试着获取一级类别Id long parentId = HttpServletRequestUtil.getLong(request, "parentId"); // 试着获取特定二级类别Id long shopCategoryId = HttpServletRequestUtil.getLong(request, "shopCategoryId"); // 试着获取区域Id int areaId = HttpServletRequestUtil.getInt(request, "areaId"); // 试着获取模糊查询的名字 String shopName = HttpServletRequestUtil.getString(request, "shopName"); // 获取组合之后的查询条件 Shop shopCondition = compactShopCondition4Search(parentId, shopCategoryId, areaId, shopName); // 根据查询条件和分页信息获取店铺列表，并返回总数 ShopExecution se = shopService.getShopList(shopCondition, pageIndex, pageSize); modelMap.put("shopList", se.getShopList()); modelMap.put("count", se.getCount()); modelMap.put("success", true); } else { modelMap.put("success", false); modelMap.put("errMsg", "empty pageSize or pageIndex"); } return modelMap; } /** * 组合查询条件，并将条件封装到ShopCondition对象里返回 * * @param parentId * @param shopCategoryId * @param areaId * @param shopName * @return */ private Shop compactShopCondition4Search(long parentId, long shopCategoryId, int areaId, String shopName) { Shop shopCondition = new Shop(); if (parentId != -1L) { // 查询某个一级ShopCategory下面的所有二级ShopCategory里面的店铺列表 ShopCategory childCategory = new ShopCategory(); ShopCategory parentCategory = new ShopCategory(); parentCategory.setShopCategoryId(parentId); childCategory.setParent(parentCategory); shopCondition.setShopCategory(childCategory); } if (shopCategoryId != -1L) { // 查询某个二级ShopCategory下面的店铺列表 ShopCategory shopCategory = new ShopCategory(); shopCategory.setShopCategoryId(shopCategoryId); shopCondition.setShopCategory(shopCategory); } if (areaId != -1L) { // 查询位于某个区域Id下的店铺列表 Area area = new Area(); area.setAreaId(areaId); shopCondition.setArea(area); } if (shopName != null) { // 查询名字里包含shopName的店铺列表 shopCondition.setShopName(shopName); } // 前端展示的店铺都是审核成功的店铺 shopCondition.setEnableStatus(1); return shopCondition; } }
package com.ouyan.o2o.entity; import java.util.Date; public class Area { private Integer areaId; private String areaName; private String areaDesc; private Integer priority; private Date createTime; private Date lastEditTime; public Integer getAreaId() { return areaId; } public void setAreaId(Integer areaId) { this.areaId = areaId; } public String getAreaName() { return areaName; } public void setAreaName(String areaName) { this.areaName = areaName; } public String getAreaDesc() { return areaDesc; } public void setAreaDesc(String areaDesc) { this.areaDesc = areaDesc; } public Integer getPriority() { return priority; } public void setPriority(Integer priority) { this.priority = priority; } public Date getCreateTime() { return createTime; } public void setCreateTime(Date createTime) { this.createTime = createTime; } public Date getLastEditTime() { return lastEditTime; } public void setLastEditTime(Date lastEditTime) { this.lastEditTime = lastEditTime; } }
然后自己测试下。
接下来看前端：
<!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> <div class="page-group"> <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" href="/o2o/frontend/index" external> <span class="icon icon-home"></span> <span class="tab-label">首页</span> </a> <a class="tab-item" 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> <a href="#" class="button">Usual Button 1</a> <a href="#" class="button">Usual Button 1</a> <a href="#" class="button">Usual Button 1</a> --> </div> <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> <!--侧边栏 --> <div class="panel-overlay"></div> <div class="panel panel-right panel-reveal" id="panel-right-demo"> <div class="content-block"> <p> <a href="/o2o/local/accountbind?usertype=1" class="close-panel">绑定帐号</a> </p> <p> <a href="/o2o/local/changepsw?usertype=1" class="close-panel">修改密码</a> </p> <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> <p> <a href="#" usertype="1" class="close-panel" id="log-out">登出系统</a> </p> <!-- Click on link with "close-panel" class will close panel --> </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/common/common.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/local/login.js' charset='utf-8'></script> </body> </html>
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; } /** * */ function changeVerifyCode(img) { img.src = "../Kaptcha?" + Math.floor(Math.random() * 100); } 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 ''; }
.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; }
$(function() { var loading = false; // 分页允许返回的最大条数，超过此数则禁止访问后台 var maxItems = 999; // 一页返回的最大条数 var pageSize = 3; // 获取店铺列表的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); /** * 获取店铺类别列表以及区域列表信息 * * @returns */ function getSearchDivData() { // 如果传入了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 * @returns */ 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) { // 隐藏提示符 $('.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); }); // 点击店铺的卡片进入该店铺的详情页 $('.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('change', 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-right-demo'); }); // 初始化页面 $.init(); });
