详细信息列表，详细信息的描述以及热销榜的排序问题，列表按商品类型显示出来(8-5)...

2019独角兽企业重金招聘Python工程师标准>>>

一 商品图片的滚动效果以及商品的详细列表信息

  1 首先将details中的头文件引进，然后写入function方法，编写图片滚动效果的代码

details.html中商品详细信息的主要代码:

<div class="col-sm-6">
	<h4 class="yh detailsT" th:text="${goodsForm.commodityName}"></h4>
	<dl class="dl-horizontal detailsInfo cf">
	      <dt>零售价：</dt>
	      <dd class="price yh"><i>￥</i><span th:text="${goodsForm.retailPrice}">128</span></dd>
	      <dt>运 费 ：</dt>
	      <dd>8元</dd>
	      <dt>品  牌：</dt>
	      <dd><span th:text="${goodsForm.brandName}">日思</span></dd>
	      <dt>经销商：</dt>
	      <dd><span th:text="${goodsForm.supplierName}">天津日思优质小站稻开发公司</span></dd>
	      <dt>规  格：</dt>
	      <dd><span th:text="${#strings.concat(goodsForm.unit).concat(goodsForm.specifications)}">每袋5kg</span></dd>
	      <dt>库  存：</dt>
	      <dd><span th:text="${goodsForm.stock}">99</span></dd>
	      <dt>数  量：</dt>
	      <dd style="height:32px;">
	      <!-- 实现购买数量的加减 -->
	<div class="chooseAmount mt5">
                <a href="javascript:void(0);" onclick="subNum();" value="-" ></a>
	        <input type="text" class="fl inp-t" value="1" id="count"/> 
	        <a href="javascript:void(0);" onclick="addNum();" value="+" ></a>
	</div> 
	       </dd>
	</dl>
					    <p class="mt20"><a href="#" class="btnBlue yh ">立即购买</a><a href="#" class="btnYellow yh">加入购物车</a></p>
	</div>
</div>

二  热卖榜商品按照库存降序自动检索并排列

1  details.html中热卖榜主要代码:

<div class="col-md-2 goodsHot">
<h4 class="h5 link yh goodsHotT">热卖榜</h4>
<ul class="row goodsHotList">
<li class="col-md-12 col-sm-3 col-xs-6 cf" th:each="goodsInfo,status:${list}" >
<div class="pic"><a th:href="@{initGoodsDetail(commodityId=${goodsInfo.commodityId})}"><img th:src="@{showImage(pictureId=${goodsInfo.pictureId})}" alt="" /></a></div>
<div class="tit">
<h4><a th:href="@{initGoodsDetail(commodityId=${goodsInfo.commodityId})}"><p th:text="${goodsInfo.commodityName}">15</p></a></h4>
<p>￥<span th:text="${goodsInfo.retailPrice}">15元</span></p>
</div>
</li>
</ul>
</div>

2   goodsservice中添加一个设置显示四条结果的类

public List<GoodsForm> searchGoodsList3(GoodsForm frm) {

	List<GoodsForm> result = queryDao.executeForObjectList("Goods.selectGoodsList", frm,0,4);
		return result;
	}

3  goodscontroller中

@RequestMapping(value = "initGoodsDetail", method = RequestMethod.GET)
    public String initGoodsDetail(Model model, HttpSession session, GoodsForm goodsForm, Device device) {
    	log.info("商品明细初始化");
    	model.addAttribute("commodityType", goodsService.getType());
    	UVO uvo = (UVO)session.getAttribute("UVO");
    	if (uvo == null) {
    		uvo = new UVO();
    		session.setAttribute("UVO", uvo);
    	}
    	CartForm cartForm = new CartForm();
    	cartForm.setGuestId(uvo.getGuestId());
    	model.addAttribute("cartList", cartService.searchCartList(cartForm));
    	model.addAttribute("goodsForm", goodsService.searchGoods(goodsForm));
    	model.addAttribute("list", goodsService.searchGoodsList3(goodsForm));
    	if(device.isNormal()) {
    		return "shop/goods/details";
    	} else {
    		return "mobile/goods/details";//实现点击图片或者文字返回到details页面
    	}
    }

4  在goodsSqlMap中编写按库存降序排列的代码

ORDER BY cast(stock.stock as signed) desc

二 列表中商品按类型进行检索

1 list中

<ul class="goodsList cf">
			<li class="col-md-2 col-sm-4 col-xs-6" th:each="goodsInfo,status:${list}" >
				<div class="cont">
					<a th:href="@{selectGoods(commodityId=${goodsInfo.commodityId})}"><img th:src="@{showImage(pictureId=${goodsInfo.pictureId})}" alt="" /></a>
					<h4 class="h5"><a href="@{selectGoods(commodityId=${goodsInfo.commodityId})}"><p class="title" th:text="${goodsInfo.commodityName}">品美知糖道阿胶姜汤260g</p></a></h4>
					<!-- <p class="num"><span th:text="${goodsInfo.stock}">500克 / 库存 9999</span>每<span th:text="${goodsInfo.retailPrice}"></span></p> -->
					<p class="num">库存:<span th:text="${goodsInfo.stock}">9999</span>
					每<span th:text="${#strings.concat(goodsInfo.unit).concat(goodsInfo.specifications)}">500克</span>
					</p>
					<p class="cf">
						 <span class="price yh">￥<span th:text="${goodsInfo.retailPrice}">128</span></span>
			<!--<p>￥<span th:text="${goodsInfo.retailPrice}" class="price yh">128</span></p> -->
						<a href="#" class="btnBuy" title="加入购物车"></a>
					</p>
				</div>
			</li>
		</ul>

2 goodscontroller中

//控制商品检索类型
    	List<GoodsForm> commodityType = goodsService.getType();
    	model.addAttribute("commodityType", goodsService.getType());
    	if(goodsForm.getCommodityTypeId()==null)
    	{
			goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
			model.addAttribute("list", goodsService.getTypeList(goodsForm));
	    	model.addAttribute("goodsForm", goodsForm);
    	}
    	else
    		{model.addAttribute("goodsForm", goodsForm);
    		model.addAttribute("list", goodsService.getTypeList(goodsForm));
    		}

转载于:https://my.oschina.net/u/2411770/blog/488716