詳細信息列表,詳細信息的描述以及熱銷榜的排序問題,列表按商品類型顯示出來(8-5)

一 商品圖片的滾動效果以及商品的詳細列表信息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));
    		}
相關文章
相關標籤/搜索