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

封装getters实现动态统计

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

总价优化:保留两位小数

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

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

全选反选功能

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

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

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

页面中映射渲染

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

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

相关推荐
harder32113 分钟前
RMP模式的创新突破
开发语言·学习·ios·swift·策略模式
jinanwuhuaguo24 分钟前
OpenClaw工程解剖——RAG、向量织构与“记忆宫殿”的索引拓扑学(第十三篇)
android·开发语言·人工智能·kotlin·拓扑学·openclaw
Rust研习社26 分钟前
使用 Axum 构建高性能异步 Web 服务
开发语言·前端·网络·后端·http·rust
豹哥学前端2 小时前
用猜数字游戏,一口气掌握 JavaScript 核心知识点(附完整代码)
前端·javascript
忆往wu前2 小时前
从0到1一步步拆解搭建,梳理一个 Vue3 简易图书后台全开发流程
前端·javascript·vue.js
淘矿人2 小时前
从0到1:用Claude启动你的第一个项目
开发语言·人工智能·git·python·github·php·pygame
cany10002 小时前
C++ -- 模板的声明和定义
开发语言·c++
澈2072 小时前
深耕进阶 Day1:C 与 C++ 核心差异 + C++ 入门基石
c语言·开发语言·c++
shao9185162 小时前
第3章(2)——使用Gradio JavaScript Client
javascript·node.js·cdn·gradio·job·events·playcode
Felven2 小时前
C. Need More Arrays
c语言·开发语言