该模块采用Springmvc+spring+mybatis实现：
首先点击商品首页链接，从后台加载商品信息至商品详情页。
从后台加载商品信息代码如下：
@RequestMapping(value="/product/detail.shtml") public String detail(Integer id,String name, ModelMap model){ Product product = productService.getProductByKey(id);//包含img List<Sku> skus = skuService.getStock(id); List<Color> c = new ArrayList<Color>(); //去掉重复颜色 for (Sku sku : skus) {//重写equals方法 if(!c.contains(sku.getColor())){ //判断集合是否包含此颜色 c.add(sku.getColor()); } } model.addAttribute("skus",skus); model.addAttribute("product",product); model.addAttribute("colors",c); return "/product/productDetail"; }
mybatis对应sql：
<select id="getStock" parameterType="Integer" resultMap="sku"> select id,product_id,color_id,size,delive_fee,sku_price,stock_inventory,sku_upper_limit,location,sku_img,sku_sort,sku_name,market_price,create_time,update_time,create_user_id,update_user_id,last_status,sku_type,sales FROM bbs_sku <where> stock_inventory > 0 and product_id = #{productId} </where> </select>
商品详情页，颜色尺码联动及购买数量选择js代码：
<script type="text/javascript"> $(function(){ //初始化点击第一个颜色 jquery $("#colors a:first").trigger("click"); //初始化点击第一个颜色 $("#sub").click(function(){ var num = $("#num").val(); num--; if(num == 0){ return; } //赋值 $("#num").val(num); }); $("#add").click(function(){ var num = $("#num").val(); num++; if(num>buyLimit){ alert("此商品一次只能买"+buyLimit+"件"); return; } $("#num").val(num); }); }); //全局变量 var colorId ; var skuId; var buyLimit; function colorToRed(target,id){ colorId = id; $("#colors a").each(function(){ //colors下的a标签 通过id修改 $(this).attr("class","changToWhite"); }); //先清理尺码 都变成不可点 $("#sizes a").each(function(){ $(this).attr("class","not-allow"); }); var flag = 0; $(target).attr("class","changToRed"); <c:forEach items="${skus}" var="sku"> if('${sku.colorId}' == id){ if(flag == 0){ //默认第一个为选中 $("#"+'${sku.size}').attr("class","changToWhite"); $("#"+'${sku.size}').attr("class","changToRed"); flag = 1; $("#price").html("￥"+'${sku.skuPrice}'); $("#mprice").html("￥"+'${sku.marketPrice}'); $("#fee").html("￥"+'${sku.deliveFee}'); $("#stockInventory").html("￥"+'${sku.stockInventory}'); skuId = '${sku.id}'; buyLimit = '${sku.skuUpperLimit}'; }else{ $("#"+'${sku.size}').attr("class","changToWhite"); } } </c:forEach> } function sizeToRed(target,id) { var cc = $(target).attr("class"); if(cc=="not-allow"){ return; } //先清理尺码 都变成未选状态 $("#sizes a").each(function(){ var c = $(this).attr("class"); if(c!="not-allow"){ $(this).attr("class","changToWhite"); } }); // 变红 $(target).attr("class","changToRed"); <c:forEach items="${skus}" var="sku"> if('${sku.colorId}' == colorId && id== '${sku.size}' ){ $("#price").html("￥"+'${sku.skuPrice}'); $("#mprice").html("￥"+'${sku.marketPrice}'); $("#fee").html("￥"+'${sku.deliveFee}'); $("#stockInventory").html("￥"+'${sku.stockInventory}'); skuId = '${sku.id}'; buyLimit = '${sku.skuUpperLimit}'; } </c:forEach> } </script>
商品详情页代码：
<div class="r" style="width: 640px"> <ul class="uls form"> <li><h2>${product.name }</h2></li> <li><label>巴 巴 价：</label><span class="word"><b class="f14 red mr" id="price">￥144</b>(市场价:<del id="mprice">￥150.00</del>)</span></li> <li><label>商品评价：</label><span class="word"><span class="val_no val3d4" title="4分">4分</span><var class="blue">(已有888人评价)</var></span></li> <li><label>运 费：</label><span class="word" id="fee">10元</span></li> <li><label>库 存：</label><span class="word" id="stockInventory">100</span><span class="word" >件</span></li> <li><label>选择颜色：</label> <div id="colors" class="pre spec"> <c:forEach items="${colors}" var="color"> <a onclick="colorToRed(this,${color.id})" href="javascript:void(0)" title="${color.name }" class="changToWhite"><img width="25" height="25" data-img="1" src="/res/img/pic/ppp00.jpg" alt="${color.name } "><i>${color.name }</i></a> </c:forEach> </div> </li> <li id="sizes"><label>尺 码：</label> <a href="javascript:void(0)" onclick="sizeToRed(this,'S')" class="not-allow" id="S">S</a> <a href="javascript:void(0)" onclick="sizeToRed(this,'M')" class="not-allow" id="M">M</a> <a href="javascript:void(0)" onclick="sizeToRed(this,'L')" class="not-allow" id="L">L</a> <a href="javascript:void(0)" onclick="sizeToRed(this,'XL')" class="not-allow" id="XL">XL</a> <a href="javascript:void(0)" onclick="sizeToRed(this,'XXL')"class="not-allow" id="XXL">XXL</a> </li> <li><label>我 要 买：</label> <a id="sub" class="inb arr" style="border: 1px solid #919191;width: 10px;height: 10px;line-height: 10px;text-align: center;" title="减" href="javascript:void(0);" >-</a> <input id="num" type="text" value="1" name="" size="1" readonly="readonly"> <a id="add" class="inb arr" style="border: 1px solid #919191;width: 10px;height: 10px;line-height: 10px;text-align: center;" title="加" href="javascript:void(0);">+</a></li> <li class="submit"><input type="button" value="" class="hand btn138x40" onclick="buy(${product.id});"/><input type="button" value="" class="hand btn138x40b" onclick="addCart()"/></li> </ul> </div>
