一 商品圖片的滾動效果以及商品的詳細列表信息javascript
1 首先將details中的頭文件引進,而後寫入function方法,編寫圖片滾動效果的代碼html
details.html中商品詳細信息的主要代碼:java
<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>
二 熱賣榜商品按照庫存降序自動檢索並排列session
1 details.html中熱賣榜主要代碼:app
<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中添加一個設置顯示四條結果的類spa
public List<GoodsForm> searchGoodsList3(GoodsForm frm) { List<GoodsForm> result = queryDao.executeForObjectList("Goods.selectGoodsList", frm,0,4); return result; }
3 goodscontroller中code
@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中編寫按庫存降序排列的代碼orm
ORDER BY cast(stock.stock as signed) desc
二 列表中商品按類型進行檢索
htm
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)); }