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

封装getters实现动态统计

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

总价优化:保留两位小数

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

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

全选反选功能

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

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

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

页面中映射渲染

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

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

相关推荐
坚定信念,勇往无前1 分钟前
electron打包mac ,apple m4出错:ffprobe是x86,不是arm64
前端·javascript·electron
我叫张土豆6 分钟前
在 OpenClaw Java 对话框输入一句话后,系统是如何运行的?
java·开发语言·人工智能
牛油果子哥q15 分钟前
C++模板万字深度精讲:函数/类模板特化、全特化与偏特化、SFINAE机制、类型萃取、模板元编程入门、工程实战落地
开发语言·c++·面试
专业抄代码选手17 分钟前
01|从手写 DOM 到虚拟 DOM:把 UI 从“操作”变成“描述”
前端·javascript·react.js
专业抄代码选手28 分钟前
03|React 为什么需要协调:比较两棵树,而不是重建页面
前端·javascript·react.js
神仙别闹29 分钟前
基于C++ 实现 L 系统分形树
开发语言·c++
君顾129 分钟前
AI智能商城实战指南:从架构设计到部署落地的完整技术方案
java·开发语言·多商户
王霸天30 分钟前
GLB 文件太大怎么办?我把它从 47MB 压到 8MB,全程没碰命令行
前端·javascript·程序员
脉动数据行情136 分钟前
Python WebSocket 国内商品期货|螺纹钢 & 铁矿石实时行情监听
开发语言·python·websocket
胡萝卜术36 分钟前
权限系统的四道防线:从数据库事务锁到操作级保护规则的完整设计
前端·javascript·面试