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

封装getters实现动态统计

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

总价优化:保留两位小数

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

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

全选反选功能

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

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

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

页面中映射渲染

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

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

相关推荐
吃好睡好便好6 小时前
用while循环语句求和
开发语言·学习·算法·matlab·信息可视化
TechWayfarer6 小时前
查询IP所在地的3种方案:从API到离线库,风控场景怎么选?
开发语言·网络·python·网络协议·tcp/ip
摇滚侠6 小时前
Java 零基础全套教程,集合框架,笔记 153-163
java·开发语言·笔记
程序员榴莲6 小时前
Python 单例模式
开发语言·python·单例模式
L、2187 小时前
CANN算子开发调试实战:从“Segmentation Fault“到定位根因的完整流程
java·开发语言
狗凯之家源码网7 小时前
基于PHP的多语言跨境电商B2B2C商城系统技术解析
开发语言·php
Hyyy7 小时前
普通前端续命周报——第1周
前端·javascript
比特森林探险记8 小时前
go 语言中的context 解读和用法
开发语言·后端·golang
古城小栈8 小时前
Rust 调用 C 语言库 实战指南(企业级)
c语言·开发语言·rust