SSM项目之商铺系统-前端展示系统之商品详情页开发(二十)

接下来我们开发商品详情页，就是当我们点击商品时进入的页面

由于尺寸问题不好显示，就是显示了商品的缩略图和详情图，和价位还有最后一次修改时间

 

@Controller
@RequestMapping("/frontend")
public class ProductDetailController {
    @Autowired
    private ProductService productService;

    /**
     * 根据商品Id获取商品详情
     *
     * @param request
     * @return
     */
    @RequestMapping(value = "/listproductdetailpageinfo", method = RequestMethod.GET)
    @ResponseBody
    private Map listProductDetailPageInfo(HttpServletRequest request) {
        Map modelMap = new HashMap();
        // 获取前台传递过来的productId
        long productId = HttpServletRequestUtil.getLong(request, "productId");
        Product product = null;
        // 空值判断
        if (productId != -1) {
            // 根据productId获取商品信息，包含商品详情图列表
            product = productService.getProductById(productId);
            modelMap.put("product", product);
            modelMap.put("success", true);
        } else {
            modelMap.put("success", false);
            modelMap.put("errMsg", "empty productId");
        }
        return modelMap;
    }
}

那么通过productId获得了product的数据，我们交给前台即可

因为有了新的html，增加转发路由

view层：

    
    
    
    
    
    
    
    
    
    



    

        

            
                 返回
            
            
商品详情
        
        

              首页
               我
        
        
        

            
            

                

                    
                    

                        
                    
                    

                        

                            

                                2015/01/15
                                
                            
                            
                            

                        
                    
                    
                    

                        
                        
                    
                
            



            

        
    

    

    

        

            

                消费记录
            
            

                我的积分
            
            

                兑换记录
            
            
        
    

$(function() {
    // 从地址栏的URL里获取productId
    var productId = getQueryString('productId');
    // 获取商品信息的URL
    var productUrl = '/storepro/frontend/listproductdetailpageinfo?productId='
        + productId;
    // 访问后台获取该商品的信息并渲染
    $.getJSON(productUrl, function(data) {
        if (data.success) {
            // 获取商品信息
            var product = data.product;
            // 给商品信息相关HTML控件赋值

            // 商品缩略图
            $('#product-img').attr('src', product.imgAddr);
            // 商品更新时间
            $('#product-time').text(
                new Date(product.lastEditTime).Format("yyyy-MM-dd"));
            // 商品积分展示
            if (product.point != undefined) {
                $('#product-point').text('购买可得' + product.point + '积分');
            }
            // 商品名称
            $('#product-name').text(product.productName);
            // 商品简介
            $('#product-desc').text(product.productDesc);
            // 商品价格展示逻辑，主要判断原价现价是否为空 ，所有都为空则不显示价格栏目
            if (product.normalPrice != undefined
                && product.promotionPrice != undefined) {
                // 如果现价和原价都不为空则都展示，并且给原价加个删除符号
                $('#price').show();
                $('#normalPrice').html(
                    '' + '￥' + product.normalPrice + '');
                $('#promotionPrice').text('￥' + product.promotionPrice);
            } else if (product.normalPrice != undefined
                && product.promotionPrice == undefined) {
                // 如果原价不为空而现价为空则只展示原价
                $('#price').show();
                $('#promotionPrice').text('￥' + product.normalPrice);
            } else if (product.normalPrice == undefined
                && product.promotionPrice != undefined) {
                // 如果现价不为空而原价为空则只展示现价
                $('#promotionPrice').text('￥' + product.promotionPrice);
            }
            var imgListHtml = '';
            // 遍历商品详情图列表，并生成批量img标签
            product.productImgList.map(function(item, index) {
                imgListHtml += '
 
';
            });
            // if (data.needQRCode) {
            // // 生成购买商品的二维码供商家扫描
            // imgListHtml += '
 
';
            // }
            $('#imgList').html(imgListHtml);
        }
    });
    // 点击后打开右侧栏
    $('#me').click(function() {
        $.openPanel('#panel-right-demo');
    });
    $.init();
});

.shopdetail-button-div {
    margin: 0 .3rem;
}
.shopdetail-button-div > .button {
    width: 30%;
    height: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    margin: 1%;
    overflow: hidden;
}