Vue实现购物车详情页面的方法
前端  /  管理员 发布于 4年前   694
上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子:
如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用。
搭出购物车结构
我们将购物车底部构建出来,
老情况,在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 实现购物车总价计算
Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
- Laravel 11.12版本发布 - Artisan的`make`命令自动剪切`.php `扩展(0个评论)
- golang支持托盘的程序模板:fyneMiniProgram-程序带图标,程序最小化到系统栏(0个评论)
- Laravel的轻量型购物车扩展包:binafy/laravel-cart(0个评论)
- 在go语言中使用http实现multipart/form-data文件上传,不加载文件到内存功能示例(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号