渲染sku选择

渲染面包屑

在商品展示页的顶部，有一个商品分类、品牌、标题的面包屑

其数据有3部分：

• 商品分类

• 商品品牌

• spu标题

我们的模型中都有，所以直接渲染即可（页面101行开始）：

    

        

            手机
        
        

            Apple
        
        
Apple iPhone 6s
    

渲染商品列表

先看下整体效果：

这个部分需要渲染的数据有5块：

• sku图片

• sku标题

• 副标题

• sku价格

• 特有规格属性列表

其中，sku 的图片、标题、价格，都必须在用户选中一个具体sku后，才能渲染。而特有规格属性列表可以在spuDetail中查询到。而副标题则是在spu中，直接可以在页面渲染

因此，我们先对特有规格属性列表进行渲染。等用户选择一个sku，再通过js对其它sku属性渲染

副标题

副标题是在spu中，所以我们直接通过Thymeleaf渲染：

在第146行左右：

副标题中可能会有超链接，因此这里也用th:utext来展示，效果：

渲染规格属性列表

规格属性列表将来会有事件和动态效果。我们需要有js代码参与，不能使用Thymeleaf来渲染了。

因此，这里我们用vue，不过需要先把数据放到js对象中，方便vue使用

初始化数据

我们在页面的head中，定义一个js标签，然后在里面定义变量，保存与sku相关的一些数据：

• specialSpec：这是SpuDetail中唯一与Sku相关的数据

  因此我们并没有保存整个spuDetail，而是只保留了这个属性，而且需要手动转为js对象。

• paramMap：规格参数的id和name键值对，方便页面根据id获取参数名

• skus：sku集合

我们来看下页面获取的数据：

通过Vue渲染

我们把刚才获得的几个变量保存在Vue实例中：

然后在页面中渲染：

    

        

            

                {{paramMap[k]}}
            
        
        

            
                {{str}} 
            
        
    

然后刷新页面查看：

数据成功渲染了。不过我们发现所有的规格都被勾选了。这是因为现在，每一个规格都有样式：selected，我们应该只选中一个，让它的class样式为selected才对！

 

那么问题来了，我们该如何确定用户选择了哪一个？

 

规格属性的筛选

分析

规格参数的格式是这样的：

每一个规格项是数组中的一个元素，因此我们只要保存被选择的规格项的索引，就能判断哪个是用户选择的了！

我们需要一个对象来保存用户选择的索引，格式如下：

{
    "4":0,
    "12":0,
    "13":0
}

但问题是，第一次进入页面时，用户并未选择任何参数。因此索引应该有一个默认值，我们将默认值设置为0。

我们在head的script标签中，对索引对象进行初始化：

然后在vue中保存：

页面改造

我们在页面中，通过判断indexes的值来判断当前规格是否被选中，并且给规格绑定点击事件，点击规格项后，修改indexes中的对应值：

    

        

            

                {{paramMap[k]}}
            
        
        

            
                {{str}} 
            
        
    

效果：