Vue实现购物车详情页面的方法
上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子:
网站的建设创新互联建站专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为软装设计等企业提供专业服务。
如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用。
搭出购物车结构
我们将购物车底部构建出来,
老情况,在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实现购物车详情页面的方法
标题网址:http://scyanting.com/article/psocch.html