Vue实现购物车详情页面的方法

前端  /  管理员 发布于 4年前   729

上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子：

 

如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那么我们现在可以进行复用。

搭出购物车结构

我们将购物车底部构建出来，

老情况，在templete模板下的shopcart-wrapper内完成底部购物车一栏：

1 count大于0.让它打开

      
        
                    {{totalCount}}                
          
￥{{totalPrice}}
          
另需{{poiInfo.shipping_fee_tip}}
                          
        {{payStr}}      

搭建所选商品列表

 

如图所示，我们分好结构，紧接着搭建所选商品的列表

所选商品的列表 shopcart-list默认隐藏的，也就是说我们在没有选择食品的时候，点击购物车它不会展开。

1.list-hearder，左右结构包括1号口袋与清空购物车

2.list-content 列表，存放我们选择的食物

2.1左边是我们的食物名字，商品描述；右侧是数量，加减商品的组件。

                
          {{poiInfo.discounts2[0].info}}                        
          
1号口袋
          
                        清空购物车                                  
          
            
              
                                
                                    
{{food.name}}
                                    
{{food.unit}}
                  
{{food.description}}
                                                
                  ￥{{food.min_price}}                                                          
                                          
          
                
      

加入遮罩层

到这里，结构咱们就搭好了。

注册组件，添加功能

我们通过props为购物车组件传入所需要的数据；

计算属性：

• 通过totalCount计算所选的商品数量；
• 通过totalPrice计算所选商品的总价；
• 通过payStr控制去结算；

listShow是我们控制购物车详情页展示的要点，依据totalCount所选商品数量对fold折叠进行控制，fold为true，商品数量为0.购物车详情页为折叠状态。

接着我们将状态取反赋值到show，并且依据show，来控制商品详情页面商品一定多时，可以进行鼠标滚动。

方法:

通过toggleList点击购物车logo时候，进行判断，如果没有选择商品那么我们什么也不做。如果我们选择了商品，那么将fold取反。因为我们在计算属性listShow中设置过实例中的fold属性为true，所有它是折叠的。在我们取反后，它就会展开。

emptyFn清空购物车

最后我们点击遮罩层的时候，让遮罩层隐藏，也就是fold为true。

样式

总结

我们从搭购物车结构，到所选商品列表细化，这里我们复用了增减商品的组件，然后加入遮罩层。通过计算属性与方法，加入控制逻辑完成了购物车的详情页面。

以上所述实小编给大家介绍的Vue实现购物车详情页面的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• vue+vant-UI框架实现购物车的复选框全选和反选功能
• vue实现购物车小案例
• vue框架制作购物车小球动画效果实例代码
• vue.js购物车添加商品组件的方法
• Vue商品控件与购物车联动效果的实例代码
• Vue实现购物车的全选、单选、显示商品价格代码实例
• vue 实现购物车总价计算