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

封装getters实现动态统计

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

总价优化:保留两位小数

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

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

全选反选功能

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

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

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

页面中映射渲染

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

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

相关推荐
AC赳赳老秦2 小时前
用 OpenClaw 整理团队技术分享:自动提取 PPT 内容、生成文字稿、同步到知识库
开发语言·python·自动化·powerpoint·wpf·deepseek·openclaw
whatever who cares2 小时前
android中fragment demo举例
android·java·开发语言
云水一下2 小时前
TypeScript 从零基础到精通(四):面向对象编程(类与继承)
javascript·typescript
Vallelonga2 小时前
Rust 生命周期标注积累
开发语言·rust
caimouse2 小时前
mshtml/nsio.c 实现报告
c语言·开发语言
shmily麻瓜小菜鸡2 小时前
Bootstrap 4 常用工具类速查表
前端·javascript·bootstrap
CDN3602 小时前
【架构进阶】告别配置漂移!用 NodeNext + Workspace 打造优雅的 TypeScript Monorepo
前端·javascript·typescript
龙侠九重天2 小时前
C# 构建 AI Agent 系统 — 我的实践笔记
开发语言·人工智能·语言模型·自然语言处理·大模型·agent·智能体
SilentSamsara2 小时前
Pandas 工程化:多层索引、分组聚合与窗口函数的进阶用法
开发语言·python·青少年编程·pandas
何以解忧,唯有..2 小时前
Python 字符串完全指南:从基础到高级操作
开发语言·python