智慧商城:封装getters实现动态统计 + 全选反选功能

封装getters实现动态统计

在store文件夹下的modules文件夹下的 cart.js模块中,在getters中,计算所有购物车列表中商品总数,选中的商品数,选中的总数,选中的总价

总价优化:保留两位小数

没有选中任何商品时,"结算"按钮应不高亮才是

在结算和删除中,如果选中的商品数为0,应该加上disabled类,

全选反选功能

为复选框添加点击事件 ,小选控制大选(小的全选中了,大的才会选中)

如果发现state中cartList中的项跟点击传递过来的goodsId一样,则将state中的isChecked信息取反

如果每个商品都选选中了,那么才会需要全选,否则不需要

页面中映射渲染

大选控制小选 (点击全选然后每项都选中)
为全选框注册点击事件,将每个子选框状态取反

每个子选框是否全选中映射为 isAllChecked,现在为全选中框架注册点击事件toggleAllCheck,将是否全选中isAllChecked状态取反传递到vuex中,将每一项子选框状态改为isAllChecked的取反状态

相关推荐
星期八不上发条13 小时前
智能指针是什么?使用场景,循环引用解决办法,面试回答
开发语言·c++·stl
OKkankan13 小时前
Python 基础进阶(三):从函数、类到 asyncio 与 FastAPI 后端开发实战
开发语言·python
泡海椒14 小时前
jquick-pdf 防止 PDF 内容分页断裂:keepTogether 属性妙用
java·开发语言·pdf
wcy031014 小时前
POST为什么会发送两次请求
javascript·ajax
志尊宝15 小时前
Vue3 零基础每日笔记(047):动态路由与路由参数——:id 传参、query 传参、props 解耦
前端·javascript·vue.js·笔记·html5
传奇开心果编程15 小时前
【Rust入门练中学】 第1课:从零开始
开发语言·学习·rust
Brilliantwxx16 小时前
【STM32】 SPI阻塞式通信与HAL源码(串口读ID实战)
开发语言·stm32·单片机·嵌入式硬件·ecmascript
吠品16 小时前
Nginx负载均衡配置与线上故障排查的一些经验
java·开发语言·数据库
边境悍匪16 小时前
蜗牛学苑 Java 智能体学习 Day44|Vue 前端项目搭建 思维导图复盘
java·开发语言·spring boot·学习·阿里云